News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

[Tip/Trick] Center Nav Menu Bar (1.x and 2.x)

Started by Yigal, August 04, 2009, 02:30:32 AM

Previous topic - Next topic

Yigal

Tip/Trick: Centering Your Navigation Menu Bar
Description: A Simple Edit to your Index template file to center your navigation bar :)
A Note To Everyone Who Is Packaging This Edit:  Already packaged

---------------------------------------------------------------------
For 1.x
---------------------------------------------------------------------

Index.template.php:

Find:


// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" style="margin-left: 10px;">


Replace with:


// Show the start of the tab section.
echo '
<table cellpadding="0" cellspacing="0" border="0" align="center">



---------------------------------------------------------------------
For 2.x
---------------------------------------------------------------------

Index.template.php:

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


Replace With:
// Show the menu here, according to the menu sub template.
echo '   
   <div style="width:50%; margin:0 auto;">',template_menu(),'</div>';


Quote from: Antechinus on August 15, 2009, 01:17:09 AM
Ok, here is the best way of doing it for the 2.0 Core theme.

If you use this method the menu will stay perfectly centered regardless of how many tabs you have displayed or how wide your screen is.

Note that this method will also work with list-based menus in other themes, but it will not work if you are also using css-based drop menus.

This is only for single level menus without drop menus. Because of this it will not work with Curve when Curve becomes the default theme in RC2.

Anyway for the RC1 Core theme:

Index.template.php:

Find:

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="clearfix">';


Replace with:

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="clearfix">
    <li class="main_menu_first">&nbsp;</li>';



Css/index.css:

Find:

#main_menu
{
padding-left: 1em;
}
#main_menu ul
{
list-style: none;
padding: 0;
margin: 0;
background: url(../images/maintab_first.gif) no-repeat bottom left;
padding-left: 10px;
}
#main_menu li
{
margin: 0;
padding: 0;
display: inline;
}
#main_menu li a
{
float: left;
display: block;
color: white;
font-size: 0.8em;
font-family: tahoma, sans-serif;
text-transform: uppercase;
}
#main_menu li a:hover
{
color: #e0e0ff;
text-decoration: none;
}
#main_menu li a span
{
background: url(../images/maintab_back.gif) repeat-x bottom left;
display: block;
padding: 0.1em 0.5em 0.5em 0.5em;
}
#main_menu li.last a span
{
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0.1em 1em 0.5em 0.5em;
}
#main_menu li.active a span em
{
padding: 0.1em 0.5em 0.5em 0.5em;
display: block;
font-style: normal;
background: url(../images/maintab_active_back.gif) repeat-x bottom right;
}
#main_menu li.active a span
{
background: url(../images/maintab_active_first.gif) no-repeat bottom left;
padding: 0 0 0 8px;
}
#main_menu li.last.active
{
float: left;
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0 8px 0 0;
}
#main_menu li.active a
{
background: url(../images/maintab_active_last.gif) no-repeat bottom right;
padding-right: 8px;
}


Replace with:

#main_menu {
   float:left;
   width:100%;
   background: none;
   overflow:hidden;
   position:relative;
}
#main_menu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
li.main_menu_first {
   width: 8px;
   height: 20px;
   background: url(../images/maintab_first.gif) no-repeat bottom left;
}
#main_menu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#main_menu ul li a {
   display:block;
   color: white;
   font-size: 0.8em;
   font-family: tahoma, sans-serif;
   text-transform: uppercase;
}
#main_menu li a span
{
background: url(../images/maintab_back.gif) repeat-x bottom left;
display: block;
padding: 0.1em 0.5em 0.5em 0.5em;
}
#main_menu li.last a span
{
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0.1em 1em 0.5em 0.5em;
}
#main_menu li.active a span em
{
padding: 0.1em 0.5em 0.5em 0.5em;
display: block;
font-style: normal;
background: url(../images/maintab_active_back.gif) repeat-x bottom right;
}
#main_menu li.active a span
{
background: url(../images/maintab_active_first.gif) no-repeat bottom left;
padding: 0 0 0 8px;
}
#main_menu li.last.active
{
float: left;
background: url(../images/maintab_last.gif) no-repeat bottom right;
padding: 0 8px 0 0;
}
#main_menu li.active a
{
background: url(../images/maintab_active_last.gif) no-repeat bottom right;
padding-right: 8px;
}


This method originally comes from this web page: matthewjamestaylor.com/blog Screenshots of the result are attached.  ;)



Also, if someone could move this to Tips/Tricks board, that would be great ;)
Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

Reflection

Could you please provide instructions for SMF 2.0. I'm sure a lot of people would find that more useful.  :P
Good "SMF" Portals
Tiny Portal [SMF 1.1.x only]
Simple Portal [SMF 1.1.x and 2.0]


Good "SMF" Theme Sites
SMF Themes [SMF 1.1.x and 2.0]
Dziner Studio [SMF 1.1.x and 2.0]

Yigal

Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

Mark S


Faevilangel

to do it in smf rc2

index.template.php

find

// Show the menu here, according to the menu sub template.
echo '<div style="width="50%;float:right;';
template_menu();
  echo '</div>';


replace with

// Show the menu here, according to the menu sub template.
echo '<div style="width="50%;margin:auto;';
template_menu();
  echo '</div>';


all i did was remove float:right; and added margin:auto;
I am available for theme work, pm me for info

Yigal

Thanks...I'm going to add that to the first post :P
Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

Mark S

Well, unfortunately, it didn't work for me.

// Show a random news item? (or you could pick one from news_lines...)
if (!empty($settings['enable_news']))
echo '
<div id="random_news"><h3>', $txt['news'], ':</h3><p>', $context['random_news_line'], '</p></div>';

echo '
</div>
</div>';


// Show the menu here, according to the menu sub template.
echo '<div style="width="50%;margin:auto;';
template_menu();
  echo '</div>';

//Below the menu ads
if (function_exists("show_indexAds") && function_exists("show_towerleftAds") && function_exists("show_towerrightAds"))
{
$ads = show_indexAds();
if(!empty($ads))
if($ads['type']==0)
echo $ads['content'];
else
eval($ads['content']);
unset($ads);



Inserted the code so you can see what's in my file.  Maybe this will give a clue.

The site is www.classicwinnebagos.com

Thanks

feline

Quote from: ThePharaoh on August 09, 2009, 01:09:08 AM
Well, unfortunately, it didn't work for me.
Change this:
// Show the menu here, according to the menu sub template.
   echo '<div style="width="50%;margin:auto;';


to:
// Show the menu here, according to the menu sub template.
   echo '<div style="width:50%;margin:auto;">';


Fel

Yigal

Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

Mark S

#9
I had to change the 50% to 90% for some reason because everything wanted to pile up on itself in the middle.  That may be because have a lot of menu tabs.  It's still aligned to the left some, but it's relatively centered so, that's the code which works.  Don't know what to do with it beyond that to get it correctly centered.

Thanks a bunch!

Update:  I used some variations of the 50% and found that, depending on the width of your navbar, you can adjust this and achieve correct center alignment.  85% is what worked for me.  I assume that, if you add or delete tabs, you'll need to adjust that percentage.

Yigal

Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

busterone

Very odd to me is that my 2rc1.2 does not have all of that in index.template.php for any of my themes, not even default core. What I have is this-  I would like to center a couple of them myself, including the default.

echo '
</div>
</div>';


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

// Show the navigation tree.
theme_linktree();

// The main content should go here.
echo '
<div id="bodyarea">';

Yigal

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


Replace
// Show the menu here, according to the menu sub template.
   echo '<div style="width="50%;margin:auto;';
   template_menu();
  echo '</div>';
Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

busterone

already tried that, but it doesn't work for me. I cleared cache, hit refresh half a dozen times, no go. The menu is still to the left. No big deal. It is not that important to me anyway. Thanks.  :)

bbmtalk

Try this one.

// Show the menu here, according to the menu sub template.
   echo '<center>', template_menu(), '</center>';

busterone

Nope, sorry, I tried that too. It must be something in the css file preventing it. I will look at that later, it is late for me. Thanks anyway.  :)

Yigal

Sorry we couldn't help you out.  Maybe someone will come up with a code :)
Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

Mark S

Quote from: busterone on August 09, 2009, 11:40:35 PM
already tried that, but it doesn't work for me. I cleared cache, hit refresh half a dozen times, no go. The menu is still to the left. No big deal. It is not that important to me anyway. Thanks.  :)

I notice you didn't try changing the ="width:50%... read my post above.

Antechinus

Umm, Yigal, your code for 2.0 is wrong. Feline has already posted the correct version and people keep ignoring it. Please correct your OP if you want to post code in Tips and Tricks. Kthnx.

http://www.simplemachines.org/community/index.php?topic=328766.msg2203628#msg2203628

I apologise to members who have been having trouble with this. The staff should have checked that code before now.

For anyone who really wants to get a perfectly centered menu on 2.0 regardless of the number of tabs the following link is the best way to do it.
Works with any list-based menus but be warned that it will make a mess of css-based drop menus. Only use it if you are running the default single level RC1 menu.

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support


Yigal

Yigal V.
Contact me by PM


do yourself a favour and not annoy support helpers by spamming or messaging for support
1.x Support | 2.x Support | 5Mods

Advertisement: