Template Customization

From AWBS Wiki
Revision as of 19:43, December 5, 2008 by Samdrams (Talk | contribs)

Jump to: navigation, search

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 is included on all non member pages (pages without the left member menu)

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

More 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></li>
    	<li>
        	<a href="#">Item 2</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 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 2, it will show the Subitem list.


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

   Item 1	|	Item 2	|	Item 3	|	Item4	|	Item5	|	Item6	|	Item7

Subitem1

               	sub-subitem1
                   sub-subitem2
                   sub-subitem3
                   sub-subitem4

Subitem2 Subitem3 Subitem4

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

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 -->