In my site's design, I am using jQuery UI tabs, and I would like to change a dark green color that shows up when I hover over the tabs. However, I cannot find this color anywhere in the CSS or override it, and the Chrome developer tools do not show any such color matched to the tabs. Here is the jsfiddle: http://jsfiddle.net/Uy4Jz/1/
I feel like this CSS should be able to override it but that doesn't seem to be the case:
#tabs .ui-tabs-nav .ui-state-active {
background: transparent url(images/uiTabsArrow.png) no-repeat bottom center;
border: none;
color: #000;
}
How should I go about changing this color or overriding it with a different color?
It comes from this declaration in your CSS:
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
color: #205225;
text-decoration: none;
}
Probably best to update all instances of
color: #205225;
To the appropriate hex color you're after.
Overwrite this in your CSS with your desired color
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited{
color: #205225; /*change this*/
}
If you are talking about "Blog", "About Me" and "Projects", target the a within the li list and style its hover psuedo element
#tabs ul li a:hover {
color: blue;
}
Related
Good morning all,
I am currently developing a site on Wordpress and would like to remove the dotted rectangle when I click on my logo.
thank you in advanceenter image description here
I think it is because of tag "<a>" outline properly.
Add this to your css.
a:hover, a:active, a:focus {
outline: none;
}
if above code didn't work then try this (change <a> color from this #1490d7 to transparent)
a:hover, a:active, a:focus {
color: transparent;
}
Add above code at the end of css/colors/default.css or edit
the below code on default.css
body a:focus, body a:hover {
color: #1490d7;
}
On my site, most links (apart from those in the navbar) turn white when clicked or right-clicked. E.g. http://wisderm.com/ingredients/Dead+Sea
This is despite my setting links to #6f5499, which is a purple colour: http://www.color-hex.com/color/6f5499, as such:
a, a:hover, a:focus, a:active { color: #6f5499; }
What's going on?
The problem is the CSS code below. The rule after the comma(,) targets every link of the webpage instead of the links inside alert
.alert a:hover, a:focus { color: white; }
Change it to
.alert a:hover, .alert a:focus { color: white; }
I'm attempting to make my anchor text white when a person hovers over a nav item or when the nav item page is active.
Currently, all is well except the text color. Sounds simple enough but I'm struggling.
I'd like the anchor text to become white when the nav item is either hovered over or is the active page. Currently the anchor text just turns grey, I suspect due to the opacity thats on there too.
Here is the code that I have been using:
.dropdown ul li.current_page_item,
.dropdown ul li:hover,
.dropdown ul li.on {
background-color: orange;
opacity:0.4;
color: white;
}
It could be that this is not the relevant sample of code but I cannot see what else could be important here. I'm working on a Wordpress site and am finding working with the CSS a little tricky. Here is the site itself if anyone thinks I've not added the relevant snippet: http://tinyurl.com/m562wgd
The anchor tag does not inherit the color from its parent, so you should set it explicitly:
.dropdown ul li:hover a{
color: white;
}
Remove color: white; from your .dropdown ul li.on rule and instead add it to this new css rule:
.dropdown ul li:hover > a {
color: white;
}
Add the css to hyperlink inside the li tag
.dropdown ul li a:hover {color: white;}
You're right that it's the opacity that's making the text appear gray. The way you have the code you are applying a 40% opacity to the white text. If you truly want white, either drop the opacity completely or make it a higher value (0.9).
Not sure why you want the opacity, but keep in mind that not all browsers recognize opacity - and show the 100% white. And I believe IE8 and lower do not support the :hover psuedo-class on anything but an tag.
.dropdown ul li.current_page_item a,
.dropdown ul li a:hover,
.dropdown ul li.on a {
background-color: orange;
opacity:0.4;
color: white;
}
Hope this helps.
Hi I'm trying to make a joomla site here, only one problem I can't seem to figure out. The color of my active link doesn't change, it has an image and a color, the image is in place as it should be, but the color doesn't change. Anyone an idea? here's the css:
a {
color: #ffffff;
text-decoration: none;
}
a:link, a:visited {color: #ffffff; text-decoration: none;}
a:focus, a:hover {
color: #e2231a;
text-decoration: none;
}
#links li.active {
color: #e2231a;
text-decoration: none;
background: url("../images/hover.png") bottom center no-repeat;
padding-bottom: 17px;
}
I know the active statement looks different then the rest, but this was the only way to get my image to show. Really stuck on this..
Used to this for a tag
#links li.active a {
// here style for your anchor link
}
If you want just the list elements within Links to change when active use this.
#links li:active a {color:#000;}
If you want all lists to be effected by this change use
li:active a {color:#000;}
If you want more than just the li elements to change ie ever single link on the site that is active to obey these rules then use the following
a:active {color:#000;}
Hope this helps you out.
I'm having an issue on my site http://noahsdad.com; if you look at the widget I installed at the very bottom, you can't see the links unless you hover over them. This doesn't just happen with this widget, almost any I put in have a 'haze' over them, if that makes sense.
I'm wondering if someone could help me figure out what's going on, and how to correct it.
Thanks.
The links are visible, they are just set to a light grey colour. You have these rules defined in your default.css file:
a:link, a:visited {
color: #EEEEEE;
}
a:hover {
color: #999999;
}
You could change the value of the standard link colour, or you create a new rule with a higher specitivity, so that only links in that widget are affected.
#dsq-combo-widget a {
color: #999;
}
Update
You haven't specified the color for your new style:
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #999; <-- Add this
}
Only because of color you can't see it but it's visible. You have a predefined color (#EEE) for all of your "a:link, a:visited" at "http://yourdomain.com/wp-content/themes/ProPhoto_10/style.css" at line 3 and all links are inheriting that color so if you want to change the color for your widgets then add another color like
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #333; /*or whatever you want*/
}
It's at line 345 in the same file.