Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Template Questions /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Two sidebars in a theme? or modifying a theme


Go to End


15 Posts   5601 Views

Avatar
robcub

Community Member, 14 Posts

4 May 2009 at 9:39pm

Edited: 04/05/2009 9:40pm

Hi, I'm just starting out with SiverStripe having previously only used WordPress.

I am trying to modify Blackcandy to get it to look like this: http://robcubbon.com/dev/my-local-mates/

My first question is how to insert the sidebars, as I have a left sidebar and a right sidebar which should remain the same throughout the whole of the site. I'm a bit confused as to why Blackcandy has style for a sidebar but it doesn't always show up.

Or, is there another existing theme with two sidebars already that would be a better start to modify?

I have found this article http://www.ssbits.com/create-a-static-sidebar but I'm a little reluctant to go ahead with this.

If anyone could point me in the right direction I would be grateful. I should be OK with the HTML and CSS of the page.

Looking forward generally to using SilverStripe in the future!

Avatar
Double-A-Ron

Community Member, 607 Posts

4 May 2009 at 10:47pm

Edited: 04/05/2009 11:16pm

I find the easiest way to do this is to put sidebar templates in your theme's /Include directory. Just put them in their own .ss file like this:

/Includes/LeftSideBar.ss

<div id="LeftSideBar">
<h2>This is my Left Side Bar</h2>
</div>

/Includes/RightSideBar.ss

<div id="RightSideBar">
<h2>This is my Left Side Bar</h2>
</div>

Then in your Page.ss

<div id="page">

<% include LeftSideBar %>

$Layout

<% include RightSideBar %>

</div>

All the work here is basically HTML. I usually get the page displaying as I want it, with all my code on Page.ss, then I split it out into sections as I find common elements across page types.

If however you need to populate those sidebars with data from SS, like menus of the SiteTree, you will find plenty of posts in these forums on that.

Cheers
Aaron

Avatar
robcub

Community Member, 14 Posts

4 May 2009 at 10:58pm

Thank you so much, Double-A-Ron, for replying with straightforward and logical instructions! I will follow them now.

One question though, is the Page.ss you are referring to the blackcandy/templates/Page.ss rather than the blackcandy/templates/Layout/Page.ss?

Avatar
Double-A-Ron

Community Member, 607 Posts

4 May 2009 at 11:10pm

Edited: 04/05/2009 11:17pm

NOTE: I changed the code slightly above - it is now correct.

It really depends on how you plan to develop the site.

/templates/Page.ss is the main page template. So any new page type that extends Page will use this file as a basis, and thus wrap all the HTML there-in around whatever HTML you have in /templates/Layout/Page.ss (or MyPage.ss if you create a new Page Type of that name).

Think of it like /templates/Page.ss is your master template for the site (this can be overridden however), and /templates/Layout/Page.ss is more for laying out the content of the page.

If it were me, and these side bars were site-wide, I would put those include commands in /templates/Page.ss. That way, if you create a new PageType called say, "MyPage", later and only have content layout changes, keeping the overall design the same, you can put this in /templates/Layout/MyPage.ss. Silverstripe will still use /templates/Page.ss to template the core HTML of your site.

You should probably play around with the tutorials, this one in particular.

It's a little confusing at first, but just play around a bit and you'll see that this template system is the way it is for a very cool reason.

Cheers
Aaron

Avatar
robcub

Community Member, 14 Posts

4 May 2009 at 11:23pm

Thank you, Aaron, I think I've got it. And I note the changes to the code above. Thank you so much.

Cheers,

Rob

Avatar
Nivanka

Community Member, 400 Posts

8 May 2009 at 3:26am

I tried this once and gave up because you cant use two widget choosers in the same page. is there a solution for this?

Avatar
robcub

Community Member, 14 Posts

8 May 2009 at 6:03am

Aaron's solution worked a treat for two sidebars, not sure if both can be widgetized, though, Nivanka.

Avatar
Govpatel

Community Member, 13 Posts

18 May 2009 at 8:36am

I have done as per Aron post and put css code for the sidebars and I find that they are both in on the page but they left hand sidebar at top right hand side and right hand sidebar at bottom left hand side on the main content what am I doing wrong here help will much appreciated.

Go to Top