option for SiteMenu as images?

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.
12/9/2013 11:00:04 AM
Gravatar
Total Posts 3

option for SiteMenu as images?

Hi I'm brand new to mojoPortal. Seems like a simple question but can't find anything in the documentation or on the web anywhere.

I have a website with 6 pages. Each page will be linked to from the main nav (SiteMenu). I want each nav item to have its own image. I don't see any skin that does this - all the SiteMenu items render as text with CSS. And I don't see any way to put unique IDs on each of the LI tags.

So what's the best way to accomplish this? Is there even a way?

12/9/2013 11:12:45 AM
Gravatar
Total Posts 2239

Re: option for SiteMenu as images?

Hi,

You can use the page menu css class option in the page settings and then use a background image in your css to place the images and you can hide the text with css as well.

HTH,
Joe D.

12/9/2013 11:19:23 AM
Gravatar
Total Posts 3

Re: option for SiteMenu as images?

Hi Joe, thanks for the reply.

Being brand new to mojoPortal, going to need this spelled out for me... What is the "page menu css class option", where are the "page settings"? Are these administration options? Or are these tags and attributes in layout.master or in theme.skin?

12/9/2013 1:57:55 PM
Gravatar
Total Posts 2239

Re: option for SiteMenu as images?

Hi,

Go to any page which is supposed to have a page icon in the menu and click the "Page Settings" link in the Admin Toolbar. Next, go to the "Page Menu Item CSS Class" option and type a CSS class in the input box. Your class can be whatever you like, we'll use pgimg-home for this example. Now, go to your css files and add the following:

.pgimg-home { background: url('nameoffile.png') scroll 0px 0px transparent; }

This will get the background image in place. You will have to figure how the positioning because it will be relative to your specific skin. If you are going to use an image sprite (recommended) for this, you can use the following css to reference the background image:

[class*="pgimg-"] { background-image: url('nameoffile.png'); }

And then you can use this to change the positioning for each menu item.

.pgimg-home { background-position: 0px 0px; }
.pgimg-contact { background-position: 10px 10px; }

Of course you will need figure out the position in pixels but that's the general idea.

HTH,
Joe D.

12/9/2013 1:58:24 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: option for SiteMenu as images?

Hi Buddy,

When you're signed in as administrator and viewing any particular page there should be a link at the bottom of your page that says "page settings". Sometimes the administrator options are hidden initially and you have to click a grey up-arrow button in the bottom right of the screen to see them. Also some skins put them at the top of the screen instead, but either way look around you should find them.

Once you've clicked "Page Settings", you should see lot of different settings spread through a number of tabs. If you scroll down, near the bottom there should be an input labeled "Custom Menu CSS Class". Whatever you put in there will be literally copied into the class attribute of the generated menu item that links to the page whose settings you are editing.

You can then use that CSS class to style the menu items in any way imaginable really. I suggest you look through the administration pages, most of the content on them is simple and self-explanatory, but if you see something you don't understand look in the documentation on this site, it's very helpful.

Hope this helps,
- Isaac

12/9/2013 2:05:36 PM
Gravatar
Total Posts 216
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: option for SiteMenu as images?

Ah I see Joe beat me to it, haha. Sorry, if too many replies is confusing just ignore that last one.

12/9/2013 2:16:57 PM
Gravatar
Total Posts 3

Re: option for SiteMenu as images?

Got it! Thanks everyone.

For anyone else looking at this thread, I am using version 2.3.9.9, and the answer is to go to Page Settings for each top level page, then enter a value for "Custom Menu CSS Class". That value will then render as a custom class on the LI tag, and you can take it from there with CSS.

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