using menu "Custom CSS Class"
-
-
- Statman24
- Sr. Rocketeer
- Posts: 138
- Thanks: 0
-
Hi,
I'm using one of the latest 1.6 templates. When I create a menu item (using Fusion Menu), I have the ability to add a "Custom CSS Class". Can someone tell me exactly where I should add the corresponding CSS code and also what to call the class?
I'd need to change my menu items so that each has a different background color.
Thanks!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, you can call the class whatever you choose, usually picking something that relates to what you're doing works best. For example, you could call the class "menu-custom1" - then number others with 2, 3, 4, ECT. In your CSS code you will call that class by using .menu-custom1 - make sense? You can add the code to your template style sheet or template.css
You may have to target elements inside the class do what you need, likeUse Firebug or a web developer extension to figure out which elements you need to change, but you can use the custom class as a hook..menu-custom1 li{background:whatever;} - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Statman24
- Sr. Rocketeer
- Posts: 138
- Thanks: 0
-
I created a menu item and gave it a custom css class of "menu_temp"
Using firebug, I can see the following:
<ul class="menutop level1 ">
<li class="item106 root">
<a href="/index.php/home2" class="orphan item bullet" id="a-1308506214017376">
<span>
Home </span>
</a>
</li>
<li class="item109 active root menu_test">
<a href="/index.php/test" class="orphan item bullet active-to-top" id="a-130850621401817">
<span>
Test </span>
</a>
</li>
</ul>
When I highlight the bolded item, this is what shows up on the right:
.topblock-overlay-light .menutop li.root, .topblock-overlay-light .rt-splitmenu .menutop li {
background: url("../images/overlays/light/top-div.png") repeat-y scroll 100% 0 transparent;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.6);
}
overlays.css (line 36)
.menutop li.root {
float: left;
margin: 0;
padding: 0;
}
fusionmenu.css (line 19)
.menutop li {
height: auto;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
If I add the following to template.css, no change takes place:
.menu_test li{ background: #FF0000;}
I've tried other combinations. Any idea what I should use there?
Thanks!
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, I guess I needed to see your code. Look closely at this line of code that you posted:<li class="item109 active root menu_test">You can see from this that your custom class has been applied to the list item - it can be confusing on menu items because there are actually 4 classes in use - yours is at the very end.
Try thisIf that doesn't do the trick, post me a link to your site so I can look and test with Firebug.li.menu_test{background:whatever;} - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Hi, I see what's happening, your style is being overrided by Gantry. You currently have your CSS code in the overlays.css - put it in your template.css instead. That will override the other styles, as that one is loaded last. That should get you closer.
Actually, this post is a great example of how you would use a custom CSS class. Basically, the custom class is attached to an element on the page - in this case a list item, you can also have widget classes, page classes ECT. This just gives you an extra CSS hook to style items individually, as we are doing here with your menu items. - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Statman24
- Sr. Rocketeer
- Posts: 138
- Thanks: 0
-
I've moved it back to the top of the template.css file, but still no luck. It get' overwritten.
It seems that the ".menutop li.root" css code on top is the culprit.
Here is the firebug (right panel) css code:
overlays.css (line 36) .topblock-overlay-light .menutop li.root, .topblock-overlay-light .rt-splitmenu .menutop li { background: url("../images/overlays/light/top-div.png") repeat-y scroll 100% 0 transparent; text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.6); } fusionmenu.css (line 19) .menutop li.root { float: left; margin: 0; padding: 0; } template.css (line 10) .menutop li.menu_test { background: none repeat scroll 0 0 red; }
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Try putting it at the bottom of your template.css file - whatever loads last takes priority - the C in CSS is for Cascading, and that's what we're fighting against here.
or try thisThat also gives priority, let me know if that works.li.menu_test{background:red !important;} - The difficult we do immediately, the impossible takes a little longer.
-
-
-
- Cliff Pfeifer
- Preeminent Rocketeer
- Posts: 8444
- Thanks: 20
- Website Developer
-
Cool, go with that. The !important declaration is for this exact scenario, when you can't figure out what is over riding your style - it beats out the cascade and gives precedence.
I'll have to look deeper into the files to see which CSS file you could put changes into that over ride the template, it's a bit different for Wordpress than it is for Joomla. For now, just use the important, it's the same thing. - The difficult we do immediately, the impossible takes a little longer.
-
Time to create page: 0.076 seconds