LEXIPIXEL Site Manager (CMS)

Using CSS with Site Manager Layouts

LEXIPIXEL Site Manager creates HTML documents which are styled using CSS. To utilize the styling features simply create a CSS file with the following classes, (or edit one of the available LEXIPIXEL CSS files).

Site Manager CSS code may be added to an existing CSS file or in a CSS file of its own. The sections below describe each CSS class used by Site Manager, and a complete sample CSS file follows the descriptions.

• master - this class sets the overall page dimensions, margins, padding, background, colors, etc. Changes to this class will affect all pages created by Site Manager.
  
  

  .master { 
    margin: 0px;
    padding: 0;
    border-style: none; 
    border-width: 0px; 
    border-color: black;
    background: #FFFFFF; 
    position: relative; 
    clear:both; 
    width: 612px;
  }
  

  
  
  
• Leader - content such as leader boards, banner ads, special notices, etc.. that will appear above the normal web page content. By setting the margin and padding you can blend the leader wit hthe page, or make it appear spaced apart from the page's main content area.
  
  

  .lead {
    margin: 6px; 
    padding: 6px; 
    width: 500; 
    text-align: center;">
    background: #FFE0E0; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #000000; 
  }
  

  
  
  
• Masthead - standard logo, site or department heading
  
  

  .masthead {
    margin: 0px;
    padding: 0;
    border-style: none; 
    border-width: 0px; 
    border-color: black;
    background: #FFFFFF; 
    color: blue;
  }
  

  
  
  
• Top Navigation Bar - standard navigation to major categories of site
  
  

  .navt {
    margin: 0px;
    padding: 0px;
    border-style: none; 
    border-width: 0; 
    border-color: black;
    background: #E0E0E0;
    vertical-align: middle;
    clear:both; 
    width: 100%;
  }
  

  
  
  
• Left Navigation Column - usually a list of links to "drill down" into a site or section of a site.
  
  

  .navl {
    margin: 0px;
    padding: 4px; 
    border-style: none; 
    border-width: 0px; 
    border-color: black;
    background: #FFFFFF;
    text-align: left;
    line-height: 1.5em;
    float: left;
    width: 132px;
  }
  

  
  
  
• Body / Content Area - the meat
  
  There are (5) component body classes, each may be set with different properties to accomplish nearly any type of CSS multi-column layout, a sixth body class, (bodywrap), acts an envelope to contain one or more body divs.
  
  

  .bodywrap {
    margin: 0px;
    padding: 0;
    border-style: none; 
    border-width: 0px; 
    border-color: black;
    width: 100%;
  }
  
  .bod0 {
    margin: 0px;
    padding: 6px; 
    border-style: none; 
    border-width: 0px; 
    border-color: black;
    float: left;
    width: 100%;
    height: 1000px;
    color: navy; 
    background: #FFFFFF;
    text-align: left;
  }
  
  .bod1 {
    margin: 0px;
    padding: 6px; 
    border-style: none; 
    border-width: 0px; 
    border-color: black;
    float: left;
    background: #FFFFFF;
    color: navy; 
    text-align: left;
    width: 450px;
  }
  
  .bod2 {
    margin: 0px;
    padding: 6px;
    border-style: none;
    border-width: 0px;
    border-color: black;
    background: #FFFFFF;
    color: navy; 
    text-align: left;
    float: left;
    width: 450px;
  }
  
  .bod3 {
    margin: 0px;
    padding: 6px;
    border-style: none;
    border-width: 0px;
    border-color: black;
    background: #FFFFFF;
    color: navy; 
    float: left;
    text-align: left;
    width: 312px;
  }
  
  .bbox {
    margin: 0px;
    padding: 0px;
    border-style: none;
    border-width: 0px;
    border-color: black;
    background: #FFFFFF;
    clear: both;
    float: right;
    width: 468px;
  }
  

  
  
  
• Right Navigation / Ads Column - ads and related links
  
  

  .navr {
    margin: 0px;
    padding: 2px;
    border-style: none;
    border-width: 0px;
    border-color: black;
    background: #FFFFFF;
    clear: both; 
    float: right;
    width: 129px;
  }
  

  
  
  
• Bottom Toolbar - can be same as top toolbar plus "top of page" link...
  
  

  .navb {
    margin: 0px;
    padding: 0px;
    border-style: none;
    border-width: 0px;
    border-color: black;
    background: #E0E0E0;
    clear:both; 
    width: 600px;
  }
  

  
  
  
• Footer - copyright notice, logo, standard stuff at end of page.
  
  

  .foot {
    margin: 0px;
    padding: 0px;
    border-style: none;
    border-width: 0px;
    border-color: black;
    background: #FFFFFF; 
    color: #000000; 
    clear:both; 
    width: 600px;
  }
  

  
  
  
• Trailer - banner ads, notices, etc that will appear below entire page contents.
  
  

  .tail {
    margin: 6px; 
    padding: 6px; 
    width: 500; 
    text-align: center;">
    background: #FFE0E0; 
    border-style: solid; 
    border-width: 1px; 
    border-color: #000000; 
  }
  

  
  
  

/* ########################################## */
/* # lexipixel.css                            */
/* ########################################## */
/* # Copyright (c)2004-2006 Randy M. Harris,  */
/* # all rights reserved.                     */
/* ########################################## */


html { 
  margin: 0;
  padding: 0;
  border-style: none;
  border-width: 0px;
} 

BODY { 
  margin: 0;
  margin-bottom: 22px;
  padding: 0;
  border-width: 0px; 
  border-style: none;
  background: #009999;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
}

H1, H2, H3 { 
  margin: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 8px;
  font-family: Arial, Verdana, Helvetica, Sans-serif;
  font-weight: 700; 
}
H1 { font-size: 20px; }
H2 { font-size: 16px; }
H3 { font-size: 14px; }

SMALL { font-size: 9px; }

A:link { 
  font-weight: 700; 
  color: #009999;
}
A:visited { 
  font-weight: 700; 
  color: #009999; 
}
A:hover { 
  font-weight: 700; 
  color: #FFFFFF; 
  background: #009999; 
  text-decoration: none;
}
A:active { 
  font-weight: 700; 
  color: #990000; 
  background: #FFFFFF;
  text-decoration: none;
}

P {}

.master { 
  margin: 0px;
  padding: 0;
  border-style: none; 
  border-width: 0px; 
  border-color: black;
  background: #FFFFFF; 
  position: relative; 
  clear:both; 
  width: 612px;
}


.masthead {
  margin: 0px;
  padding: 0;
  border-style: none; 
  border-width: 0px; 
  border-color: black;
  background: #FFFFFF; 
  color: blue;
}

.navt {
  margin: 0px;
  padding: 0px;
  border-style: none; 
  border-width: 0; 
  border-color: black;
  background: #E0E0E0;
  vertical-align: middle;
  clear:both; 
  width: 100%;
}


.bodywrap {
  margin: 0px;
  padding: 0;
  border-style: none; 
  border-width: 0px; 
  border-color: black;
  width: 100%;
}


.navl {
  margin: 0px;
  padding: 4px; 
  border-style: none; 
  border-width: 0px; 
  border-color: black;
  background: #FFFFFF;
  text-align: left;
  line-height: 1.5em;
  float: left;
  width: 132px;
}


.bod0 {
  margin: 0px;
  padding: 6px; 
  border-style: none; 
  border-width: 0px; 
  border-color: black;
  float: left;
  width: 100%;
  height: 1000px;
  color: navy; 
  background: #FFFFFF;
  text-align: left;
}

.bod1 {
  margin: 0px;
  padding: 6px; 
  border-style: none; 
  border-width: 0px; 
  border-color: black;
  float: left;
  background: #FFFFFF;
  color: navy; 
  text-align: left;
  width: 450px;
}

.bod2 {
  margin: 0px;
  padding: 6px;
  border-style: none;
  border-width: 0px;
  border-color: black;
  background: #FFFFFF;
  color: navy; 
  text-align: left;
  float: left;
  width: 450px;
}

.bod3 {
  margin: 0px;
  padding: 6px;
  border-style: none;
  border-width: 0px;
  border-color: black;
  background: #FFFFFF;
  color: navy; 
  float: left;
  text-align: left;
  width: 312px;
}

.bbox {
  margin: 0px;
  padding: 0px;
  border-style: none;
  border-width: 0px;
  border-color: black;
  background: #FFFFFF;
  clear: both;
  float: right;
  width: 468px;
}


.navr {
  margin: 0px;
  padding: 2px;
  border-style: none;
  border-width: 0px;
  border-color: black;
  background: #FFFFFF;
  clear: both; 
  float: right;
  width: 129px;
}

.navb {
  margin: 0px;
  padding: 0px;
  border-style: none;
  border-width: 0px;
  border-color: black;
  background: #E0E0E0;
  clear:both; 
  width: 600px;
}


.foot {
  margin: 0px;
  padding: 0px;
  border-style: none;
  border-width: 0px;
  border-color: black;
  background: #FFFFFF; 
  color: #000000; 
  clear:both; 
  width: 600px;
}



/* #################################################### */
/* # end of default CSS, start custom tags & properties */ 
/* #################################################### */


BODY.dircss1 { background: #C0C0B0; }
BODY.dircss2 { background: #C0C0FF; }
BODY.dircss3 { background: #40A8D8; }


.caption {
  color: #000080;
  font-size: 10px;
}

.code {
  color: #800000;
  font-family: Courier, Courier New, monospace;
  font-size: 11px;
}

HR {
  color: #000000;
}


.blurb {
  border-width: 1px;
  border-style: solid;
  padding: 6px;
  margin: 18px;
  background: #F0F0F0;
  text-align: center;
}

/* #################################################### */
/* #  EOF:  lexipixel.css */ 
/* #################################################### */