[code] How to make buttons at top of screen.

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).
Note: Unless you are sure of what you are doing, do not edit the margin or padding.

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.

Note: Editing the padding will change the size of the area around the word. You must keep this the same as the hover padding, otherwise your links will jump.

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.
Note: Editing the padding will change the size of the area around the word. You must keep this the same as the link padding, otherwise your links will jump.
Adding a Banner

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.