CMS Made Simple Forums

Code: Select all

body {
    background: url([[root_url]]/uploads/images/background.png) repeat-x;
    text-align: center;
}

img {
    border: 0;
}

div#page-wrapper {
    width: 870px;
    min-height: 400px;
    margin: 0 auto;
    text-align: left;
}

div#header {
    height: 180px;
    width: 870px;
    background: transparent;
    overflow: hidden;
    border-bottom: 2px solid #988ba6;
}

div#header-top {
    height: 140px;
    background: url([[root_url]]/uploads/images/title_bar_bg.png);
    border-bottom: 2px solid #988ba6;
    z-index: 0;
}

div#header-bottom {
    height: 40px;
    background: #cfc6d4;
    z-index: 0;
    border-left: 2px solid #988ba6;
    border-right: 2px solid #988ba6;
}

div#header-left {
    position: relative;
    top: -180px;
    left: 0px;
    height: 180px;
    width: 180px;
    float: left;
    z-index: 1;
}

div#header-right {
    position: relative;
    top: -180px;
    left: 0px;
    height: 180px;
    width: 570px;
    float: right;
    z-index: 1;
}

div#menuwrapper {
    margin-top: 145px;
    height: 30px;
    width: 560px;
    z-index: 2;
}

ul#primary-nav {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: inline;
}

ul#primary-nav a {
    position: relative;
    display: block;
    background: #988ba6;
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    height: 24px;
    float: left;
    font-family: "lucida", sans-serif; 
    font-size: 16px;
    color: #cfc6d4;
    text-decoration: none;
}

ul#primary-nav a:hover {
    position: relative;
    display: block;
    background: #cfc6d4;
    padding-top: 4px;
    padding-left: 10px;
    padding-right: 10px;
    margin-left: 5px;
    height: 24px;
    float: left;
    font-family: "lucida", sans-serif; 
    font-size: 16px;
    color: #988ba6;
    text-decoration: none;
}

div#main-wrapper {
    width: 850px;
    height: 200px;
    padding-top: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

div#news-wrapper {
    float: left;
    width: 210px;
    height: 200px;
    border: 1px solid #988ba6
}

div#body-wrapper {
    float: right;
    width: 630px;
    height: 200px;
    border: 1px solid #988ba6
}

div#search {
    float:right;
    margin-top: 95px;
    margin-right: 0px;
    padding: 5px;
    background: #cfc6d4;
    border: 2px solid #988ba6;
}

input.search-button {
    border: none;
    margin-left: 5px;
    height: 22px;
    width: 60px;
    padding: 0px 2px 2px 0px;
    cursor: pointer;
    background: #988ba6 no-repeat center center;
    font-family: "lucida", sans-serif; 
    font-size: 12px;
    color: #cfc6d4;
}

div#content {
    margin: 0.5em 0 1em 0;
    padding: 0px;
}

div.crbk {
    margin: 0;
    padding: 0;
    background: url([[root_url]]/uploads/images/up_right.png) no-repeat right bottom;
}

div.breadcrumbs {
    padding: 5px 0em 15px 20px;
    font-family: "lucida", sans-serif; 
    font-size: 90%;
    margin: 0px;
    background: url([[root_url]]/uploads/images/up_left.png) no-repeat left bottom;
}

div.breadcrumbs span.lastitem {
    font-weight: bold;
}

div.back1 {
    margin-left: 29%;
    margin-right: 10px;
    background: url([[root_url]]/uploads/ngrey/mainrt1.gif) no-repeat right top;
}

* html div.back1 {
    float: right;
    width: 69%;
    margin-left: 0%;
    margin-right: 0px;
    background: url([[root_url]]/uploads/ngrey/mainrt1.gif) no-repeat right top;
}

div.back2 {
    background: url([[root_url]]/uploads/ngrey/mainleft1.gif) no-repeat left top;
}

div.back3 {
    background: url([[root_url]]/uploads/ngrey/wbtmleft.gif) no-repeat left bottom;
}

div#sidebar {
    float: left;
    width: 26%;
    display: inline;
    margin: 0px 0px 0px 10px;
    padding: 0px;
}

div#sidebarb div#news {
    margin: 0 0 1em 0;
}

div#main {
    padding: 10px 15px;
    background: url([[root_url]]/uploads/ngrey/rtup.gif) no-repeat right bottom;
}

div.footback {
/* keep footer below content and menu */
	clear: both;
    width: 850px;
/* this sets 10px on right to let the right image show, the balance 10px left on next div */
	padding: 0px 10px 0px 0px;
/* you can set your own image here */
	background: url([[root_url]]/uploads/ngrey/wfootrt.gif) no-repeat right top;
}
div#footer {
/* this sets 10px on left to balance 10px right on last div */
	padding: 0px 0px 0px 10px;
/* color of text, the link color is set below */
	color: #595959;
/* you can set your own image here */
	background: url([[root_url]]/uploads/ngrey/wtopleft.gif) no-repeat left top;
}
div.leftfoot {
	float: left;
	width: 30%;
	margin-left: 20px
}
div#footer p {
/* sets different font size from default */
	font-size: 0.8em;
/* some air for footer */
	padding: 1.5em;
/* centered text */
	text-align: center;
	margin: 0;
}
div#footer p a {
    text-decoration: none;
    color: #595959;
}

/* as we hid all hr for accessibility we create new hr with div class="hr" element */
div.hr {
	height: 1px;
	padding: 1em;
	border-bottom: 1px dotted black;
	margin: 1em;
}
/* relational links under content */
div.left49 {
/* combined percentages of left+right equaling 100%  might lead to rounding error on some browser */
	width: 70%;
}
div.right49 {
	float: right;
	width: 29%;
/* set right to keep text on right */
	text-align: right;
}

div#content h1 {
/* font size for h1 */
	font-size: 2em;
	line-height: 1em;
	margin: 0;
}
div#content h2 {
	color: #294B5F;
/* font size for h2 the higher the h number the smaller the font size, most times */
	font-size: 1.5em;
	text-align: left;
/* some air around the text */
	padding-left: 0.5em;
	padding-bottom: 1px;
/* set borders around header */
	border-bottom: 1px solid #899092;
	border-left: 1.1em solid #899092;
/* a larder than h1 line height */
	line-height: 1.5em;
/* and some air under the border */
	margin: 0 0 0.5em 0;
}
div#content h3 {
	color: #294B5F;
	font-size: 1.3em;
	line-height: 1.3em;
	margin: 0 0 0.5em 0;
}
div#content h4 {
	color: #294B5F;
	font-size: 1.2em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}
div#content h5 {
	color: #294B5F;
	font-size: 1.1em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}
h6 {
	color: #294B5F;
	font-size: 1em;
	line-height: 1.3em;
	margin: 0 0 0.25em 0;
}
/* TEXT */
p {
/* default p font size, this is set different in some other divs */
	font-size: 1em;
/* some air around p elements */
	margin: 0 0 1.5em 0;
	line-height: 1.4em;
	padding: 0;
}
blockquote {
	border-left: 10px solid #ddd;
	margin-left: 10px;
}
strong, b {
/* explicit setting for these */
	font-weight: bold;
}
em, i {
/* explicit setting for these */
	font-style: italic;
}
/* Wrapping text in <code> tags. Makes CSS not validate */
code, pre {
/* css-3 */
	white-space: pre-wrap;
/* Mozilla, since 1999 */
	white-space: -moz-pre-wrap;
/* Opera 4-6 */
	white-space: -pre-wrap;
/* Opera 7 */
	white-space: -o-pre-wrap;
/* Internet Explorer 5.5+ */
	word-wrap: break-word;
	font-family: "Courier New", Courier, monospace;
	font-size: 1em;
}
pre {
/* black border for pre blocks */
	border: 1px solid #000;
/* set different from surroundings to stand out */
	background-color: #ddd;
	margin: 0 1em 1em 1em;
	padding: 0.5em;
	line-height: 1.5em;
	font-size: 90%;
}
/* Separating the divs on the template explanation page */
div.templatecode {
	margin: 0 0 2.5em;
}
/* END TEXT */
/* LISTS */
/* lists in content need some margins to look nice */
div#main ul,
div#main ol,
div#main dl {
	font-size: 1.0em;
	line-height: 1.4em;
	margin: 0 0 1.5em 0;
}
div#main ul li,
div#main ol li {
	margin: 0 0 0.25em 3em;
}
/* definition lists topics on bold */
div#main dl {
	margin-bottom: 2em;
	padding-bottom: 1em;
	border-bottom: 1px solid #c0c0c0;
}
div#main dl dt {
	font-weight: bold;
	margin: 0 0 0 1em;
}
div#main dl dd {
	margin: 0 0 1em 1em;
}
/* END LISTS */

Code: Select all

{process_pagedata}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
{* Change lang="en" to the language of your site *}

{* note: anything inside these are smarty comments, they will not show up in the page source *}

  <head>
    <title>{sitename} - {title}</title>
{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

 {metadata}
{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

 {cms_stylesheet}
{* This is how all the stylesheets attached to this template are linked to it *}

 {cms_selflink dir="start" rellink=1}
 {cms_selflink dir="prev" rellink=1}
 {cms_selflink dir="next" rellink=1}
{* Relational links for interconnections between pages, good for accessibility and Search Engine Optimization *}

{* the literal below and the /literal at the end are needed whenever there are {"curly brackets"} as smarty will think it's something to process and will throw an error *}
 {literal}
<__script__ type="text/JavaScript">
<!--
//pass min and max - measured against window width
function P7_MinMaxW(a,b){
var nw="auto",w=document.documentElement.clientWidth;
if(w>=b){nw=b+"px";}if(w<=a){nw=a+"px";}return nw;
}
//-->
</__script>
    <!--[if lte IE 6]>
    <style type="text/css">
    #pagewrapper {width:expression(P7_MinMaxW(720,950));}
    #container {height: 1%;}
    </style>
    <![endif]-->
    {/literal}
{* The min and max page width for Internet Explorer is set here. For other browsers it's in the stylesheet "Layout: Top menu + 2 columns" *}

    <!--[if lte IE 6]>
    <__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
    <![endif]--> 
{* The above JavaScript is required for CSSMenu to work in IE *}
  </head>
  </__body>
    <div id="page-wrapper">

{* start accessibility skip links, anything with the class of accessibility is hidden with CSS from visual browsers *}
      <ul class="accessibility">
        <li>{anchor anchor='menu_vert' title='Skip to navigation' accesskey='n' text='Skip to navigation'}</li>
        <li>{anchor anchor='main' title='Skip to content' accesskey='s' text='Skip to content'}</li>
      </ul>
{* end accessibility skip links *}

      <hr class="accessibility" />
{* Horizontal ruler that is hidden for visual browsers by CSS *}

	  <div id="header">
	    <div id="header-top">
		</div>
		
		<div id="header-bottom">
		</div>
		
		<div id="header-left">
		  <img src="uploads/images/wpcc_logo.png" height="180px">
		</div>
		
		<div id="header-right">
                                    <div id="search">
                                        {search}
                                    </div>

		    {menu template='cssmenu.tpl'}
		</div>
      </div>

{* Start Breadcrumbs *}
      <div class="crbk">
{* holds the right image, we need 2 divs to be able to make this site fluid, if it was fixed width we could use one div, one image  *}

        <div class="breadcrumbs">
        {breadcrumbs starttext='You are here' root='Home' delimiter='»'}
          <hr class="accessibility" />
        </div>
      </div>
{* End Breadcrumbs *}

{* Start Content *}
      <div id="content">

{* Start Sidebar *}
        <div id="sidebar">
          <div id="sidebarb">
          {content block='Sidebar'}

{* Start News, stylesheet  "Module: News" *}
            <div id="news">
              <h2>News</h2>
              {news number='3' detailpage='news'}
            </div>
{* End News *}

          </div>
        </div>
{* End Sidebar *}

{* Start Content Area, the back1, back2, back3, hold the 3 outside images, main holds the 4th one, to make the box complete, if the template were fixed width not fluid we could use just 2 divs and 2 images, 1 top 1 bottom *}
        <div class="back1">
          <div class="back2">
            <div class="back3">
              <div id="main">
                <div style="float: right;">{print showbutton=true script=true}</div>
                <h2>{title}</h2>
                {content}
                <br />{* to insure space below content *}
                <hr class="accessibility" />
                <div class="clear"></div>
              </div>
            </div>
          </div>
        </div>
{* End Content Area *}

      </div>
{* End Content *}

{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
      <div class="footback">
        <div id="footer">
{* stylesheet  "Navigation: FatFootMenu" *}
          <div id="fooleft">
          {menu}
          </div>
          <div id="footrt">
          {global_content name='footer'}
          </div>
          <div class="clear"></div>
        </div>
      </div>
{* End Footer *}

    </div>
{* end pagewrapper *}

  <__body>
</__html>