Jump to:

17452 Posts in 4473 Topics by 1971 members

Archive

SilverStripe Forums » Archive » <div> id naming

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: 1155 Views
  • greed
    Avatar
    Community Member
    3 Posts

    <div> id naming Link to this post

    Happy thanks giving to everyone up here in Canada. I'll keep this quick as i should be visiting and not nose deep into my laptop :-p Here is my issue and I apologize as this is a very simple question I'm sure.

    I've setup a nice design for a clients site and now I'm trying get it set up for Silverstripe.

    Do i HAVE TO use the set ID naming convention mentioned in the documentation on here?
    #Header, #Container, etc? From how I interpreted it was not mandatory to use their names but what they used? I did make sure all my div's had the first character uppercase but still nothing displays.

    If someone can just let me know if I do indeed have to use there main container names then I can start that process. Otherwise I have a break somewhere else. Thanks in advance!!!

    Cheers,
    Graeme

  • Liam
    Avatar
    Community Member
    470 Posts

    Re: <div> id naming Link to this post

    Fellow Canadian here waiting for dinner ;)

    No, you can use whatever names you want. Which theme are you using when you installed? Blackcandy, tutorial or something else?

    The html and css can be whatever you want. Essentially all the markup can be as custom as you want, and you just plugin the variables to make the content show up. i.e $Content, $Form etc.

    After you edit the template make sure to call /?flush=1 on the end of the URL.

    Not sure what else the problem could be without seeing the code.

  • greed
    Avatar
    Community Member
    3 Posts

    Re: <div> id naming Link to this post

    This will most definitely be an idiotic mistake. I started this this morning and now am a few drinks into the day ;-) I must be missing something very obvious....

    This is my pages.ss file in the templates folder:

    <!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>
    <style type="text/css">
    <!--
    @import url("../css/style.css");
    @import url("../css/menu.css");
    -->
    </style>
    <% base_tag %>
    $MetaTags(false)
    <title>Puppy Tales | $Title</title>
    </head>
    <body>

    <div id="Topsection">
    <div id="Header">
    <img name="logo" src="../images/pt_logo.gif" width="300" height="80" alt="" style="background-color: #999999" />
    </div>
    </div>

    <div id="Maincontainer">

    <div id="Menu1">
    <div class="menu">
    <div class="innertube">
    <div id="Modernbricksmenu">
    <% if Menu(1) %>
    <ul>
    <% control Menu(1) %>
    <li style="margin-left: 1px">
    <a href="../../../$Link" title="Go to the $Title.XML page" class="$LinkingMode"><span>$MenuTitle</span></a>      </li>
    <% end_control %>
    </ul>
    <% end_if %>
       </div>
    </div>
    <div id="Modernbricksmenuline">&nbsp;</div>
    </div>
    </div>

    <div id="Contentwrapper">
    <div id="Contentcolumn">
    <div class="innertube">
    $Layout </div>
    </div>
    </div>

    <div id="Rightcolumn">
    <div class="innertube"><b>Right Column: <em>200px</em></b></div>
    </div>

    <div id="Footer"><p>Copyright $Now.Year - Puppy Tales. Design by <a href="http://www.graemereed.ca/">Graeme Reed</a></p>
    </div>
    </div>
    </body>
    </html>

    This is my style.css file which i have in the CSS folder:

    @charset "utf-8";
    /* CSS Document */

    body{
    margin:0;
    padding:0;
    line-height: 1.5em;
    }

    b{font-size: 110%;}
    em{color: #d50c05;}

    #Maincontainer{
    width: 840px; /*Width of main container*/
    margin: 0 auto; /*Center container on page*/
    background-color:#FFFFFF;
    border:#333333 solid 1px;
    position:relative;
    top: -15px;
    }

    #Topsection{
    width: 100%;
    background: #000000;
    height: 120px; /*Height of top section*/
    margin: 0 auto; /*Center container on page*/
    }

    #Topsection h1{
    margin: 0;
    padding-top: 15px;
    color: #FFFFFF;
    }

    #Header {
    width: 840px;
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin: 0 auto;
    }

          #Header img {
          margin-top:20px;
          }

          .menu{
          margin: 3px; /*Margins for inner DIV inside each column (to provide padding)*/
          margin-top: 2px;
          background:#d50c05;
          }
          
          .menu .innertube{
          margin: 7px; /*Margins for inner DIV inside each column (to provide padding)*/
          margin-top: 0;
          }

    #Contentwrapper{
    float: left;
    width: 100%;
    }

    #Contentcolumn{
    margin-right: 200px; /*Set right margin to RightColumnWidth*/
    }

    #Rightcolumn{
    float: left;
    width: 200px; /*Width of right column*/
    margin-left: -200px; /*Set left margin to -(RightColumnWidth) */
    background: #FDE95E;
    }

    #Footer{
    clear: left;
    width: 100%;
    background: black;
    color: #FFF;
    text-align: center;
    padding: 4px 0;
    }

    #Footer a{
    color: #FFFF80;
    }

    .innertube{
    margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
    margin-top: 0;
    }

    This is my menu.css css file:

    @charset "utf-8";
    /* CSS Document */

    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */

    #modernbricksmenu{
    padding: 0;
    width: 100%;
    background: transparent;
    voice-family: "\"}\"";
    voice-family: inherit;
    }

    #modernbricksmenu ul{
    font: bold 11px Arial;
    margin:0;
    margin-left: 40px; /*margin between first menu item and left browser edge*/
    padding: 0;
    list-style: none;
    }

    #modernbricksmenu li{
    display: inline;
    margin: 0 2px 0 0;
    padding: 0;
    text-transform:uppercase;
    }

    #Modernbricksmenu a{
    float: left;
    display: block;
    color: white;
    margin: 0 1px 0 0; /*Margin between each menu item*/
    padding: 5px 10px;
    text-decoration: none;
    letter-spacing: 1px;
    background-color: #d50c05; /*Default menu color*/
    /*border-bottom: 1px solid white;*/
    }

    #Modernbricksmenu a:hover{
    background-color: #9a0500; /*Menu hover bgcolor*/
    }

    #Modernbricksmenu #current a{ /*currently selected tab*/
    background-color: #9a0500; /*Brown color theme*/
    border-color: #9a0500; /*Brown color theme*/
    }

    #Modernbricksmenuline{
    clear: both;
    padding: 0;
    width: 100%;
    height: 5px;
    line-height: 5px;
    background: #9a0500; /*Brown color theme*/
    }

    Any help would be greatly appreciated

  • greed
    Avatar
    Community Member
    3 Posts

    Re: <div> id naming Link to this post

    Guess its not that obvious. When i load my page i just get a black white screen and if I view source it is completely empty as well. I have triple checked that my theme is properly named in my config file as well.

    Cheers,
    Graeme

  • Willr
    Avatar
    Forum Moderator
    5508 Posts

    Re: <div> id naming Link to this post

    Yea the uppercase id naming is just a 'guideline' more then anything. If you get a blank screen check your php error logs for any errors or just simiplify the theme ( cut out bits ) to see if you have a typo somewhere in the code.

  • Liam
    Avatar
    Community Member
    470 Posts

    Re: <div> id naming Link to this post

    Also maybe try putting SS in dev mode to see?

    Director::set_environment_type('dev'); in your _config file.

    If you're getting a blank screen it has nothing to do with the CSS naming. You should at least see all the content, just not styled if it was wrong/not matching.

    1155 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.