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.

Archive /

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

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

Modifying an existing theme


Reply


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

Check this thread - http://www.silverstripe.com/site-builders-forum/show/86485#post86485

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, 5513 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.