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 { ... }
Related
Hovering on the webpage works, but NOT as intended. I want the text color to change on hover over a list's item. At this point, the hover changes the color of the text ONLY when hovered over the text, but not on the item itself.
Vimeo video
On the first webpage, it can be seen how the hovering works only on the text itself, and on the second webpage, the color of the text changes when hovered over both list item and text. I want to make the first webpage's side menu just like that. I am using wordpress for the creation of the webpage and custom CSS for styling.
The current CSS code, related to hovering and color change:
.et_pb_widget ul li {
background-color: #f9f9f9;
padding: 10px;
}
.et_pb_widget ul li:hover {
background-color: #EEEEEE;
color: #ff0000 !important;
}
.et_pb_widget > ul > li > a:hover {
background-color: #EEEEEE;
color: #ff0000 !important;
}
.et_pb_widget body:hover {
color:#ff0000;
}
I would really appreciate it if you could help me out with this!
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;
}
The Inspinia AngularJS framework has a demo here for those who don't use it.
For the life of me, I cannot see how to change the background colour of the navigation menu on the left. It should be simple, but I just can't find it, even using the Chrome developer console.
[Update] I want to change the color programmatically from AngularJS, what's the best way to do that? Maybe add an Id to the background div?
Make some changes, according to the images below:
I hope to have helped in some way
i guess this will help u
body{
background-color: #F44336;
}
.nav-header{
background-color: #F44336;
background-image: none;
}
.nav > li.active{
background: #c7635b;
}
.navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus{
background-color: red;
}
.nav-header and other elements in your sidebar use background-image and those images are opaque, not showing the background color. You need to check (and reset) background-image property of items in your sidebar for this.
Example:
.nav-header {
background-image: unset;
}
#side-menu {
background-color: #933;
}
.nav > li.active {
background-color: #833;
}
Keep inspecting your elements until you find what rule sets the backgorund-image, background-color or background (shorthand) for the element, copy the selector of the currently applying rule and place it in your own stylesheet, changing the value of the property. Make sure you load it after the rest of your stylesheets.
There is no background-color defined in sidebar, its the background-color of body, and the middle content section has light grey bg color, so change the body-color and sidebar color will be changed.
I want to have horizontal menu, e.g. 4 buttons/links in 4 different bgcolor with their respective siblings in the same color: e.g. 1st menu item in RED and with its siblings in red, 2nd one in GREEN and siblings in green, 3rd one in black and black siblings and 4th one in yellow and yellow siblings. the parent level menu will be of fixed width. 2nd levels may differ.. allowing line breaks/auto wrapping etc.
any suggestion on multicolor menu, please?
Thank you
e.g. img http://www.cssmenusamples.com/wp-content/uploads/2010/03/wakestock.jpg
If your parent menus have unique ids or classes you can do it with css (example).
If your theme/module does not print unique ids/classes you can add them with theme_menu_link function or with module menu_attributes.
You can use conditional CSS.
li a { border: 5px solid #FFFFFF; }
li:first-child a{ background-color: #000000; }
li:first-child + li > a{ background-color: #0000FF; }
li:first-child + li +li > a{ background-color: #00FFFF; }
li:first-child + li +li +li > a{ background-color: #00FF00; }
Change the color codes as you like..Hope this will be helpful to you.
I want to remove the outline on an active jQuery UI tab (or at least change the color).
Working from this example, I tried this unsuccessfully:
<style>
#tabs .ui-state-focus
{
outline: none;
}
</style>
(based on a tip from this question and answer).
What's the trick to removing the outline from an active tab?
I don't believe it's the class focus that you need to target, it's the CSS psuedo-class :focus
.ui-state-focus:focus { outline:1px dotted red !important }
if that works, go with {outline:none} to remove it. You are sort of jacking up your accessibility by worrying about it though, FYI.
There are lots of ways to do this. Here are two examples (I suggest option 2):
Option 1
Remove the outline from all elements that use the .ui-widget class:
.ui-widget * { outline: none; }
Here's a working fiddle.
Option 2
Make the outline color transparent:
#tabs li a
{
outline-color: none;
}
Here's a working fiddle.
I managed to remove it with
.ui-tabs-anchor:active, .ui-tabs-anchor:focus{
outline:none;
}
if you want to remove the outline only on a specific tabs then I suggest you use the following:
$("#tabs ul li").css({'outline': 'none'}); // where #tabs can be any specific tab group
inside the script tag of your html.
You can disable the outline by specifying outline-width: 0;
#tabs li a
{
outline-width: 0;
}
A more generic solution without using IDs would be:
.ui-tabs ul li a
{
outline-width: 0;
}
Demo: http://jsfiddle.net/ebCpQ/
I had to do this to prevent possible initial tab order focus too:
.ui-state-active a, .ui-state-hover a, .ui-state-visited a, .ui-state-focus a, .ui-state-focus:focus {
outline:none;
}
you can try this
a:focus { outline: none; }
To make it more clear, the outline appears on the element inside of the ul.ui-tabs li.ui-tabs-nav.
Most of above examples forgot to mention this: so here is a working answer for the original question:
.ui-tabs-nav .ui-state-focus a {
outline: none;
}
http://jsfiddle.net/xJ9Zr/5/
Oddly enough, none of this worked for me. I had to add a border to get the outline (or maybe it was a blue border) to go away:
.ui-state-hover, .ui-state-focus, .ui-state-active
{
border: 1px solid #ccc !important; /*Or any other color*/
border-bottom: 0 !important;
}