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
This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.
Please use forum.silverstripe.org for any new questions
(announcement).
The forum archive will stick around, but will be read only.
You can also use our Slack channel
or StackOverflow to ask for help.
Check out our community overview for more options to contribute.
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
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
Thanks! BTW, how to change the width of the page as opposed to header?
Victor
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>
#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.
Thanks!
Victor