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.

Template Questions /

Two sidebars in a theme? or modifying a theme


Go to End
Reply


15 Posts   3766 Views

Avatar
Double-A-Ron

Community Member, 604 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, 604 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, 604 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: [url]http://www.ssbits.com/create-a-static-sidebar[/url]

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