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're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

Themes /

Discuss SilverStripe Themes.

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

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


Go to End


5 Posts   1481 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, 26 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, 26 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