I'm trying to change the background color of a glyphicon upon hover/focus without success in my banner.Below is a code snippet for the 2 glyphicons i.e. glyphicon-user and glyphicon-login. The background changes to white even though I've set another color in the css.
1.html
<div class="row">
<div class="col-sm-6 col-md-offset-4 col-md-4">
<a id="logo" href="#"> <img src="../static/images/logo_small.png" data-medium="../static/images/logo_medium.png" data-large="../static/images/logo_large.png"></a>
</div>
<div class="col-sm-6 col-md-4">
<ul class="nav navbar-nav pull-right">
<li><a class="custom-white" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a class="custom-white" href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
2.css
.custom-white { color:#fff;}
.custom-white:hover,
.custom-white:active,
.custom-white:focus {background-color: yellow;}
add !important after the attribute's value
Working demo
.custom-white:hover,
.custom-white:active,
.custom-white:focus {background-color: yellow !important;}
Try changing your CSS to this:
.nav>li>a.custom-white:hover,
.nav>li>a.custom-white:active,
.nav>li>a.custom-white:focus {background-color: yellow;}
See this demo
HTH,
-Ted
Just use the "!important" css feature to override bootstrap's css. For example,
.custom-white:hover,
.custom-white:active,
.custome-white:focus
{background-color: yellow !important;}
Otherwise, the browser will compile bootsrap's default first. Hope that works!
Try this instead,
Just update your nav css lines
.nav>li>a:hover,
.nav>li>a:active,
.nav>li>a:focus {background-color: yellow;}
Related
I have a <li class="jobs-dashboard1"> I'd like to target with CSS. The problem is that it's not responding, so I wondered if it's possible to specify somehow with the id of the parent <ul> like so:
#adminmenu.jobs-dashboard1 {
background-color: green;
}
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow">
<div></div>
</div>
<div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
Home</li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</li>
This didn't work, and I don't know why.
If you see Jobs in the screenshot... that's one of them I'm trying to target.
The site is https://adsler.co.uk if that helps, but it's a backend modification.
Where are you adding this CSS? You cannot add it to typical CSS files that you use on your website, because those are all loaded on the Frontend, and not loaded in the Wordpress Dashboard.
You also shouldn't have to target your item with an ID before the class, if the item has its own class already, and is only used on that item. If you use this class on more than one item then you can specify an ID or other selector.
Add this to the end your functions.php or a custom plugin
Here is the original posted solution:
add_action('admin_head', 'custom_admin_css');
function custom_admin_css() {
echo '<style>
.jobs-dashboard1 {background: green;}
</style>';
}
Here is another way that should also work.
add_action( 'admin_head', 'custom_admin_css' );
function custom_admin_css() { ?>
<style>
.jobs-dashboard1 {background-color: green; }
</style>
<?php }
Well, you have missed a space in your CSS declaration.
it should be,
#adminmenu .jobs-dashboard1 {background-color: green;}
Hope this helps!
It is because you have more layers of nodes over the ".jobs-dashboard1". So you could use this:
#adminmenu #menu-dashboard .wp-submenu .jobs-dashboard1{background-color: green;}
or if you want a cleaner way:
#adminmenu li ul .jobs-dashboard1{background-color: green;}
It works, Please check the below snippet. Also check CSS Combinators
#adminmenu .jobs-dashboard1 {
background-color: green;
}
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow">
<div></div>
</div>
<div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
Home</li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</li>
I have the below script which I am trying to apply some CSS to, to overwrite the bootstrap defaults.
h2 class="sr-only">${Search Categories}</h2>
<div role="list" class="list-group">
<a role="link" ng-class="{active: !data.t}" class="list-group-item"
ng-href="?id=search&q={{data.q}}" aria-label="${All search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">${All}</span>
</a>
<a role="link" ng-repeat="source in data.searchSources | orderBy:'order'"
ng-href="?id=search&t={{source.id}}&q={{data.q}}"
ng-class="{active: data.t==source.id}"
class="list-group-item" aria-label="{{source.name}} ${Search results}">
<i class="fa fa-chevron-right"/><span class="m-l-sm">{{source.name}}</span>
</a>
</div>
Current the issue currently is that when one of the links is selected its blue which is OOTB functionality for bootstrap list-group-item but I am having some trouble overwriting it.
I assume I need something like a:focus {background-color: Whitesmoke} or list-group-item:focus ... but neither of these seem to work.
What is the right direction?
you should overwrite the :visited not :hover
ex :
a:visited {background-color: Whitesmoke}
This is my first work with css and Bootstrap. As shown in attached image, I want the green color of text TEST to be green to be applied to that all yellow highlighted rectangle. how can I do that? Also, I want to toggle the active color whenever I click on test1 and test2.
My code is as below
<nav class="navbar navbar-dark">
<div class="container-fluid">
<div class="row-fluid">
<nav class="col-md-11">
<span class="navbar-header">
<a href="/test/" class="navbar-item">
<img class="some-class"
src="<myUrl>">
</a>
<a tooltip-placement="bottom" uib-tooltip="${some-text}" class="navbar-brand-test" href="<myUrl>">TEST</a>
</span>
<ul class="nav navbar-nav">
<li class="test1"><a href="<myUrl>" >Test1</a></li>
<li class="test1"><a href='<myUrl>' >Test2</a></li>
</ul>
</nav>
</div>
</div>
</nav>
css for navbar-brand-test, I just updated the existing code:
.navbar-brand-test,
.navbar-brand-test:hover,
.navbar-brand-test:focus {
height: 50px;
line-height: 50px;
font-size: 1.4em;
letter-spacing: 0.05em;
padding: auto;
margin: auto;
color: #fff;
background-color: #5fc17c;
white-space: nowrap;
}
When I did as suggested by TKD21 in the answer below, It worked but as you see in second image, the BG collor filled the logo (yellow part in second image) as well. I want the logo to be separate than that BG color
Finally, below code did a trick. Slightly modified version of the answer by TKD21. Moved logo url below col-md-11 and added div instead of span
<nav class="navbar navbar-dark">
<div class="container-fluid">
<div class="row-fluid">
<nav class="col-md-11">
<a href="/test/" class="navbar-item"><img class="some-class"src="<myUrl>">
</a>
<div class="col-md-1 navbar-header" style="background-color: #5fc17c;">
<a tooltip-placement="bottom" uib-tooltip="${some-text}" class="navbar-brand-test" href="<myUrl>">TEST</a>
</div>
<ul class="nav navbar-nav">
<li class="test1"><a href="<myUrl>" >Test1</a></li>
<li class="test1"><a href='<myUrl>' >Test2</a></li>
</ul>
</nav>
</div>
</div>
</nav>
Now only issue I have is each tab should be active with green color when I click on Test1 or Test2. Will update here when I resolve it
If I understood your question correctly, you want the green background of the text "TEST" to be applied to ALL of the yellow triangle,yes?
If that is indeed the case, consider doing the following:
Change your <span class='navbar-header'> to <span class='col-md-1 navbar-header'> and add a color class or style rule of your choosing
Change your <span class='navbar-header'></span> to <div class='col-md-1 navbar-header'></div> and add a color class or style rule of your choosing
Though the two solutions seem identical, the second is less prone to breaking on window resize.
If you need a bigger green background size, just play around with the col-md-<number> Bootstrap classes.
The results from my testing can be seen here
How do you change the text color for all navbar links including brand logo in Materialize css. I tries to add like 'black-text' but it only works for the brand-logo. For example,
<a id="logo-container" href="#" class="brand-logo black-text">
My Logo
</a>
<ul class="right hide-on-med-and-down black-text">
<li>Link 1
</li></ul>
Again 'black-text' only works for the logo.
In your css, add:
.black-text li a{
color: black;
}
alternately, you can add the "black-text" class directly to all the links you want to have black text.
example:
<ul class="right hide-on-med-and-down black-text">
<li><a class ="black-text" href=#">Link 1</a>
</li></ul>
I want to remove the default box-shadow from the unordered list group in bootstrap.There is the default shadow in the list-group special. My html is as follows:
<div class="row">
<div class="container">
<div class="col-md-4">
<ul class="list-group special">
<li class="list-group-item">About Royal</li>
<li class="list-group-item">Message from MD</li>
<li class="list-group-item">Director's Profile</li>
<li class="list-group-item">Organization Structure</li>
<li class="list-group-item">Member Asssociation</li>
<li class="list-group-item">About Nepal</h2></li>
</ul>
</div>
</div>
<div class="col-md-8"></div>
</div>
</div>
I applied the following css:
ul.special{
box-shadow:none;
}
However, the default box shadow is always there? Plz help how to remove it?I would highly appreciate the help.
There's no box-shadow on the .list-group, look at the unpacked CSS https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css lines 5100 - 5120. If you want to remove the border then you can do the following in CSS that comes after the Bootstrap CSS.
**CSS **
.list-group.special .list-group-item {
border-width:0px;
}
I think you are talking about the border, not the shadow.
It is simply to change. You have to add one line to your CSS:
ul.special .list-group-item{
border: 0 !important;
}