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.
Related
I have all links on my site underlined when hovered using the following css:
a:hover {
text-decoration: underline;
}
How can I make a class which will override this?
.footer {
text-decoration: none;
}
Your second selector is less accurate than the first one, therefore it's the first one that is applied.
Plus, you shouldn't target such a wide selector (.footer) in order to only style your links. What you should do is:
.footer a:hover{ text-decoration: none; }
(As I assume that default a state doesn't have a text-decoration: underline;)
This code seemed to fix it although it wasn't working earlier:
a:hover {
text-decoration: underline;
}
.footer a{
text-decoration:none;
}
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;
}
I am using CSS code like this
.top_nav ul li a{
color: #444; background: #111;
}
.top_nav ul li a:hover{
color: #fff; background: #555;
}
.top_nav ul li a:active{
color: #111; background: #fff;
}
But the problem is this when any page is active, on navigation menu that link's background not change. Background of that link is same as other's.
You are probably looking for focusing an active link in your menu with different color. Mind that a:active is not intended for that purpose.
A link only takes up the a:active state when it is clicked, so you only see the change for a few seconds. You should look for a different way for getting it done, like adding a new css class for the selected menu item from your server side script.
The active is only applied when you click on it. Do it like this:
<li>Link</li>
And then style it
top_nav ul li a.active {
color: #111;
background: #fff;
}
The a:active selector refers to active state of a link, not your active page.
http://www.w3schools.com/cssref/sel_active.asp
You will have to set some "active page" class to your menu item for the page you are currently viewing and refer to that in yor CSS.
If you have static HTML pages, you can add a class to your navigation items representing the current active page:
<li class="current">...</li>
and then change your css to:
.top_nav ul li.current a {
color: #111; background: #fff;
}
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.
In my page I have two types of links, text links and image links.
for text links, I have defined following CSS rules:
a:link, a:visited{
text-align: right;
text-decoration:none;
color: #ccb771;
}
a:hover, a:active{
color: #333300;
border-bottom: 2px solid #333300;
padding-bottom: 0.25em;
}
For text links everything is OK! but for image links, underline is added when mouse goes over image. I added this code to define new rule for image links:
.bodyimage a:link, a:visited, a:hover, a:active{
border: none;
padding-bottom: 0px;
}
but this rule overrides previous links and underline do not show for text links.
What should I do?
Sorry for my horrible English!
The problem is the border is assigned to the (hover) link. In order to remove that when there's an image present you would need a parent selector, which doesn't exist, i.e. you would need to be saying - if this link contains an img, remove the border from the parent a
parent selectors are often wished for, and are possible with JS :)
The way around it is to classify (add class to) one of the options to target either a:hover or a:hover img
kind of like this..
CSS:
a:link, a:visited{
text-align: right;
text-decoration:none;
color: #ccb771;
}
a:hover, a:active{
color: #333300;
padding-bottom: 0.25em;
}
a img {border: 0;}
a.txt:hover, a.txt:active {
border-bottom: 2px solid #333300;
}
HTML:
<a class="txt" href="#">text link</a> - <img src="http://dummyimage.com/100x100/000/fff" alt="" width="100" height="100">
If you've less image links it might be better to classify the links which contain images..
Try putting this in your CSS:
img
{
border:0;
}
And remove your bodyimage class. If this doesn't work, try:
img
{
border:0 !important;
padding:0 !important;
}
Sorry if I'm missing something, but is there a reason you are using border-bottom to add an underline to the text? if you use text-decoration:underline, your text gets underlined while images don't. Isn't that what you want?
If you want this effect only when you are hovering over the link, you want:
a {
text-decoration:none;
color: #ccb771;
}
a:hover {
text-decoration:underline;
color: #333300;
}
a img {
border:none;
}
That should give you the colours you wanted, and underline the text while leaving the images underlined.