How to add different background to some menu Item ?

[MzM]

Hi,

I need a menu with an image background on the first cell. The last wo cells of my menu should each have a different background. The remaining cell will have a common background image.

I was told that this is difficult to achieve with the default joomla template and someone told me to use Pat template instead. I've downloaded the suckerfish-vertical menu and trying to customize it. ITs a real headache  .

How to adjust the menu.html so as to apply different background on different cell of my main menu ?

Here's the default menu.html:

Code: Select all

<patTemplate:tmpl name="menu" whitespace="trim">
<script type="text/javascript" language="JavaScript" src="{TEMPLATE_HOME}/js/menu.js"></script>
<div class="menu{CLASS_SUFFIX}">
{MENU_LIST}
</div>
</patTemplate:tmpl>

<patTemplate:tmpl name="menu_list" whitespace="trim">
<ul
  id="menulist_{HIERARCHY}{CLASS_SUFFIX}"
<patTemplate:tmpl name="condition_LEVEL" type="condition" conditionvar="LEVEL" varscope="menu_list" whitespace="trim">
<patTemplate:sub condition="0">
  class="mainlevel{CLASS_SUFFIX}"
</patTemplate:sub>
</patTemplate:tmpl>
>{MENU_ITEMS}</ul>
</patTemplate:tmpl>

<patTemplate:tmpl name="menu_item" whitespace="trim">
<li><patTemplate:tmpl name="condition_HAS_SUB_MENU_ITEMS" type="condition" conditionvar="HAS_SUB_MENU_ITEMS" varscope="menu_item" whitespace="trim">
<patTemplate:sub condition="1">
{LINK_OPEN}<span class="expanded">{CAPTION}</span>{LINK_CLOSE}
</patTemplate:sub>
<patTemplate:sub condition="__default">
{LINK_OPEN}{CAPTION}{LINK_CLOSE}
</patTemplate:sub>
</patTemplate:tmpl>{SUB_MENU_ITEMS}</li>
</patTemplate:tmpl>

Thanks

[Oak]

Hello MzM,

I think you'll agree that the only way to achieve this is to have a different CSS ID selector for each of a menu item.

I can't test it now, but I think you can use Pat template to do that. There might be several ways.
1) You will have to create new PHP file (i.e. menu_items.php) or edit existing which feeds the Pat template and define an array with ID numbers of menu items (simply a counter), and add it to template this way (example only):

Code: Select all

$tmpl->addObject( 'rowid', $counter, 'row_' );

and place it in your template as 'ID="menuitem{ROW_ROWID}"'. This way, you would be able to define styles for menuitem1, menuitem2, menuitem3, etc.

2) You can use menu-item's name to name your styles, i.e. to name it menuitem_Homepage, menuitem_Gallery, etc. This could be an ellegant way, as you wouldn't have to change much of code and no extra PHP file would be required. I think if you change line...STOP: At the moment I spotted the line:

Code: Select all

id="menulist_{HIERARCHY}{CLASS_SUFFIX}"

which means you don't have to do anything, but use it... See what are the ID selectors in your output (HTML source code in your browser). If it doesn't generate different names, change this line i.e. to:

Code: Select all

id="menulist_{MENU_ITEMS}"

which will most likely give you menulist_Homepage, menulist_Gallery, etc. as mentioned above...

If I were you, I'd study existing templates with this feature and inherit it's behavior in my template files.

[MzM]

Hi,

Thx for the tip Oak. I'm using the second solution but now there's another problem. The last 2 item in my menu should always have 2 different background. So even if I add or remove links in my menu, the last 2 should always be the same, independant of the item name also.

dnt know how to apply css style to the last 2 cells....

ps: I'm looking for pat menu examples, to get an idea how it works, and how to apply conditions.

[Oak]

Thx for the tip Oak. I'm using the second solution but now there's another problem. The last 2 item in my menu should always have 2 different background. So even if I add or remove links in my menu, the last 2 should always be the same, independant of the item name also.

Well, it's not an easy task, although not impossible. But I would advice simply not to add new menu items at the end of the list, but above the last two. If you use ID selectors without counter (i.e. menulist_Homepage), it will always work - however, you will have to always define style for each new item.

ooking for pat menu examples, to get an idea how it works, and how to apply conditions.

There are some examples in http://help.joomla.org/ in Hello World tutorials. They don't explain Pat templates well, but you can study them and learn from source code. Unfortunately, I don't know any better doc about Pat templates.

Regards,

Oak

[MzM]

Thx for the advice.

Im making some test on menu.html to get an idea how it works. I tried this piece of code:

Code: Select all

<patTemplate:tmpl name="menu_item" whitespace="trim">
<li id="menuitem_{INDEX}">
<patTemplate:tmpl name="condition_INDEX" type="condition" conditionvar="IS_LAST" varscope="menu_item" whitespace="trim">
     <patTemplate:sub condition="0">
     class="notlast{CLASS_SUFFIX}"
     </patTemplate:sub>
     <patTemplate:sub condition="1">
        class="last{CLASS_SUFFIX}"
     </patTemplate:sub>
     <patTemplate:sub condition="__default">
     {LINK_OPEN}{CAPTION}{LINK_CLOSE}
     </patTemplate:sub>
</patTemplate:tmpl>
</li>
</patTemplate:tmpl>

Im trying to apply style to the last item using the predefined variable IS_LAST. I'm having a small bug: In the last item Im having this:
class="last-suckerfish-vertical" ...this should be in the css and not appear at the front of the menu..

[MzM]

Heloo

Ive manage to have a menu having a particular background for the first menu item,the last and in between these two. Here the code for this:


menu.html:

Code: Select all

<patTemplate:tmpl name="menu" whitespace="trim">
<script type="text/javascript" language="JavaScript" src="{TEMPLATE_HOME}/js/menu.js"></script>
<div class="menu{CLASS_SUFFIX}">
{MENU_LIST}
</div>
</patTemplate:tmpl>

<patTemplate:tmpl name="menu_list" whitespace="trim">
<ul
  id="menulist_{HIERARCHY}{CLASS_SUFFIX}"
<patTemplate:tmpl name="condition_LEVEL" type="condition" conditionvar="LEVEL" varscope="menu_list" whitespace="trim">
<patTemplate:sub condition="0">
  class="mainlevel{CLASS_SUFFIX}"
</patTemplate:sub>
</patTemplate:tmpl>
>{MENU_ITEMS}</ul>
</patTemplate:tmpl>


<patTemplate:tmpl name="menu_item" whitespace="trim">
<li class="menuitem_{INDEX}"
<patTemplate:tmpl name="condition_last" type="condition" conditionvar="IS_LAST" varscope="menu_item" whitespace="trim">
     <patTemplate:sub condition="1">
      id="last{CLASS_SUFFIX}"
     </patTemplate:sub>
</patTemplate:tmpl>
<patTemplate:tmpl name="condition_first" type="condition" conditionvar="IS_FIRST" varscope="menu_item" whitespace="trim">
     <patTemplate:sub condition="1">
      id="first{CLASS_SUFFIX}"
     </patTemplate:sub>
</patTemplate:tmpl>
>{LINK_OPEN}{CAPTION}{LINK_CLOSE}</li>
</patTemplate:tmpl>

The CSS:

Code: Select all

#last-suckerfish-vertical{
background:url(../images/last.jpg);;
}

#first-suckerfish-vertical{
background:url(../images/first.jpg);
}

ul.mainlevel-suckerfish-vertical, .mainlevel-suckerfish-vertical ul {
	padding: 0px;
	margin: 0px;
	list-style: none;
	width: 192px;
	background:url(../images/middle.jpg);
}

Now i want to apply a background to the before last menu item...unfortunately there no BEFORE_LAST variable to apply style to the before last menu item. But there the variable COUNT which returns the number of items in the menu. I could substract 1 to count, make use of this value to access the before last level...but how to do it  Any idea

[MzM]

I'm still stuck at how to access the before last menu Item. I tried this:

Code: Select all

<patTemplate:tmpl name="before_last" type="condition" conditionvar="INDEX" varscope="menu_item" whitespace="trim">
     <patTemplate:sub condition="{COUNT}"-1>
      id="beforelast{CLASS_SUFFIX}"
     </patTemplate:sub>
</patTemplate:tmpl>

BUT this doesn't work! . Any one knows the corect syntax for the sub contition( 1 should be subtracted from {COUNT})


Thx