Difference between revisions of "Template Customization"

From AWBS Wiki
Jump to: navigation, search
(→‎Template Information)
 
(39 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
Listed below are global templates - they are included on all pages.
+
'''''Note:''' This information refers to AWBS version 2.8.0 and newer.''
 +
__TOC__
 +
== Template Information ==
  
−
Edit with an html editor or text editor. Do not use FrontPage!
+
The user web interface template files are located in two locations.
  
−
Location: templates/[your_theme]/
+
All files common to all themes are in;
 +
templates/common_files directory
  
−
+
All files unique to a theme are in;
 +
templates/[theme_directory]
  
−
'''header.php'''
+
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.
  
−
Included on all pages. Contains the meta tags and character set for the site.
 
  
−
+
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.
  
−
'''top.php'''
+
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>
  
−
Included on all pages. Contains the body tag, banner/logo area, and top menu area.
+
Then make a left.php and/or right.php template and place it in your theme directory and add xhmtl code as desired.
−
Change as desired. (Some themes will require editing of png or psd files.)
+
  
−
+
''(Note: sample placement can be seen in the top.php and bottom.php files of the simple theme)''
  
−
'''left.php'''
+
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>
  
−
Included on all pages. Column the height of the page. Edit as desired. Remember it is on all pages. Some themes have a menu included in this file.
+
== 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
  
−
'''right.php'''
+
For the site menu and member menu:<br />
 +
templates/[your_theme_directory]/css/menu.css
  
−
Same as left, but on the right of all pages.
+
For various popup pages throughout the system:<br />
 +
templates/[your_theme_directory]/css/popups/pop.css
  
−
+
== Editing the site menu ==
  
−
'''bottom.php'''
+
*To edit the menu edit;
  
−
Included on all pages. Put your copyright info/footer content here.
+
templates/common_files/group1menu.php
  
−
+
or if you are using portal mode
  
−
'''boxtop.php''' and '''boxbottom.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.
  
−
These make up the box used on most pages for lookup boxes, etc. Change to the look you desire.
+
*To edit the text on the menu links, edit the includes/language/english/global.php file
−
boxtop forms the beginning of the table, first row and begins the column. Boxbottom ends the column,row and table.
+
  
−
+
*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
  
−
The home page: (may not apply to all template themes)
+
=== Menu details and example information ===
  
−
index.php - used when 'default homepage template' is set to 'Hosting 1' in system setup, system options
 
−
index2.php - used when 'default homepage template' is set to 'Domain'
 
−
index3.php - used when 'default homepage template' is set to 'Hosting 2'
 
  
−
+
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
  
−
Images:
+
That will just create our basic menu.
−
Some images may need changing to customize. Look in the devkit directory in your theme directory for any available psd or png files that can be used to customize your theme. Use Photoshop or a photo editing software to edit or create new images.
+
 
 +
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 />
 +
&nbsp;&nbsp;&nbsp;Subitem1
 +
&nbsp;&nbsp;&nbsp;Subitem2
 +
&nbsp;&nbsp;&nbsp;Subitem3                                 
 +
&nbsp;&nbsp;&nbsp;Subitem4
 +
               
 +
 
 +
Then when you hover on Item 1, it will show the Subitem list.
 +
 
 +
    Item 1 | Item 2 | Item 3 | Item4 | Item5 | Item6 | Item7
 +
&nbsp;&nbsp;&nbsp;Subitem1
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem1
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem2
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem3
 +
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sub-subitem4
 +
&nbsp;&nbsp;&nbsp;Subitem2
 +
&nbsp;&nbsp;&nbsp;Subitem3                                   
 +
&nbsp;&nbsp;&nbsp;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 ==
 +
 
 +
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:<nowiki><!-- Add your page contents here -->
 +
</nowiki>

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

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

Template Information

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

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

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

Theme directory files override common_files files if they exist. 

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


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

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

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

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

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

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

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

Stylesheets

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

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

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

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

Editing the site menu

  • To edit the menu edit;

templates/common_files/group1menu.php

or if you are using portal mode

templates/common_files/group1cpmenu.php 

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

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

Menu details and example information

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

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

That will just create our basic menu.

Now, lets see how submenus are created
example: 

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

   Subitem1
   Subitem2
   Subitem3                                  
   Subitem4

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

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

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

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


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

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

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

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

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

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

Then, add the following selector classes to your stylesheet. 

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

Editing the member menu

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

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

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

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

Adding new pages

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

It works like this:

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

Example: you want a new page called webdesign.php

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

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

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