Adding an Image to my CSS Menu

[shenalol]

Hello!

I want to add and image as a separator between the bottom two links and the top. However, I cannot figure out how.

On my previous website, I needed only add the image as another list item, but I cannot do so here. Another complication is that the image is different on each page.

You can find the point of reference at http://www.austinfamilyinstitute.org. If needed, the website with the new CMS is http://www.austinfamilyinstitute.org/index.php.

Is there any way to do this or do you need to create two lists? If so, how do I create another list for these two pages? Furthermore, is there a code I add to the page template?

(Forgive me if these are basic questions: I'm new to all this.  )

Thank you so much! I look forward to your response.

[Zoorlat]

Shenalol,

By looking at your reference page, I get the impression that the image above the bottom part of the menu changes depending on what page the visitor is on. I think the best way to achieve this is thru some CSS.

In your page hiearchy, add a page with type = "seperator" above the bottom two pages. Then, in Menu Manager, find the template you are using for your menu. In this template, search for

Code: Select all

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{else}

change this to, for example:

Code: Select all

{elseif $node->type == 'separator'}
<li class="{$page_id}" style="list-style-type: none;">
{else}

by doing this you have created a unique class for the seperator that depends on which page the visitor is on. You can choose the image to use for each page_id in your stylesheet. Something like:

Code: Select all

li.somePage {height:20px; width:100px; background:transparent url(yourimage.gif) no-repeat;}

This way you can have a unique image for each page. By changing {$page_id} to some other smarty variable you can control the menu image as you want!
Good luck