The Joomla! Forum ™

Am I the only one that finds the whole process of continuesly adding styling to the CSS for each menu item added? It is plain idiotic thinking that <li class="itemXX"> is good styling practice!

As someone said earlier - class is ment to be used for repetative usage, not unique id:s. What if there was a Menu Item Class Suffix field in the Edit Menu Item part of Joomla, so that you really could add <li class="customclassname1"> to a l l menu items you want to style in a certain way, and <li class="customclassname2"> to menu items you wanted to have another look? That way your CSS file could end up looking like this:

.customclassname1 { color: red; }
.customclassname2 { color: green; }

Instead of

.item1, .item2, .item3, .item4 { color: red; }
.item5, .item6, .item7, .item8 (and so forth...) { color: green; }

How come no one at the Joomla developer team even thaught of this? Or did you, but just didn't saw the benefits in using classes as classes should be used? I truly want to know.

Hi,
This topic is what I've been trying to solve for the last 2 days, Please someone help, tell me what I'm doing wrong! I've been trying to replicate the instructions in this thread and have tried various (endless) permutations and variations of that but still to no avail. Here's my CSS/HTML I onluy include 2 items for brevity's sake.

<div id="ftmm">
<div class="moduletable nos">
<ul class="menu bamboo sf-menu bamboo sf-vertical" id="ftmm">
<li id="current" class="parent active item107">
<a href="http://127.0.0.1/Joomla/">
<span>Home</span>
</a>
</li>...
...</li>
<li class="parent item105"><a href="http://127.0.0.1/Joomla/index.php?option=com_content&amp;view=article&amp;id=15&amp;Itemid=105">
<span>Our products</span></a>
<ul>...


.menu.bamboo.sf-menu li .parent.item107 a:link
{ background-image: url('../../../images/stories/menus/ftmm01p1.jpg') 0 -223px no-repeat;
}
.menu.bamboo.sf-menu li .parent.item107 a:visited
{ background-image: url('../../../images/stories/menus/ftmm01p1.jpg') 223 -446px no-repeat;
}
.menu.bamboo.sf-menu li .parent.item107 a:hover
{ background-image: url('../../../images/stories/menus/ftmm01p1.jpg') 446 -669px no-repeat;
}
.menu.bamboo.sf-menu li .parent.item107 a:active
{ background-image: url('../../../images/stories/menus/ftmm01p1.jpg') 669 -892px no-repeat;
}
.menu.bamboo.sf-menu li .parent.item115 a:link
{ background-image: url('../../../images/stories/menus/ftmm01p2.jpg') 0 -223px no-repeat;
}
.menu.bamboo.sf-menu li.parent.item115 a:visited
{ background-image: url('../../../images/stories/menus/ftmm01p2.jpg') 223 -446px no-repeat;
}
.menu.bamboo.sf-menu li .parent.item115 a:hover
{ background-image: url('../../../images/stories/menus/ftmm01p2.jpg') 446 -669px no-repeat;
}
.menu.bamboo.sf-menu li .parent.item115 a:active
{ background-image: url('../../../images/stories/menus/ftmm01p2.jpg') 669 -892px no-repeat;
}

joomla masters. I am a beginner developer joomla template. I want to ask, how to fill the background module on joomla templates and image splicing process.

please help me. thank you

_________________
http://www.medisch.us
http://www.easymarket.[spam].com

For Joomla 1.7.x menu items this now becomes:

ul.menu li#item-1245 a {
color:red;
}

Items are now represented by a hash symbol which of course represents an id instead of a class. Don't confuse this with the previous example where a # hash symbol was used to represent a number.

Depending which menu item you are targeting usually it cascades to subsequent menu items.

_________________
Kind Regards,
Noel Dixon
http://www.noxidsoft.com
Signature must be kept to a maximum of four lines. See Forum Rules: viewtopic.php?f=8&t=65

Filling the background of a module depends on the template and thus the css file in current use. I can only suggest using Firebug or similar to identify the style sheet(s) and the class(s) you would want to target, otherwise this is a very generalized question?

I can also suggest looking at a free release of a RocketTheme template on how this might be done.

_________________
Kind Regards,
Noel Dixon
http://www.noxidsoft.com
Signature must be kept to a maximum of four lines. See Forum Rules: viewtopic.php?f=8&t=65

hello, i have been reading these replies trying to find the sntax to just change the color of 1 menu link I have a Donations link i want to have color Red thats it.. leaving all other link colors the same i have joomla 2.5 loaded and have been trying to understand the css syntax for the menu module thanks for any help