Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » Modifying an existing theme

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

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

Page: 1
Go to End
Author Topic: 1892 Views
  • icemoist
    Avatar
    Community Member
    2 Posts

    Modifying an existing theme Link to this post

    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

  • sammahoney
    Avatar
    Community Member
    14 Posts
  • icemoist
    Avatar
    Community Member
    2 Posts

    Re: Modifying an existing theme Link to this post

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

  • sammahoney
    Avatar
    Community Member
    14 Posts

    Re: Modifying an existing theme Link to this post

    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>&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;
    }

  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: Modifying an existing theme Link to this post

    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.

    1892 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.