17488 Posts in 4473 Topics by 1978 members
|
Page:
1
|
Go to End | |
| Author | Topic: | 1742 Views |
-
Modifying an existing theme
14 June 2008 at 3:28am Last edited: 14 June 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 -
Re: Modifying an existing theme
14 June 2008 at 5:17am
Check this thread - http://www.silverstripe.com/site-builders-forum/show/86485#post86485
-
Re: Modifying an existing theme
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? -
Re: Modifying an existing theme
16 June 2008 at 10:23pm Last edited: 16 June 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" 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> </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>© 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;
} -
Re: Modifying an existing theme
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.
| 1742 Views | ||
|
Page:
1
|
Go to Top |
