Difference between revisions of "Template Customization"

From AWBS Wiki
Jump to: navigation, search
(→‎Member Menu)
(→‎Template Information)
 
(55 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
== Site Menu ==
+
'''''Note:''' This information refers to AWBS version 2.8.0 and newer.''
−
=== Adding/Removing Links ===
+
__TOC__
 +
== Template Information ==
  
−
=== Changing the look ===
+
The user web interface template files are located in two locations.
  
−
=== Adding Menus for Additional User Groups ===
+
All files common to all themes are in;
 +
templates/common_files directory
  
−
== Member Menu ==
+
All files unique to a theme are in;
−
The member menu is the horizontal menu placed under the main page header.
+
templates/[theme_directory]
−
[[Image:membermenu.png]]
+
−
This menu is editable via the file called '''grou1menu.php''' in every template folder, and styled via [http://awbswiki.com/index.php?title=Template_Customization#Editing_the_Stylesheet '''menu.css''']
+
−
=== Adding/Removing Links ===
+
  
−
=== Changing the look ===
+
Theme directory files override common_files files if they exist.
 +
For example:
 +
If you copy support.php from common_files to your theme directory and edit it,
 +
your site will use the support.php file in the theme directory and
 +
ignore the support.php file in the common_files directory.
  
−
== 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>
+
The '''top.php''', '''bottom.php''' and '''header.php''' are used for all pages of the user web interface.<br />
 +
top.php creates the header area of the web pages<br />
 +
bottom.php creates the footer area of the web pages<br />
 +
header.php handles the <head> section with meta tags and other needed code for the system's functionality.
  
−
'''main.css''' is the main style sheet and it contains only 2 import lines:
+
The optional '''left.php''' and '''right.php''' are included on all non member pages (pages without the left member menu).<br /> If you wish to override this and display them on all pages including member pages, add a new flag in the Extended System Configuration named showleftright and give it a value of 1.<br />
−
<pre>@import "style.css";
+
<br />
−
@import "menu.css";</pre>
+
To use left.php add this to your top.php template:<br />
−
#style.css is the main style sheet
+
<nowiki><?=$left?></nowiki><br />
−
#menu.css is the horizontal menu's style sheet
+
To use right.php add this to your bottom.php template:<br />
 +
<nowiki><?=$right?></nowiki>
  
−
'''Style.css's explanation'''
+
Then make a left.php and/or right.php template and place it in your theme directory and add xhmtl code as desired.
−
<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 [at] awbs.com) AWBS Templating design and support.
+
−
+
−
+
−
This commented CSS file is from the _rouge_ Theme.
+
−
*/
+
  
−
/*
+
''(Note: sample placement can be seen in the top.php and bottom.php files of the simple 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 */
+
If you don't want to display the left.php or right.php templates in your home page, use this code in your top.php file and bottom.php file to filter out the index.php page.
−
body {
+
<nowiki><?php if (strtolower($this_filename) != "index.php"){ echo $left; } ?></nowiki>
−
/* setting font family */
+
<nowiki><?php if (strtolower($this_filename) != "index.php"){ echo $right; } ?></nowiki>
−
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;
+
−
}
+
  
−
/*
+
== Stylesheets ==
−
The wrapper class is essential in the rouge and noir theme, its what holds and centers all the -
+
Edit the stylesheet to obtain your desired look for the content area of the site.<br />
−
contents so they appear the way they are.
+
The stylesheet can be found at: templates/[your_theme_directory]/css/style.css
−
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. */
+
If using portal mode, this stylesheet is also used:<br />
−
.clear {
+
templates/[your_theme_directory]/css/portal.css
−
clear:both;
+
−
}
+
  
−
/* the header */
+
For the site menu and member menu:<br />
−
.header {
+
templates/[your_theme_directory]/css/menu.css
−
/* 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 */
+
For various popup pages throughout the system:<br />
−
.header a {
+
templates/[your_theme_directory]/css/popups/pop.css
−
/* link color */
+
−
color:#CC0000;
+
−
/* the decoration, set to none for uniqueness */
+
−
text-decoration:none;
+
−
}
+
  
−
/* img tag properties */
+
== Editing the site menu ==
−
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 */
+
*To edit the menu edit;
−
h1,h2,h3,h4,h5,h6 {
+
−
font-weight:700;
+
−
}
+
  
−
/*
+
templates/common_files/group1menu.php
−
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.
+
  
−
*/
+
or if you are using portal mode
−
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 */
+
templates/common_files/group1cpmenu.php
−
body, div, dl, dt, dd, pre, h1, h2, h3, h4, h5, h6, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
+
  INFO
−
margin:0;
+
The group1 refers to the user group, if you add user groups you can give them their own custom menu by creating new menu files.
−
padding:0;
+
Example:  
−
}
+
You add a new user group and it will be group 2
 +
Create a new menu file named group2menu.php
 +
When the group 2 users log in, their menu will change to the group2menu.php file instead of the default group1menu.php file.
  
−
/* These classes are for the grid in pages like imanage.php or spincheck.php. */
+
*To edit the text on the menu links, edit the includes/language/english/global.php file
−
.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 '''stylesheet''' used for the menus is:
−
The table ID doc is that main table that holds all data and other tables/contents inside.
+
templates/[your_theme_directory]/css/menu.css
−
The tablehead is a none-unique ID. Its used to have a header style where page title is placed.
+
Note: this stylesheet is used for both the site menu and the member area menu
−
*/
+
−
#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 */
+
=== Menu details and example information ===
−
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 */
+
This is an individual link, it appears as an item, and this is the "Home" link<br />
−
table.data td {
+
each <nowiki><li></li></nowiki> tag resembles 1 hyperlink (menu item).<br />
−
/* setting the text/content padding from the borders */
+
    example:
−
padding:2px;
+
    <nowiki><ul id="menu">
−
}
+
    <li><a href="#">Item 1</a></li>
 +
    <li><a href="#">Item 2</a></li>
 +
    <li><a href="#">Item 3</a></li>
 +
    <li><a href="#">Item 4</a></li>
 +
    <li><a href="#">Item 5</a></li>
 +
    <li><a href="#">Item 7</a></li>
 +
    </ul></nowiki>
 +
   
 +
    This will show the main navigation window like this:
 +
    Item 1 | Item 2 | Item 3 | Item4 | Item5 | Item6 | Item7
  
−
/* Properties for the tableID data */
+
That will just create our basic menu.
−
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. */
+
Now, lets see how submenus are created<br />
−
sup, sub {
+
example:
−
/* The line-height property sets the distance between lines */
+
<nowiki><ul id="menu">
−
line-height:1px;
+
    <li><a href="#">Item 1</a>
−
/*
+
            <ul>
−
Defines the vertical alignment
+
                <li><a href="#">Subitem1</a></li>
−
text-top means that the top of the element is aligned with the top of the parent element's font
+
                <li><a href="#">Subitem2</a></li>
−
*/
+
                <li><a href="#">Subitem3</a></li>
−
vertical-align:text-top;
+
                <li><a href="#">Subitem4</a></li>
−
}
+
            </ul>
−
/* <sub> tag style */
+
        </li>
−
sub {
+
    <li><a href="#">Item 2</a></li>
−
/* The bottom of the element is aligned with the bottom of the parent element's font */
+
    <li><a href="#">Item 3</a></li>
−
vertical-align:text-bottom;
+
    <li><a href="#">Item 4</a></li>
−
}
+
    <li><a href="#">Item 5</a></li>
 +
    <li><a href="#">Item 7</a></li>
 +
    </ul></nowiki>
 +
   
 +
    This will create the following hierarchy
 +
   
 +
    Item 1 | Item 2 | Item 3 | Item4 | Item5 | Item6 | Item7<br />
 +
&nbsp;&nbsp;&nbsp;Subitem1
 +
&nbsp;&nbsp;&nbsp;Subitem2
 +
&nbsp;&nbsp;&nbsp;Subitem3                                 
 +
&nbsp;&nbsp;&nbsp;Subitem4
 +
               
  
−
/* General styles for <input>, <textarea>, and <select> tags */
+
Then when you hover on Item 1, it will show the Subitem list.
−
input, textarea, select {
+
−
/* Setting font size */
+
−
font-size:12px;
+
−
/* setting padding */
+
−
padding:1px;
+
−
}
+
  
−
/*
+
    Item 1 | Item 2 | Item 3 | Item4 | Item5 | Item6 | Item7
−
The <ol> tag defines the start of an ordered list.
+
&nbsp;&nbsp;&nbsp;Subitem1
−
The <ul> tag defines an unordered list.
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem1
−
*/
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem2
−
ul, ol {
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem3
−
/*
+
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem4
−
Making sure that the default list will have no signs, circles squares beside it, its more of a text<br />text and so on.
+
&nbsp;&nbsp;&nbsp;Subitem2
−
It has been made this way to fit the theme.
+
&nbsp;&nbsp;&nbsp;Subitem3                                   
−
*/
+
&nbsp;&nbsp;&nbsp;Subitem4
−
list-style:none;
+
   
−
/* setting a fixed left margin */
+
Now, to create a 3rd level subitem to see this menu:
−
margin-left:5px;
+
example:
−
/* setting a fixed left padding */
+
<nowiki><ul id="menu">
−
padding-left:5px;
+
    <li>
−
}
+
        <a href="#">Item 1</a>
 +
            <ul>
 +
                <li>
 +
                    <a href="#">Subitem1</a>
 +
                        <ul>
 +
                          <li><a href="#">sub-Subitem1</a></li>
 +
                          <li><a href="#">sub-Subitem2</a></li>
 +
                          <li><a href="#">sub-Subitem3</a></li>
 +
                          <li><a href="#">sub-Subitem4</a></li>
 +
                        </ul>
 +
                </li>
 +
                <li><a href="#">Subitem2</a></li>
 +
                <li><a href="#">Subitem3</a></li>
 +
                <li><a href="#">Subitem4</a></li>
 +
            </ul>
 +
        </li>
 +
    <li><a href="#">Item 2</a></li>
 +
    <li><a href="#">Item 3</a></li>
 +
    <li><a href="#">Item 4</a></li>
 +
    <li><a href="#">Item 5</a></li>
 +
    <li><a href="#">Item 7</a></li>
 +
    </ul></nowiki>
  
−
/* 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 */
+
Then when you hover on Item 1, it will show the Subitem list, then when you click on Subitem1 it will show the sub-subitem list (2nd level)
−
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 */
+
Now, to give the 3rd level menu the same highlight and text color as the 2nd level
−
ol.faq p {
+
<pre>
−
/* font-weight 400 means the text is normal (not bold) */
+
ul#menu li:hover li:hover li a, ul#menu li.iehover li.iehover li a { background:#<background color>; color:#<text color>; border-left:1px solid #<optional border color>; }
−
font-weight:400;
+
ul#menu li:hover li:hover li a:hover, ul#menu li:hover li:hover li:hover a, ul#menu li.iehover li.iehover li a:hover, ul#menu li.iehover li.iehover li.iehover a { background:#<background color>; color:#<text color>; }
−
padding-right:10px;
+
</pre>
−
padding-bottom:10px;
+
This will make sure the 3rd level menu is styled, you can choose to give it the same style as the 2nd level menu or to style it differently.
−
/* Text colour */
+
−
color:#3d658b;
+
−
}
+
  
−
/* The submasthead is a data container, its customizeable, currently it is being used in the footer */
+
If you wish to add an indicator/arrow/image/or a different color to the 2nd level menu item which has a 3rd level menu, you can simply give this link a class like the following example:
−
#submasthead {
+
<nowiki><ul id="menu">
−
background:#000000 url("../images/menuBG.png") repeat-x;
+
    <li>
−
border:0px;
+
        <a href="#">Item 1</a>
−
font-weight:700;
+
            <ul>
−
color:#FFFFFF;
+
                <li>
−
height:20px;
+
                    <a href="#" class="parent">Subitem1</a>
−
padding:7px;
+
                        <ul>
−
}
+
                          <li><a href="#">sub-Subitem1</a></li>
−
/*
+
                          <li><a href="#">sub-Subitem2</a></li>
−
.forlinks is a class used for the bottom quick links, its setting the style
+
                          <li><a href="#">sub-Subitem3</a></li>
−
a = active link
+
                          <li><a href="#">sub-Subitem4</a></li>
−
a:hover = link with mouse over
+
                        </ul>
−
a:visited = link that has been visited already
+
                </li>
−
*/
+
                <li><a href="#">Subitem2</a></li>
−
.forlinks, .forlinks a, .forlinks a:hover, .forlinks a:visited {
+
                <li><a href="#">Subitem3</a></li>
−
text-align:center;
+
                <li><a href="#">Subitem4</a></li>
−
color:#FFFFFF;
+
            </ul>
−
}
+
        </li>
−
/* The copyright <td> */
+
    <li><a href="#">Item 2</a></li>
−
td.copyright {
+
    <li><a href="#">Item 3</a></li>
−
font-family:"Trebuchet MS";
+
    <li><a href="#">Item 4</a></li>
−
}
+
    <li><a href="#">Item 5</a></li>
 +
    <li><a href="#">Item 7</a></li>
 +
    </ul></nowiki>
  
−
a {
+
Then, add the following selector classes to your stylesheet.
−
font-weight:700;
+
<pre>
−
color:#CC0000;
+
ul#menu li:hover li a.parent, ul#menu li.iehover li a.parent { background:#<background color> url("../images/arrow.gif") no-repeat 99%; color:#<text color>; }
−
}
+
ul#menu li:hover li a.parent:hover, ul#menu li.iehover li a.parent:hover { background:#<background color> url("../images/arrow.gif") no-repeat 99%; color:#<text color>; }
−
a:hover { color:#000000; }
+
</pre>
−
a:visited { }
+
  
−
/* The tablehead ID is used to style the <td> that holds each page's title */
+
== Editing the member menu ==
−
#tablehead {
+
−
background:#000000 url("../images/menuBG.png") repeat-x;
+
−
border:0px;
+
−
font-weight:700;
+
−
color:#FFFFFF;
+
−
height:33px;
+
−
padding:10px;
+
−
}
+
  
−
/*
+
The menu used in the member area is;
−
This is the main container table, it holds all data inside of it.
+
templates/common_files/usermenu.php
−
*/
+
Edit that file to add/edit/remove links
−
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;
+
  
−
}
+
Edit the templates/[your_theme_directory]/css/menu.css file to change colors/style
−
.unselected {
+
−
background-color:transparent;
+
−
background: url('../images/radio_red.png') no-repeat 0 -2px;
+
−
}
+
  
−
/*
+
Edit the includes/language/english/global.php file to change text on the menu.
−
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;
+
−
}
+
  
−
/*
+
'''''Note:''' If in portal mode this menu is not used. The templates/common_files/group1cpmenu.php is used instead and replaces the main site menu included in the top.php file''
−
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 */
+
== Adding new pages ==
−
.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 */
+
Use the basicphptemplate.php in the root AWBS directory and the basictemplate.php file in the templates/common_files directory to make new pages for your site.
−
.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 */
+
It works like this:
−
.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 */
+
You use the basicphptemplate.php file in your root AWBS directory and call the basictemplate.php that you add your content to and place in your templates/theme directory.
−
.vlt { vertical-align:top; }
+
−
.vlm { vertical-align:middle; }
+
−
.vlb { vertical-align:bottom; }
+
  
 +
''Example: you want a new page called webdesign.php''
  
−
/* Text alignment classes, use a class="ac", ar, al. Center, Right, Left */
+
* Take the basicphptemplate.php file, copy/rename it to webdesign.php, edit the file to call webdesign.php template.
−
.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 */
+
This line: print $template->parse("basictemplate.php");
−
.w-20 { width:20px; }
+
replace basictemplate.php with webdesign.php
−
.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 */
+
*Now take the basictemplate.php file in your templates/common_files directory, copy it to your theme directory and rename it webdesign.php, edit as desired and you have a new page on your site that matches all the rest.  
−
.h-10 { height:10px; }
+
In the template file, enter your page xhtml content where it shows the remark:<nowiki><!-- Add your page contents here -->
−
 
+
</nowiki>
−
/* 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 ==
+

Latest revision as of 21:40, December 20, 2008

Note: This information refers to AWBS version 2.8.0 and newer.

Template Information

The user web interface template files are located in two locations.

All files common to all themes are in; templates/common_files directory

All files unique to a theme are in; templates/[theme_directory]

Theme directory files override common_files files if they exist. 

For example:
If you copy support.php from common_files to your theme directory and edit it,
your site will use the support.php file in the theme directory and
ignore the support.php file in the common_files directory.


The top.php, bottom.php and header.php are used for all pages of the user web interface.
top.php creates the header area of the web pages
bottom.php creates the footer area of the web pages
header.php handles the <head> section with meta tags and other needed code for the system's functionality.

The optional left.php and right.php are included on all non member pages (pages without the left member menu).
If you wish to override this and display them on all pages including member pages, add a new flag in the Extended System Configuration named showleftright and give it a value of 1.

To use left.php add this to your top.php template:
<?=$left?>
To use right.php add this to your bottom.php template:
<?=$right?>

Then make a left.php and/or right.php template and place it in your theme directory and add xhmtl code as desired.

(Note: sample placement can be seen in the top.php and bottom.php files of the simple theme)

If you don't want to display the left.php or right.php templates in your home page, use this code in your top.php file and bottom.php file to filter out the index.php page. 

<?php if (strtolower($this_filename) != "index.php"){ echo $left; } ?>
<?php if (strtolower($this_filename) != "index.php"){ echo $right; } ?>

Stylesheets

Edit the stylesheet to obtain your desired look for the content area of the site.
The stylesheet can be found at: templates/[your_theme_directory]/css/style.css

If using portal mode, this stylesheet is also used:
templates/[your_theme_directory]/css/portal.css

For the site menu and member menu:
templates/[your_theme_directory]/css/menu.css

For various popup pages throughout the system:
templates/[your_theme_directory]/css/popups/pop.css

Editing the site menu

  • To edit the menu edit;

templates/common_files/group1menu.php

or if you are using portal mode

templates/common_files/group1cpmenu.php 

INFO
The group1 refers to the user group, if you add user groups you can give them their own custom menu by creating new menu files.
Example: 
You add a new user group and it will be group 2
Create a new menu file named group2menu.php
When the group 2 users log in, their menu will change to the group2menu.php file instead of the default group1menu.php file.
  • To edit the text on the menu links, edit the includes/language/english/global.php file
  • The stylesheet used for the menus is:

templates/[your_theme_directory]/css/menu.css Note: this stylesheet is used for both the site menu and the member area menu

Menu details and example information

This is an individual link, it appears as an item, and this is the "Home" link
each <li></li> tag resembles 1 hyperlink (menu item).

   example:
   <ul id="menu">
    	<li><a href="#">Item 1</a></li>
    	<li><a href="#">Item 2</a></li>
    	<li><a href="#">Item 3</a></li>
    	<li><a href="#">Item 4</a></li>
    	<li><a href="#">Item 5</a></li>
    	<li><a href="#">Item 7</a></li>
    </ul>
   
   This will show the main navigation window like this:
   Item 1	|	Item 2	|	Item 3	|	Item4	|	Item5	|	Item6	|	Item7

That will just create our basic menu.

Now, lets see how submenus are created
example: 

<ul id="menu">
    	<li><a href="#">Item 1</a>
            <ul>
                <li><a href="#">Subitem1</a></li>
                <li><a href="#">Subitem2</a></li>
                <li><a href="#">Subitem3</a></li>
                <li><a href="#">Subitem4</a></li>
            </ul>
        </li>
    	<li><a href="#">Item 2</a></li>
    	<li><a href="#">Item 3</a></li>
    	<li><a href="#">Item 4</a></li>
    	<li><a href="#">Item 5</a></li>
    	<li><a href="#">Item 7</a></li>
    </ul>
   
   This will create the following hierarchy 
   
   Item 1	|	Item 2	|	Item 3	|	Item4	|	Item5	|	Item6	|	Item7

   Subitem1
   Subitem2
   Subitem3                                  
   Subitem4

Then when you hover on Item 1, it will show the Subitem list. 

   Item 1	|	Item 2	|	Item 3	|	Item4	|	Item5	|	Item6	|	Item7
   Subitem1
      sub-subitem1
      sub-subitem2
      sub-subitem3
      sub-subitem4
   Subitem2
   Subitem3                                    
   Subitem4

Now, to create a 3rd level subitem to see this menu: example: 

<ul id="menu">
    	<li>
        	<a href="#">Item 1</a>
            <ul>
                <li>
                     <a href="#">Subitem1</a>
                         <ul>
                           <li><a href="#">sub-Subitem1</a></li>
                           <li><a href="#">sub-Subitem2</a></li>
                           <li><a href="#">sub-Subitem3</a></li>
                           <li><a href="#">sub-Subitem4</a></li>
                         </ul>
                </li>
                <li><a href="#">Subitem2</a></li>
                <li><a href="#">Subitem3</a></li>
                <li><a href="#">Subitem4</a></li>
            </ul>
        </li>
    	<li><a href="#">Item 2</a></li>
    	<li><a href="#">Item 3</a></li>
    	<li><a href="#">Item 4</a></li>
    	<li><a href="#">Item 5</a></li>
    	<li><a href="#">Item 7</a></li>
    </ul>


Then when you hover on Item 1, it will show the Subitem list, then when you click on Subitem1 it will show the sub-subitem list (2nd level)

Now, to give the 3rd level menu the same highlight and text color as the 2nd level 

ul#menu li:hover li:hover li a, ul#menu li.iehover li.iehover li a { background:#<background color>; color:#<text color>; border-left:1px solid #<optional border color>; }
ul#menu li:hover li:hover li a:hover, ul#menu li:hover li:hover li:hover a, ul#menu li.iehover li.iehover li a:hover, ul#menu li.iehover li.iehover li.iehover a { background:#<background color>; color:#<text color>; }

This will make sure the 3rd level menu is styled, you can choose to give it the same style as the 2nd level menu or to style it differently.

If you wish to add an indicator/arrow/image/or a different color to the 2nd level menu item which has a 3rd level menu, you can simply give this link a class like the following example: 

<ul id="menu">
    	<li>
        	<a href="#">Item 1</a>
            <ul>
                <li>
                     <a href="#" class="parent">Subitem1</a>
                         <ul>
                           <li><a href="#">sub-Subitem1</a></li>
                           <li><a href="#">sub-Subitem2</a></li>
                           <li><a href="#">sub-Subitem3</a></li>
                           <li><a href="#">sub-Subitem4</a></li>
                         </ul>
                </li>
                <li><a href="#">Subitem2</a></li>
                <li><a href="#">Subitem3</a></li>
                <li><a href="#">Subitem4</a></li>
            </ul>
        </li>
    	<li><a href="#">Item 2</a></li>
    	<li><a href="#">Item 3</a></li>
    	<li><a href="#">Item 4</a></li>
    	<li><a href="#">Item 5</a></li>
    	<li><a href="#">Item 7</a></li>
    </ul>

Then, add the following selector classes to your stylesheet. 

ul#menu li:hover li a.parent, ul#menu li.iehover li a.parent { background:#<background color> url("../images/arrow.gif") no-repeat 99%; color:#<text color>; }
ul#menu li:hover li a.parent:hover, ul#menu li.iehover li a.parent:hover { background:#<background color> url("../images/arrow.gif") no-repeat 99%; color:#<text color>; }

Editing the member menu

The menu used in the member area is; templates/common_files/usermenu.php Edit that file to add/edit/remove links

Edit the templates/[your_theme_directory]/css/menu.css file to change colors/style

Edit the includes/language/english/global.php file to change text on the menu.

Note: If in portal mode this menu is not used. The templates/common_files/group1cpmenu.php is used instead and replaces the main site menu included in the top.php file

Adding new pages

Use the basicphptemplate.php in the root AWBS directory and the basictemplate.php file in the templates/common_files directory to make new pages for your site.

It works like this:

You use the basicphptemplate.php file in your root AWBS directory and call the basictemplate.php that you add your content to and place in your templates/theme directory.

Example: you want a new page called webdesign.php

  • Take the basicphptemplate.php file, copy/rename it to webdesign.php, edit the file to call webdesign.php template. 
This line: print $template->parse("basictemplate.php");
replace basictemplate.php with webdesign.php
  • Now take the basictemplate.php file in your templates/common_files directory, copy it to your theme directory and rename it webdesign.php, edit as desired and you have a new page on your site that matches all the rest.

In the template file, enter your page xhtml content where it shows the remark:<!-- Add your page contents here -->

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