Skip to end of metadata
Go to start of metadata

Top Menu is located under the header and remains same for all pages.

Software Themes have different styles of top menus, for example:

Clear View Theme top menu:

GenerationX Theme top menu:

Intelligent View Theme top menu:

Top menu design

To modify the top menu design you need to edit the template called header.tpl
The path is:
Admin Panel > Layout and Content > SystemTemplates > Menu > header.tpl

In the bottom part of the code you need to find the following:


1)     <td><img src="{image}up-menu-left.png" border="0" alt=""/></td>
2)     <td width="100%" background="{image}up-menu-left-bg.png">
        {module name="menu" function="top_menu"}

3)     <td><img src="{image}up-menu-right.png" border="0" alt=""/></td>



1) – This is the left corner of the top menu form   - up-menu-left.png

2) – This is the central part of the top menu form  - up-menu-left-bg.png
I.e. it is the background of the central part which is ‘stretched’ along the full length of the top menu

3) – And this is the right corner of the top menu  - up-menu-right.png

Hence to change the top menu color you need to modify its left corner, central part (which will be the background) and right corner.
The new images for just listed components should be uploaded to the:

FTP – templates – GenerationX – main – images folder

Top Menu Items

Job Seekers and Employers user groups have different top menu tabs depending on their specific:

Job Seeker top menu has the following tabs:

Employer top menu looks the following way:

In the mentioned above part of the header.tpl code you can also see the following line:

     {module name="menu" function="top_menu"}     – this module activates the menu itself (menu items)

To modify these menu items you need to edit the top.tpl template.
The path is:
Admin Panel > Layout and Content > System Templates > Menu > top.tpl

This is the way top menu items defined in the top.tpl


     <td><a href="{$GLOBALS.site_url}/my_account/">My Account</a></td>

     <td><img src="{image}up-menu-left-sep.png" border="0" alt=""/></td>

     <td><a href="{$GLOBALS.site_url}/find_jobs/" >Find Jobs</a></td>

     <td><img src="{image}up-menu-left-sep.png" border="0" alt=""/></td>


      <td><a href="{$GLOBALS.site_url}/my_account/">My Account</a></td> 
- This is the cell <td></td> where the link to My Account page contained

- the link URL where a user will be redirected after clicked on the Menu item

 Note: To see the detailed explanation of how the {$GLOBALS.site_url} function operates, click here.

      <td><a href="{$GLOBALS.site_url}/my_account/">My Account</a></td> - the menu item

      <td><img src="{image}up-menu-left-sep.png" border="0" alt=""/></td>- this is the image of the top menu items separator  

 Note: If you change the color of the top menu - the menu separator image should be changed as well.

  • No labels