Customizing SMF > Tips and Tricks

[SMF Trick] Displaying a Statically Positioned Nav Bar

(1/3) > >>

Anthony`:
Im sure this has been posted before, but I thought I would post another version for SMF 2.0.

This SMF trick is relatively easy and just requires some CSS and index template changes. You will also need to download the tiny image file at the bottom of this tutorial if you choose to use a theme that matches the default (Core theme).

First off, in your theme's css directory, look for the index.css file. We need to make a quick edit to the forum wrapper so we can move everything down slightly. Search for,

--- Code: ---/* This division wraps the entire forum when a forum width is set. */
div#wrapper
--- End code ---

And within the curly braces add,

--- Code: ---padding-top: 75px;
--- End code ---

Next we are going to replace the CSS id of the menu bar, search for,

--- Code: ---#main_menu
--- End code ---

And replace that entire CSS id with,

--- Code: ---#main_menu
{
position: fixed;
top: -5px;
padding: 0 0.5em;
/* Create z-index so this menu is above all (or most) other content */
z-index: 5;
background: url(../images/theme/nav_bottom_block.png) #fefefe repeat-x;
height: 30px;
width: 100%;
padding-top: 25px;
margin: 0 auto;
}
--- End code ---

This will define our display properties.
Next, in your theme's index.template.php file, find,

--- Code: --- // Show the menu here, according to the menu sub template.
template_menu();
--- End code ---

And next we need to move that to the top of the function so the menu isnt stuck within the wrapper's width properties. Move it to below this line,

--- Code: ---global $context, $settings, $options, $scripturl, $txt, $modSettings;
--- End code ---

Therefore it should look something like,

--- Code: ---function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

// Show the menu here, according to the menu sub template.
template_menu();
--- End code ---

And finally, download the attatched image (nav_bottom_block.png) and upload it to your theme's images/theme directory.

What it looks like (ignore search bar):
http://img40.imageshack.us/i/unlfgdfgded.png/

Masterd:
Nice trick! :D

Ercan.G:
can you put a new screenshot_?

Anthony`:
Better? Remember to ignore the search bar, I just added that myself.

Doctor Deejay:
Nice trick Anthony :) Any plans for packaging it to a mod?

Navigation

[0] Message Index

[#] Next page