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.

Themes /

Discuss SilverStripe Themes.

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

theme with graphics on the top of HomePage but not Plaain Page


Reply


5 Posts   987 Views

Avatar
Victor

Community Member, 128 Posts

1 April 2009 at 12:27am

I am looking for theme (or advice how to modify existing one) so that HomePage has a graphics above navigation menu buttons but plain pages do not have it

Any suggestions?

Thank you in advance

Victor

Avatar
gaston

Community Member, 24 Posts

8 April 2009 at 3:17am

Salut Victor,

I created two ss file, one Page.ss and one HomePage.ss
In these ss files I called the <div id=header> different for each ss file, i.e. <div id=HomePageHeader>

In the layout.css file I then had two headers with different background defined:

#HomePageHeader{
   height:105px;
   width:800px;
   float:left;
   background:#ffffff;
   background-image: url(../images/header_home_page.png);
   filter: alpha(opacity=100);
   opacity: 1.0;
   -moz-opacity: 1.0;
}
#PageHeader{
   height:105px;
   width:800px;
   float:left;
   background:#ffffff;
   background-image: url(../images/header_page.png);
   filter: alpha(opacity=100);
   opacity: 1.0;
   -moz-opacity: 1.0;
}

Now it's up to you if you want to change the width, height, color, image and opacity of the header

Hope it helps,
Mathias

Avatar
Victor

Community Member, 128 Posts

8 April 2009 at 8:19pm

Thanks! BTW, how to change the width of the page as opposed to header?

Victor

Avatar
gaston

Community Member, 24 Posts

8 April 2009 at 11:32pm

Edited: 08/04/2009 11:34pm

Salut Victor,

this depends heavily on the content of the redering ss file. Take a look at the blackcandy Page.ss:

<div id="BgContainer">
   <div id="Container">
      <div id="Header">
         $SearchForm
          <h1>Your Site Name</h1>
       <p>your site's tagline here</p>
      </div>
      <div id="Navigation">
         <% include Navigation %>
       </div>
       <div class="clear"><!-- --></div>
      <div id="Layout">
       $Layout
      </div>
    <div class="clear"><!-- --></div>
   </div>
   <div id="Footer">
      <% include Footer %>
   </div>
</div>


The size is determined by the settings of BGContainer and Container. If you create now a Page.ss with BGPageContainer and A HomePage.ss with BGHomePageContainer instead of BGContainer, you can conrol the width of the page by defining these two elements in the layout.css:

#BGPageContainer {
width: 800px;
}
#BGHomePageContainer {
width: 1000px;
}

hope I could help,
Mathias

BTW: I use Firefox with the add-on Firebug. It shows you nicely the html structure and the according css including the inheritance path.

Avatar
Victor

Community Member, 128 Posts

9 April 2009 at 7:28am

Thanks!

Victor