sidebars

Post Reply
Lumpy Burgertushie
Posts: 25
Joined: 1/13/2018 4:06 pm

sidebars

Post by Lumpy Burgertushie » 5/9/2019 7:27 pm

How to add 1 sidebar:

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

Code: Select all


<div id="page-body" class="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 to the bottom of common.css, 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; }


@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" class="page-body" role="main">
add replace with

Code: Select all


<div class="sidebar-left"> Left sidebar code </div>
<div id="page-body" class="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 at the bottom of common.css, 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; }


@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.

Post Reply