I use Lightbox Plus. In Lightbox.min.css i have changed the the linkcolors:
.lightbox a{
color: #E74C3C;
}
.lightbox a:hover{
color:white;
}
.lightboxOverlay a:{
color: #E74C3C;
}
.lightboxOverlay a:hover{
color:white;
}
Problem:
This approach does not change the color of the link under the Lightbox-image. The linkcolor stays #44aaee.
I did a search for that color in the source-files. I can’t find these default.
How can i change the linkcolor? Pls help.
the link had 4four states
a:link - unvisited link
a:visited - visited link
a:hover - when mouses over
a:active - when clicked
for link you should a:link
.lightboxOverlay a:link{
color: red;
}
and for vidited a:visited
.lightboxOverlay a:visited{
color: yellow;
}
Related
My Firefox is not showing the color for visited links:
a:link {
color: blue;
text-decoration: none;
}
a:visited {
color: green;
text-decoration: none;
}
a:hover {
color: cyan;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
Test
The Link text is shown in blue, hitting it with the cursor changes to magenta, clicking it for a short time yellow - and after that blue again.
Where to find the problem?
Thank you.
It is related on the browser's chronic: This option must be activated, to see different colors! It's not really logical, as in an active session the pages visited can be seen by Menu > Chronic, even if that option is INactiv. Anyway, now it works!
Is it possible to specify the hyperlink color within the main CSS properties statement like below? I have tried several variations and no luck.
width: 100%;
color: #FFF;
background-color: #693F18;
a.link-color: #fff;
There are several different ways to style a hyperlink: a for the link itself, along with the following pseudo-classes:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
To change the colour, you're looking for the color property.
This can be seen in the following:
a {
color: cyan;
}
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: purple;
}
Link
So I have this bit of CSS to change a specific link on a page to a different color (the default link color is the same background color of where the text is sitting, making it invisible).
.scroll a:link {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:hover {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:visisted {
text-decoration: underline;
color: #5a4a31;
}
.scroll a:active {
text-decoration: underline;
color: #5a4a31;
}
Which works in every browser but Chrome ('hover' is the only part that actually works when viewing in Chrome, the rest just go to the default link styles I have set). Anyone know why? Thanks!!
If you're going style each state of the link, the order you should do this is LVHA (link, visited, hover, active). Also, you misspelled 'visited'.
.scroll a:link {
text-decoration: underline;
color: red;
}
.scroll a:visited {
text-decoration: underline;
color: green;
}
.scroll a:hover {
text-decoration: underline;
color: blue;
}
.scroll a:active {
text-decoration: underline;
color: orange;
}
You could refactor a little:
.scroll a {
text-decoration: underline;
}
.scroll a:link { /* color: blah; */ }
.scroll a:visited { /* color: blah; */ }
.scroll a:hover { /* color: blah; */ }
.scroll a:active { /* color: blah; */ }
http://codepen.io/antibland/pen/WwKzdN
You spelled visisted instead of visited.
if .scroll is the class of the link than their is no need to put
a:link... you can just put .scroll:link or .scroll:hover.
I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:
A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}
#macrosectiontext
{
position:relative;
font:Arial, sans-serif;
text-align:center;
font-size:50px;
font-style: bold;
margin-top:245px;
opacity: 0.6;
background-color:transparent;
}
#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}
and I use the div like this:
<div id="macrosectiontext">bla bla bla</div>
however it seems that it doesn't work. The div still inherits the global link style.
CSS work on inheritance, so you should only override the properties you want to change.
Try always to write HTML & CSS lowercase, still your HTML and CSS are correct
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: #f00;
}
#macrosectiontext {
position: relative;
font:Arial, sans-serif;
text-align: center;
font-size: 50px;
font-style: bold;
margin-top: 245px;
opacity: 0.6;
background-color: transparent;
}
#macrosectiontext a:link {
color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
color: #fff;
}
I made a fiddle for you to show your code is working (changed the hover color, just for demo)
In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"
use a lower case "a" instead of a Cap "A" in the link style
If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.
My CSS has , in the following order:
B, STRONG
{
color: #333;
}
A
{
color: #00ae9d !important;
border-bottom: dotted 1px #00ae9d;
text-decoration:none;
}
But when I hold a link, it comes up gray with green dots. What do I need to do so that bolded items come up dark gray, and linked bolded items come up green with dots? Is there a way to rank each rule?
The behavior will depend on the order that you're setting your tags
<b>One</b>
is not the same as
<b>One</b>
Check this jsfiddle
to give color to a <a> you need to do follow LoVe HAte rule:
L(link)o*V*(visited)e H(hover)A(active)te
a:link {
color: #00ae9d;
}
a:visited {
color: #999;
}
a:hover {
color: #900;
}
a:active {
color: #555;
}
a:focus {
color: #900;
}
off course you can group them, but you have to keep the same order.
a:link, a:visited {
color: #00ae9d;
}
a:hover, a:active, a:focus {
color: #900;
}