I have this span:
<span class="fa fa-green fa-arrow-circle-o-right" aria-hidden="true"></span>
I changed the colour like this:
.fa-green {
color: #008d4c;
}
However, the hover function does not work:
.fa-green:hover {
color: black;
}
What's wrong?
Your code looks fine. Make sure your hover style is not overridden by other styles or class.
html
<a href="#">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
<a href="#" class="more-power">
<span class="fa fa-green fa-arrow-circle-o-right fa-5x" aria-hidden="true"></span
</a>
css
.fa-green {
color: #008d4c
}
.fa-green:hover {
color: black
}
a.more-power:hover span {
color: #008d4c
}
Check this out https://jsfiddle.net/ayjwm23d/36/
Related
I want to change the background color of ngx-pagination
My code:
<pagination-controls class="custom-pagination" id="indicadorPaginationResults" (pageChange)="p=$event" maxSize="9" directionLinks="true" autoHide="true" previousLabel="" nextLabel=""></pagination-controls>
The default background color is blue, and I want to change to red.
How do I it?
Solution:
In the CSS:
.custom-pagination /deep/ .ngx-pagination .current {background: red;}
And install jquery in the project.
Use pagination-template instead of pagination-controls.
Example:
<pagination-template
#p="paginationApi"
(pageChange)="onPageChange($event)"
*ngIf="myList">
<div class="pagination-custom">
<ul class="pagi">
<li class="item">
<a *ngIf="!p.isFirstPage()"
[class.disabled]="p.isFirstPage()"
(click)="p.previous()"
class="page-link"
aria-label="Previous">
<span aria-hidden="true" class="la la-caret-left"></span>
<span class="sr-only">Previous</span>
</a>
</li>
<li *ngFor="let page of p.pages"
[class.active]="p.getCurrent() === page.value"
class="page-item">
<a (click)="p.setCurrent(page.value)"
class="page-link"> {{ page.label }}
</a>
</li>
</ul>
</div>
</pagination-template>
You can achieve this by editing paginator in the CSS file. For example (red background and red border):
.page-item.active .page-link {
background-color: red;
border-color: red;
}
You can add this for global css file.
An example of fully red paginator:
.page-item.active .page-link {
background-color: red;
border-color: red;
}
.page-link {
color: red;
}
.page-link:hover {
color: red;
}
(document.querySelector('.pagination-next') as HTMLElement).style.color = 'black';
(document.querySelector('.pagination-previous') as HTMLElement).style.color = 'black';
for angular
Iam working in Jquery mobileI have an footer like this:
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false">
<div class="footer" data-role="navbar">
<ul>
<li>
<a href="#dashboard" data-icon="dashboard" class="footer-icons" id="icon-dashboard">
<span class="navbar-text">Dashboard</span>
</a>
</li>
<li>
<a href="#notifications" data-icon="progress" id="icon-progress" class="footer-icons">
<span class="navbar-text">Voortgang</span>
</a>
</li>
<li>
<a href="#map" data-icon="security" id="icon-security" class="ui-btn-active footer-icons">
<span class="navbar-text">Plattegrond</span>
</a>
</li>
<li>
<a href="#" data-icon="security" id="icon-security" class="footer-icons">
<span class="navbar-text">Securitycheck</span>
</a>
</li>
</ul>
</div>
</div>
I want to change the color of <span class="navbar-text"></span> when its parent is set to active I thought something like this:
.footer > .ui-btn-active > .navbar-text {
color: red!important;
}
But this is not working maybe someon could help me out on this?
The issue is because .ui-btn-active is not a child of .footer as the > requires - it's a grandchild. Remove that operator:
.footer .ui-btn-active > .navbar-text {
color: red !important;
}
Working example
Alternatively if you want to use the child selector, you need to explicity set the full hierarchy in the selector:
.footer > ul > li > .ui-btn-active > .navbar-text {
color: red !important;
}
Also note that the use of !important should be avoided at all costs. If you need to override a setting, make the selector more specific.
I like the :nth-child(n) selector:
a.ui-btn-active > span:nth-child(1) {
background: red;
}
Well I started an ASP.NET MVC5 project and I want to use bootstrap 4 alpha 4 instead of the default bootstrap 3. I'm having some problems with the navbars, as I am unable to change the text color, which looks very weird. The html code is shown below:
<nav class="navbar navbar-light navbar-fixed-top bg-primary">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsingNavbar" aria-controls="collapsingNavbar" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
<div id="collapsingNavbar" class="collapse navbar-toggleable-xs">
<a class="navbar-brand" href="/">Application Name</a>
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/About">About</a></li>
<li class="nav-item"><a class="nav-link" href="/Home/Contact">Contact</a></li>
</ul>
<ul class="nav navbar-nav pull-xs-right">
<li class="nav-item"><a class="nav-link" href="/Account/Register" id="registerLink">Register</a></li>
<li class="nav-item"><a class="nav-link" href="/Account/Login" id="loginLink">Log in</a></li>
</ul>
</div>
</nav>
However, this doesn't work very well as the text color shows up just like the navbar's color, which is very difficult to see. The screenshot below demonstrates how it looks from my firefox browser, in which the navlinks color are very similar to the navbar's background color:
I tried to change this color by defining a new css class with color:white, but it won't work. The only way I can get it to work is to add inline style in the <a> tag, but this isn't the ideal solution and will create maintenance problem in future.
Does anyone know how I can change the navlink text and hover colors? Thanks.
PS: Someone asked for the main css file for the site. It's just the main css generated by ASP.NET MVC with a simple addition of class nav-item-color, nothing special. Below is the content of it if you are interested:
body {
padding-top: 55px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
/* styles for validation helpers */
.field-validation-error {
color: #b94a48;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #b94a48;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #b94a48;
}
.validation-summary-valid {
display: none;
}
.nav-link-color {
color: white;
}
I'm trying to add a border around individual fontawesome icons (using the Unicode codes). For example, in my CSS file I'm using:
content: "\f008\00a0\f001\00a0\f26c"
But if I try to add a border here, it puts one border around all three icons. Is there a way I can get a border around each of the three icons individually (not the 00a0 spaces).
Thank You
Nope...it's one element (or pseudo-element) with multiple characters...so you only get one border.
It's like trying to put a border round the individual letters in a span...can't be done.
At best, Font-Awesome offers a method of putting borders around icons using stacking but usually only for single icons. Whether you could tweak that is arguable.
Could be a fun experiment.
The way it should be done:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
i:before {
font-family: 'FontAwesome';
}
i.one:before {
content: "\f008";
}
i.two:before {
content: "\f001";
}
i.three:before {
content: "\f26c";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa one fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa two fa-stack-1x"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-square-o fa-stack-2x"></i>
<i class="fa three fa-stack-1x"></i>
</span>
I work with bootstrap a lot and sometimes it's really hard to figure out why certain things don't work when you want to override certain CSS decisions bootstrap makes for you.
So i've been trying to change the background color on a button on hover so that each button gets a different color on mouse hover. But somehow my css class doesn't override it.
Here is what I have so far:
<style type="text/css">
.fblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.tblue_background>li>a:hover, .fblue_background>li>a:focus {
background-color: blue !important;
}
.pred_background>li>a:hover, .fblue_background>li>a:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i></a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i></a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i></a></li>
PS: it also doesn't work when I put the class value between <li>
The problem is you're delcaring .fblue_background as if it's the parent of the li, this isn't the case. See revised code below:
<style type="text/css">
li>a.fblue_background:hover, li>a.fblue_background:focus {
background-color: blue !important;
}
li>a.tblue_background:hover, li>a.tblue_background:focus {
background-color: blue !important;
}
li>a.pred_background:hover, li>a.pred_background:focus {
background-color: red !important;
}
</style>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Hello</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Bonjour</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Hi</a></li>
When you are using the > method in CSS it would strictly follow the HTML markup. So when you want to change the a element, you should be doing
a.blue{
background:#0000ff;
}
Try this
.nav>li>.blue:hover, .nav>li>.red:focus {
background-color: blue !important;
}
.nav>li>.green:hover, .nav>li>.blue:focus {
background-color: #5EACC5 !important;
}
.nav>li>.red:hover, .nav>li>.red:focus {
background-color: red !important;
}
To change background of <a> link you just need to add :hover for class directly like this.
<style type="text/css">
.fblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.tblue_background:hover, .fblue_background:focus {
background-color: blue;
}
.pred_background:hover, .fblue_background:focus {
background-color: red;
}
</style>
<ul>
<li><a class="fblue_background" target="_blank" href="https://www.facebook.com/url"><i class="fa fa-facebook"></i>Facebook</a></li>
<li><a class="tblue_background" target="_blank" href="https://twitter.com/url"><i class="fa fa-twitter"></i>Twitter</a></li>
<li><a class="pred_background" target="_blank" href="https://www.pinterest.com/url"><i class="fa fa-pinterest-p"></i>Pinterest</a></li>
</ul>
jsfiddle link: https://jsfiddle.net/g9y2v91e/