I am attempting to change the default colors of btn-info using a custom css file.
I am using
.btn-info {
background-color:rgb(111,192,89);
color:white;
}
This works perfectly but when I try to change the hover i always seem to get the default bootstrap
.btn-info:hover {
background-color:yellow !important;
color:black !important;
}
Suggestions what I'm doing wrong?
Thanks
Regards
M.R.
Related
I am using tooltip from ngx-bootstrap with this code
<button tooltip="Add column before" container='body' placement='bottom' containerClass='tooltipClass'>
<i class="plus"></i>
</button>
and code for tooltipClass is
.tooltipClass{
z-index:100;
color:green
}
The tooltip is beneath the row Numbers and that is because of the z-index on rowNo. but I am adding greater z-index to the tooltip but the class is not getting added to it.
Any ideas what should I do?
Place .tooltipClass class in the root style-file it will work!
I was hitting this same issue, but the solutions above weren't working. Updating the global scss variables of ngx-bootstrap was how I fixed it.
This updates your inner tooltip.
.tooltip-inner {
background-color: #333 !important;
color: green !important;
}
This updates your arrow depending on position.
.bs-tooltip-bottom .arrow::before{
border-bottom-color: #333;
}
I have some button styling, which applies when the button has the disabled attribute.
However, I also have a .loading class that I'd like to apply to buttons.
I want the disabled styling to apply only if the button does not have the loading class.
Please see my JS Fiddle: https://jsfiddle.net/pbcykx5L/
I'm imagining something like this, but it doesn't work. Is there a way of doing this?
.btn:not(.loading):disabled {
background-color: #cdd9c3;
border-color: #cdd9c3;
text-shadow: none;
cursor: not-allowed;
}
It does work. In your fiddle, there is no difference in the styles being applied to .btn:not(.loading):disabled and .btn:disabled. If you change the background color of one to red, you can see the CSS is being properly applied.
.btn:disabled {
background-color: #cdd9c3;
}
.btn:not(.loading):disabled {
background-color: red;
}
<button class="btn">Button</button>
<button class="btn" disabled>Button (disabled)</button>
<button class="btn loading" disabled>Button (disabled and loading)</button>
I would like to set custom icon (ionicons) size for this code:
<button class="button button-icon icon ion-stop customIconSound"></button>
For class customIconSound i tried following:
button.customIconSound,button.button-icon {
font-size: 52px !important;
color: #fff;
line-height: 55px!important;
}
But without luck. If i tried icon class without the button button-icon class i fount that it is working but without button class icons has not pressed state (because is it not a button).
How can i solve it please?
Thanks for any advice.
Lucas was close but the correct syntax is this one
button.customIconSound:before {
font-size: 22px !important;
}
If you didn`t solve your problem yet or for people dealing with it in future.
You have to change css style for i pseudo element :before
button.customIconSound i:before {
font-size: 52px !important;
}
Your example is working here.
Maybe your problem is caused by something else.
PS: If you want only to resize the icon this css line is enough.
.customIconSound {
font-size: 52px;
}
Try ruling button-icon class out. That css class was the trouble in my case. Likewise, as a result, css styles worked on button tag too. For example:
<button class="button button-clear ion-edit" style="color:#fff; font-size:22px"></button>
I don't know why, but for some or odd reason the specific style for a p tag inside does not style when using a custom style sheet css, but works perfectly fine when doing inline.
Obviously I'm trying to avoid using inline, because it's not the best practice.Using Bootstrap
<h1 class="page-header">Properties</h1>
<div class="col-lg-4 main_content">
<img class="img-responsive" src="images/home_image2.jpg" />
<p>CHATHAM<br />
London, Uk
</p>
</div>
The html.
The CSS:
.main_content p {
font-size:24px;
background:#262626;}
Both the font size as well as the background color doesn't seem to work
I have tried targeting it as a ID, but to no avail.
use this
.main_content p {
font-size:24px !important;
background:#262626 !important;}
Try using
.main_content p {
font-size:24px !important;
background:#262626 !important;
}
Working fiddle
http://jsfiddle.net/52VtD/9080/
But it works without !important, i dont think !important is not godd to use, please check you other css maybe you are overriding some more classes, if you can please make a working fiddle or send us a link
Or write with upper class.
.page-header .col-lg-4.main_content p {
font-size:24px;
background:#262626;
}
Okay.
The solution I came up with was to change the name of the class affecting the div.
Even though did a search to check if I might have been using it somewhere else, and nothing came up, this solution worked out perfectly fine.
This is the name change I used.
.main_content_home p {
font-size:20px;
background:#262626;
color:#FFF;
padding: 12px;
}
I'm displaying one of the Twitter Bootstrap provided icons in an anchor. I want the default icon to be switched to icon-white when i have the mouse over the anchor.
The effect should be like when you hover over the anchors in the navbar here
How is this done?
You use the CSS pseudo-class :hover to set a different background:
.menulink:hover { background-image: url('alternative_sprite.png'); }
Use jQuery toggleClass() on hover to change the icon to white.
See this jsfiddle.
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#"><div class="btn btn-primary">
<i class="glyphicon glyphicon-print"></i> Click</div></a>
<br/>
Script:
$("document").ready(function(){
$("a").hover(function(){
$('i').toggleClass('glyphicon-envelope glyphicon-print');
});
});
just switch over the glyphicons image?
(extracted from my css, which is a sass version, and my images are in a different place, but you get the idea...)
&:hover{
i{
background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
}
Actually, the AngularJS website uses a webfont to display icons:
font-family: 'FontAwesome';
And they insert the font-icon using CSS pseudo-class :before:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
}
Which it is a brilliant solution, if you resolve to create your own icon web font.
Or even better, you can use Font-Awesome.
Use CSS psuedo-class :hover..
.menulink:hover { background-image: url('myimage.png'); }
Some of the answer above are not working and give a background image with all glyphicons at ones.
This works form me. Notice that I have changed the color of the icons to fits my needs.
a:hover > [class^="icon-"] {
background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}
I know there are already a few quick solutions posted that will do the trick. I would like to add my solution if you would like to achieve this without using JQuery or CSS:
Crate an $scope object that contains the name of the icon class your would like to set by default.
$scope.myClass = "glyphicon glyphicon-ok"
Add ng-class directive and get the class name from $scope.MyClass, add ng-mouseover and ng-mouseleave directives and change $scope.MyClass value
<span
ng-class="myClass"
ng-mouseover="myClass = 'glyphicon glyphicon-remove'"
ng-mouseleave="myClass = 'glyphicon glyphicon-ok'">
</span>