In this section you will find information on some of the styles used in the
Gr00pz framework. By integrating these styles into your content, you ensure that your pages will always match the rest of the websites style, no matter which skin is set!
Please note that we only list some of the MAJOR css styles, and not every single one! You may need to do some tracking down for yourself by viewing source code to get exactly what you need. All classes and IDs are CaSe SensETiVe!
Font Styles.
class="headerTextStd" - 14Pt header font
class="largeTextStd" -12Pt standard body text font
class="smallTextStd" -11pt standard body text font
class="smallTimeStd" -11pt time/date font
class="mainMenu" -14pt menu style font
Formatting Styles.
class="Border" - Primary colour 1pixel border
class="Border2" - Secondary colour 1pixel border
id="FL" - Standard float:left style
id="FR" - Standard float:right style
id="BodyContentBox" - Main content holder style box (Full width)
id="BodyContentBoxAlternate1" - Content holder colour2 (Fullwidth)
id="BodyContentBoxAlternate2" - Content holder colour 3 (Fullwidth)
id="Error" - 2pixel Bordered content box using error colour outline
id="Notice" - 2pixel Bordered content box using notice colour outline
Examples.
With these CSS styles outlined, lets run through a couple of examples! Lets start off by creating a header title for our website. Type the following into your content box:
<div id="BodyContentBox" class="headerTextStd Border">Hello, this is my title!</div>
To quickly break down what we've done here:
The <Div> tags act as a container for your text or image HTML content. Imagine them as bricks...you can either stack them on top of each other or side by side to make whatever shape you wish.Each <Div></Div> is 1 brick.A <Div> tag is always created using 2 parts. The first <DIV> starts the element off, and the </DIV> tag ends the element. Anything inbetween is shown on the screen as HTML content.
By applying the id="BodyContentBox" we have told it to use the layout that
Gr00pz specifies with that name. In this case, it sets the DIV's (our single brick) width to 778pixels (the exact width of the
Gr00pz page), tells the height to stretch depending on how much text is inside it, and aligns it to the left of the screen. Then in the class="headerTextStd Border" we are telling it to use 2 standard classes that are defined in the
Gr00pz system. the 'headerTextStd' class sets the font size and colour for whatever is contained in our div tags, whilst the 'Border' class should then go and add a border around the whole of the Div element. Make sense? Good! Play about with the varying ids and classes and see what happens!
Be sure to checkout our other posts regarding the manual setting of styles in DIV tags.
