You are here:  » How to add a sidebar for custom content or advertising


How to add a sidebar for custom content or advertising

Submitted by support on Thu, 2015-11-12 13:39 in

Hi everyone,

To add a sidebar to the main content body (e.g. below headings / breadcrumbs) for the latest Foundation based Responsive HTML Plus template, simply edit html/banner.php and insert the opening code for the two column layout at the very end of the script as follows:

<div class='row'>
  <div class='medium-2 columns show-for-medium-up'>
    <!-- sidebar content here -->
  </div>
  <div class='small-12 medium-10 columns'>

And a balancing pair of closing </div> tags at the very beginning of html/footer.php:

  </div>
</div>

The Foundation grid is based on 12 columns, so for a narrower or wider sidebar use medium-1 or medium-3 etc. as required, balanced by a similar adjustment to medium-10 in the opening div for the main content body. The "show-for-medium-up" class on the sidebar div will hide the sidebar for mobile view.

Edit: Alternative option to show content to the right, and not to be hidden for mobile but instead to flow beneath the main body, edit html/banner.php and insert the opening code for the two column layout at the very end of the script as follows:

<div class='row'>
  <div class='small-12 medium-10 columns'>

And at the very beginning of html/footer.php:

  </div>
  <div class='small-12 medium-2 columns'>
    <!-- sidebar content here -->
  </div>
</div>

Cheers,
David
--
PriceTapestry.com

Submitted by richard on Wed, 2016-06-08 14:12

Hi David,

I wanted to move all my filters to a sidebar as opposed to running across the top of the search results..

I took the entire contents from searchfilters.php and copied in to the appropriate section shown above.

I then deleted all instances of

print "<div class='small-12 medium-3 columns' style='text-align:left;float:left;'>";

and the associated  print <div> tags.

Appears to work ok on desktop computer but when viewed from mobile phone, the filter button that reveals filters does not appear.

Could you please advise what I should have done.

Many thanks.

Richard

Submitted by support on Wed, 2016-06-08 15:10

Hi Richard,

The show filters button should be displayed by this code towards the top of html/searchfilters.php:

  print "<div id='pt_sf_small' class='show-for-small-only'>";
  print "<div class='row'>";
  print "<div class='small-12 columns pt_sf_small'>";
  print "<button onclick='JavaScript:pt_sf_small_onClick();' class='button tiny secondary'>".translate("Filter These Results")." &darr;</button>";
  print "</div>";
  print "</div>";
  print "</div>";

(also make sure that the JavaScript section at the very top of the script has also been copied into your sidebar area).

Finally, to prevent the filters code showing on other pages, you can contain within an IF condition as follows;

<?php if ((strpos($_SERVER["PHP_SELF"],"search.php")!==FALSE) && isset($searchresults)): ?>
... filter code here...
<?php endif; ?>

Cheers,
David.
--
PriceTapestry.com

Submitted by richard on Wed, 2016-06-08 16:06

Hi David,

I had deleted one too many   print "<div class='small-12 columns pt_sf_small'>"; as shown above plus I needed to change <div class='medium-2 columns show-for-medium-up'> otherwise the sidebar was not showing up for the mobile.

I have used the code provided plus these two adjustments and the filters pop up where required for desktop and mobile.

Many thanks again.

Richard

Submitted by bat on Wed, 2016-06-08 17:04

Hi David,
I love the filter system I have on my site using an older version of PT
{link saved}

but for anything other than desktop view, I feel the dropdown filters at the top of the page are better.

As there's a way to hide the sidebar for mobile view, is there anyway to hide the top dropdown filters for desktop view only so that the sidebar filter only appears for those using desktop view whilst the top dropdown filters only appear for mobile and tablet using the latest version of PT?

Submitted by support on Wed, 2016-06-08 17:45

Hello Bat,

Sure - have your page generate both versions of the filters HTML - sidebar and top / dropdown. Then, simply enclose the top / dropdown filters within a DIV with class "show-for-small-only" e.g.

<div class='show-for-small-only'>
  <!-- top / dropdown filters here -->
</div>

And similarly for the sidebar filters, use the class "show-for-medium-up" e.g.

<div class='show-for-medium-up'>
  <!-- sidebar filters here -->
</div>

Cheers,
David.
--
PriceTapestry.com

Submitted by bat on Mon, 2016-10-17 18:34

Hi David,
I've been having some trouble trying to get sidebar search filter to work in 15/09.
I really like the one I have here {code saved}
with the tick boxes that activate the filter as soon as they're ticked but it doesn't seem to work in 15/09. :(

I want to use my sidebar one for desktop and the top vertical filter, that comes as standard with 15/09, for mobile.

Any help would be much appreciated. Thank you.

Submitted by support on Tue, 2016-10-18 08:29

Hi,

If you'd like to email me the sidebar filters code from your existing site that you like, and also attach from that site search.php, i'll check that the filters code should be compatible, and patch 15/09A for the list / checkbox (multiple select options) as submitted by your older version...

Cheers,
David.
--
PriceTapestry.com