| We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Advanced Submenu | |
|---|---|
| Topic Started: Feb 23 2006, 05:21 PM (12,102 Views) | |
| Nicola | Feb 23 2006, 05:21 PM Post #1 |
|
.....
|
How to Make a Custom Submenu This documentation will show you how to make custom submenus, as seen in the examples below. A.)  B.)  The first step is to turn off the original submenu, which can be found in the Style Sheets. To open the Style Sheets: Admin CP ›› (Left menu) Skinning & Styles ›› Manage Style Sheets Once you have the Style Sheets open within the main window, locate the section of code shown below :
The area shown in bold is the submenu. Add the code in Bold Red to the same area within your own Style Sheets. Creating the Table The new Submenu will need to be within a table.
Insert this code above the <% BOARD HEADER %> tag. Anything in RED is where the table/td is referring to the CSS. Green indicates where you need to put the URL of your Banner/Logo. Anything in BLUE indicates a link on your submenu. You will need to replace the links to make them refer to your own forum. Customising the Submenu Now you have added the table and links needed for the submenu, it needs to be customised. The td class 'customsubmenu' as shown in the code, needs to be added to the CSS, in order for the table to be customised.  In the above image, the different parts of the submenu are: A.) .customsubmenu B.) .customsubmenu a C.) .customsubmenu a:hover The .customsubmenu class will control the main area behind and around the links. The .customsubmenu a class will determine how the links appear. The .customsubmenu a:hover class will determine how the links appear when the mouse is hovered over them. Add all three classes to your CSS, and edit as you see fit. The CSS you need is shown below:
Here you can see that for the main submenu, a border and background image has been set. Other properties include how tall the submenu is (height) and whether the text appears in uppercase or lower case (text-transform).
For the links, the same background image of the main submenu has been used. The border colours have been changed to give the link a 3D effect. Again, you can customise how the links look yourself.
For the hover, the same background image of the main submenu has been used. The border colours have been changed to give a flattening effect to the link when it is hovered over. Again, you can customise how the links look yourself. You may notice, there is a DIV before the submenu code in the header. This is where your logo or banner will go. It has to go in the header instead of the normal logo macro because otherwise it will appear below the submenu. If you wish for it to appear like that, then by all means, use the logo macro in the Images section. Note:It is not recommended you place the submenu code along with the banner into the Logo macro, because anything that appears in the Logo macro will link to the board index. The class given to the banner DIV is shown as 'banner'. You can leave it how is it, and simply add an image within the DIV, or you can create a new CSS class called 'banner' and customise it from the CSS. |
 |
 
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Skinning Documentation · Next Topic » |
5:20 AM Nov 24
