Difference between revisions of "Template Customization"
(→Template Information) |
|||
(32 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | '''''Note:''' This information refers to AWBS version 2.8.0 and newer.'' | |
+ | __TOC__ | ||
== Template Information == | == 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.<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. | ||
− | ''' | + | 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 /> |
+ | <br /> | ||
+ | To use left.php add this to your top.php template:<br /> | ||
+ | <nowiki><?=$left?></nowiki><br /> | ||
+ | To use right.php add this to your bottom.php template:<br /> | ||
+ | <nowiki><?=$right?></nowiki> | ||
− | + | 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. |
+ | <nowiki><?php if (strtolower($this_filename) != "index.php"){ echo $left; } ?></nowiki> | ||
+ | <nowiki><?php if (strtolower($this_filename) != "index.php"){ echo $right; } ?></nowiki> | ||
− | + | == Stylesheets == | |
+ | Edit the stylesheet to obtain your desired look for the content area of the site.<br /> | ||
+ | The stylesheet can be found at: templates/[your_theme_directory]/css/style.css | ||
− | + | If using portal mode, this stylesheet is also used:<br /> | |
+ | templates/[your_theme_directory]/css/portal.css | ||
− | + | For the site menu and member menu:<br /> | |
+ | templates/[your_theme_directory]/css/menu.css | ||
− | + | For various popup pages throughout the system:<br /> | |
+ | 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<br /> | |
+ | 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 | ||
− | + | That will just create our basic menu. | |
− | + | 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 | ||
+ | |||
− | + | 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: | ||
+ | <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> | ||
+ | |||
+ | |||
+ | |||
+ | 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 | ||
+ | <pre> | ||
+ | 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>; } | ||
+ | </pre> | ||
+ | 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: | ||
+ | <nowiki><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></nowiki> | ||
+ | |||
+ | Then, add the following selector classes to your stylesheet. | ||
+ | <pre> | ||
+ | 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> | ||
+ | |||
+ | == 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 == | == Adding new pages == | ||
− | Use the basicphptemplate.php in the root AWBS directory and the basictemplate.php file in the templates/ | + | 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: | It works like this: | ||
Line 75: | Line 229: | ||
replace basictemplate.php with webdesign.php | replace basictemplate.php with webdesign.php | ||
− | *Now take the basictemplate.php file in your templates/ | + | *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 | + | In the template file, enter your page xhtml content where it shows the remark:<nowiki><!-- Add your page contents here --> |
</nowiki> | </nowiki> |
Latest revision as of 22:40, December 20, 2008
Note: This information refers to AWBS version 2.8.0 and newer.
Contents
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
- 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>; }
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 -->