Difference between revisions of "Template Customization"

From AWBS Wiki
Jump to: navigation, search
m (Protected "Template Customization" [edit=sysop:move=sysop] [cascading])
(→‎Editing the Stylesheet)
Line 13: Line 13:
  
 
== Editing the Stylesheet ==
 
== Editing the Stylesheet ==
 +
The following code will be found in '''header.php'''
 +
<pre><!-- CSS -->
 +
<!-- Load default styles for elements -->
 +
<link rel="stylesheet" type="text/css" href="templates/<?=$templatedir?>/css/main.css" title="main" media="screen" />
 +
<!--[if IE]>
 +
<script type="text/javascript" src="templates/<?=$templatedir?>/js/menu.js"></script>
 +
<link rel="stylesheet" type="text/css" href="templates/<?=$templatedir?>/css/IE.css" />
 +
<![endif]-->
 +
 +
<!-- EOF CSS --></pre>
 +
 +
'''main.css''' is the main style sheet and it contains only 2 import lines:
 +
<pre>@import "style.css";
 +
@import "menu.css";</pre>
 +
#style.css is the main style sheet
 +
#menu.css is the horizontal menu's style sheet
 +
 +
'''Style.css's explanation'''
 +
<pre>@charset "utf-8";
 +
/*
 +
CSS Document
 +
This is an AWBS CSS file commented out.
 +
This has an explanation of each part of the CSS file. Read it well, it will be great help when customizing your AWBS template or making your own.
 +
 +
Written by: Ahmed Samir (ahmed@awbs.com) AWBS Templating design and support.
 +
 +
 +
This commented CSS file is from the _rouge_ Theme.
 +
*/
 +
 +
/*
 +
This is the HTML layout of the page, the background you set here will be a base background -
 +
for all pages. You can add a background *over it* in the body property.
 +
*/
 +
html {
 +
/* Setting the background */
 +
background-image:url("../images/h2bg.png");
 +
/*
 +
The overflow property sets what happens if the content of an element overflow its area.
 +
In here, its set to auto so if the content is clipped, the browser should display a scroll-bar to see the rest of the content
 +
*/
 +
overflow:auto;
 +
}
 +
 +
/* The body tag, all your main general settings are here */
 +
body {
 +
/* setting font family */
 +
font-family:Verdana, Arial, Helvetica, sans-serif;
 +
/*
 +
body background, it comes over the html { } background.
 +
url(); is the path to the background image.
 +
top left repeat-x:
 +
top left: background image is positioned on top left side of the page.
 +
repeat-x: background image repeating horizontally
 +
*/
 +
background:url("../images/body.jpg") top left repeat-x;
 +
/* font size */
 +
font-size:12px;
 +
/* default text color */
 +
color:#000000;
 +
/*
 +
word-spacing is for increasing or decreasing the space between words
 +
It can be either set to normal or a numeric length, it isn't important to have.
 +
*/
 +
word-spacing:normal;
 +
/*
 +
The CSS margin properties define the space around elements.
 +
It is possible to use negative values to overlap content.
 +
The top, right, bottom, and left margin can be changed independently using separate properties.
 +
A shorthand margin property can also be used to change all of the margins at once.
 +
 +
They are both set to 0 as to make sure background images and layout is
 +
*/
 +
margin:0;
 +
padding:0;
 +
/* sets the default body height percentage from the entire page */
 +
height:100%;
 +
/* Text alignment, could be left, right, center, or justify */
 +
text-align:justify;
 +
/* cursor style - it isn't really important to have it. */
 +
cursor:default;
 +
}
 +
 +
/*
 +
The wrapper class is essential in the rouge and noir theme, its what holds and centers all the -
 +
contents so they appear the way they are.
 +
margins needs to be set to 0 auto 0 so header and footer would be touching the page's start/end.
 +
the width is relative, you can set it to your liking.
 +
*/
 +
.wrapper {
 +
width:768px;
 +
margin: 0 auto 0;
 +
}
 +
 +
/* property used while added a <div class="clear"></div> needed for spacing at times. */
 +
.clear {
 +
clear:both;
 +
}
 +
 +
/* the header */
 +
.header {
 +
/* height: its set according to your header image's height */
 +
height:350px;
 +
/*
 +
url: the path for the image
 +
center top: positioned in the middle of the header space, aligned to top
 +
no-repeate: means the background will never be repeated to fill in space.
 +
*/
 +
background:url("../images/header.png") center top no-repeat;
 +
}
 +
 +
/* links displayed in the header area */
 +
.header a {
 +
/* link color */
 +
color:#CC0000;
 +
/* the decoration, set to none for uniqueness */
 +
text-decoration:none;
 +
}
 +
 +
/* img tag properties */
 +
img {
 +
/*
 +
border: set to 0 because some browser will force an unwanted border around images.
 +
vertical-align: this is optional, its set to middle in here to fit how the theme looks generally, but its recommended to have it to set to middle.
 +
*/
 +
border:0;
 +
vertical-align:middle;
 +
}
 +
 +
/* h* means header text - font-weiht:700 means the text will be bold, this is also optional */
 +
h1,h2,h3,h4,h5,h6 {
 +
font-weight:700;
 +
}
 +
 +
/*
 +
the lines below are meant to set header text sizes.
 +
em is like the percentage or the ratio of the current default font size.
 +
1 em = current font size 0% more or less
 +
1.5em = 150% current font size. e.g: if the current font size is 12px, 1.5em = 18px -
 +
2em = 24px, 1.1 = 101%, 0.75 = 75% and so on.
 +
 +
*/
 +
h1 {
 +
font-size:1.5em;
 +
}
 +
h2 {
 +
font-size:2em;
 +
}
 +
h3 {
 +
font-size:1.1em;
 +
}
 +
h4 {
 +
font-size:0.75em;
 +
}
 +
h5 {
 +
font-size:0.50em;
 +
}
 +
h6 {
 +
font-size:0.25em;
 +
}
 +
 +
/*  setting margins for all widly used html tags, also useful for making the layout slick and stable */
 +
body, div, dl, dt, dd, pre, h1, h2, h3, h4, h5, h6, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
 +
margin:0;
 +
padding:0;
 +
}
 +
 +
/* These classes are for the grid in pages like imanage.php or spincheck.php. */
 +
.row_0, .row1_0 {
 +
background-color:#FFFAFF;
 +
}
 +
.row_1, .row1_1 {
 +
background-color:#FFFFFF;
 +
}
 +
tr.row1_0 td {
 +
background-color:#FFFAFF;
 +
}
 +
tr.row1_1 td {
 +
background-color:#FFFFFF;
 +
}
 +
 +
/*
 +
The table ID doc is that main table that holds all data and other tables/contents inside.
 +
The tablehead is a none-unique ID. Its used to have a header style where page title is placed.
 +
*/
 +
#doc td#tablehead {
 +
/* making sure all paddings are 0 excpet for the left padding, to put a space between text and border. */
 +
margin: 0;
 +
padding-bottom:0px;
 +
padding-top:0px;
 +
padding-left:10px;
 +
}
 +
 +
/* General tables properties */
 +
table {
 +
/*
 +
The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML
 +
Either use separate or collapse:
 +
separate  Borders are detached
 +
collapse Default. Borders are collapsed into a single border when possible
 +
*/
 +
border-collapse:collapse;
 +
/*
 +
The border-spacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).
 +
*/
 +
border-spacing:0;
 +
}
 +
 +
/* Properties for all TD's inside a tableID data */
 +
td#data {
 +
/* setting the text/content padding from the borders */
 +
padding:3px;
 +
/* contents vertical align, setting it to top saves the hassel of having data misplaced */
 +
vertical-align:top;
 +
}
 +
 +
/* Properties for all TD's inside a tableCLASS data */
 +
table.data td {
 +
/* setting the text/content padding from the borders */
 +
padding:2px;
 +
}
 +
 +
/* Properties for the tableID data */
 +
table#data {
 +
/* Setting a background color */
 +
background-color:#FFFFFF;
 +
/*
 +
Border propeties
 +
1 pixel border width
 +
solid border (could be dashed or dotted)
 +
#CC0000 is the border color
 +
*/
 +
border:1px solid #CC0000;
 +
/* Text padding */
 +
padding:2px;
 +
}
 +
 +
/* The <sub> tag defines subscript text. The <sup> tag defines superscript text. */
 +
sup, sub {
 +
/* The line-height property sets the distance between lines */
 +
line-height:1px;
 +
/*
 +
Defines the vertical alignment
 +
text-top means that the top of the element is aligned with the top of the parent element's font
 +
*/
 +
vertical-align:text-top;
 +
}
 +
/* <sub> tag style */
 +
sub {
 +
/* The bottom of the element is aligned with the bottom of the parent element's font */
 +
vertical-align:text-bottom;
 +
}
 +
 +
/* General styles for <input>, <textarea>, and <select> tags */
 +
input, textarea, select {
 +
/* Setting font size */
 +
font-size:12px;
 +
/* setting padding */
 +
padding:1px;
 +
}
 +
 +
/*
 +
The <ol> tag defines the start of an ordered list.
 +
The <ul> tag defines an unordered list.
 +
*/
 +
ul, ol {
 +
/*
 +
Making sure that the default list will have no signs, circles squares beside it, its more of a text<br />text and so on.
 +
It has been made this way to fit the theme.
 +
*/
 +
list-style:none;
 +
/* setting a fixed left margin */
 +
margin-left:5px;
 +
/* setting a fixed left padding */
 +
padding-left:5px;
 +
}
 +
 +
/* FAQ ordered list, used in faq_full.php and faq.php */
 +
ol.faq {
 +
/* The marker is a number */
 +
list-style:decimal;
 +
/* Setting left margin */
 +
margin-left:15px;
 +
/* Setting left padding */
 +
padding-left:15px;
 +
/* Text will be bold */
 +
font-weight:700;
 +
}
 +
 +
/* Making a class for the ordered list to use a square marker */
 +
ol.square {
 +
/* Setting the list style to square */
 +
list-style:square;
 +
/* Setting left margin */
 +
margin-left:15px;
 +
/* Setting left padding */
 +
padding-left:15px;
 +
}
 +
 +
/* Making a class for the ordered list to use a circle marker */
 +
ol.circle {
 +
/* Setting the list style to circle */
 +
list-style:circle;
 +
/* Setting left margin */
 +
margin-left:15px;
 +
/* Setting left padding */
 +
padding-left:15px;
 +
}
 +
 +
/* The FAQ ordered list's child <p> tags properties */
 +
ol.faq p {
 +
/* font-weight 400 means the text is normal (not bold) */
 +
font-weight:400;
 +
padding-right:10px;
 +
padding-bottom:10px;
 +
/* Text colour */
 +
color:#3d658b;
 +
}
 +
 +
/* The submasthead is a data container, its customizeable, currently it is being used in the footer */
 +
#submasthead {
 +
background:#000000 url("../images/menuBG.png") repeat-x;
 +
border:0px;
 +
font-weight:700;
 +
color:#FFFFFF;
 +
height:20px;
 +
padding:7px;
 +
}
 +
/*
 +
.forlinks is a class used for the bottom quick links, its setting the style
 +
a = active link
 +
a:hover = link with mouse over
 +
a:visited = link that has been visited already
 +
*/
 +
.forlinks, .forlinks a, .forlinks a:hover, .forlinks a:visited {
 +
text-align:center;
 +
color:#FFFFFF;
 +
}
 +
/* The copyright <td> */
 +
td.copyright {
 +
font-family:"Trebuchet MS";
 +
}
 +
 +
a {
 +
font-weight:700;
 +
color:#CC0000;
 +
}
 +
a:hover { color:#000000; }
 +
a:visited { }
 +
 +
/* The tablehead ID is used to style the <td> that holds each page's title */
 +
#tablehead {
 +
background:#000000 url("../images/menuBG.png") repeat-x;
 +
border:0px;
 +
font-weight:700;
 +
color:#FFFFFF;
 +
height:33px;
 +
padding:10px;
 +
}
 +
 +
/*
 +
This is the main container table, it holds all data inside of it.
 +
*/
 +
table#doc {
 +
/* setting table's maximum width, means it cannot exceed this limit */
 +
max-width:768px;
 +
margin:0 auto;
 +
/* setting table's minimum width, means it cannot go smaller than this limit */
 +
min-width:760px;
 +
/* setting the actual width */
 +
width:768px;
 +
/* default background colour for it and all child tables */
 +
background-color:#FFFFFF;
 +
}
 +
/* footer <td> used to display the POWERED BY AWBS text.*/
 +
.footer {
 +
background-image:url("../images/darkred_flip.gif");
 +
font-weight:700;
 +
font-size:0.75em;
 +
color:#FFFFFF;
 +
text-align:left;
 +
padding:5px;
 +
border-left:1px solid #CC0000;
 +
border-right:1px solid #CC0000;
 +
}
 +
/* a parent for a .forlinks classed <td>/<div> */
 +
table#doc .footers {
 +
border-left:1px solid #CC0000;
 +
border-right:1px solid #CC0000;
 +
}
 +
/* used to place a W3 XHTML/CSS validation link */
 +
td#W3 {
 +
text-align:center;
 +
padding:5px;
 +
vertical-align:middle;
 +
}
 +
/* the copyright holder's font settings. Its not important, you can leave it out */
 +
td.copyright {
 +
font-family:"Trebuchet MS";
 +
}
 +
/*
 +
This is the box that appears when you click many of the search forms' submit button, like the one in check.php
 +
*/
 +
#blockDiv {
 +
width:250px;
 +
background-color:#FFFFFF;
 +
border:1px solid #CC0000;
 +
text-align:center;
 +
position:absolute;
 +
left: 50%;
 +
top:100%;
 +
margin-left: -125px;
 +
}
 +
#blockDiv p {
 +
font-weight:700;
 +
display:block;
 +
padding:5px;
 +
margin:5px;
 +
}
 +
#blockDiv img {
 +
padding:10px;
 +
margin:10px;
 +
}
 +
/******** Fancyform ********/
 +
/*
 +
Fancyform is an Ajax script used to style the check and radio boxes on the site.
 +
 +
.checked : checked checbox
 +
.unchecked : unchecked checkbox
 +
.selected : selected radio
 +
.unselected : unselected radio
 +
*/
 +
/*
 +
Global default settings
 +
*/
 +
.checked, .unchecked, .selected, .unselected {
 +
/* leave the following as they are, do not modify */
 +
display:block;
 +
padding:2px;
 +
padding-left:32px;
 +
background-position:8px center;
 +
background-repeat:no-repeat;
 +
/* Start editing here */
 +
border:0;
 +
clear:both;
 +
cursor:pointer;
 +
font-weight:700;
 +
}
 +
.checked {
 +
background-color:transparent;
 +
background: url("../images/checkbox_red.png") no-repeat 0 -51px;
 +
}
 +
.unchecked {
 +
background-color:transparent;
 +
background: url("../images/checkbox_red.png") no-repeat 0 -1px;
 +
}
 +
.selected {
 +
background-color:transparent;
 +
background: url("../images/radio_red.png") no-repeat 0 -52px;
 +
 +
}
 +
.unselected {
 +
background-color:transparent;
 +
background: url('../images/radio_red.png') no-repeat 0 -2px;
 +
}
 +
 +
/*
 +
basically these are a bunc of styles, mainly used to add borders to texts.
 +
They work for any tag. <p><div><h1,2,3,4...>
 +
 +
underline : adds a dotted border under a text, with bold fonts.
 +
overline : adds a dotted border over a text, with bold fonts.
 +
sline : similar to underline, but more space underneath the border.
 +
dline : double lines, over and underneath.
 +
*/
 +
#underline {
 +
border-bottom:1px dotted #000000;
 +
font-weight:700;
 +
font-size:1.1em;
 +
}
 +
#overline {
 +
border-bottom:1px dotted #000000;
 +
font-weight:700;
 +
padding:4px;
 +
font-size:1.1em;
 +
}
 +
#sline {
 +
border-bottom:1px dotted #000000;
 +
font-weight:700;
 +
padding:4px;
 +
font-size:1.1em;
 +
}
 +
#dline {
 +
border-bottom:1px dotted #000000;
 +
border-bottom:1px dotted #000000;
 +
font-weight:700;
 +
padding:4px;
 +
font-size:1.1em;
 +
}
 +
 +
/*
 +
The <hr /> tag is for placing a horizontal line. Basically, this is a custom style for horizontal lines.
 +
 +
hr.error : styling a horizontal line with an .error class, usually used in error messages display
 +
hr.info : similar to the error class, but used in informative messages.
 +
 +
both are customizable, of course.
 +
*/
 +
hr {
 +
border:0px;
 +
height:1px;
 +
color:#3d658b;
 +
border-bottom:1px dotted #000000;
 +
}
 +
hr.error {
 +
border:0px;
 +
height:1px;
 +
color:#FF0000;
 +
background-color:#FF0000;
 +
}
 +
hr.info {
 +
border:0px;
 +
height:1px;
 +
color:#3d658b;
 +
background-color:#3d658b;
 +
}
 +
 +
/* These are width percentage classes, self explanatory. Add as many percentages as you like */
 +
.width-100 { width:100%; }
 +
.width-99  { width:99%;  }
 +
.width-98  { width:98%;  }
 +
.width-97  { width:97%;  }
 +
.width-95  { width:95%;  }
 +
.width-90  { width:90%;  }
 +
.width-85  { width:85%;  }
 +
.width-80  { width:80%;  }
 +
.width-75  { width:75%;  }
 +
.width-70  { width:70%;  }
 +
.width-65  { width:65%;  }
 +
.width-60  { width:60%;  }
 +
.width-55  { width:55%;  }
 +
.width-50  { width:50%;  }
 +
.width-45  { width:45%;  }
 +
.width-40  { width:40%;  }
 +
.width-35  { width:35%;  }
 +
.width-33  { width:33%;  }
 +
.width-30  { width:30%;  }
 +
.width-25  { width:25%;  }
 +
.width-20  { width:20%;  }
 +
.width-15  { width:15%;  }
 +
.width-10  { width:10%;  }
 +
.width-5  { width:5%;  }
 +
.width-2  { width:2%;  }
 +
 +
/* bottom padding classes, most of them are used already, add as many as you need */
 +
.pb-2 { padding-bottom:2px; }
 +
.pb-5 { padding-bottom:5px; }
 +
.pb-10 { padding-bottom:10px; }
 +
.pb-20 { padding-bottom:20px; }
 +
 +
/* Overall padding classes, most of them are used already, add as many as you need */
 +
.p-2 { padding:2px; }
 +
.p-5 { padding:5px; }
 +
.p-10 { padding:10px; }
 +
.p-15 { padding:15px; }
 +
.p-20 { padding:20px; }
 +
 +
/* vertical alignment classes, use a class="vlt", vlm, vlb. Top, Middle, Bottom */
 +
.vlt { vertical-align:top; }
 +
.vlm { vertical-align:middle; }
 +
.vlb { vertical-align:bottom; }
 +
 +
 +
/* Text alignment classes, use a class="ac", ar, al. Center, Right, Left */
 +
.ac { text-align:center; }
 +
.ar { text-align:right; }
 +
.al { text-align:left; }
 +
 +
/* width classes, most of them are already used, so you can add as much you need */
 +
.w-20 { width:20px; }
 +
.w-40 { width:40px; }
 +
.w-60 { width:60px; }
 +
.w-80 { width:80px; }
 +
.w-90 { width:90px; }
 +
.w-95 { width:95px; }
 +
.w-98 { width:98px; }
 +
.w-99 { width:99px; }
 +
.w-100 { width:100px; }
 +
 +
/* A mostly use height class, add more if needed */
 +
.h-10 { height:10px; }
 +
 +
/* background classes, they are used and placed as an example as well. add more colors if needed */
 +
.bg-white { background-color:#FFFFFF; }
 +
.bg-black { background-color:#000000; }
 +
 +
/* This div is used to place a news article logo in the news box */
 +
div#newsImage {
 +
position:relative;
 +
width:80px;
 +
height:100%;
 +
float:left;
 +
background-color:#FFFFFF;
 +
text-align:center;
 +
}
 +
 +
/* This div is used to place a testimonial logo in the testimonials box */
 +
div#testiImage {
 +
position:relative;
 +
width:80px;
 +
height:60px;
 +
float:left;
 +
text-align:center;
 +
background-image:url("../images/testimonialsBig.png");
 +
background-position:center;
 +
background-repeat:no-repeat;
 +
}
 +
 +
/* This div is used to place a domain checking logo in the domain check box */
 +
div#checkDomainImage {
 +
position:relative;
 +
width:80px;
 +
height:70px;
 +
float:left;
 +
text-align:center;
 +
background-image:url("../images/information.png");
 +
background-position:center;
 +
background-repeat:no-repeat;
 +
}
 +
 +
/* This div is used to place a cart logo in the cart box */
 +
div#cartImage {
 +
position:relative;
 +
width:130px;
 +
height:100%;
 +
float:right;
 +
text-align:center;
 +
}
 +
 +
/* this table contains all the data in the header, language box, links etc... */
 +
table#masthead-layout {
 +
width:100%;
 +
height:100%;
 +
}
 +
 +
/* A style for an ordered list, placing a green arrow as a marker. Choose a different image if you like */
 +
ol.ra {
 +
list-style-image:url("../images/rightarrowon.gif");
 +
padding-left:20px;
 +
}
 +
 +
/* the login box image */
 +
td.login {
 +
background-image:url("../images/key.jpg");
 +
}
 +
 +
/* the why-register list list */
 +
ul.whyregister li {
 +
padding-left:30px;
 +
font-weight:700;
 +
background:url("../images/icon_list.gif") no-repeat 15px 50%;
 +
}
 +
 +
/* placing a background image in aLogin.php for the "make a new account" column */
 +
td.createacct {
 +
background-image:url("../images/register.png");
 +
}
 +
/* Styles the <td>'s for aLogin.php to make it easy to place proper images as backgrounds */
 +
td.login, td.createacct {
 +
background-repeat:no-repeat;
 +
background-position:bottom right;
 +
vertical-align:top;
 +
height:400px;
 +
padding-top:20px;
 +
}
 +
 +
/* information display <div> related to hr.info */
 +
div.info {
 +
font-weight:700;
 +
color:#3d658b;
 +
border:1px solid #0000FF;
 +
background-color:#e4edfa;
 +
padding:3px;
 +
width:99%;
 +
}
 +
 +
/* error display <div> related to hr.error */
 +
div.error, div.alert {
 +
font-weight:700;
 +
color:#FF0000;
 +
border:1px solid #FF0000;
 +
background-color:#FFCCCC;
 +
padding:3px;
 +
width:99%;
 +
}
 +
 +
/* General style for all text inputs, customizeable of course */
 +
input, select, textarea, button {
 +
border:1px;
 +
color:#FFFFFF;
 +
font-weight:normal;
 +
background:#A82A2D url("../images/darkred.gif");
 +
padding:2px;
 +
}
 +
/* placing a unique background colour for <textarea> tags */
 +
textarea {
 +
background:#A82A2D;
 +
}
 +
 +
/* The bluecheck class is used for links in some pages like faq.php and services.php it gives a style to links */
 +
a.bluecheck {
 +
padding-left:36px;
 +
background:url("../images/red-check.png") no-repeat 15px 50%;
 +
}
 +
/* related to a.bluecheck, the mouse hover effect, it changes the link's background box */
 +
a.bluecheck:hover {
 +
padding-left:36px;
 +
background:url("../images/square-red.png") no-repeat 15px 50%;
 +
}
 +
/* The link you click on pages containing a bluecheck link to take you to page's top */
 +
a.toTop {
 +
display:block;
 +
padding:10px 0px 10px 0px;
 +
width:100%;
 +
background:url("../images/24-em-up.png") no-repeat 15px 50%;
 +
background-position:right;
 +
text-align:left;
 +
vertical-align:middle;
 +
text-align:right;
 +
text-decoration:none;
 +
}
 +
 +
/* same as a.toTop, but its usually placed in the footer */
 +
a.mainTop {
 +
display:block;
 +
padding:10px 0px 10px 0px;
 +
width:25px;
 +
background:url("../images/24-em-up.png") no-repeat 15px 50%;
 +
background-position:center;
 +
vertical-align:middle;
 +
}
 +
/* a Firefox/IE7 supported class, and a style applied to input type image to remove the border IE6 usually places around due to general input classes */
 +
input[type="image"], .noborder {
 +
border:0px;
 +
background-color:#FFFFFF;
 +
}
 +
 +
/******************* RSS Feeds ********************/
 +
/*
 +
These styles are used in includes/rss/rssinc.php.
 +
They are quite essential in how RSS feed links are displayed.
 +
You don't really need to change anything here, maybe the images.
 +
*/
 +
.feed-button {
 +
  padding:10px 0;
 +
}
 +
.feed-button a {
 +
padding:10px 15px 10px 36px;
 +
background:url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
 +
}
 +
.feed-button a:hover {
 +
background:url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
 +
}
 +
.feed-list {
 +
  margin:0 0 15px 15px;
 +
  padding:0;
 +
  list-style-type:none;
 +
}
 +
.feed-list li {
 +
  margin:0 0 10px 0;
 +
  padding:0;
 +
  list-style-type:none;
 +
}
 +
.feed-list li a, a#rssfeed {
 +
  padding:0 0 0 19px;
 +
  background:url("../images/feed-icon-14x14.png") no-repeat 0 50%;
 +
  list-style-type:none;
 +
}
 +
.rssclass{
 +
padding: 3px;
 +
display:block;
 +
}
 +
.rsstitle {
 +
font-weight:700;
 +
padding:0 0 0 19px;
 +
background:url("../images/tag.gif") no-repeat 0 50%;
 +
color:#3d658b ;
 +
display:block;
 +
 +
}
 +
.rsstitle a {
 +
text-decoration:none;
 +
}
 +
.rssdate {
 +
color:#000000;
 +
font-style:italic;
 +
padding-bottom:5px;
 +
display:block;
 +
height:20px;
 +
}
 +
.rssdescription{
 +
display:block;
 +
}
 +
 +
 +
/*
 +
Forms styling.
 +
There is a form class called .awform (AWBS Form) - Its used to add some special looks for all forms.
 +
It works when you place a table inside a <fieldset> tag, table title will be a text put in a <legend> tag.
 +
It basically works like this:
 +
<form class="awform">
 +
<fieldset>
 +
<legend>Title here</legend>
 +
<table>
 +
<tr>
 +
<td><em>*</em>important field</td>
 +
<td>Some data here</td>
 +
</tr>
 +
</table>
 +
</fieldset>
 +
</form>
 +
 +
*/
 +
 +
/* setting the style for the fieldset, bottom margin */
 +
.awform fieldset { margin-bottom: 10px; }
 +
 +
/* legend style */
 +
.awform legend {
 +
padding: 0 2px;
 +
font-weight: 700;
 +
margin: 0 -7px; /* IE Win _margin */
 +
padding-bottom:8px;
 +
}
 +
/*
 +
The <em> Renders as emphasized text, in _awform_ it will be used to mark important fields.
 +
It will make them red and bold to make them more noticeable
 +
*/
 +
.awform em {
 +
font-weight: 700;
 +
font-style: normal;
 +
color: #f00;
 +
}
 +
/* form margin and padding */
 +
form.awform {
 +
margin:5px;
 +
padding:5px
 +
}
 +
/* more legend and label styles */
 +
.awform legend { padding-left: 0; }
 +
.awform legend, .awform label {
 +
color: #000000;
 +
font-weight:700;
 +
}
 +
/* How the fieldset should look like */
 +
.awform fieldset {
 +
/* no border */
 +
border: none;
 +
/* but place a top border with a color that fits the theme */
 +
border-top: 1px solid #CC0000;
 +
/* background image, use one that fits the theme */
 +
background: url("../images/awform-fieldset.gif") left bottom repeat-x;
 +
}
 +
/* for nested fieldsets */
 +
.awform fieldset fieldset {
 +
background: none;
 +
}
 +
/* the table <td> tags will have a small border, made with an image */
 +
.awform fieldset td , table .awflike td {
 +
padding: 5px 10px 7px;
 +
background: url("../images/awform-divider.gif") left bottom repeat-x;
 +
}
 +
/*
 +
paddZero is mostly used in search only forms, like check.php and manage.php etc...
 +
*/
 +
.awform fieldset td#paddZero {
 +
padding: 5px 0px 20px;
 +
}
 +
/* Global form setting, works for all forms */
 +
form {
 +
margin:0px;
 +
}
 +
 +
/* color classes, used in various places, add as many as needed */
 +
.red {
 +
color:#FF0000;
 +
}
 +
.green {
 +
color:#008800;
 +
}
 +
.blue {
 +
color:#0033CC;
 +
}
 +
.black {
 +
color:#000000;
 +
}
 +
 +
/* Text styles */
 +
.bold {
 +
font-weight:700;
 +
}
 +
.italic {
 +
font-style:italic;
 +
}
 +
.uline {
 +
text-decoration:underline;
 +
}
 +
.center {
 +
text-align:center;
 +
}
 +
 +
/* font families, add as many as you need */
 +
.verdana {
 +
font-family:Verdana, Arial, Helvetica, sans-serif;
 +
}
 +
.georgia {
 +
font-family:Georgia, "Times New Roman", Times, serif;
 +
}
 +
.trebu {
 +
font-family:"Trebuchet MS";
 +
}
 +
 +
/* Success and failure are styles used on many tags in various places in the tamplate */
 +
.success {
 +
color:#008800;
 +
padding:10px 15px 10px 20px;
 +
background:url("../images/chk_on.png") no-repeat 15px 50%;
 +
}
 +
.failure {
 +
color:#FF0000;
 +
padding:10px 15px 10px 20px;
 +
background:url("../images/chk_off.png") no-repeat 15px 50%;
 +
}
 +
 +
/* rssinc.php related styles, leave them as they are, unless you modify rssinc.php */
 +
div#rssnewsPageIndex {
 +
height:170px;
 +
overflow:auto;
 +
}
 +
div#rssnewsPageOther {
 +
height:98%;
 +
overflow:auto;
 +
}
 +
 +
/*
 +
TBS is usually associated with the paddZero awform styled table, it adds image to the button
 +
used in most search forms
 +
*/
 +
input#tbs {
 +
width:125px;
 +
height:17px;
 +
font-weight:700;
 +
padding-left:20px;
 +
padding-bottom:3px;
 +
font-size:smaller;
 +
border:1px solid #CC0000;
 +
background:#A82A2D url("../images/find.png");
 +
background-repeat:no-repeat;
 +
background-position: center left;
 +
}
 +
/* Dynamic toolip Div imanage.php ONLY CHANGE COLOURS!!!! */
 +
div#tipDiv {
 +
position:absolute;
 +
visibility:hidden;
 +
left:0; top:0; z-index:10000;
 +
background-color:#FFFFFF;
 +
border:1px solid #CC0000;
 +
width:400px; padding:4px;
 +
color:#000; font-size:11px; line-height:1.2;
 +
}
 +
 +
/* Accordion related CSS in welcome.php */
 +
/* The main Accordion container */
 +
#accordion {
 +
    width:100%;
 +
    margin-top:0px;
 +
}
 +
/* Accordion's headerv */
 +
div#accordion .panelheader, .TabTitleBar {
 +
background:#000000 url("../images/menuBG.png") repeat-x;
 +
height:20px;
 +
color:#FFFFFF;
 +
padding-left:5px;
 +
padding-top:5px;
 +
font-weight:700;
 +
cursor:pointer;
 +
}
 +
/*
 +
Accordion header's links
 +
.TabTitleBar is used in the usermenu
 +
*/
 +
div#accordion .panelheader a, .TabTitleBar a {
 +
color:#FFFFFF;
 +
}
 +
 +
/* When you hover your mouse over an accordion panel */
 +
div#accordion .panelHover {
 +
background:#000000 url("../images/menuBG.png") repeat-x;
 +
height:20px;
 +
color:#CCCCCC;
 +
font-weight:700;
 +
padding-left:5px;
 +
padding-top:5px;
 +
cursor:pointer;
 +
}
 +
 +
/* A Clicked accordion panel/header, when you click it. */
 +
div#accordion .panelClicked {
 +
background:#000000 url("../images/menuBG.png") repeat-x;
 +
height:20px;
 +
color:#FFFFFF;
 +
font-weight:700;
 +
padding-left:5px;
 +
padding-top:5px;
 +
}
 +
 +
/* A selected/active accordion panel/header. */
 +
div#accordion .panelSelected {
 +
background:#000000 url("../images/menuBG.png") repeat-x;
 +
height:20px;
 +
color:#FFFFFF;
 +
font-weight:700;
 +
padding-left:5px;
 +
padding-top:5px;
 +
cursor:default;
 +
}
 +
 +
/* The contents of the accordion. Meant the data holding area */
 +
div#accordion .panelContent {
 +
    background:#FFFFFF;
 +
    overflow:auto;
 +
padding-left:5px;
 +
padding-right:5px;
 +
}
 +
 +
/* SamsWHOIS Module related style */
 +
div#samswhois {
 +
margin-top:30px;
 +
text-align:center;
 +
font-size:10px;
 +
color: #aaaaaa;
 +
}
 +
 +
/* ID Protect links. */
 +
 +
/* ID Protect on */
 +
a.IDPon {
 +
color:#008800;
 +
padding-left:25px;
 +
padding-top:5px;
 +
padding-bottom:5px;
 +
background:url("../images/ID_protected.gif") no-repeat 15px 50%;
 +
background-position:left;
 +
text-decoration:none;
 +
height:30px;
 +
vertical-align:middle;
 +
}
 +
 +
/* ID Protect off */
 +
a.IDPoff {
 +
color:#FF0000;
 +
padding-left:25px;
 +
padding-top:5px;
 +
padding-bottom:5px;
 +
background:url("../images/ID_notprotected.gif") no-repeat 15px 50%;
 +
background-position:left;
 +
text-decoration:none;
 +
}
 +
/* Cart box related style */
 +
h3.cart {
 +
background:url("../images/Shoppingcart_32x32.png") no-repeat 0px 50%;
 +
vertical-align:middle;
 +
padding-left:50px;
 +
padding-top:10px;
 +
padding-bottom:10px;
 +
}
 +
 +
/* Testimonials box related style */
 +
h3.testimonials {
 +
background:url("../images/testimonials.png") no-repeat 0px 50%;
 +
vertical-align:middle;
 +
padding-left:50px;
 +
padding-top:10px;
 +
padding-bottom:10px;
 +
}
 +
 +
/* News box related style */
 +
h3.news {
 +
background:url("../images/smallNews.png") no-repeat 0px 50%;
 +
vertical-align:middle;
 +
padding-left:50px;
 +
padding-top:10px;
 +
padding-bottom:10px;
 +
}
 +
 +
 +
/* Cart.php styles */
 +
 +
/* Normal link */
 +
a.cartlink {
 +
background:url("../images/smallCart.png") no-repeat 0px 50%;
 +
padding-left:18px;
 +
text-decoration:none;
 +
}
 +
 +
/* Checkout buttons */
 +
input.cartCheckOut {
 +
display:block;
 +
width:120px;
 +
font-weight:700;
 +
}
 +
input.cartlink {
 +
background:transparent;
 +
padding-left:18px;
 +
font-weight:700;
 +
border:0px;
 +
width:100px;
 +
color:#008800;
 +
}
 +
 +
/* Hot deals list in the front page */
 +
ul.hotDeals li a.deal {
 +
padding-left:36px;
 +
background:url("../images/cube-red.png") no-repeat 15px 50%;
 +
}
 +
 +
/* Some browsers won't recognize the <strong> tag which is equivalent to <b> (bold text), strong has been given a style */
 +
strong { font-weight:700; }
 +
 +
/* SAMS Whois Highlight Important Fields Span */
 +
span.swHilight {
 +
/* Font weight, 700 means bold */
 +
font-weight:700;
 +
/* Text color */
 +
color:#FF0000;
 +
}
 +
 +
/* Input tags classes, they are usually theme relative. Not essential, depends on how you do your theme. */
 +
input.red {
 +
color:#FAE6E6;
 +
}
 +
input.blue {
 +
color:#FFFFFF;
 +
}</pre>
  
 
== Adding new pages to the site ==
 
== Adding new pages to the site ==

Revision as of 10:30, April 23, 2008

Site Menu

Adding/Removing Links

Changing the look

Adding Menus for Additional User Groups

Member Menu

Adding/Removing Links

Changing the look

Editing the Stylesheet

The following code will be found in header.php 

<!-- CSS -->
<!-- Load default styles for elements -->
<link rel="stylesheet" type="text/css" href="templates/<?=$templatedir?>/css/main.css" title="main" media="screen" />
<!--[if IE]>
<script type="text/javascript" src="templates/<?=$templatedir?>/js/menu.js"></script>
<link rel="stylesheet" type="text/css" href="templates/<?=$templatedir?>/css/IE.css" />
<![endif]-->

<!-- EOF CSS -->

main.css is the main style sheet and it contains only 2 import lines: 

@import "style.css";
@import "menu.css";
  1. style.css is the main style sheet
  2. menu.css is the horizontal menu's style sheet

Style.css's explanation 

@charset "utf-8";
/* 
	CSS Document 
	This is an AWBS CSS file commented out.
	This has an explanation of each part of the CSS file. Read it well, it will be great help when customizing your AWBS template or making your own.
	
	Written by: Ahmed Samir (ahmed@awbs.com) AWBS Templating design and support.
	
	
	This commented CSS file is from the _rouge_ Theme.
*/

/* 
	This is the HTML layout of the page, the background you set here will be a base background -
	for all pages. You can add a background *over it* in the body property.
*/
html {
	/* Setting the background */
	background-image:url("../images/h2bg.png");
	/* 
		The overflow property sets what happens if the content of an element overflow its area.
		In here, its set to auto so if the content is clipped, the browser should display a scroll-bar to see the rest of the content	
	*/
	overflow:auto;	
}

/* The body tag, all your main general settings are here */ 
body {
	/* setting font family */
	font-family:Verdana, Arial, Helvetica, sans-serif;
	/* 
		body background, it comes over the html { } background.
		url(); is the path to the background image.
		top left repeat-x:
		top left: background image is positioned on top left side of the page.
		repeat-x: background image repeating horizontally
	*/
	background:url("../images/body.jpg") top left repeat-x;	
	/* font size */
	font-size:12px;
	/* default text color */
	color:#000000;
	/* 
		word-spacing is for increasing or decreasing the space between words
		It can be either set to normal or a numeric length, it isn't important to have.
	*/
	word-spacing:normal;
	/*
		The CSS margin properties define the space around elements. 
		It is possible to use negative values to overlap content.
		 The top, right, bottom, and left margin can be changed independently using separate properties. 
		 A shorthand margin property can also be used to change all of the margins at once.
		 
		 They are both set to 0 as to make sure background images and layout is 
	*/
	margin:0;
	padding:0;
	/* sets the default body height percentage from the entire page */
	height:100%;
	/* Text alignment, could be left, right, center, or justify */
	text-align:justify;
	/* cursor style - it isn't really important to have it. */
	cursor:default;
}

/* 
	The wrapper class is essential in the rouge and noir theme, its what holds and centers all the -
	contents so they appear the way they are.
	margins needs to be set to 0 auto 0 so header and footer would be touching the page's start/end.
	the width is relative, you can set it to your liking.
*/
.wrapper {
	width:768px;
	margin: 0 auto 0;
}

/* property used while added a <div class="clear"></div> needed for spacing at times. */
.clear {
	clear:both;
}

/* the header */
.header {
	/* height: its set according to your header image's height */
	height:350px;
	/* 
		url: the path for the image 
		center top: positioned in the middle of the header space, aligned to top
		no-repeate: means the background will never be repeated to fill in space.
	*/
	background:url("../images/header.png") center top no-repeat;
}

/* links displayed in the header area */
.header a {
	/* link color */
	color:#CC0000;
	/* the decoration, set to none for uniqueness */
	text-decoration:none;
}

/* img tag properties */
img {
	/* 
		border: set to 0 because some browser will force an unwanted border around images.
		vertical-align: this is optional, its set to middle in here to fit how the theme looks generally, but its recommended to have it to set to middle.
	*/
	border:0;
	vertical-align:middle;
}

/* h* means header text - font-weiht:700 means the text will be bold, this is also optional */
h1,h2,h3,h4,h5,h6 {
	font-weight:700;
}

/*
	the lines below are meant to set header text sizes.
	em is like the percentage or the ratio of the current default font size.
	1 em = current font size 0% more or less
	1.5em = 150% current font size. e.g: if the current font size is 12px, 1.5em = 18px -
	2em = 24px, 1.1 = 101%, 0.75 = 75% and so on.

*/
h1 {
	font-size:1.5em;
}
h2 {
	font-size:2em;
}
h3 {
	font-size:1.1em;
}
h4 {
	font-size:0.75em;
}
h5 {
	font-size:0.50em;
}
h6 {
	font-size:0.25em;
}

/*  setting margins for all widly used html tags, also useful for making the layout slick and stable */
body, div, dl, dt, dd, pre, h1, h2, h3, h4, h5, h6, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
	margin:0;
	padding:0;
}

/* These classes are for the grid in pages like imanage.php or spincheck.php. */
.row_0, .row1_0 {
	background-color:#FFFAFF;
}
.row_1, .row1_1 {
	background-color:#FFFFFF;
}
tr.row1_0 td {
	background-color:#FFFAFF;
}
tr.row1_1 td {
	background-color:#FFFFFF;
}

/*
	The table ID doc is that main table that holds all data and other tables/contents inside.
	The tablehead is a none-unique ID. Its used to have a header style where page title is placed.
*/
#doc td#tablehead {
	/* making sure all paddings are 0 excpet for the left padding, to put a space between text and border. */
	margin: 0;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:10px;
}

/* General tables properties */
table {
	/*
		The border-collapse property sets whether the table borders are collapsed into a single border or detached as in standard HTML
		Either use separate or collapse:
		separate  	Borders are detached
		collapse 	Default. Borders are collapsed into a single border when possible	
	*/
	border-collapse:collapse;
	/*
		The border-spacing property sets the distance between the borders of adjacent cells (only for the "separated borders" model).
	*/
	border-spacing:0;
}

/* Properties for all TD's inside a tableID data */
td#data {
	/* setting the text/content padding from the borders */
	padding:3px;
	/* contents vertical align, setting it to top saves the hassel of having data misplaced */
	vertical-align:top;
}

/* Properties for all TD's inside a tableCLASS data */
table.data td {
	/* setting the text/content padding from the borders */
	padding:2px;
}

/* Properties for the tableID data */
table#data {
	/* Setting a background color */
	background-color:#FFFFFF;
	/* 
		Border propeties
		1 pixel border width
		solid border (could be dashed or dotted)
		#CC0000 is the border color
	*/
	border:1px solid #CC0000;
	/* Text padding */
	padding:2px;
}

/* The <sub> tag defines subscript text. The <sup> tag defines superscript text. */
sup, sub {
	/* The line-height property sets the distance between lines */
	line-height:1px;
	/* 
		Defines the vertical alignment 
		text-top means that the top of the element is aligned with the top of the parent element's font
	*/
	vertical-align:text-top;
}
/* <sub> tag style */
sub {
	/* The bottom of the element is aligned with the bottom of the parent element's font */
	vertical-align:text-bottom;
}

/* General styles for <input>, <textarea>, and <select> tags */
input, textarea, select {
	/* Setting font size */
	font-size:12px;
	/* setting padding */
	padding:1px;
}

/*
	The <ol> tag defines the start of an ordered list.
	The <ul> tag defines an unordered list.
*/
ul, ol {
	/* 
		Making sure that the default list will have no signs, circles squares beside it, its more of a text<br />text and so on.
		It has been made this way to fit the theme.
	*/
	list-style:none;
	/* setting a fixed left margin */
	margin-left:5px;
	/* setting a fixed left padding */	
	padding-left:5px;
}

/* FAQ ordered list, used in faq_full.php and faq.php */
ol.faq {
	/* The marker is a number */
	list-style:decimal;
	/* Setting left margin */
	margin-left:15px;
	/* Setting left padding */
	padding-left:15px;
	/* Text will be bold */
	font-weight:700;
}

/* Making a class for the ordered list to use a square marker */
ol.square {
	/* Setting the list style to square */
	list-style:square; 
	/* Setting left margin */
	margin-left:15px;
	/* Setting left padding */
	padding-left:15px;
}

/* Making a class for the ordered list to use a circle marker */
ol.circle {
	/* Setting the list style to circle */
	list-style:circle;
	/* Setting left margin */
	margin-left:15px;
	/* Setting left padding */
	padding-left:15px;
}

/* The FAQ ordered list's child <p> tags properties */
ol.faq p {
	/* font-weight 400 means the text is normal (not bold) */
	font-weight:400;
	padding-right:10px;
	padding-bottom:10px;
	/* Text colour */
	color:#3d658b;
}

/* The submasthead is a data container, its customizeable, currently it is being used in the footer */
#submasthead {
	background:#000000 url("../images/menuBG.png") repeat-x;
	border:0px;
	font-weight:700;
	color:#FFFFFF;
	height:20px;
	padding:7px;
}
/* 
	.forlinks is a class used for the bottom quick links, its setting the style 
	a 			= active link
	a:hover		= link with mouse over
	a:visited	= link that has been visited already
*/
.forlinks, .forlinks a, .forlinks a:hover, .forlinks a:visited {
	text-align:center;
	color:#FFFFFF;
}
/* The copyright <td> */
td.copyright {
	font-family:"Trebuchet MS";
}

a {
	font-weight:700;
	color:#CC0000;
}
a:hover { color:#000000; }
a:visited { }

/* The tablehead ID is used to style the <td> that holds each page's title */
#tablehead {
	background:#000000 url("../images/menuBG.png") repeat-x;
	border:0px;
	font-weight:700;
	color:#FFFFFF;
	height:33px;
	padding:10px;
}

/* 
	This is the main container table, it holds all data inside of it.
*/
table#doc {
	/* setting table's maximum width, means it cannot exceed this limit */
	max-width:768px;
	margin:0 auto;
	/* setting table's minimum width, means it cannot go smaller than this limit */
	min-width:760px;
	/* setting the actual width */
	width:768px;
	/* default background colour for it and all child tables */
	background-color:#FFFFFF;
}
/* footer <td> used to display the POWERED BY AWBS text.*/
.footer {
	background-image:url("../images/darkred_flip.gif");
	font-weight:700;
	font-size:0.75em;
	color:#FFFFFF;
	text-align:left;
	padding:5px;
	border-left:1px solid #CC0000;
	border-right:1px solid #CC0000;	
}
/* a parent for a .forlinks classed <td>/<div> */
table#doc .footers {
	border-left:1px solid #CC0000;
	border-right:1px solid #CC0000;	
}
/* used to place a W3 XHTML/CSS validation link */
td#W3 {
	text-align:center;
	padding:5px;
	vertical-align:middle;
}
/* the copyright holder's font settings. Its not important, you can leave it out */
td.copyright {
	font-family:"Trebuchet MS";
}
/* 
	This is the box that appears when you click many of the search forms' submit button, like the one in check.php	
*/
#blockDiv {
	width:250px;
	background-color:#FFFFFF;
	border:1px solid #CC0000;
	text-align:center;
	position:absolute;
	left: 50%;
	top:100%;
	margin-left: -125px;
}
#blockDiv p {
	font-weight:700;
	display:block;
	padding:5px;
	margin:5px;
}
#blockDiv img {
	padding:10px;
	margin:10px;
}
/******** Fancyform ********/
/*
	Fancyform is an Ajax script used to style the check and radio boxes on the site.
	
	.checked	: checked checbox
	.unchecked	: unchecked checkbox
	.selected	: selected radio
	.unselected	: unselected radio
*/
/*
	Global default settings
*/
.checked, .unchecked, .selected, .unselected { 
	/* leave the following as they are, do not modify */
	display:block;
	padding:2px;
	padding-left:32px;
	background-position:8px center;
	background-repeat:no-repeat;
	/* Start editing here */
	border:0;
	clear:both;
	cursor:pointer;
	font-weight:700;
}
.checked {
	background-color:transparent;
	background: url("../images/checkbox_red.png") no-repeat 0 -51px;
}
.unchecked {
	background-color:transparent;	
	background: url("../images/checkbox_red.png") no-repeat 0 -1px;
}
.selected {
	background-color:transparent;
	background: url("../images/radio_red.png") no-repeat 0 -52px;

}
.unselected {
	background-color:transparent;
	background: url('../images/radio_red.png') no-repeat 0 -2px;
}

/*
	basically these are a bunc of styles, mainly used to add borders to texts.
	They work for any tag. <p><div><h1,2,3,4...>
	
	underline 	: adds a dotted border under a text, with bold fonts.
	overline	: adds a dotted border over a text, with bold fonts.
	sline		: similar to underline, but more space underneath the border.
	dline		: double lines, over and underneath.
*/
#underline {
	border-bottom:1px dotted #000000;
	font-weight:700;
	font-size:1.1em;
}
#overline {
	border-bottom:1px dotted #000000;
	font-weight:700;
	padding:4px;
	font-size:1.1em;
}
#sline {
	border-bottom:1px dotted #000000;
	font-weight:700;
	padding:4px;
	font-size:1.1em;
}
#dline {
	border-bottom:1px dotted #000000;
	border-bottom:1px dotted #000000;
	font-weight:700;
	padding:4px;
	font-size:1.1em;
}

/*
	The <hr /> tag is for placing a horizontal line. Basically, this is a custom style for horizontal lines.
	
	hr.error	: styling a horizontal line with an .error class, usually used in error messages display
	hr.info		: similar to the error class, but used in informative messages.
	
	both are customizable, of course.
*/
hr {
	border:0px;
	height:1px;
	color:#3d658b;
	border-bottom:1px dotted #000000;
}
hr.error {
	border:0px;
	height:1px;
	color:#FF0000;
	background-color:#FF0000;
}
hr.info {
	border:0px;
	height:1px;
	color:#3d658b;
	background-color:#3d658b;
}

/* These are width percentage classes, self explanatory. Add as many percentages as you like */
.width-100 { width:100%; }
.width-99  { width:99%;  }
.width-98  { width:98%;  }
.width-97  { width:97%;  }
.width-95  { width:95%;  }
.width-90  { width:90%;  }
.width-85  { width:85%;  }
.width-80  { width:80%;  }
.width-75  { width:75%;  }
.width-70  { width:70%;  }
.width-65  { width:65%;  }
.width-60  { width:60%;  }
.width-55  { width:55%;  }
.width-50  { width:50%;  }
.width-45  { width:45%;  }
.width-40  { width:40%;  }
.width-35  { width:35%;  }
.width-33  { width:33%;  }
.width-30  { width:30%;  }
.width-25  { width:25%;  }
.width-20  { width:20%;  }
.width-15  { width:15%;  }
.width-10  { width:10%;  }
.width-5   { width:5%;   }
.width-2   { width:2%;   }

/* bottom padding classes, most of them are used already, add as many as you need */
.pb-2 { padding-bottom:2px; }
.pb-5 { padding-bottom:5px; }
.pb-10 { padding-bottom:10px; }
.pb-20 { padding-bottom:20px; }

/* Overall padding classes, most of them are used already, add as many as you need */
.p-2 { padding:2px; }
.p-5 { padding:5px; }
.p-10 { padding:10px; }
.p-15 { padding:15px; }
.p-20 { padding:20px; }

/* vertical alignment classes, use a class="vlt", vlm, vlb. Top, Middle, Bottom */
.vlt { vertical-align:top; }
.vlm { vertical-align:middle; }
.vlb { vertical-align:bottom; }


/* Text alignment classes, use a class="ac", ar, al. Center, Right, Left */
.ac { text-align:center; }
.ar { text-align:right; }
.al { text-align:left; }

/* width classes, most of them are already used, so you can add as much you need */
.w-20 { width:20px; }
.w-40 { width:40px; }
.w-60 { width:60px; }
.w-80 { width:80px; }
.w-90 { width:90px; }
.w-95 { width:95px; }
.w-98 { width:98px; }
.w-99 { width:99px; }
.w-100 { width:100px; }

/* A mostly use height class, add more if needed */
.h-10 { height:10px; }

/* background classes, they are used and placed as an example as well. add more colors if needed */
.bg-white { background-color:#FFFFFF; }
.bg-black { background-color:#000000; }

/* This div is used to place a news article logo in the news box */
div#newsImage { 
	position:relative; 
	width:80px; 
	height:100%; 
	float:left;
	background-color:#FFFFFF;
	text-align:center;
}

/* This div is used to place a testimonial logo in the testimonials box */
div#testiImage { 
	position:relative; 
	width:80px; 
	height:60px; 
	float:left;
	text-align:center;
	background-image:url("../images/testimonialsBig.png");
	background-position:center;
	background-repeat:no-repeat;
}

/* This div is used to place a domain checking logo in the domain check box */
div#checkDomainImage {
	position:relative; 
	width:80px; 
	height:70px; 
	float:left;
	text-align:center;
	background-image:url("../images/information.png");
	background-position:center;
	background-repeat:no-repeat;
}

/* This div is used to place a cart logo in the cart box */
div#cartImage { 
	position:relative; 
	width:130px; 
	height:100%; 
	float:right;
	text-align:center;
}

/* this table contains all the data in the header, language box, links etc... */
table#masthead-layout {
	width:100%;
	height:100%;
}

/* A style for an ordered list, placing a green arrow as a marker. Choose a different image if you like */
ol.ra {
	list-style-image:url("../images/rightarrowon.gif");
	padding-left:20px;
}

/* the login box image */
td.login {
	background-image:url("../images/key.jpg");
}

/* the why-register list list */
ul.whyregister li {
	padding-left:30px;
	font-weight:700;
	background:url("../images/icon_list.gif") no-repeat 15px 50%;
}

/* placing a background image in aLogin.php for the "make a new account" column */
td.createacct {
	background-image:url("../images/register.png");
}
/* Styles the <td>'s for aLogin.php to make it easy to place proper images as backgrounds */
td.login, td.createacct {
	background-repeat:no-repeat;
	background-position:bottom right;
	vertical-align:top;
	height:400px;
	padding-top:20px;
}

/* information display <div> related to hr.info */
div.info {
	font-weight:700;
	color:#3d658b;
	border:1px solid #0000FF;
	background-color:#e4edfa;
	padding:3px;
	width:99%;	
}

/* error display <div> related to hr.error */
div.error, div.alert {
	font-weight:700;
	color:#FF0000;
	border:1px solid #FF0000;
	background-color:#FFCCCC;
	padding:3px;
	width:99%;
}

/* General style for all text inputs, customizeable of course */
input, select, textarea, button {
	border:1px;
	color:#FFFFFF;
	font-weight:normal;
	background:#A82A2D url("../images/darkred.gif");
	padding:2px;
}
/* placing a unique background colour for <textarea> tags */
textarea {
	background:#A82A2D;
}

/* The bluecheck class is used for links in some pages like faq.php and services.php it gives a style to links */
a.bluecheck {
	padding-left:36px;
	background:url("../images/red-check.png") no-repeat 15px 50%;
}
/* related to a.bluecheck, the mouse hover effect, it changes the link's background box */
a.bluecheck:hover {
	padding-left:36px;
	background:url("../images/square-red.png") no-repeat 15px 50%;
}
/* The link you click on pages containing a bluecheck link to take you to page's top */
a.toTop {
	display:block;
	padding:10px 0px 10px 0px;
	width:100%;
	background:url("../images/24-em-up.png") no-repeat 15px 50%;
	background-position:right;
	text-align:left;
	vertical-align:middle;
	text-align:right;
	text-decoration:none;
}

/* same as a.toTop, but its usually placed in the footer */
a.mainTop {
	display:block;
	padding:10px 0px 10px 0px;
	width:25px;
	background:url("../images/24-em-up.png") no-repeat 15px 50%;
	background-position:center;
	vertical-align:middle;
}
/* a Firefox/IE7 supported class, and a style applied to input type image to remove the border IE6 usually places around due to general input classes */
input[type="image"], .noborder { 
	border:0px;
	background-color:#FFFFFF;
}

/******************* RSS Feeds ********************/
/* 
	These styles are used in includes/rss/rssinc.php.
	They are quite essential in how RSS feed links are displayed.
	You don't really need to change anything here, maybe the images.
*/
.feed-button {
  padding:10px 0;
}
.feed-button a {
	padding:10px 15px 10px 36px;
	background:url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
}
.feed-button a:hover {
	background:url("../images/feed-icon-14x14.png") no-repeat 15px 50%;
}
.feed-list {
  margin:0 0 15px 15px;
  padding:0;
  list-style-type:none;
}
.feed-list li {
  margin:0 0 10px 0;
  padding:0;
  list-style-type:none;
}
.feed-list li a, a#rssfeed {
  padding:0 0 0 19px;
  background:url("../images/feed-icon-14x14.png") no-repeat 0 50%;
  list-style-type:none;
}
.rssclass{
	padding: 3px;
	display:block;
}
.rsstitle { 
	font-weight:700;
	padding:0 0 0 19px;
	background:url("../images/tag.gif") no-repeat 0 50%;
	color:#3d658b ;
	display:block;

}
.rsstitle a {
	text-decoration:none;
}
.rssdate { 
	color:#000000;
	font-style:italic;
	padding-bottom:5px;
	display:block;
	height:20px;
}
.rssdescription{
	display:block;
}


/*
	Forms styling.
	There is a form class called .awform (AWBS Form) - Its used to add some special looks for all forms.
	It works when you place a table inside a <fieldset> tag, table title will be a text put in a <legend> tag.
	It basically works like this:
	<form class="awform">
		<fieldset>
			<legend>Title here</legend>
			<table>
				<tr>
					<td><em>*</em>important field</td>
					<td>Some data here</td>
				</tr>
			</table>
		</fieldset>
	</form>

*/

/* setting the style for the fieldset, bottom margin */
.awform fieldset { margin-bottom: 10px; }
	
/* legend style */
.awform legend {
	padding: 0 2px;
	font-weight: 700;
	margin: 0 -7px; /* IE Win _margin */
	padding-bottom:8px;
}
/* 
	The <em> Renders as emphasized text, in _awform_ it will be used to mark important fields.
	It will make them red and bold to make them more noticeable
*/
.awform em {
	font-weight: 700;
	font-style: normal;
	color: #f00;
}
/* form margin and padding */
form.awform {
	margin:5px;
	padding:5px
}
/* more legend and label styles */
.awform legend { padding-left: 0; }
.awform legend, .awform label { 
	color: #000000; 
	font-weight:700; 
}
/* How the fieldset should look like */
.awform fieldset {
	/* no border */
	border: none;
	/* but place a top border with a color that fits the theme */
	border-top: 1px solid #CC0000;
	/* background image, use one that fits the theme */
	background: url("../images/awform-fieldset.gif") left bottom repeat-x;
}
/* for nested fieldsets */
.awform fieldset fieldset { 
	background: none; 
}
/* the table <td> tags will have a small border, made with an image */
.awform fieldset td , table .awflike td {
	padding: 5px 10px 7px;
	background: url("../images/awform-divider.gif") left bottom repeat-x;
}
/* 
	paddZero is mostly used in search only forms, like check.php and manage.php etc... 
*/
.awform fieldset td#paddZero {
	padding: 5px 0px 20px;
}
/* Global form setting, works for all forms */
form {
	margin:0px;
}

/* color classes, used in various places, add as many as needed */
.red {
	color:#FF0000;
}
.green {
	color:#008800;
}
.blue {
	color:#0033CC;
}
.black {
	color:#000000;
}

/* Text styles */
.bold {
	font-weight:700;
}
.italic {
	font-style:italic;
}
.uline {
	text-decoration:underline;
}
.center {
	text-align:center;
}

/* font families, add as many as you need */
.verdana {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.georgia {
	font-family:Georgia, "Times New Roman", Times, serif;
}
.trebu {
	font-family:"Trebuchet MS";
}

/* Success and failure are styles used on many tags in various places in the tamplate */
.success {
	color:#008800;
	padding:10px 15px 10px 20px;
	background:url("../images/chk_on.png") no-repeat 15px 50%;
}
.failure {
	color:#FF0000;
	padding:10px 15px 10px 20px;
	background:url("../images/chk_off.png") no-repeat 15px 50%;
}

/* rssinc.php related styles, leave them as they are, unless you modify rssinc.php */
div#rssnewsPageIndex {
	height:170px;
	overflow:auto;
}
div#rssnewsPageOther {
	height:98%;
	overflow:auto;
}

/* 
	TBS is usually associated with the paddZero awform styled table, it adds image to the button
	used in most search forms
*/
input#tbs {
	width:125px;
	height:17px;
	font-weight:700;
	padding-left:20px;
	padding-bottom:3px;
	font-size:smaller;
	border:1px solid #CC0000;
	background:#A82A2D url("../images/find.png");
	background-repeat:no-repeat;
	background-position: center left;
}
/* Dynamic toolip Div imanage.php ONLY CHANGE COLOURS!!!! */
div#tipDiv {
	position:absolute; 
	visibility:hidden; 
	left:0; top:0; z-index:10000;
	background-color:#FFFFFF;
	border:1px solid #CC0000;
	width:400px; padding:4px;
	color:#000; font-size:11px; line-height:1.2;
}

/* Accordion related CSS in welcome.php */
/* The main Accordion container */
#accordion {
    width:100%;
    margin-top:0px;
}
/* Accordion's headerv */
div#accordion .panelheader, .TabTitleBar {
	background:#000000 url("../images/menuBG.png") repeat-x;
	height:20px;
	color:#FFFFFF;
	padding-left:5px;
	padding-top:5px;	
	font-weight:700;
	cursor:pointer;
}
/* 
	Accordion header's links 
	.TabTitleBar is used in the usermenu
*/
div#accordion .panelheader a, .TabTitleBar a {
	color:#FFFFFF;
}

/* When you hover your mouse over an accordion panel */
div#accordion .panelHover {
	background:#000000 url("../images/menuBG.png") repeat-x;
	height:20px;
	color:#CCCCCC;
	font-weight:700;
	padding-left:5px;
	padding-top:5px;
	cursor:pointer;
}

/* A Clicked accordion panel/header, when you click it. */
div#accordion .panelClicked {
	background:#000000 url("../images/menuBG.png") repeat-x;
	height:20px;
	color:#FFFFFF;
	font-weight:700;
	padding-left:5px;
	padding-top:5px;
}

/* A selected/active accordion panel/header. */
div#accordion .panelSelected {
	background:#000000 url("../images/menuBG.png") repeat-x;
	height:20px;
	color:#FFFFFF;
	font-weight:700;
	padding-left:5px;
	padding-top:5px;
	cursor:default;	
}

/* The contents of the accordion. Meant the data holding area */
div#accordion .panelContent {
    background:#FFFFFF;
    overflow:auto;
	padding-left:5px;
	padding-right:5px;
}

/* SamsWHOIS Module related style */
div#samswhois {
	margin-top:30px; 
	text-align:center; 
	font-size:10px; 
	color: #aaaaaa;
}

/* ID Protect links. */

/* ID Protect on */
a.IDPon {
	color:#008800;
	padding-left:25px;
	padding-top:5px;
	padding-bottom:5px;
	background:url("../images/ID_protected.gif") no-repeat 15px 50%;
	background-position:left;
	text-decoration:none;
	height:30px;
	vertical-align:middle;
}

/* ID Protect off */
a.IDPoff {
	color:#FF0000;
	padding-left:25px;
	padding-top:5px;
	padding-bottom:5px;	
	background:url("../images/ID_notprotected.gif") no-repeat 15px 50%;
	background-position:left;	
	text-decoration:none;
}
/* Cart box related style */
h3.cart {
	background:url("../images/Shoppingcart_32x32.png") no-repeat 0px 50%;
	vertical-align:middle;
	padding-left:50px;
	padding-top:10px;
	padding-bottom:10px;
}

/* Testimonials box related style */
h3.testimonials {
	background:url("../images/testimonials.png") no-repeat 0px 50%;
	vertical-align:middle;
	padding-left:50px;
	padding-top:10px;
	padding-bottom:10px;
}

/* News box related style */
h3.news {
	background:url("../images/smallNews.png") no-repeat 0px 50%;
	vertical-align:middle;
	padding-left:50px;
	padding-top:10px;
	padding-bottom:10px;
}


/* Cart.php styles */

/* Normal link */
a.cartlink {
	background:url("../images/smallCart.png") no-repeat 0px 50%;
	padding-left:18px;
	text-decoration:none;
}

/* Checkout buttons */
input.cartCheckOut {
	display:block;
	width:120px;
	font-weight:700;
}
input.cartlink {
	background:transparent;
	padding-left:18px;
	font-weight:700;
	border:0px;
	width:100px;
	color:#008800;
}

/* Hot deals list in the front page */
ul.hotDeals li a.deal {
	padding-left:36px;
	background:url("../images/cube-red.png") no-repeat 15px 50%;
}

/* Some browsers won't recognize the <strong> tag which is equivalent to <b> (bold text), strong has been given a style */
strong { font-weight:700; }

/* SAMS Whois Highlight Important Fields Span */
span.swHilight {
	/* Font weight, 700 means bold */
	font-weight:700;
	/* Text color */
	color:#FF0000;
}

/* Input tags classes, they are usually theme relative. Not essential, depends on how you do your theme. */
input.red {
	color:#FAE6E6;
}
input.blue {
	color:#FFFFFF;
}

Adding new pages to the site

Retrieved from "https://www.awbswiki.com/index.php?title=Template_Customization&oldid=384"