Customizing horizontal menu

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
11/25/2007 11:28:10 AM
Gravatar
Total Posts 40

Customizing horizontal menu

Hi all,

I'm trying to customize a mojoPortal skin (a copy of the iBuySpy skin) but am having trouble with the horizontal menu. Can anyone give me a straoghtforward guide to what values should be changed to change the various sizes of the menu? The thing I'm having most problem with is the width of the top level menu items (which don't seem to have widths set anywhere in the CSS files), but an overview of how to change the top level, dropdown menu items, hovered items etc.

I'm not a total CSS beginner but the structure of the various CSS files just seems way more complex than for other CMS systems I've used, do any of the skins use CSS files which have more straoghtforward settings? Or is it just a case of persevering and eventualy it will all make sense?!

Thanks!
Matt

11/25/2007 11:58:38 AM
Gravatar
Total Posts 18439

Re: Customizing horizontal menu

Hi Matt,

I'm not sure I would have picked the IBuySpy Skin as a starting point, but in any case the menu css is in the stylemenu.css file in the skin folder. Make sure you work first in Firefox, don't design using IE, get it right in FF first then override things as needed to fix any IE funkiness using the IESpecific.css and IE7Specific.css files. If you are making a change in stylemenu.css and are using IE you may not see any change because the setting in the IE specific file is overriding the main style.

The css files are organised in a modular fashion to make it easier to find things. Most of the css class names are the same in all skins and just their values are different. style.css includes the other files, things that affect layout, ie height width margins positioning are in stylelayout.css, font styling is in styletext.css, colors are in stylecolors.css, background images are set in styleimages.css, its really straightforward actually and allows you to change colors without changing layout or layout without changing colors etc. Some feature specific css files are only loaded as needed to keep the page lighter weight. styletreeview.css for example is only included if you are using the treeview menu.

See the documentation here:

http://www.mojoportal.com/creatingskins.aspx

Hope it helps,

Joe

11/25/2007 1:52:37 PM
Gravatar
Total Posts 40

Re: Customizing horizontal menu

Hi Joe,

Ok thanks a lot for that, do you have a suggestion for a skin which might be easier to customise? I'm just looking to have a simple fixed width layout, with a dropdown menu at the top, sponsored links down the left side and content for the rest of the page.

I actually tried building this from scratch, which was going ok but I was having a lot of problems getting the dropdown menu to appear which is why I moved on to customising an existing template...

So if you have a suggestion about the best (/easiest!) template to customise that would be great!

Thanks,
Matt

11/25/2007 1:57:45 PM
Gravatar
Total Posts 18439

Re: Customizing horizontal menu

Well, I guess it may be the best example we have right now of horizontal with dynamic child menus, its just so old school and ugly. Its on my to do list to implement a new skin with a better example for horizontal menu with dynamic sub menus.

Of the horizntal ones we have I like the tabbed ones but they don't have the dynamic chid menus instead they use a treeview vertical sub menu and limit the top horizontal menu to one level.

Best,

Joe

11/25/2007 2:00:03 PM
Gravatar
Total Posts 18439

Re: Customizing horizontal menu

mojoguidetogalaxy is another option but probably not any/much better

Best,

Joe

11/27/2007 8:25:09 AM
Gravatar
Total Posts 40

Re: Customizing horizontal menu

Hi Joe,

Ok well I stuck with it and started to get the template looking how I want it to. However I've come across a couple of problems which I can't seem to fix. Both issue work fine in IE7 and Firefox, but not in IE6...

If you look at the URL http://www.destinationguatemala.net, using IE6, the menu bar is longer than if you view it in Firefox - I've made the background red to show the problem more clearly. It doesn't seem to matter what I change or in which CSS file, nothing seems to make this shorter...

Also, when the current page is a node with child nodes (say one of the top level menu items) then the menu item isn't highlighted, but if the current page is a lowest-level node (ie. the menu item doesn't have an items below it) then the highlighting works fine. Again, this works in IE7 and Firefox, and whatever I change I can't seem to make it work in IE6.

If you have any ideas at all as to why this is happening then they'd be much appreciated! I'm sure some definitions are over-riding changes I'm making, but I can't seem to work out what's going on so I can fix it.

The CSS malarky can get awfully complicated!

Thanks
Matt

11/27/2007 9:19:05 AM
Gravatar
Total Posts 40

Re: Customizing horizontal menu

Ok I managed to get the red bar issue to disappear (I think) after downloading a dead useful tool which I haven't heard much about - the Internet Explorer Developer Toolbar.

Still have the issue with the toolbar highlighting though so if anyone can help me with this then that would be great!

Thanks
Matt

11/27/2007 2:45:01 PM
Gravatar
Total Posts 18439

Re: Customizing horizontal menu

Hi Matt,

For IE 6 you would definitely make your tweaks in the IESpecific.css file. IE6 is such a pain, the box model is different in IE6 than IE7 so it does require different settings in many cases.

To be honest I don't worry too much about IE 6 in my own projects unless the customer specifies it as a requirement. Since MS pushed down IE 7 in windows update I find the number of visitors using IE 6 is very small in my logs. The only way I can test with IE 6 is with a virtual machine that has automatic updates disabled. I haven't fired it up and looked at your site so I haven't really seen the problem but I know its generally trial and error for me to get IE 6 to behave.

Hope you get it working as you would like. I'll try to do a better skin with horizontal menu in the next few weeks and will be sure to test in IE6.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.