Simple Machines Community Forum

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,
/* This division wraps the entire forum when a forum width is set. */
div#wrapper

And within the curly braces add,
padding-top: 75px;

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

And replace that entire CSS id with,
#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;
}

This will define our display properties.
Next, in your theme's index.template.php file, find,
// Show the menu here, according to the menu sub template.
template_menu();

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,
global $context, $settings, $options, $scripturl, $txt, $modSettings;

Therefore it should look something like,
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;

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

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/

Nice trick! :D

can you put a new screenshot_?

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

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

Zitat von: [TheDj] in Mai 22, 2011, 02:45:16 VORMITTAG
Nice trick Anthony :) Any plans for packaging it to a mod?

I did earlier, but if you want to package it as a mod go ahead. :)

Does anyone know how to move the links to the right? Instead of the Left?

Very nice. I imagine this will come in handy for quite a few people. :D One suggestion though. If it were me, I'd have used margin instead of padding in the #wrapper rules. Not that it particularly matters.


margin: 75px auto 0 auto;


Zitat von: 6Scylla in Juni 07, 2012, 09:34:05 VORMITTAG
Does anyone know how to move the links to the right? Instead of the Left?

Yes, you can float the list items to the right instead of the left by finding this code:


.dropmenu li
{
float: left;


And replacing it with this:

.dropmenu li
{
float: right;


THANKS! <3

You're quite welcome. :)

Does anyone know how I can add a image to the nav bar that redirects to another page?