EndPreviousNextEnd EndPrint This TopicEnd

Template.css

The Template.css file is responsible for styling the overall layout and structure of your templates (as used in the Default Templates).

 

1.Default Class Selectors and ID Selectors have been created for you.

 

2.Alter the Property and Value to reflect your Design Visuals as required.

 

3.The aim of this file is help you achieve the 'Template' for your design. Such as: backgrounds, colours, borders, margins, padding.

 

4.Slice up your Design Visuals and prepare all graphics necessary for backgrounds and default buttons.

 

5.Update this file in conjunction to setting up corresponding Container ID's in ASCX Templates.
 

6.Width - The fluid width can be modified in #outerWrapper.
 

7.Layouts - The column layouts can be set by changing by the class on the #mainWrapper in the corresponding ASCX Template.
(.layout4 is the example on the ASCX Templates topic).
 

8.IE6 - Classes to fix style issues in old browsers
 

9.Clearings - Clearing Classes for DIV's
 

10.Printing - Printing Classes have been set up to only print the #cPC container when a browsers print button is clicked

 

Once you are familiar with the default Contegro code and you are confident with your CSS skills, you can change Container ID’s for Contegro Containers and the surrounding Design DIV’s to suit your own practices.

 

 

The Layout Technique

 

The layout technique that is used will allow for a liquid center and fixed sides. The structure below is compliant with the current W3C standards. If you want to use your own column layout techniques, remember to reflect your layout in the ASCX Templates. There are 4 default layout options setup as follows:

 

.layout1 - 3 column layout (#cLS, #cRS & #cPC

.layout2 - 2 column layout (left column #cLS)

.layout3 - 2 column layout (right column #cRS)

.layout4 - 1 column Layout (#cPC only)

 

 

Default Code

 

/* -----[ TEMPLATE ]-------------------------------------------------------------------------- */

 

/* -----[ Main structure CSS]--------------------------------------------------------------------- */

 

* { -moz-outline-style: none;

 outline-syle: none;

 outline-width: 0px;

 outline-color: -moz-use-text-color;

 margin: 0px;

}

 

body { background: #EFEFEF; }

 

/* -----[ STRUCTURE]------------------------------------------------------------------------------ */

/* === [ wrappers to set width ] === */

#outerWrapper {

 position: relative;

 margin: 0px auto;

 width: 960px;

 background: #FFFFFF;

}

 #mainWrapper:after {

         content: ".";

         display: block;

         height: 0;

         font-size: 0;

         clear: both;

         visibility: hidden;

    }

    #mainWrapper {

         display: inline-block;

         width: 100%;

         height: auto;

    }

    /* Hides from IE Mac \*/

    * html #mainWrapper {

       height: 1%; }

    #mainWrapper {

       display: block; }

    /* End hide from IE-mac */

 

/* === [ header ] === */

#cH {

 position: relative;

 display: block;

 clear: both;

 width: 100%;

 z-index: 200;

}        

 /* === [ header banner ] === */

 #cB {

         position: relative;

         display: block;

         clear: none;

         width: 480px;

         padding: 0px;

         float: left;

 }

 /* === [ top  ] === */

 #cT {

         position: relative;

         display: block;

         clear: none;

         padding: 0px;

         float: right;

         text-align: right;

 }

 /* === [ Main Navigation ] === */

 #cN {

         position: relative;

         display: block;

         clear: both;

         width: 100%;

         height: 31px;

         background: #666666;

         z-index: 200;

 }

 

/* === [ Primary Container Wrapper ] === */

#cPCWrapper {

 float: left;

 width: 100%;

}

 

/* === [ Primary Container ] === */

#cPC {

 padding: 10px;

 min-height: 300px;

 display: block;

}

 .layout1 #cPC /* 3 column layout */

 {

         margin: 0 250px 0 250px;

 }

 .layout2 #cPC /* 2 column layout (left column #cLS) */

 {

         margin: 0 0 0 250px;

 }

 .layout3 #cPC /* 2 column layout (right column #cRS) */

 {

         margin: 0 250px 0 0;

 }

 .layout4 #cPC /* 1 column layout */

 {

         margin: 0 0 0 0;

 }

 

/* === [ Left Side Column ] === */

#cLS {

 float: left;

 margin-left: -100%;

 width: 230px;

 padding: 10px

}

/* === [ Right Side Column ] === */

#cRS {

 float: right;

 margin-left: -100%;

 width: 230px;

 padding: 10px

}

/* === [ footer ] === */

#cF {

 position: relative;

 display: block;

 clear: both;

 width: 100%;

 margin: 10px 0;

}

/* === [ copyRight ] === */

#cC {

 position: relative;

 display: block;

 clear: both;

 padding: 10px;

 font-size: 11px;

}

 #cC a {

         border-bottom: 1px #999999 dotted;

         text-decoration: none;

 }

 #cC a:hover {

         border-bottom: 1px #CCCCCC dotted;

 }

 

/* -----[ IE6 ]------------------------------------------------------------------------------- */

 

* html #cRS {

 margin-left: -250px;

}

*:first-child+html #cRS {

 margin-left: -250px;

}

/* -----[ Clearings ]-------------------------------------------------------------------------- */

 

.clearLeft,

.clear

{

 height: 0;

 font-size: 0;

 line-height: 0;

}

.clearLeft {

 clear: left;

}

.clear {

 clear: both;

}

/* -----[ Printing ]-------------------------------------------------------------------------- */

 

@media print {

 body {

         font-size: 12pt;

 }

 #cRS, #cLS, #cTL, #cS, #cT, #cB, #cH, #cN {

         display: none;

 }

 #cPC {

                 margin: 0px;

                 padding: 0px 0px 20px 0px;

                 border-top-style: none;

                 border-left-style: none;

         }

         .layout1 #cPC /* 3 column layout */

         {

                 margin: 0px;

                 padding: 0px 0px 20px 0px;

         }

         .layout2 #cPC /* 2 column - left */

         {

                 margin: 0px;

                 padding: 0px 0px 20px 0px;

         }

         .layout3 #cPC /* 2 column - right */

         {

                 margin: 0px;

                 padding: 0px 0px 20px 0px;

         }

         .layout4 #cPC /* 1 column */

         {

                 margin: 0px;

                 padding: 0px 0px 20px 0px;

         }

}

 

 

See also

AdminTemplate.css

 

Topic Link