Skinning Kick Start - Styles and Element Hierarchy

I have been designing and implementing a lot of skins recently and it has become completely evident that a documented means to develop skins is necessary.  The skins that I have been creating use base.php as the template file.  Base.php was created to be a standardized layout that could be extremely flexible by using CSS.

Please keep in mind that base.php is not accessible to you for markup changes.  You can only make changes through CSS.  We are in the process of developing custom HTML sections that will allow you to enter custom HTML in 3 different locations.

As you will notice with the hierarchy there are many redundant elements such as the div.userAuth or div.siteSearch.  We inserted redundant elements so that a designer could select whether to display or not display elements in particular locations.  For instance, I may want the search box on my top navigation but not on my side navigation so in my style sheet I add.

body div.global div.globalwrap div.body div.siteNav div.siteSearch
{
     display:none;
}

div.global {
	width: 1000px;
	margin: 0px auto;
}
/***
 * all custom areas
 */
div.custom {
	border: 1px solid #f00;
}
/***
 * Header area
 */
/* This 'clear' both the child floats and set the proper height - doesn't work in IE6 */
div.header div.mast {
	overflow: auto;
	height: auto;
	width: auto;
}
div.header div.mast div.siteLogo {
	float: left;
}
div.header div.mast div.userAuth {
	float: right;
}
div.header div.custom {
	height: 40px;
}
div.page div.pageBar {
	overflow: auto;
}
div.pageContent div.pageTitle {
		
}
/***
 * Body
 */
div.body {
	border: 1px solid #000;	
}

/***
 * Site nav
 */
div.header div.siteNav {
	overflow: auto;
	height: auto;
	width: auto;
}
div.header div.siteNav ul li {
	float: left;
}
div.header div.siteNav div.siteSearch {
	float: right;
}
div.header div.siteNav div.userAuth, 
div.body div.sitenav div.userAuth {
	float: right;
}


/***
 * main body columns
 */ 
div.body, 
div.gallery {
	overflow: auto;
	width: auto;
	height: auto;
}
div.body div.siteNav {
	width: 190px;
	float: left;
}
div.body div.page {
	width: 800px;
	float: left;
}
div.body div.page div.pageBar ul {
		
}
div.body div.page div.pageBar ul li {
	float: left;
}
div.body div.pageContent {
	clear: both;
}
div.global div.body div.custom {
	width: 160px;
	float: left;
	display:none;
}
div.global div.custom {
	height: 20px;
	width: auto;
}
/***
 * Borders to differentiate areas
 */

div.body div.siteNav {
	border: 1px solid #000;
}
div.header {
	border: 1px solid #000;
}
div.header div.mast {
	border: 1px solid #666;
}
div.header div.mast div.siteLogo, 
div.header div.mast div.userAuth {
	border: 1px solid #bbb;
}
div.header div.siteNav {
	border: 1px solid #666;
}
div.body div.page, 
div.body div.pageBar,
div.pageContent div.pageTitle,
div.body div.pageStatus,
div.body div.pageRevision, 
div.body div.pageToc, 
div.body div.pageText, 
div.body div.pageInfo, 
div.body div.file, 
div.body div.gallery {
	
}

#pageContent
{
	font: 14px Verdana, Sans-Serif;
	padding:5px;
}

#pageContent div.pageStatus,
#pageContent div.pageRevision,
#pageContent div#pageToc div.pageToc
{
	font-size:11px;
	padding:0px 5px 0px 5px;
}


#pageText,
#pageText table {
	font: 14px Verdana, Sans-Serif;
}
#pageText a,
p.modified a {
	color: #0000ff;
}
#pageText a:hover,
p.modified a:hover {
	color: #ff00ff;
	text-decoration:underline;
}
/***
 * content styles
 * class 'header_x' is heading styles, but not actual <hx>, like in lists, tables, etc.
 */
#title, #pageText h1, .header_1 {
	border-bottom: 1px solid #e6e6e6;
}
#title,
#pageText h1,
#pageText h2,
#pageText h3,
#pageText h4,
#pageText h5,
#pageText h6,
#attachments h1,
#files h2,
.header_1,
.header_2,
.header_3,
.header_4,
.header_5,
.header_6  {
	font-family: Tahoma, Verdana, Sans-Serif;
	margin-bottom: 0px;
	padding-bottom: 0;
	color: #000;
	text-decoration: none;
}
#pageText strong,
#pageText b
{
	font-weight:bold;
}
#pageText em
{
	font-style:italic;
} 
#title {
	padding-top: 6px;
	padding-left: 0px;
}
#pageText a.editsectionlink,
#title a.editsectionlink {
	text-decoration: none;
	visibility: hidden;
	padding-left: 4px;
}
h1#title {
	margin-top: 0;
}
#pageText h1,
#title,
#imageGallery h2,
#attachments h2,
#attachments h1,
.header_1 {
	font-size: 18pt;
}
#pageText h2,
.header_2 {
	font-size: 16pt;
}
#pageText h3,
.header_3 {
	font-size: 14pt;
}
#pageText h4,
.header_4 {
	font-size: 12pt;
}
#pageText h5,
.header_5 {
	font-size: 11pt;
}
#pageText h6,
.header_6 {
	font-size: 10pt;
}
#pageText p,
#pageText blockquote,
#pageText pre {
	line-height: 1.25;
	margin-top: 5px
	margin-bottom: 10px;
}
#pageText p {
	line-height: 1.5;
	padding-bottom:1.4em;
}
#pageText ul {
	margin-top:5px;
	margin-bottom:5px;
}
#pageText li {
	line-height: 1.25;
	margin-left:30px;
	padding-left:10px;
	line-height:1.5;
}
#pageText pre {
	padding: 1em;
	border: 1px dashed #000;
	background-color: #fafafa;
	overflow: auto;
	width: auto;
}
#pageText table {
	overflow: auto;
}

div#menuFiller
{
	font-family:arial,verdana,helvetica;
	font-size:12px;
}

div#menuFiller div.dmenu-wrap
{
	background:#fff;
	border:1px solid #999;
	padding:5px;	
}

div#menuFiller a
{
	text-decoration:none;
	margin:2px 0px 2px 0px;
}

div#menuFiller a span.text
{
	margin-left:10px;	
}

div.page
{
	font-family:arial,verdana,helvetica;
	font-size:14px;
}

div.page div.gallery,
div.page div.file,
div.page div#comments,
div.page div.pageInfo
{
	background:#f2f2f2;
	border:1px solid #999;
	padding:5px;
	margin-top:5px;	
}

div.page h2,
div.page dt
{
	font-size:14px;
	font-weight:bold;
	margin-bottom:5px;
}

div.page dt.pageIncomingLinks
{
	margin-top:10px;	
}

div.page div#comments div.commentNum
{
	background:#fff;
	border:1px solid #999;	
}

div.page div#comments div.comment
{
	border-bottom:1px solid #999;
	overflow:auto;
}

div.page div.gallery div.galleryCell
{
	background:#f8f8f8;
	border:1px solid #999;
}

div.page div.gallery div.galleryCell div.imageWrap
{
	padding:2px;	
}

div.page div.file table
{
	border:1px solid #ccc;	
	width:100%;	
}

div.page div.file table th
{
	background:#cecece;
	font-weight:bold;
	font-size:12px;	
	padding:5px 3px 5px 3px;
}

div.page div.file table tr
{
	border:1px solid #999;	
}

div.page div.file table td
{
	font-size:11px;	
	padding:3px;
	border-bottom:1px solid #ccc;
}

div.page div.file table td.bg2
{
	background:#f2f2f2;
}

#admin
{
}


#pageTypeAdmin
{
	font-family:arial,verdana,helvetica;
	font-size:11px;
}

#pageTypeAdmin div.atable table
{
	border:1px solid #ccc;	
	width:100%;
}

#pageTypeAdmin div.atable table th
{
	background:#cecece;
	font-weight:bold;
	font-size:12px;	
	padding:5px 3px 5px 3px;
}

#pageTypeAdmin div.atable table tr
{
	border:1px solid #999;	
}

#pageTypeAdmin div.atable table td
{
	font-size:11px;	
	padding:3px;
	border-bottom:1px solid #ccc;
}

#pageTypeAdmin div.atable table td.bg2
{
	background:#f2f2f2;
}

#pageTypeAdmin div.navigation
{
	padding:3px;
	background:#cecece;
	border:1px solid #999;
}

#pageTypeAdmin fieldset
{
	border:1px solid #ccc;
	margin-bottom:10px;
	padding:0px 5px 0px 5px;
}

#pageTypeAdmin fieldset legend
{
	font-size:14px;
	font-weight:bold;	
}

#pageTypeAdmin fieldset input,
#pageTypeAdmin fieldset select,
#pageTypeAdmin fieldset textarea
{
	margin-bottom:5px;
	margin-top:5px;
}

}