Icon IMAGE in front of a Menu Title?

[pamelina]

Dear CMS made simple users!

For the past couple of days I'm trying to put an image in front of a menu title.
Since there are more menu titles/names:

Home
(IMAGE) Product (How to put an image just in front of Product title?)
Newsletter
About
News
Contact

I was tying with CSS and HTML but I can't figure it out 

Anyway all suggestions and solutions are very welcome!

Happy CMS made simple use! 

[Zoorlat]

Hi pamelina,

In Menu Manager, open your menu template and there you can assign a specific id to each -oject (eg id="{$node->menutext}"). This allows you to have separate styles for specific menu-items.

If you only want to have an image in front of say "Products", then in your stylesheets assign a (non-repeating, etc) background image only to li#Products.

(if you want a hovering effect, apply the background image to li#Products a, and li#Products a:hover)


If you for some reason do not want to use CSS, you can also use logic in the Menu template, and have it write an only when {$node->menutext}="Products".

Hope this leads you in the right direction.
/Z

[pamelina]

A big thanks for your quick respond Zoorlat!

In Navigation template I have inputed:

id="{$node->Product}

In CSS I have inputed:

li #Products {
background: url(images/cms/X.png) no-repeat 0 12px;
}

Not working ?? 

Please be so kind and tell me what exactly I need to input in menu template and what in
CSS of a website.

[Zoorlat]

By Navigation template I take it you mean the menu template. Also make sure you are actually using this menu template in your page template. See the help-section in Menu Manager if you need help with that part.

So you are in the menu template; first of all, make sure the id-tag is inside the
like this:

Code: Select all

<li id="{$node->menutext}">

(not {$node->Product}!)

Before you move on to the css, you can test that you have got it right by loading your web page, and "view source". Find the menu and look if it has the correct id-tag generated.

If all looks good, then you can move on to CSS. What you wrote looks correct, but I think there should be no space between li and #.

Good luck!
/Z

[pamelina]

Hi Zoorlat,

I have:

for TEMPLATE: Left simple navigation + 1 column

for CSS Layout: Left sidebar + 1 column

for menu Navigation: Simple-Vertical (I always changed CSS direct in this for my menu not in menu template)

Thanks for your help but your suggestion is not working for me..
I guess I don't have much knowledge in CMS made simple 

If there is some solution for above setup that I'm using it would be great..

[Zoorlat]

Don't worry, the best way to get knowledge about CMSMS is to keep trying, keep solving the problems that you encounter. 

Let's see if I can walk you through this, and be a bit more precise in my explanation.

I assume you have the latest version of CMSMS (1.4), if not, upgrade.

Follow these steps

(1) Go to Layout > Menu Manager. Choose the tab "File Templates". To the right of "simple_navigation.tpl" klick on the icon saying "Import template to Database" Name this template "my_menu" (or something else you like it to be called).

(2) Now you will see your "my_menu" under Database Templates. Open it. You will now see some code. This is what generates the menu. It may look advanced, but it is actually pretty easy to understand it if you give it some time. Anyhow, find all -tags in this and add

Code: Select all

id="{$node->menutext}"

inside these tags. i.e. menutext}">. Save/submit the changes.

(3) Go to your template (Left simple navigation + 1 column) and find

Code: Select all

{menu template='simple_navigation.tpl' collapse='1'}

change this to

Code: Select all

{menu template='my_menu' collapse='1'}

. Now you have assigned your new menu template to your page template.

(4) All you need to do now is go to the Style Sheets and anywhere add

Code: Select all

li#Products {background: #f99; etc ...}

Remember to write the name in the style sheets (eg "Products") exactly.

This should work, if my instructions make sense for you. Don't hesitate to ask again if you need to.

Best

Z