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   1897 Views

Avatar
icemoist

14 June 2008 at 3:28am (Last edited: 14 June 2008 3:29am), Community Member, 2 Posts

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

14 June 2008 at 5:17am Community Member, 14 Posts

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

Avatar
icemoist

16 June 2008 at 6:57pm Community Member, 2 Posts

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

16 June 2008 at 10:23pm (Last edited: 16 June 2008 10:47pm), Community Member, 14 Posts

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

16 June 2008 at 10:55pm Forum Moderator, 5511 Posts

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.