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

<div> id naming


Reply


6 Posts   1174 Views

Avatar
greed

Community Member, 3 Posts

13 October 2008 at 9:21am

Edited: 13/10/2008 9:21am

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

Avatar
Liam

Community Member, 470 Posts

13 October 2008 at 9:51am

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.

Avatar
greed

Community Member, 3 Posts

13 October 2008 at 12:17pm

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" xml: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 :-)

Avatar
greed

Community Member, 3 Posts

14 October 2008 at 6:42am

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

Avatar
Willr

Forum Moderator, 5513 Posts

14 October 2008 at 9:58am

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.

Avatar
Liam

Community Member, 470 Posts

14 October 2008 at 12:33pm

Edited: 14/10/2008 12:34pm

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.