g1modfanpmj
|
How to I use Link Title Attribute and/or Link CSS Style to change background and text colors of just one menu item?
|
| |
David Blackburn
|
I need this too. One Top menu item that is a different color from all of the rest all of the time.
|
| |
David Blackburn
|
Using firebug I figured out the Jooomal ID Using firbug I was able to make the menu look exactly the way I wanted.
I can't figure out how to insert the background color for that one menu item template CSS
|
| |
David Blackburn
|
Solution:
With Artisteer and Joomla 1.7 having a different color menu tabs is simple.
In Aretisteer, in the Export Options / CSS Options place your custom CSS.
e.g., to make a menu item a dark shade of red:
.backgroundred { background-color: #DD0000;}
Then in Joomla (1.7), under the Menu Item in the Link Type Options in the "Link CSS Style" field put the class name "backgroundred"
|
| |
Bruce
|
I did this and it works. My client wanted each menu item a different color and this is done. Now how do I still have the rollover to a different color. The background css stopped the rollover color changes.
|
| |
David Blackburn
|
I've determined that Artisteer would be great if it were documented how to use it. As it is I get nostalgic; when I use Artisteer I feel like I'm using Linux back in 1994 again. 
Here is a red button with gold text
.backgroundred
{
background-color: #E51B24;
}
.art-hmenu a.backgroundred
{
color: #f3c442;
}
|
| |
Denis L.
|
Quote David Blackburn:
Solution:
With Artisteer and Joomla 1.7 having a different color menu tabs is simple.
In Aretisteer, in the Export Options / CSS Options place your custom CSS.
e.g., to make a menu item a dark shade of red:
.backgroundred { background-color: #DD0000;}
Then in Joomla (1.7), under the Menu Item in the Link Type Options in the "Link CSS Style" field put the class name "backgroundred"
Got this almost working... I've got the hover state react but the active state does not show.
Here's my code:
a.homestyle
{
background-image: url('../images/menu_bg.png');
background-position: top center;
}
a.homestyle:hover
{
background-image: url('../images/menu_bg.png');
background-position: center center;
}
a.homestyle:active
{
background-image: url('../images/menu_bg.png');
background-position: bottom center;
}
Can someone please help me make this work?
|
| |
Denis L.
|
Any help here? Please!
|
| |
AdminSmithee
|
Cant you make for each color you want a different template and set a different template to each menu
|
| |
Garry
|
@ AdminSmithee
Yes, you can do it but it'll take more time to fetch completely new template(images) on visiting that tab.
|
| |
Dmitri
|
Play around with this code m8. I managed to set color of the link in all three button scenarios via this css. You can add what you need here.
.important
{
color: red;
}
.art-hmenu a.important
{
color: red;
}
ul.art-hmenu a.important, ul.art-hmenu a.important:link, ul.art-hmenu a.important:visited, ul.art-hmenu a.important:hover
{
color:red;
} 
|
| |
Carmine
|
Hello there i've got this from artisteer team
Quote :Hi, That is not a simple task. The buttons are created as the images so you'll need to create new images and add an extra CSS code. So each menu item has its unique id, you can determine which one with the help of FireBug add-on for FF. So for example to change the color of the Workshops item you need to add the following code in the template.css file: ul.art-hmenu > li.item-492 > a:before, ul.art-hmenu > li.item-492 > a:after { background-image: url("../images/menuitem_1.png"); } Instead of the item-492 you will use other ids for the next menu items. The URL should point to the image in the images folder of your template that includes the image similar to this but in the desired colors: http://www.area-italia.com/templates/green/css/../images/menuitem.png So create new images, upload them in the images folder and then add the required CSS code in the template.css file.
|
| |
AverageJane
|
I tried using the above code but it didn't change anything. I used li.menu.item with the id number since that is how my menu is coded but still nothing. Any suggestions???
Site....super7sweep.fmfl.net.
Thanks!
|
| |
gimani
|
Hi,
I want to have different text color to each one of the horizontal menu items. I checked with firebug the item class and added the following code in artisteer template.css file. However nothing changed
ul.art-hmenu > li.item-616 > a:before, ul.art-hmenu > li.item-616 > a:after
{
color: #3ADF00;
background-color: #FCC40B;
}
ul.art-hmenu>li.item-616>a:hover:before,
ul.art-hmenu>li.item-616>a:hover:after {
background-color: #FFF;
}
I want my menu to be like this one :http://www.cinema.ucla.edu/collections
|
| |
Nicola
|
Quote gimani:
Hi,
I want to have different text color to each one of the horizontal menu items. I checked with firebug the item class and added the following code in artisteer template.css file. However nothing changed
ul.art-hmenu > li.item-616 > a:before, ul.art-hmenu > li.item-616 > a:after
{
color: #3ADF00;
background-color: #FCC40B;
}
ul.art-hmenu>li.item-616>a:hover:before,
ul.art-hmenu>li.item-616>a:hover:after {
background-color: #FFF;
}
I want my menu to be like this one : http://www.cinema.ucla.edu/collections
Hi, you are solved? I have the same problem
thanks!
|
| |
lepamala
|
Quote gimani:
Hi,
I want to have different text color to each one of the horizontal menu items. I checked with firebug the item class and added the following code in artisteer template.css file. However nothing changed
ul.art-hmenu > li.item-616 > a:before, ul.art-hmenu > li.item-616 > a:after
{
color: #3ADF00;
background-color: #FCC40B;
}
ul.art-hmenu>li.item-616>a:hover:before,
ul.art-hmenu>li.item-616>a:hover:after {
background-color: #FFF;
}
I want my menu to be like this one : http://www.cinema.ucla.edu/collections
Can you help me?
|
| |
Sudhakar
|
Hi,
I want each menu with different color in horizontal menu with built-in css...
Is it possible...?
But in the style.css there is no particular id to call the class... what's the solution?
|
| |
sanara
|
Hi
I am customizing the WordPress twentyten them and am trying to change the font color of only one menu item. I would greatly appreciate it if someone could point me in the right direction.
|
| |
Boris
|
work for me (add in style.css):
ul.art-vmenu li#menu-item-5 a {height: 40px; display:block; width:238px;} ul.art-vmenu li#menu-item-5 a .r, ul.art-vmenu li#menu-item-5 a .l {height: 0px; padding: 3.4px 15px 0 12px; background-image: url('images/mymenudesign.png');} ul.art-vmenu li#menu-item-5 a .t, ul.art-vmenu li#menu-item-5 ul a {height: 40px; font-size: 17px; background-image: url('images/mymenudesign.png');} .art-vmenu li#menu-item-5:hover>a .t {color: #ffff00; height: 40px;} ul.art-vmenu li#menu-item-5 a .t {padding: 5px 12px 0 12px;}
for get menu id (menu-item-5, menu-item-6 etc)
http://www.artisteer.com/?post_id=164192&p=forum_post
|
| |
Karen Atherholt
|
/* Created by Artisteer v4.1.0.59861 */
This worked for me (add to bottom of style.css in your theme folder):
==========================================================
ul.art-hmenu > li.menu-item-97 > a { display:block; background-color: #832533; background-image:none; }
ul.art-hmenu > li.menu-item-97 > a:hover { display:block; background-color: #832533; background-image:none; }
==========================================================
http://chattnaturecenter.org - look at the DONATE button in the top menu. Note: be sure to change menu item number.
|
| |