I would like to change the size and color of my font on a wordpress menu,however when i use the following code
#access ul{
font-size:25px;
color:red;
}
the size changes but color remains the same, how can i edit my code to get the color working as well
You should be able to change non-current menu items with...
#access li a { color: #000; }
and if the current page is the current menu item change the built-in wordpress class...
.current-menu-item a { color:#FFF; }
(1) Something is overriding on the properties you set here in CSS.
(2) Change the color of li instead of ul
(3) Provide your ul structure code also
Try
#access ul{font-size:25px; color:red !important}
Normally, the color property is inherited, but anchor elements does not inherit attributes like color. If you want your <a> tags to inherit the color use:
#access a { color: inherit; }
try this
#access li a {
color: red;
}
or
a{
color:inherit
}
#access li{
color: red;
}
Related
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
I have a piece of code I've written, which I have placed above a section of minified CSS:
.scroll-fixed-navbar {
background-color: black !important;
}
.banner-list li i {
color: #f86900 !important;
}
.btn-primary {
background-color: #f86900 !important;
}
#nav li a {
color: #f1861d !important;
}
#nav li:hover {
color: #a8a89b !important;
}
[Huge chuck of minified code containing Font Awesome and Twitter Bootstrap]
On one server this works as expected, and the link items fade to grey on hover. On another server, however, the on hover effect does not trigger. I've tried opening the li elements in the inspector, but even on the server where the effect is working, the CSS doesn't appear to show up:
I saw somewhere that the :hover pseudo-class should only be applied to the a element, but I looked at the W3C wiki, and there is no mention of this there. Can I apply :hover to the li parent of an anchor in this way, or is it illegal code? Might the Bootstrap and/or Font Awesome code be overriding the CSS? Or is the problem likely to be caused by something else?
I think this:
#nav li a {
color: #f1861d !important;
}
is overriding this:
#nav li:hover {
color: #a8a89b !important;
}
Why do you set the :hover on the li? Try targeting the a element after the li:hover:
#nav li:hover a {
color: inherit !important;
}
li.widget ul li {
margin-bottom: 0.714em;
background-color: #000000;
}
on Rootmyandroid.org
I want to set the background color of right side bar sub widget links to black so I have given #000000 color. And I have set the thing (for which I want to add black background) to green color on hover.
When I use firebug to inspect CSS, it does not show the background-color: #000000;
What could be the issue?
In your custom.css you have a line:
//side bar edit start color wala
this is not a valid comment and so the rule
li.widget ul li {
margin-bottom: 0.714em;
background-color: #000000;
}
is ignored
comments on styles sheets are always opened /* and closed */:
/*side bar edit start color wala*/
Set the background-color in your layout.css at line number 227
li.widget ul li {
background-color: black;
margin-bottom: 0.714em;
}
If you're trying to change the color of the LINKS, you have to add "a" like so:
li.widget ul li a { ... }
or
li.widget a { ... }
In my Page the following CSS is set:
a:link {
color: #0094DE;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0094DE;
}
a:hover {
text-decoration: underline;
color: #DD127B;
}
I want to Change the Link color inside a div which has a class assigned to it.
I tried the following :
register:link{color:#FFFFFF;
}
Where register is the name of the div in which i want to change the link color.
How can i do that?
Also how to change the color for hover link over the same div?
.register a:link{
color:#FFFFFF;
}
It can be something like this:
a.register:link { color:#FFF; text-decoration:none; font-weight:normal; }
a.register:visited { color: #FFF; text-decoration:none; font-weight:normal; }
a.register:hover { color: #FFF; text-decoration:underline; font-weight:normal; }
a.register:active { color: #FFF; text-decoration:none; font-weight:normal; }
how about something like this ...
a.register:link{
color:#FFFFFF;
}
I think there is a confusion about what the OP is actually asking.
This solution:
a.register:link {color:#FFF}
...changes the color of a link whose class is "register". But that's not what the OP was asking.
And this solution:
.register a:link {color:#FFFFFF;}
...changes the color of a link that itself has no class but is placed inside of a div with class "register". And that's what the OP was asking.
Both of these answers are being upvoted here but only the second one is correct answer to the original question.
#register a:link
{
color:#fffff;
}
If you want to add CSS on a:hover to not all the tag, but the some of the tag, best way to do that is by using class. Give the class to all the tags which you want to give style - see the example below.
<style>
a.change_hover_color:hover {
color: white !important;
}
</style>
<a class="change_hover_color">FACEBOOK</a>
<a class="change_hover_color">GOOGLE</a>
I think you want to put a, in front of a:link (a, a:link) in your CSS file. The only way I could get rid of that awful default blue link color. I'm not sure if this was necessary for earlier version of the browsers we have, because it's supposed to work without a
smaller-size version:
#register a:link {color: #fff}
Is there some CSS that I can use to set the link color to be the same value as normal text?
Simply set
a { color: inherit; }
edit: you may need to add
a { color: inherit !important; }
but best practices suggest you avoid using the !important over-ride.
Just a small addition:
a{
color: inherit;
}
a:visited{
color:inherit;
}
a:hover{
color:inherit;
}