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