I was wondering if anybody knows how to change the colour of my links. They are blue at the moment and clash with my background colours. How do you change this colour to make it more visible?
I would like to give you a tip, so you are writes less CSS to get the same styling. When you have multiple items that should have the same styling properties, then you can comma separate it. I you case you have styling for h1, h2 and h3, as you can see it has the same properties
h1{ color:white; font-weight:normal; }
Then you can do it like this, as you can see less code, and it nice :-)
h1,h2,h3{ color:white; font-weight:normal; }
The last thing I would mention is if you can the don´t use the !important option if you can. If you need to override styling, and you have used important, it can be very difficult and override it.
It is about to get higher specificity as Jan also mentions in his post.
From the screendumps above it's not clear to me whether you have tried adding a specific declaration for targeting a tags from your rich text editor as well - The only thing I can see in your CSS is that you have added
a{
color: white !important;
}
This will mess up specificity since you have used !important, which will always win unless you add inline styling to the a tag like <a href="#" style="color:blue !important;">Link</a> - This is not something that you should ever do - Just using it as an example to explain why you should always be careful with using !important.
So with the above declaration saying the a tags must always be white writing something like
.rte-content a{
color:red;
}
Will always be overwritten - If you remove the !important keyword from the general declaration the last example will win though.
By doing this you are getting bundling and minification it improves request load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.) It could be nice if it´s get a big site. There is also a video about this package on uHangouthttps://www.youtube.com/watch?v=HLcGITaxeDI
Thanks for all the help guys. I changed the link to my stylesheet and hey presto it worked! Woo Hoo!! But I have learned that it is !important to just not declare every colour to be !important!
How to change link colour?
Hi All
I was wondering if anybody knows how to change the colour of my links. They are blue at the moment and clash with my background colours. How do you change this colour to make it more visible?
Thanks. Tony
Hi Tony
What links are you referring to? Is it those rendered from your rich text editor? Or is it all your links in general?
Generally you can of course style the a tag using CSS like this
That will target all links in general and make them red unless something with a higher specificity overrides it elsewhere.
So if you only want to charge the links that are added using a rich text editor for instance then I imagine you have a container like
where your rich text content is being rendered. Then you can target a tags that are children of the .rte-content class like thisThen only links within this "scope" are being marked as red.
I hope this makes sense and answers your question.
/Jan
Hi Jan
Sorry to be so vague, I think it is the specificity that is the problem. I tried a{color:red} already and other derivatives of it!
I have posted some screenshots of my code in case you can see what I'm missing....
Thanks a lot.
Tony
Hi Tony,
I think the problem is the way that you are including your stylesheet, just try to do it like this instead.
I would like to give you a tip, so you are writes less CSS to get the same styling. When you have multiple items that should have the same styling properties, then you can comma separate it. I you case you have styling for h1, h2 and h3, as you can see it has the same properties
h1{color:white;
font-weight:normal;
}
Then you can do it like this, as you can see less code, and it nice :-)
h1,h2,h3{color:white;
font-weight:normal;
}
The last thing I would mention is if you can the don´t use the !important option if you can. If you need to override styling, and you have used important, it can be very difficult and override it.
It is about to get higher specificity as Jan also mentions in his post.
Hope this helps,
/Dennis
Hi Tony
From the screendumps above it's not clear to me whether you have tried adding a specific declaration for targeting a tags from your rich text editor as well - The only thing I can see in your CSS is that you have added
This will mess up specificity since you have used !important, which will always win unless you add inline styling to the a tag like
<a href="#" style="color:blue !important;">Link</a>- This is not something that you should ever do - Just using it as an example to explain why you should always be careful with using !important.So with the above declaration saying the a tags must always be white writing something like
Will always be overwritten - If you remove the !important keyword from the general declaration the last example will win though.
I hope this makes sense and helps.
/Jan
Hi Tony,
Perhaps it would also be nice to know the optimus package https://our.umbraco.org/projects/developer-tools/optimus. With this package you can make script and style bundles from within the Umbraco backoffice.
By doing this you are getting bundling and minification it improves request load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.) It could be nice if it´s get a big site. There is also a video about this package on uHangout https://www.youtube.com/watch?v=HLcGITaxeDI
Hope this is useful information too.
/Dennis
Hi Dennis & Jan
Thanks for all the help guys. I changed the link to my stylesheet and hey presto it worked! Woo Hoo!! But I have learned that it is !important to just not declare every colour to be !important!
Thanks.
Tony
is working on a reply...