Difference between revisions of "Template Customization"
From AWBS Wiki
(→top.php) |
(→top.php) |
||
| Line 86: | Line 86: | ||
<pre><body onLoad="hideObject(); inpIMG();"></pre> | <pre><body onLoad="hideObject(); inpIMG();"></pre> | ||
#hideObject(); is used for the <'''div'''> box appearing when you perform a search task or process an order via a form try in check.php | #hideObject(); is used for the <'''div'''> box appearing when you perform a search task or process an order via a form try in check.php | ||
| + | #inpIMG(); is used to remove the border around image type inputs as internet explorer forces a border around them in case you use a global style for input tags with borders. | ||
====bottom.php==== | ====bottom.php==== | ||
Revision as of 11:13, April 23, 2008
Contents
Site Menu
Adding/Removing Links
Changing the look
Adding Menus for Additional User Groups
Member Menu
The member menu is the horizontal menu placed under the main page header. File:Membermenu.png This menu is editable via the file called grou1menu.php in every template folder, and styled via menu.css Its a php/css based menu, easy to modify and very flexible. Example
<ul id="menu">
<li><a href="index.php">Menu item</a></li>
<li>
<a href="0.php">Menu item</a>
<ul>
<li><a href="<?=$base?>/1.php" >Submenu Item 1</a></li>
<li><a href="<?=$base?>/2.php" >Submenu Item 2</a></li>
<li><a href="<?=$base?>/3.php" >Submenu Item 3</a></li>
<li><a href="<?=$base?>/4.php" >Submenu Item 4</a></li>
</ul>
</li>
</ul>
Its that simple.
Also, grou1menu.php allow php scripts.
This is a very simple active menu item highlight script used in grou1menu.php, the one that highlights Home when index.php is the active window, so with other items.
<?php
global $reseller_free_plan;
$page_homeSelected = (preg_match("/\b\*?.(index).*?\b/i",$_SERVER["SCRIPT_FILENAME"]))? "selectedMenu a" : "";
$page_accntSelected = (preg_match("/\b\*?.(dnsmgmt|DomainContacts|DomainNs|dspincheck|dyndns|emailmgmt|map|phone|nsmaint|popmgmt|DomainMain|manage|createacct|welcome|contact|support|aLogIn|cart|omanage|smanage|hmanage|download|downloada|imanage|manage.php|managehome|sellhome|editprofile|subacctmgmt|profilemgmt|journal|history|emailarchive|affiliate|acctrefill|helpdesk).*?\b/i",$_SERVER["SCRIPT_FILENAME"]))? "selectedMenu b" : "";
$page_hostSelected = (preg_match("/\b\*?.(hosting|dshosting|dnhosting|hsignup).*?\b/i",$_SERVER["SCRIPT_FILENAME"]))? "selectedMenu c" : "";
$page_domainSelected = (preg_match("/\b\*?.(check|spincheck|spinname|transcheck|pricingfull|forsale).*?\b/i",$_SERVER["SCRIPT_FILENAME"]))? "selectedMenu d" : "";
$page_otherSelected = (preg_match("/\b\*?.(packages|whois|spinname|templates|addons|caddons).*?\b/i",$_SERVER["SCRIPT_FILENAME"]))? "selectedMenu e" : "";
$page_miscSelected = (preg_match("/\b\*?.(faq|faqfull|help|helpfull|services|servicesfull).*?\b/i",$_SERVER["SCRIPT_FILENAME"]))? "selectedMenu f" : "";
?>
Its also connected to the database, you can run AWBS MySQL Queries if you like.
Adding/Removing Links
You can remove any link as simple as removing <li><a href....>link name</a></li> from group1menu.php, and add links the very same way, placing a <li /> tag and with the link.
Changing the look
Basic layout
There is a basictemplate.php file included with each theme, it aims to explain how the basic layout it.
<!-- Use this to add a new pages to your site. Place this file in your templates/[theme] directory. Rename it as you wish.--> <?=$header?> <?=$top?> <!-- Contents /s --> <table id="data" class="width-100"> <tr> <td id="tablehead">place page title here</td> </tr> <tr> <td id="data"> <!-- Begin placing your data in here, you can strat from scratch <table> .. </table> or just work on this table. it is the main container of all data, you can add more <tr></tr> and <td></td> tags. --> <!-- EOF --> </td> </tr> </table> <!-- Contents /e --> <?=$bottom?>
<?=$header?> places header.php's contents on top of page
<?=$top?> places top.php's contents on top of page
<?=$footer?> places footer.php's contents on top of page
header.php
Header.php is one of the three main pages taking care of AWBS templates, which are header.php, footer.php, and top.php.
You don't really need to modify header.php, unless you are going to add new style-sheets, JavaScript or anything else related. When you are about to start modifying or creating a new theme, top.php is where to start.
top.php
top.php is the essential file you need to start modifying when you start on a new AWBS theme, or modify the existing theme. The contents are pretty simple.
Basically, it starts with a <body> tag. For AWBS, there are a couple of events attached to the <body> tag, it always needs to be this way:
<body onLoad="hideObject(); inpIMG();">
- hideObject(); is used for the <div> box appearing when you perform a search task or process an order via a form try in check.php
- inpIMG(); is used to remove the border around image type inputs as internet explorer forces a border around them in case you use a global style for input tags with borders.
bottom.php
bottom.php is the 3rd major important page in AWBS templates. It basically complete top.php and displays the page footer. It finalizes top.php like this
top.php
<table>
<tr>
<td>
Any page
Hi, I am an AWBS template page
bottom.php
</td>
</tr>
</table>
This is how essential bottom.php is. Now, lets see how bottom.php look like: This is an example from the noir theme.
<?php include(WORKDIR."/includes/ver.php"); ?>
</td>
</tr>
<tr>
<td colspan="3">
<div id="submasthead" class="forlinks"><a href="<?=$base?>/index.php"><?=ucwords(strtolower(BMENU1))?></a> | <?php if ($_SESSION['t']!=2) { ?><a href="<?=$base?>/hosting.php"><?=ucwords(strtolower(BMENU2))?></a> | <?php }else{?><a href="<?=$base?>/pricingfull.php"><?=ucwords(strtolower(BMENU8))?></a> | <?php } ?><a href="<?=$base?>/check.php"><?=ucwords(strtolower(BMENU3))?></a> | <a href="<?=$securebase?>/createacct.php"><?=ucwords(strtolower(BMENU4))?></a> | <a href="<?=$base?>/support.php"><?=ucwords(strtolower(BMENU5))?></a> | <a href="<?=$base?>/contact.php"><?=ucwords(strtolower(BMENU7))?></a></div>
</td>
</tr>
<tr>
<td id="W3" class="copyright ac bold bg-white"><?=COPYRIGHT?><br /><?=$current_ver?></td>
</tr>
</table>
</div>
<?php
//do not remove the below!!
if($_SESSION[newuid] != $_SESSION[adminuser] and trim($_SESSION[adminuser]) != "") { ?>
<div id="watermarklogo" style="position:absolute;"></div>
<script src="js/staticlogo.js">
</script>
<?php }?>
<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_viewport.js" type="text/javascript"></script>
<script src="js/dw_tooltip.js" type="text/javascript"></script>
<?=$dynamicconverterlink?>
</body>
</html>
<?php @mysql_close(); ?>
bottom.php is sensitive, so all you need to change in this file are the parts highlighted in blue. Other than that, please, don't change unless you really know what you are doing!
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";
- style.css is the main style sheet
- 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 [at] 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
AWBS allows you to add custom pages, with custom scripts support as well, you
can use custom PHP/MySQL in both custom and existing pages.
You can either place them in includes/gparser_user.php or in any page.
To create a custom page you need to follow basic instructions:
- Create a new file in your AWBS root folder, testing.php for example there is basictemplate.php as an example.
-
Inside testing.php, place the following code.
<?php $DIR=(dirname(__FILE__)); include($DIR."/includes/dbconfig.php"); include($workdir."/includes/sessions.php"); include_once($workdir."/config.php"); include($workdir."/includes/gparser.php"); ?>
-
Explanation.
<?php //set the directory where the file exists $DIR=(dirname(__FILE__)); //include essential files include($DIR."/includes/dbconfig.php"); include($workdir."/includes/sessions.php"); include_once($workdir."/config.php"); //charge up template vars include($workdir."/includes/gparser.php"); //specific vars ?>
-
Adding some custom variables (like the ones you set in gparser_user.php
<?php $DIR=(dirname(__FILE__)); include($DIR."/includes/dbconfig.php"); include($workdir."/includes/sessions.php"); include_once($workdir."/config.php"); //charge up template vars include($workdir."/includes/gparser.php"); //specific vars $template->set_var("services.php", $services.php); $template->set_var("some_variable_name", "moo"); //end specific vars //end charge up template vars //Example for checking maintenance mode. if($maintmode=="True"){ print $template->parse("maintmode.php"); exit; } ?> -
Finally:
<?php $DIR=(dirname(__FILE__)); include($DIR."/includes/dbconfig.php"); include($workdir."/includes/sessions.php"); include_once($workdir."/config.php"); //charge up template vars include($workdir."/includes/gparser.php"); //specific vars //$template->set_var("services.php", $services.php); //$template->set_var("", $); //$template->set_var("", $); //end specific vars //end charge up template vars if($maintmode=="True"){ print $template->parse("maintmode.php"); exit; } print $template->parse("my_template_page_name.php"); exit; ?> - my_page_name.php is the page you place in your template folder containing the data, it will look like any other page, <?=$header?> <?=$top?> .... contents <?=$bottom?>
This is how to add a custom page to your AWBS.
