Difference between revisions of "Template Customization"

From AWBS Wiki
Jump to: navigation, search
(→‎More menu details and example information)
(→‎Template Information)
 
(11 intermediate revisions by 2 users not shown)
Line 18: Line 18:
  
  
−
The top.php, bottom.php and header.php are used for all pages of the user web interface.<br />
+
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 />
 
top.php creates the header area of the web pages<br />
 
bottom.php creates the footer 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.
 
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)
+
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 ==
 
== Stylesheets ==
Line 60: Line 73:
 
Note: this stylesheet is used for both the site menu and the member area menu
 
Note: this stylesheet is used for both the site menu and the member area menu
  
−
=== More menu details and example information ===
+
=== Menu details and example information ===
  
  
Line 83: Line 96:
 
example:
 
example:
 
  <nowiki><ul id="menu">
 
  <nowiki><ul id="menu">
−
     <li><a href="#">Item 1</a></li>
+
     <li><a href="#">Item 1</a>
−
    <li>
+
−
        <a href="#">Item 2</a>
+
 
             <ul>
 
             <ul>
 
                 <li><a href="#">Subitem1</a></li>
 
                 <li><a href="#">Subitem1</a></li>
Line 93: Line 104:
 
             </ul>
 
             </ul>
 
         </li>
 
         </li>
 +
    <li><a href="#">Item 2</a></li>
 
     <li><a href="#">Item 3</a></li>
 
     <li><a href="#">Item 3</a></li>
 
     <li><a href="#">Item 4</a></li>
 
     <li><a href="#">Item 4</a></li>
Line 102: Line 114:
 
      
 
      
 
     Item 1 | Item 2 | Item 3 | Item4 | Item5 | Item6 | Item7<br />
 
     Item 1 | Item 2 | Item 3 | Item4 | Item5 | Item6 | Item7<br />
−
Subitem1<br />
+
&nbsp;&nbsp;&nbsp;Subitem1
−
Subitem2<br />
+
&nbsp;&nbsp;&nbsp;Subitem2
−
Subitem3 <br />                                  
+
  &nbsp;&nbsp;&nbsp;Subitem3                                  
−
Subitem4<br />
+
&nbsp;&nbsp;&nbsp;Subitem4
 
                  
 
                  
  
−
Then when you hover on Item 2, it will show the Subitem list.
+
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:
 
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>
  
−
    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)
+
 
 +
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 ==
 
== Editing the member menu ==

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"