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


Reply

15 Posts   3604 Views

Avatar
Double-A-Ron

18 May 2009 at 8:44am Community Member, 604 Posts

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

Avatar
Govpatel

18 May 2009 at 10:05am Community Member, 13 Posts

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

18 May 2009 at 10:08am Community Member, 604 Posts

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

Avatar
Govpatel

18 May 2009 at 10:23am Community Member, 13 Posts

Thank you for prompt Reply

Yes they are are

Avatar
Double-A-Ron

18 May 2009 at 10:35am Community Member, 604 Posts

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

5 July 2009 at 8:04pm Community Member, 18 Posts

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

26 January 2010 at 6:03pm Community Member, 178 Posts

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.