Menus with icons

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/27/2011 1:30:35 PM
Gravatar
Total Posts 123
/Mats Lillnor

Menus with icons

Is it possible to build menus that contain images and other elements with mojoPortal?
(Without extensive programming skills that is)

Have heard of Superfish, but it is far from simply implemented.

Here is an example

http://www.folkuniversitetet.se/

What would be required to accomplish something like this?

 

/Mats

12/27/2011 7:04:06 PM
Gravatar
Total Posts 2253

Re: Menus with icons

Hi Mats,

You can include icons using the page icon feature or using custom menu css classes. None of the included skins use either but the processes aren't difficult.

To use the page icon feature, open your style.css and remove .pageicons {display:none;} and open your stylemenu and make sure you don't have a display: none; on a selector for img elements (something like .AspNet-Menu a img {display: none;}). This will be different depending on the type of menu so you'll have to look through your file to find it. Once you have the display: none stuff out of the way, for each page, open the page settings and set the icon to an icon you want to use. If you have custom icons, put them in the Data/SiteImages/FeatureIcons directory. You'll probably need to customize your CSS to position the images properly within your menu.

To use the custom menu css classes, create css to position background images on the menu items and then use the page settings (Custom Menu CSS Class) to set each page with the proper icon.

Fire back if you need more details.

HTH,
Joe D.

12/28/2011 3:07:31 AM
Gravatar
Total Posts 123
/Mats Lillnor

Re: Menus with icons

Great Joe!

Thank you very much. I am not very proficient in CSS, but with some trial I will get it working I think.

However, I can't find where to configure the page-icon for the page (2.3.7.5).
I guess this setting will show when the css is changed?

/Mats

 

1/6/2012 11:35:50 AM
Gravatar
Total Posts 148

Re: Menus with icons

Hi:

I followed your instructions on using the page icon feature and the icon does not show up.  I used one of the icons that came along with mojoPortal.  Is the icon supposed to appear on the menu tab?

1/6/2012 11:47:01 AM
Gravatar
Total Posts 2253

Re: Menus with icons

Open the theme.skin file located in your skin directory and see if any of the menu controls have

SuppressImages="true".

If so, remove it or change it's value to false.

Are you using Artisteer?

HTH,
Joe D.

1/6/2012 11:57:55 AM
Gravatar
Total Posts 148

Re: Menus with icons

Hi:

I don't see the property SuppressImages anywhere in the theme.skin file. I am using a skin that came along with mojoPortal. I don't know if it was made with Artisteer.

1/6/2012 12:02:45 PM
Gravatar
Total Posts 18439

Re: Menus with icons

Look also on <portal:SiteMenu in layout.master for SuppressImagres="true"

1/6/2012 12:12:40 PM
Gravatar
Total Posts 148

Re: Menus with icons

Hi:

I checked the layout.Master file under the Sites\1\skins folder.  The <portal:SiteMenu> had no setting for SuppressImages so I set it to false. However, the image is still not showing up.  I am using the styleshout-citrusisland skin in case that helps.

1/8/2012 2:00:33 PM
Gravatar
Total Posts 18439

Re: Menus with icons

Hi,

Remove this line from stylemenu.css

div.AspNet-Menu-Horizontal ul.AspNet-Menu li img { display:none; }

In style.css look for this line:

.logolist,.pageicons,.skiplink { display:none; }

and change it like this:

.logolist,.skiplink { display:none; }

Hope that helps,

Joe

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