Page 1 of 1

sidebars 3.2

Posted: Mon Apr 24, 2017 9:23 pm
by lumpy
Arty wrote:
Sat May 23, 2015 5:20 am
How to add 1 sidebar:

Basic sidebar code would be like this: in overall_header.html find

Code: Select all

<div id="page-body" role="main">
add after it

Code: Select all

<div class="page-body-inner">
then in overall_footer.html find

Code: Select all

		<!-- EVENT overall_footer_content_after -->
	</div>
add after it

Code: Select all

</div>
<div class="sidebar"> sidebar code </div>
That will add additional wrapper for content block and div for sidebar. Next you need to add css for it like this:

Code: Select all

#page-body { float: left; width: 100%; margin-right: -260px; }
.page-body-inner { margin-right: 260px; }
.sidebar { float: right; width: 250px; }
#page-footer { clear: both; }
Next step is to make it responsive for mobile devices:

Code: Select all

@media (max-width: 1000px) {
  #page-body, .page-body-inner { width: auto; float: none; margin-right: 0; }
  .sidebar { margin: 0 auto; clear: both; float: none; }
}
Margin for content is 260px because it is width of right sidebar + 10px for spacing between content and sidebar.

How to add 2 sidebars:

Changes are similar to code above, but left sidebar must be placed before content.
In overall_header.html find

Code: Select all

<div id="page-body" role="main">
add replace with

Code: Select all

<div class="sidebar-left"> Left sidebar code </div>
<div id="page-body" role="main">
<div class="page-body-inner">
then in overall_footer.html find

Code: Select all

		<!-- EVENT overall_footer_content_after -->
	</div>
add after it

Code: Select all

</div>
<div class="sidebar-right"> Right sidebar code </div>
That will add additional wrapper for content block and 2 divs for sidebars. Next you need to add css for it like this:

Code: Select all

#page-body { float: left; width: 100%; margin-right: -520px; }
.page-body-inner { margin-right: 520px; }
.sidebar-left + #page-body { clear: none; }
.sidebar-left { float: left; width: 250px; margin-right: 10px; }
.sidebar-right { float: right; width: 250px; }
#page-footer { clear: both; }
Next step is to make it responsive for mobile devices:

Code: Select all

@media (max-width: 1200px) {
  #page-body, .page-body-inner { width: auto; float: none; margin-right: 0; }
  .sidebar-left { display: none; }
  .sidebar-right { float: none; margin: 0 auto; }
  .sidebar-left, .sidebar-right, .sidebar-left + #page-body { clear: both; }
}
Margin for content is 520px because it is width of right sidebar + 10px for spacing between content and right sidebar + width and right margin of left sidebar.

Left sidebar must be hidden on mobile devices.

Adjust units in that code as needed.