How to style the different levels using CSS?

How to style the different levels using CSS? was created by jcdaddi

Posted 11 years 10 months ago #4451
Hi CEd,

I would like to style the different level links using the CSS. I read the manual but couldn't control it well. Could you please shed some light.

As an experiment, I just tried to use a different background colour on the different level links.

In /modules/mod_accorddeonck/themes/default/mod_accordeonck_css.php, I made the following changes:

/*


-- Level 1 --
*/

/* first level (root) link */
<?php echo $id; ?> li.level1 {
background: red;
}


/*
-- Level 2 --
*/

/* second level link */
<?php echo $id; ?> li.level2 {
background: blue;
}


/*
-- Level 3 and more --
*/

/* third and deeper level link */
<?php echo $id; ?> li.level2 li {
background: none;
}



Here is the output:
testmmogs.cmccharismatic.org/index.php/s...15/2a-item1-subitem1

Here are a few observations:
1) When I set the CSS of AccordeonCK module to show levels 1 to ALL, it only picks up the level 1 background colour (i.e. red in this case) and the entire menu is in that background colour

2) When I set the module to show levels 2 to ALL, it picks up the background colour at level 2, but for some reason, the level 2 menu that has no sub-menu items (e.g. 2C in the example) is not coloured.

3) One question: when I set both the CSS background colour, and also the parameters in the AccordeonCK module, which one takes precedence?

Again, what I want to achieve is something like in the first module "Joomla menu: 2 to ALL". That is, for menu items at the same level (regardless of whether it has sub-menu items) to have the same colour (or shades of grey).

Many thanks in advance.

jcdaddi
by jcdaddi

Please Log in or Create an account to join the conversation.

Time to create page: 0.614 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 723 guests and one member online