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.
Related
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
I cant for the life of me figure out how to style the bootstrap dropdown menus using CSS.
I can manage to get the background color to change but that's it. The links don't have an underline and the Hover background colour does not change. I haven't even started with the down arrows yet either!! Any advice?
Heres the code im trying:
#NAV .dropdown-menu { background-color:#273961; border-bottom: 5px solid #CCC;}
#NAV .dropdown-menu>li>a:link { background-color:#273961;}
#NAV .dropdown-menu>li>a:hover{ text-decoration: underline;}
Hopefully this helps.
ul.dropdown-menu {
border-bottom: 5px solid #CCC;
}
.dropdown-menu li:hover {
text-decoration: underline;
}
I was a little confused what you wanted to do with the background-color of the list items in your dropdown menu. Here's an example of one way to change the background color when hovering over each link. Using !important after a CSS attribute might help in some circumstances when you want to override any subsequent rules (but it might not be the BEST way to do this).
I recommend opening up your Chrome dev tools and playing around a bit until you get the desired results. I'm assuming you want to change the background-color of your list items when hovering to a different color than what you specified (#273961) since it is already that color to begin with?
.dropdown-menu li a:hover {
background-color: red !important;
}
I have read through many questions about styling of jQuery UI autocomplete however I still have a problem that I can not solve. I am creating custom rendering like this:
$('.license-input').autocomplete({
source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
minLength: 2,
delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
return $('<li>')
.append('' + item.name + '')
.appendTo(ul);
};
So my <li> items contain links.
Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):
ul.ui-autocomplete li
{
border:none;
background-color:#f505f5;
padding:10px 16px;
font-size:12px;
outline:0;
}
ul.ui-autocomplete li:hover
{
background-color:#05e5e5;
}
ul.ui-autocomplete li a
{
border:none;
background-color: #f505f5;
}
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
}
However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
You can see that the computed style for the active <a> element is the blue color, however the item itself has white background. What is this white thing that I should style?
I have already tried various selectors like .ui-state-active, .ui-state-hover, ui-state-focus, ul.ui-autocomplete li a:hover and others.
Note: the border: none; rule from the ul.ui-autocomplete li:hover a actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.
Looks like the link in the list item has a background-image set. This will override any background colors you use.
You can set the background-image: none for that particular link
Something like:
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
background-image: none;
}
Example of link with background image and one without:
https://jsfiddle.net/yuwhuwkz/1/
smarter people than me!
I've been racking my brain for awhile with some css for this wordpress website On the navigation menu (Campus, National, World,...) I'm trying to do some custom css where when you hover your mouse over the menu items and they change color. Right now they only turn black except for the Campus menu item which changes to what I want for a moment then changes to black.
My attempt was to try this short css in the stylesheet, but it didn't work. I suspect I might have to adjust the upper-nested classes.
.menu-item-28 a:hover{
background:#1f61c4;
}
This is probably an easy question but my css-fu is pretty bad. Any help help is much appreciated!
Try changing your selector to
#menu-main-navigation li a:hover{
background-color:#1f61c4;
}
This will target any anchor (a) inside your main navigation (instead of only the one found under .menu-item-28 - ie. campus)
There is this CSS rule in the code
#nav nav > ul > li > a:hover {
background: #222222;
border-color: #222222;
color: #fff;
}
which causes the black background on hover. You probably can't change that, I suppose. But if you put another rule somewhere "later" (= below it) in the code, you can overwrite it with your own background color:
#nav nav > ul > li > a:hover {
background: #1f61c4;
}
I am using bootstrap's dropdown from a navigation div, and I'd like to change the color of the the sub-menu links on hover. Nothing I'm attempting works, and I can't make sense of it. It's not having any effect even when trying to run things from the chrome console.
I have created a css file where I override the defaults. The background change for normal a tags work, but the hover doesn't. Why is that? I also tried affecting the li and using !important, but none of that is having any effect.
I'm using Bootstrap 3.1.1. Here's my css:
.dropdown-menu > li > a {
color: white; /* This has an effect */
}
.dropdown-menu > li > a:hover {
background-color: red; /* This doesn't... why? */
}
And check out this jsfiddle too for a demonstration (for some reason you need to drag the result panel a whole lot to the left before you see the button). Any ideas?
edit
Note I am trying to change the background color for the links in the dropdown, not for the main button which is MyProfile.
Bootstrap defines a background image for the elements to override some clashes in their media queries. Remove the image to use a simple fill color.
You can redefine your hover as follows:
.dropdown-menu > li > a:hover {
background-image: none;
background-color: red;
}
http://jsfiddle.net/sW7Dh/4/