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


Go to End
Reply


5 Posts   1052 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