Curve centered menu

[Antechinus]

Link to Mod

Does what it says: centers the main menu for the 2.0 default (Curve) theme.
This zip should work for all versions of 2.0 from Final onwards.

The menu will remain centered regardless of screen resolution or the number of menu buttons.

This mod works in IE6, IE7, IE8, Safari, Chrome, Opera 10+, and Firefox 2 through to Firefox 4.0.

NOTE: This mod does NOT support RTL languages at this stage. It is only for LTR languages.



Update: This is probably best removed.

It's a somewhat archaic solution that was bulletproof with ancient browsers but is less flexible than more modern solutions.

With all browsers these days supporting display: inline-block; there is no need to use floats for menu buttons.

Using inline-block means you can center the menu simply by using text-align: center; on the parent ul, and text-align: start; on the child ul's.

This not only gives better centering, in that (unlike the old solution) it will still be centered if it breaks to two lines, but also gives automatic support for RTL languages.

[bullbreedluverz]

looks good ant, should be popular

[Arantor]

Indeed, awesome

[Antechinus]

I know the centered menu thing has been a popular tweak so it made sense to package it up for people without coding experience. I'll get RTL support sorted when I have time. I can do it for most browsers easily enough but IE6 and IE7 misbehave badly.

ETA: There's an explanation of how it works here: Horizontally Centered Drop-Down Menus

It's based on relative positioning and the changes to the standard menu aren't that complex in principle. It can be applied, with minor changes, to any list-based menu in any theme.

One quirk to note is the text-align: center; on the ul tag. That is necessary to get this to work in Firefox 2. Of course this means that you have to reset the text-align to left for the li elements. This is worth noting because it fixes FF2 without screwing things up in any other browser. Just in case you don't test in FF2, include that code anyway for custom themes and your butt will be covered.

[Liam.]

Simple but nice I like this, works well for the short and longer menus

[petesky]

Hi !

Nice mod - is it possible to center the footer area too ?
eg. Moderation like move topics, mark as read, etc ?!

[MATTEK]

Are there any settings for this or does it just take effect?

I thought it would even center the second row or menu buttons as well.

[Antechinus]

Petesky: Yes that is perfectly possible if you want to do it but then you have the lower linktree and the Reply/Notify/Etc buttons as well. Not to mention the next/previous links and the pages listing. Blah blah blah. How much do you want to center? It can all be done but I'm not sure there is a benefit in stacking the lot up in the middle down there. As I said in Reply#3 this can be done with any menu list. Read the linked tutorial for more info.

Are there any settings for this or does it just take effect?

I thought it would even center the second row or menu buttons as well.

It just takes effect, as long as you remember to clear your browser cache after installation. What second row buttons do you mean?

[petesky]

I need this only for the moderation block.

[Antechinus]

Then you can probably figure it out by looking at the css changes done by this mod and, as previously mentioned, reading the linked tutorial.

[MATTEK]

It just takes effect, as long as you remember to clear your browser cache after installation. What second row buttons do you mean?

I have a lot of menu buttons and it starts a second row of buttons.

[Antechinus]

Well it would then. The whole idea of drop menus is that you don't have too many buttons. If you want to have three dozen buttons on a 1024 screen they wont fit in one row.

Scratching: not sure what you mean.

[Scratching my Head]

Well, the buttons - Home Search Calender... all disappear when the browser is
sized down. Full screen they are there, but make the browser smaller, and they evaporate... they just vanish.

Does that help?

[Antechinus]

Link?

[Scratching my Head]

Sorry. I was using Opera and it has a "Fit to width" option. When enabled ...well, it's not to bother. Sorry I should have said something. It's all good, dude.

Thanks again for your attention, and hard work.
For everyone who complains, and never thanks, let me say thanks.

And good job...

[ɔɔɔɔɔɔuɥoɾ]

Any chance of making one for Core ?
For those Core based themes.

[Antechinus]

Yeah could do that. Same principle. Wouldn't be hard to add it in, but there will be the same problems with supporting RTL languages in IE. I can probably debug that but haven't had time to spend on it. LTR for Core is easy though. Not straight away. I'm too busy. Take a look in the Tips and Tricks board. There was a thread about this that had instructions for 2.0 Core.

[ɔɔɔɔɔɔuɥoɾ]

Yeah could do that. Same principle. Wouldn't be hard to add it in, but there will be the same problems with supporting RTL languages in IE. I can probably debug that but haven't had time to spend on it. LTR for Core is easy though. Not straight away. I'm too busy. Take a look in the Tips and Tricks board. There was a thread about this that had instructions for 2.0 Core.

Also one thing, its not really centered is it, lol
Its still aligned left, starting at the center, you can see this when you shrink the browser window smaller than the length of buttons and get 2 rows of buttons.

Making real center is a complete rewrite, damn floating.... (why can they not invent some kinda of float:center)

[Antechinus]

Sure, it still uses float:left; on the list. It has to. However the whole idea of having a drop menu system is that you don't need a huge line of buttons.

[ɔɔɔɔɔɔuɥoɾ]

Sure, it still uses float:left; on the list. It has to. However the whole idea of having a drop menu system is that you don't need a huge line of buttons.

I have drop down on core too muahaha lol

[Antechinus]

Lotsa people do. I wrote code for that ages ago and have even suggested we add it by default in 2.0 (but the other guys don't want the hassle).

[petesky]

Hi - i just installed on RC4 and got a slight problem - please maybe soneone can help whats wrong.

[petesky]

Is there a simple way to center the standard menu (i'm not good enough in css) :-)

[Shades.]

Would like to see this work with RC4 too!

[petesky]

Yes please.

[Antechinus]

RC4 version up now. Sorry about the delay.

[NanoSector]

Doesn't work in Simple Browser 1.8 Beta 3 nor in 1.8 Stable...

Info gained from the control panel of SB 1.8 Stable:

Engine: SBIE                                 [ Change ]
IE ver: 9
SB ver: 1.8 ST

Changing the engine causes SBI (Simple Browser Integration, a mod for SMF) to malfunction & I need to change it back, so not an option.

[Antechinus]

What on earth is Simple Browser 1.8? I've never heard of it. I tested in all the major browsers and that's all I'm concerned about.

[NanoSector]

What on earth is Simple Browser 1.8? I've never heard of it. I tested in all the major browsers and that's all I'm concerned about.

It's my own created browser

It also doesn't work on IE9.

[Antechinus]

IE9 is a Microsoft beta. That's two nasty words right there. I am not going to worry about it.

[NanoSector]

IE9 is a Microsoft beta. That's two nasty words right there. I am not going to worry about it.

Ah ok.

Works fine in the Ubuntu 10.10 Firefox inbuild browser.
Posting from it atm.

[Antechinus]

I'm not surprised by that. The thing is that this relies on really basic, standards compliant CSS2. It's so simple and basic that it works all the way back to IE6. If MS have managed to break rock bottom basic CSS2 support in their latest beta then MS can bloody well fix it. They've spent the last couple of years boasting about how good their standards support is, so the ball's in their court.

[smitch6]

is there a control panel for this?
or does it just work?
i installed it and use safari on macbook but can't see any dif or control panel?

thanks

[smitch6]

oh i'm using the default theme core btw

[NanoSector]

There isn't a control panel installed with the mod. It just centers your menu and thats it.

[Kimmen]

Thanks, used the parse to fix for my theme, good work.. 

[Powerbob]

Can we get this for RC5 ??

Bob

[Antechinus]

It'll be ready when it's ready.


Sorry, couldn't resist (I actually hate that phrase and am trying to get it expunged from the team's vocabulary). I'll update things tonight.

[Powerbob]

Thanks Ant 

[Antechinus]

Sorted. Same package now does RC4 and RC5.

[Antechinus]

Updated for 2.0 Final.

[Kimmen]

I cannot install this one on Theme: Prince of Darkness. I get two test failed:

   Execute Modification    ./Themes/Prince_of_Darkness_201/css/index.css    Test failed
      1.    Replace    ./Themes/Prince_of_Darkness_201/css/index.css    Test successful
      2.    Replace    ./Themes/Prince_of_Darkness_201/css/index.css    Test successful
      3.    Add After    ./Themes/Prince_of_Darkness_201/css/index.css    Test successful
      4.    Add Before    ./Themes/Prince_of_Darkness_201/css/index.css    Test successful
      5.    Add Before    ./Themes/Prince_of_Darkness_201/css/index.css    Test successful
      6.    Replace    ./Themes/Prince_of_Darkness_201/css/index.css    Test successful
      7.    Replace    ./Themes/Prince_of_Darkness_201/css/index.css    Test successful
      8.    Replace    ./Themes/Prince_of_Darkness_201/css/index.css    Test failed
      Execute Modification    ./Themes/Prince_of_Darkness_201/css/ie7.css    Test successful
      1.    Replace    ./Themes/Prince_of_Darkness_201/css/ie7.css    Test successful
      2.    Add Before    ./Themes/Prince_of_Darkness_201/css/ie7.css    Test successful

[Antechinus]

That's one test failed. It's the last operation only (#8). Easy fix:

Find

Code Select Expand

.dropmenu li:hover ul
{
display: block;
top: 27px;
}

Replace:

Code Select Expand

.dropmenu li:hover ul, #main_menu .dropmenu li:hover ul
{
display: block;
top: 27px;
}

[Kimmen]

I installed with the error, and replaced the code you gave here, this is the end result.

[Antechinus]

Yeah I know what's causing that. PoD doesn't use default positioning of menu_gfx.png or the default image for the drop menu background. That image is customised to hell. Use this in .dropmenu li ul:

   background: #000 url(../images/theme/menu_gfx.png) 0 -220px repeat-x;

[Kimmen]

It still display in the same way after that edit.

[Antechinus]

Clear your cache.

[Kimmen]

I did that too, and here is how it looks:

[Antechinus]

Link me to it.

[Kimmen]

I have uninstalled the mod intill fix is ready. www.efclan.eu

I can send you files if you like?

[Antechinus]

If you want help on this, link me to a live example of the problem. I don't like playing guessing games.

[Kimmen]

www.efclan.eu

I have put it back on.

[FireDitto]

It's no longer available to RC5?

=/ I know I should update to Gold, but it's so painful fixing it all up again afterwards >_>

[Kimmen]

Still need help.

[Antechinus]

Ok I see what the problem is.

Code Select Expand

#main_menu .dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: url(../images/theme/menu_gfx.png) 0 -130px no-repeat;
padding: 7px 0 0 0;
left: -4px;
}

That code isn't in the theme's index.css, so you must have added it yourself. That's fine if you want to do that, but if you're going to add your own menu css then it kinda figures that you might put some thought into changes to css. You've made the change I mentioned earlier:

Yeah I know what's causing that. PoD doesn't use default positioning of menu_gfx.png or the default image for the drop menu background. That image is customised to hell. Use this in .dropmenu li ul:

   background: #000 url(../images/theme/menu_gfx.png) 0 -220px repeat-x;

but, you also need to make it to #main_menu .dropmenu, like this:

Code Select Expand

.dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
left: -6px;
width: 16em;
font-weight: normal;
background: #000 url(../images/theme/menu_gfx.png) 0 -220px repeat-x;
border: solid 1px #4F4131;
border-radius: 4px;
box-shadow: 2px 3px 5px 1px #000;
padding: 6px 0 2px 0;
}
#main_menu .dropmenu li ul
{
z-index: 90;
display: none;
position: absolute;
width: 19.2em;
font-weight: normal;
border-bottom: 1px solid #999;
background: #000 url(../images/theme/menu_gfx.png) 0 -220px repeat-x;
padding: 7px 0 0 0;
left: -4px;
}

[Kimmen]

That indeed makes it better. Thanks, i can live with this now. I see that the bar when hoover over dropdown menu does not complete itself, but this is not something that keeps bugging me, but if you know how to change it, then its nice.

Thanks for your help.

[Thelost]

Excellent Mod and i was able to make all the modifications needed to get this working for my home made theme.  I was also able to successfully merge the few tricks from this post http://www.simplemachines.org/community/index.php?topic=444219.msg3123598#msg3123598 and http://www.simplemachines.org/community/index.php?topic=444605.0 and found the combination of everything to be working great.  I wanted to thank you for your knowledge and contributions.

Thanks again!