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've moved the forum!

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.

Archive /

Our old forums are still available as a read-only archive.

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

Modifying an existing theme


Go to End


5 Posts   2725 Views

Avatar
icemoist

Community Member, 2 Posts

14 June 2008 at 3:28am

Edited: 14/06/2008 3:29am

I'm new to Silverstripe, I managed to install it and do many things, but I can't do a very basic thing: (it should be very simple but I couldn't find any specific help in the documentation (but i could've missed them):

How do I edit an existing theme? Imagine for example that I'm fine with the Blackcandy theme but I want to change some details, for example instead of a blue footer image I want it red and with a different shape, where is the "footerbottom.gif" inserted into? Where is the HTML code telling the browser to get that image?

Another example: I want to add an image as background, how do I do that?

This is all I need to publish my website.
Thanks

Avatar
sammahoney

Community Member, 14 Posts

14 June 2008 at 5:17am

Avatar
icemoist

Community Member, 2 Posts

16 June 2008 at 6:57pm

Thank you, that clarifies things a little.
It would be perfect to have a sample modified page.ss file.
Are there any available?

Avatar
sammahoney

Community Member, 14 Posts

16 June 2008 at 10:23pm

Edited: 16/06/2008 10:47pm

You can check a simple site I did here - www.leacys.com - here's the page.ss markup:

<?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
		<title>$Title</title>
		<link rel="shortcut icon" href="/favicon.ico" />
</head>
	
<body class="index_body">

<div id="container">
  <div id="header">
    <p>&nbsp;</p>
  		<div id="menu_container">
			<% include Navigation %>	
      <!-- end #menu_container --></div>
  <!-- end #header --></div>

<div id="mainContent">
		  $Layout
<!-- end #mainContent--></div>

<div id="footer"><div id="footertext">
<p>&copy; 2008 Leacy's Clothes Shop | 75 Main Street Gorey, Co. Wexford | Website by <a href="http://www.divinemonkey.co.uk">Divine Monkey</a></p>
<!-- end #footertext --></div><!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

Here's the includes/Navigation.ss:
<ul id="tabs1">
 	<% control Menu(1) %>	  
  		<li><a class="$LinkingMode" href="$Link" title="Go to the $Title.XML page"><span>$MenuTitle</span></a></li>
   	<% end_control %>
 </ul>

And then the Layout.css:
@charset "utf-8";
/* -------------------- Web design by www.divinemonkey.co.uk ---------------------------------*/

/* This first part is to reset all margins etc so all browsers start from same blank page */
/* ------------------------------------ START undo_html.css ----------------------------------*/
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
/* ------------------------------------ END undo_html.css ----------------------------------*/

/* ----------------------------------- Start Standard CSS ---------------------------------- */

html {
overflow: auto;
}
body {
	font: 80% Arial, Verdana, sans-serif;
	background:#282828 url(../images/bg.jpg) left top repeat-x;
	margin-top: 0;
	padding: 0;
	text-align: center;
	color: #ffffff;
}
/* ----- Text Stylings ----- */
h1{
	font-size:150%;
	font-weight:bold;
	color: #ffffff;
}
h2{
	background: url(../images/h2bg.jpg) left top repeat-x;
	font-size:11px;
	color: #666666;
	letter-spacing: 1px;
	text-transform:uppercase;
	margin-bottom: 15px;
	padding: 9px 0px 10px 12px;
}
h3{
	font-size:120%;
	font-weight:bold;
	color: #0885AE;
}
.style1 {
	font-weight: bold;
}
.style2 {
	font-style: italic;
}
.style3 {
	color: #0F5166;
}
a:link, a:visited {
	color: #0885AE;
	text-decoration: none;
}
a:hover {
	color: #0885AE;
	text-decoration: underline;
}
#footer a:link, a:visited {
	color: #999999;
	text-decoration: underline;
}
#footer a:hover {
	color: #666666;
	text-decoration: underline;
}
ul li a:link, a:visited, a:hover {
text-decoration: none;
}
/* ------------------------------------- Start Divs ---------------------------------------- */

#container {
	width: 780px; 
	margin: 0 auto;
	margin-top: 0px;
	border: 0px solid #000000;
	text-align: left;
}
#header {
	background: url(../images/logo.jpg) center top no-repeat;
    height: 175px;
	color: #666666;
	padding: 0px 0px 0px 0px; /* top right bottom left */
}

#menu_container {
    margin-top: 105px;
	margin-bottom: -10px;
    height: 40px;
	padding: 0px 0px 0px 35px;
	bottom: 0px;
}

#mainContent {
	padding: 0px 45px 20px 45px; 
	height: 100%;
}
#footer {
    width: 780px; 
	height: 100px;
	margin: 10px 0px 0px 0px; 
	background:url(../images/footer.jpg) no-repeat center bottom;
}
#footertext {
	text-align: center;
	padding: 43px 20px 0px 20px; 
	font-size: 85%;
	color: #999999;
}
.leftAlone {
	padding: 0px 0px 15px 0px; 
}
.left {
	padding: 0px 0px 15px 0px; 
}
/* ------------------------------------- Menu Style ---------------------------------------- */

#tabs1 {
       width: 770px;
		text-align: right;
        font-size: small; /* could be specified at a higher level */
        margin: 0;
        border-bottom: 0px solid #696;
        position:relative;
        z-index:2;
}
#tabs1 li {
        float: left;
        margin: 0;
        padding: 0;
        display: inline;
        list-style: none;
        position:relative;
}
#tabs1 a {
        float: left;
        font-size: 11px;
		font-family:  Arial;
        line-height: 20px;
        padding: 6px 15px 6px 15px;
		letter-spacing: 2px;
		text-transform:uppercase;
        text-decoration: none;
        color: #cccccc;
}
#tabs1 a.current, #tabs1 a.current:hover {
		background: url(../images/menuselected.jpg) left top repeat-x;
        float: left;
        font-size: 11px;
		font-family:  Arial;
        line-height: 20px;
		letter-spacing: 2px;
		text-transform:uppercase;
        text-decoration: none;
        color: #ffffff;
		cursor: default;
}
#tabs1 a:hover {
	    background: url(../images/menuhover.jpg) left top repeat-x;
        float: left;
        font-size: 11px;
		font-family:  Arial;
        line-height: 20px;
		letter-spacing: 2px;
		text-transform:uppercase;
        color: #cccccc;
}

Avatar
Willr

Forum Moderator, 5523 Posts

16 June 2008 at 10:55pm

where is the "footerbottom.gif" inserted into? Where is the HTML code telling the browser to get that image?

All the images for the theme are stored at

/themes/blackcandy/images/

All the CSS files - To tweak colors and how those backgrounds are appiled are in

/themes/blackcandy/css/

The Layout.css file in /themes/blackcandy/css has most of the CSS controlling the design. See http://doc.silverstripe.com/doku.php?id=themes:developing for a helpful quide into the world of SilverStripe Themes.