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
Double-A-Ron

Community Member, 607 Posts

18 May 2009 at 8:44am

We would need to see your .ss code and css to be of any help.

Avatar
Govpatel

Community Member, 13 Posts

18 May 2009 at 10:05am

I am just learning how to setup websites with silverstripe I am ok with using the themes I want to add a sidebar with content.
This my container css
Site Container Box
*/
#BgContainer {
width: 900px;
background-color: #FFFFFF;
margin: 0px auto 0 auto;
padding: 17px 17px 0 17px;
border: 8px solid #484826;

}
#Container {
width: 900px;
margin: 0 auto;
background: #fff;
}
#Layout {
width: 100%;
margin: 0 auto;
/*float: right;*/
overflow: hidden;
margin: 15px auto;
padding: 10px;
}
#Content {
width: 900px;
float: right;
margin: 0 auto;
text-align: left;
}

This are sidebars

#LeftSideBar {
float:left;
width:230px;
padding:10px;
background:#99c;

}

#RightSideBar {
float:right;
width:230px;
padding:10px;
background:#99c;
}

this is Page.ss

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<head>
<% base_tag %>
$MetaTags
<link rel="shortcut icon" href="/favicon.ico" />

<!--[if IE 6]>
<style type="text/css">
@import url(themes/olivesunset/css/ie6.css);
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
@import url(themes/olivesunset/css/ie7.css);
</style>
<![endif]-->
</head>
<body>
<div id="BgContainer">
<div id="Container">
<div id="Header">
<h1>Olive Sunset</h1>
<p>your site&#39;s tagline here</p>
</div>

<div id="Navigation">
<% include Navigation %>
</div>

<div class="clear"><!-- --></div>

<div id="Layout">
<% include LeftSideBar %>

$Layout
<% include RightSideBar %>
</div>

<div class="clear"><!-- --></div>
</div>
<div id="Footer">
<% include Footer %>
</div>
</div>

</body>
</html>

Avatar
Double-A-Ron

Community Member, 607 Posts

18 May 2009 at 10:08am

And LeftSideBar/RightSideBar HTML? The same as my samples?

Avatar
Govpatel

Community Member, 13 Posts

18 May 2009 at 10:23am

Thank you for prompt Reply

Yes they are are

Avatar
Double-A-Ron

Community Member, 607 Posts

18 May 2009 at 10:35am

Ah I see, this is actually isn't an SS problem, it's a CSS problem, and you have deviated from my examples slightly, so I can't see what you've done easily.

The easiest thing to do when doing a layout is to code it in strait HTML (no silverstripe), get it displaying correctly, then break it put it into a SS template, and break it up into reusable includes.

If I get a few moments, I will look through your CSS. But you would have had this problem not matter what CMS you were using.

Cheers
Aaron

Avatar
ckd

Community Member, 18 Posts

5 July 2009 at 8:04pm

I have just started using SilverStripe and am currently trying to work out to to add a sidebar with three editable sections to a website homepage. I have followed the steps above and now have a static sidebar in place. How do I make the sidebar and its sections editable? In addition, how do I then access the sidebar and/or make it accessible for editing from the admin area?

Any help would be appreciated.

Thank you

Avatar
DsX

Community Member, 178 Posts

26 January 2010 at 6:03pm

Depending on how you want the content to be edited you may want to look at an alternate option suggested in the comments of this page: http://www.ssbits.com/create-a-static-sidebar

1. Create a page (whatever type you want) named SidebarPage.
2. In the Behavior tab, uncheck the "Show in menus?" check.
3. In your template, put <div id="Sidebar" class="typography">$Page(SidebarPage).Content</div>
4. Edit SidebarPage as desired.

I now have 2 sidebar blocks working in this manner. The only thing I can add to this is not to try to reference them as "$Page(SidebarPage1).Content" for example (I wanted to have them numbered 1 and 2) as the CMS stripped the number from the URL and the param after $Page must match the URL of the page created.

Go to Top