|
|
| (42 intermediate revisions by 2 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 '''group1menu.php''' in every template folder, and styled via [http://awbswiki.com/index.php?title=Template_Customization#Editing_the_Stylesheet '''menu.css''']
| + | |
| − | Its a php/css based menu, easy to modify and very flexible.
| + | |
| − | '''Example'''
| + | |
| − | <pre>
| + | |
| − | <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>
| + | |
| − | </pre>
| + | |
| − | Its that simple.
| + | |
| | | | |
| − | Also, group1menu.php allow php scripts.<br />
| + | Theme directory files override common_files files if they exist. |
| − | '''This is a very simple active menu item highlight script used in group1menu.php, the one that highlights Home when index.php is the active window, so with other items.'''
| + | For example: |
| − | <pre><?php
| + | If you copy support.php from common_files to your theme directory and edit it, |
| − | global $reseller_free_plan;
| + | your site will use the support.php file in the theme directory and |
| − | $page_homeSelected = (preg_match("/\b\*?.(index).*?\b/i",$_SERVER["SCRIPT_FILENAME"]))? "selectedMenu a" : "";
| + | ignore the support.php file in the common_files directory. |
| − | $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" : "";
| + | |
| − | ?></pre>
| + | |
| − | 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====
| |
| − | <p>There is a basictemplate.php file included with each theme, it aims to
| |
| − | explain how the basic layout it.</p>
| |
| − | <pre><!-- 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?></pre>
| |
| | | | |
| − | <p><font color="#0000FF"><?=$header?></font> places header.php's contents on top of page</p> | + | 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. |
| | | | |
| − | <p><font color="#0000FF"><?=$top?></font> places top.php's contents on top of page</p> | + | 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 /> |
| − | <p><font color="#0000FF"><?=$footer?></font> places footer.php's contents on top of page</p> | + | <br /> |
| − | ----
| + | To use left.php add this to your top.php template:<br /> |
| − | ====header.php====
| + | <nowiki><?=$left?></nowiki><br /> |
| − | Header.php is one of the three main pages taking care of AWBS templates, which are header.php, footer.php, and top.php.
| + | To use right.php add this to your bottom.php template:<br /> |
| | + | <nowiki><?=$right?></nowiki> |
| | | | |
| − | You don't really need to modify header.php, unless you are going to add new style-sheets, JavaScript or anything else related.
| + | Then make a left.php and/or right.php template and place it in your theme directory and add xhmtl code as desired. |
| − | 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:
| + | ''(Note: sample placement can be seen in the top.php and bottom.php files of the simple theme)'' |
| − | <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
| + | |
| − | #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.
| + | |
| − | #This link is mainly placed to a "go to top" link in the footer area.<pre><a name="top"... </pre>
| + | |
| − | In the noir and rouge themes, you will see a <div class="wrapper">, this one is important as it holds all the data together, a different technique is used in the blue theme. But its all the same.
| + | |
| | | | |
| − | Then comes the header area <div class="header"></div> - this contains the header image/logo, language selection form (if allowed), top links, and anything you may need. Inside of it, placed <table id="masthead-layout"></table> which is designed to contain all header related data.
| + | 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. |
| | + | <nowiki><?php if (strtolower($this_filename) != "index.php"){ echo $left; } ?></nowiki> |
| | + | <nowiki><?php if (strtolower($this_filename) != "index.php"){ echo $right; } ?></nowiki> |
| | | | |
| − | <form method="post" action="index.php">
| + | == Stylesheets == |
| − | <input type="hidden" name="action" value="selectlang">
| + | Edit the stylesheet to obtain your desired look for the content area of the site.<br /> |
| − | <select name="language" class="styled">
| + | The stylesheet can be found at: templates/[your_theme_directory]/css/style.css |
| − | <?=$lang_list?>
| + | |
| − | </select><input type="submit" name="submit" value="go"> | + | |
| − | </form>
| + | |
| − | </pre>
| + | |
| | | | |
| − | This is the language selection form, you may place it anywhere you like.
| + | If using portal mode, this stylesheet is also used:<br /> |
| | + | templates/[your_theme_directory]/css/portal.css |
| | | | |
| − | '''<?=$ADMINPANEL?>''' as a link is related to the '''noir''' and blue theme, used to display a link to the administrator control panel.
| + | For the site menu and member menu:<br /> |
| | + | templates/[your_theme_directory]/css/menu.css |
| | | | |
| − | '''<?=$menu?>''' - this variable is very important, it displays the whole site navigation menu, this menu can be edited via group1menu.php in your theme's folder.
| + | For various popup pages throughout the system:<br /> |
| | + | templates/[your_theme_directory]/css/popups/pop.css |
| | | | |
| − | Finally, the data container start here, the DOC table:
| + | == Editing the site menu == |
| | | | |
| − | <pre><div style="height:5px; clear:both;"></div>
| + | *To edit the menu edit; |
| − | <table id="doc" align="Center">
| + | |
| − | <tr>
| + | |
| − | <td></pre>
| + | |
| | | | |
| − | after this <'''td'''> tag, you start placing your layout and contents
| + | templates/common_files/group1menu.php |
| | | | |
| − | ====bottom.php====
| + | or if you are using portal mode |
| − | 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
| + | 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. |
| | | | |
| − | <pre><table>
| + | *To edit the text on the menu links, edit the includes/language/english/global.php file |
| − | <tr>
| + | |
| − | <td>
| + | |
| | | | |
| − | Any page
| + | *The '''stylesheet''' used for the menus is: |
| − | Hi, I am an AWBS template page
| + | templates/[your_theme_directory]/css/menu.css |
| | + | Note: this stylesheet is used for both the site menu and the member area menu |
| | | | |
| − | bottom.php
| + | === Menu details and example information === |
| | | | |
| − | </td>
| |
| − | </tr>
| |
| − | </table></pre>
| |
| | | | |
| − | This is how essential bottom.php is. Now, lets see how bottom.php look like: | + | This is an individual link, it appears as an item, and this is the "Home" link<br /> |
| − | This is an example from the noir theme. | + | each <nowiki><li></li></nowiki> tag resembles 1 hyperlink (menu item).<br /> |
| | + | example: |
| | + | <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 |
| | | | |
| − | <pre><?php include(WORKDIR."/includes/ver.php"); ?>
| + | That will just create our basic menu. |
| − | </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(); ?></pre>
| + | |
| | | | |
| − | 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!
| + | Now, lets see how submenus are created<br /> |
| | + | example: |
| | + | <nowiki><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></nowiki> |
| | + | |
| | + | This will create the following hierarchy |
| | + | |
| | + | Item 1 | Item 2 | Item 3 | Item4 | Item5 | Item6 | Item7<br /> |
| | + | Subitem1 |
| | + | Subitem2 |
| | + | Subitem3 |
| | + | Subitem4 |
| | + | |
| | | | |
| − | == Editing the Stylesheet ==
| + | Then when you hover on Item 1, it will show the Subitem list. |
| − | 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> | + | 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: |
| | + | <nowiki><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></nowiki> |
| | | | |
| − | '''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 [at] awbs.com) AWBS Templating design and support.
| |
| − |
| |
| − |
| |
| − | This commented CSS file is from the _rouge_ Theme.
| |
| − | */
| |
| | | | |
| − | /*
| + | 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) |
| − | 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 */
| + | Now, to give the 3rd level menu the same highlight and text color as the 2nd level |
| − | body {
| + | <pre> |
| − | /* setting font family */
| + | 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-family:Verdana, Arial, Helvetica, sans-serif;
| + | 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>; } |
| − | /*
| + | </pre> |
| − | body background, it comes over the html { } background.
| + | 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. |
| − | 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;
| + | |
| − | }
| + | |
| | | | |
| − | /* | + | 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: |
| − | The wrapper class is essential in the rouge and noir theme, its what holds and centers all the -
| + | <nowiki><ul id="menu"> |
| − | contents so they appear the way they are.
| + | <li> |
| − | margins needs to be set to 0 auto 0 so header and footer would be touching the page's start/end.
| + | <a href="#">Item 1</a> |
| − | the width is relative, you can set it to your liking.
| + | <ul> |
| − | */
| + | <li> |
| − | .wrapper {
| + | <a href="#" class="parent">Subitem1</a> |
| − | width:768px;
| + | <ul> |
| − | margin: 0 auto 0;
| + | <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> |
| | | | |
| − | /* property used while added a <div class="clear"></div> needed for spacing at times. */
| + | Then, add the following selector classes to your stylesheet. |
| − | .clear {
| + | <pre> |
| − | clear:both;
| + | 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>; } |
| − | | + | </pre> |
| − | /* 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;
| + | |
| − | }
| + | |
| | | | |
| | + | == Editing the member menu == |
| | | | |
| − | /* Cart.php styles */ | + | The menu used in the member area is; |
| | + | templates/common_files/usermenu.php |
| | + | Edit that file to add/edit/remove links |
| | | | |
| − | /* Normal link */ | + | Edit the templates/[your_theme_directory]/css/menu.css file to change colors/style |
| − | a.cartlink {
| + | |
| − | background:url("../images/smallCart.png") no-repeat 0px 50%;
| + | |
| − | padding-left:18px;
| + | |
| − | text-decoration:none;
| + | |
| − | }
| + | |
| | | | |
| − | /* Checkout buttons */ | + | Edit the includes/language/english/global.php file to change text on the menu. |
| − | 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 */
| + | '''''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'' |
| − | 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 */
| + | == Adding new pages == |
| − | strong { font-weight:700; }
| + | |
| | | | |
| − | /* SAMS Whois Highlight Important Fields Span */ | + | 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. |
| − | 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. */
| + | It works like this: |
| − | input.red {
| + | |
| − | color:#FAE6E6;
| + | |
| − | }
| + | |
| − | input.blue {
| + | |
| − | color:#FFFFFF;
| + | |
| − | }</pre>
| + | |
| | | | |
| − | == Adding new pages to the site ==
| + | 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. |
| − | <p>AWBS allows you to add custom pages, with custom scripts support as well, you
| + | |
| − | can use custom PHP/MySQL in <b>both</b> custom and existing pages.<br>
| + | |
| − | You can either place them in includes/gparser_user.php or in any page.</p>
| + | |
| | | | |
| − | <p>To create a custom page you need to follow basic instructions:</p>
| + | ''Example: you want a new page called webdesign.php'' |
| − | <ol>
| + | |
| − | <li>Create a new file in your AWBS root folder, testing.php for example <i>
| + | |
| − | there is basictemplate.php as an example</i>.</li>
| + | |
| − | <li>
| + | |
| − | Inside <b>testing.php</b>, place the following code.
| + | |
| − | <pre>
| + | |
| | | | |
| − | <?php
| + | * Take the basicphptemplate.php file, copy/rename it to webdesign.php, edit the file to call webdesign.php template. |
| − | $DIR=(dirname(__FILE__));
| + | |
| − | include($DIR."/includes/dbconfig.php");
| + | |
| − | include($workdir."/includes/sessions.php");
| + | |
| − | include_once($workdir."/config.php");
| + | |
| − | include($workdir."/includes/gparser.php");
| + | |
| − | ?>
| + | |
| − | </pre>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | Explanation.
| + | |
| − | <pre>
| + | |
| − | <?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
| + | |
| − | ?>
| + | |
| − | </pre>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | Adding some custom variables (like the ones you set in gparser_user.php
| + | |
| − | <pre>
| + | |
| | | | |
| − | <?php
| + | This line: print $template->parse("basictemplate.php"); |
| − | $DIR=(dirname(__FILE__));
| + | replace basictemplate.php with webdesign.php |
| − | 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;
| + | |
| − | }
| + | |
| − | ?>
| + | |
| − | </pre>
| + | |
| − | </li>
| + | |
| − | <li>
| + | |
| − | Finally:
| + | |
| − | <pre>
| + | |
| | | | |
| − | <?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. |
| − | $DIR=(dirname(__FILE__));
| + | In the template file, enter your page xhtml content where it shows the remark:<nowiki><!-- Add your page contents here --> |
| − | include($DIR."/includes/dbconfig.php");
| + | </nowiki> |
| − | 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;
| + | |
| − | ?>
| + | |
| − | </pre>
| + | |
| − | </li>
| + | |
| − | <li>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?></li>
| + | |
| − | </ol> | + | |
| − | <p>This is how to add a custom page to your AWBS.</p>
| + | |
Then make a left.php and/or right.php template and place it in your theme directory and add xhmtl code as desired.
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.
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
templates/[your_theme_directory]/css/menu.css
Note: this stylesheet is used for both the site menu and the member area menu
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
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:
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
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.
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.
In the template file, enter your page xhtml content where it shows the remark:<!-- Add your page contents here -->
