I am trying to override the following found in the bootstrap class of "modal-footer"
margin-top: 15px;
I have the following HTML code that does this:
<div class="modal-footer my-modal-footer-override"></div>
and the following custom css :
.my-modal-footer-override {
margin-top: 0px
}
But this does not work.
Any suggestions ?
You could try a more specific selector. This could do the trick
.modal-footer.my-modal-footer-override {
margin-top: 0px;
}
Multiple class selectors should work in everything newer than IE6. Please note the absence of whitespace between the classes: this means that both classes are applied on the same element.
If this still does not cut it, you could put .modal before this selector, so: .modal .modal-footer.my-modal-footer-override.
The important! declaration could be used as a dirty hack, but I would advise against it.
Check your CSS import order. Make sure your custom css is loaded after Bootstrap. Use firebug or chrome dev tools to see if your styling is being overriden because of something imported laterin the html.
Have you tried this?
.my-modal-footer-override {
margin-top: 0px !important;
}
Using !important before the ";" will give this rule more weight than the bootstrap css.
You can add that inside yout HTML using ..css.. in the head, or in a new css document.
Related
I am learning ionic. In my app I want to make the font of linkbutton to 12 px, however it is overridden by other css.
My scss file has following css for linkbutton:
.link_button {
color: $myColor;
font-size: 12px;
text-decoration: underline;
bottom:10px;
}
How can I make above scss to be implied forcibly on top of others ?
This is how text looks:
CSS which is implied in actual(got from chrome tool):
After suggestion from folks here I modified my scss file with both Id and Important it did not work.
When using important:(And same happens even if I do via Id)
You can either add a ID to the link button and specify the style using ID. This is because ID takes precedence over class styles
#linkButton
{
Font-size:12px;
}
Or you can use !important which will over write all other css styles. But be careful when you use it
.linkButton
{
Font-size:12px !important;
}
The best is not to use !important but to increase specificity. https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
It was ionic-button who was adding button-inner class and it had default font size.
More on here:
css code doesn't apply to button in ionic 2
I have installed bbPress in my website and my theme override some bbPress css which I do not want.
The forum breadcrumb is hidden with the following code:
div.bbp-breadcrumb, div.bbp-topic-tags {
font-size: 12px;
}
bbpress.css?ver….5.14-6684:404
div.bbp-breadcrumb {
float: left;
}
vlog-bbpress.css?ver=1.8.1:335
.bbp-breadcrumb {
display: none !important;
As you can see in the picture the CSS comes from two different files:
bbpress.css
vlog-bbpress.css
Somehow the rendering seems to override bbpress.css.
What code should I use to make the breadcrumb visible?
Having installed a plugin (Simple Custom CSS) to write custom css, what should I write there in order to have the forum breadcrumb visible?
Please look at the real website here http://italiancrypto.it/forums/
The breadcrumb is hidden by:
.bbp-breadcrumb {
display: none !important;
}
What you see is that it is addressed by one class, and an !important. One class isn't a problem, but !important is (and is generally viewed as bad practice).
The easiest way to overcome this, is by addressing the same bbp-breadcrumb with an extra class, that's above it. For example:
.entry-content .bbp-breadcrumb {
display: block !important;
}
You could also use the above ID of bbpress-forum, but that is generally viewed as bad practice as well. Then again, desperate times call for desperate measures ;-)
Try add an id to the class .bbp-breadcrumb with JS
document.querySelector('div.bbp-breadcrumb').id = 'breadcrumb';
this will add the id to the element, then in your css use
#breadcrumb {display:block !important;}
since the id takes precedence over class I think this should work.
I'm using Bootstrap and trying to develop this website. Particularly using their bg-primary category, which sets the default color to a royal blue. However, I need the color to match a teal on the "subscribe" button. However, as you can see in the inspection, the color of the card background has a default setting of the blue with an important tag.
My CSS to change the bg-primary color can't override the natural color Bootstrap set because they placed the important tag on it (even my important won't override theirs).
.bg-primary {
background-color: #3292a6 !important;
}
How do I go in and irrevocably remove Bootstraps default !important tag to the .bg-primary class?
You will have to override a lot of things ( `:hover' and 'disabled' among others) I'll suggest creating a new css class:
buttonColor {
border: none;
background-color: black;
color: white;
padding: 10px 20px;
}
buttonColor:hover {
cursor: pointer;
background-color: white;
color: black;
}
Try:
.card.bg-primary {
background-color: #3292a6 !important;
}
Here's why:
With CSS (Cascading Style Sheets) there is a concept called "specificity." My above rule will work because it uses two classes (.card & .bg-primary) instead of just 1 class (.bg-primary).
In general, to override bootstrap classes, I make my css rules more specific by adding a class in front (Note: this won't magically work, especially with Bootstrap nav! You have to inspect the styles, see which bootstrap rules are applied and create an even more specific rule. This can be tedius, and there are probably better, but more complicated ways.)
There are two common approaches.
If you want to only override it in a few places, then Jesse Phillips's primacy solution is best, but if you want to globally over-ride it and you have direct access to how the header is parsed, then you simply need to make sure that your CSS rule is included later in the document than the Bootstrap
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/customStyle.css">
then all you have to do is add an !important tag to your rule that matches the class you want to override.
EDIT: A third option I sometimes see people recommend is to save the bootstrap.css locally to your server and remove the !important tag there, but this in not a good idea because you will loose this change if you ever try to update your bootstrap to a newer version.
You would simply have to over ride the class with your own bg-primary class adding the !important tag there as well.
See this SO - How to override !important?
This Mozilla post - -https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#How_to_override_!important
Two solutions that I don't see here yet:
Don't use Bootstrap. Learn how to write your own CSS.
Remove the class that is adding !important from the HTML element and re-write it in your own CSS files.
Fixing !important with more !important tags is not a way to write good CSS. Kill the source.
I want to set background color on flexbox and tried as follow.
Class definition on app:
<App id="app" class="weight-protocol"></App>
on FlexBox:
<FlexBox
height="20%"
width="100%"
alignItems="Start"
class="calendar-header-bg"
justifyContent="Center">
in the css file:
.weight-protocol .calendar-header-bg {
background-color: #007DB2;
}
The custom background color is not going to apply at all as you can see:
Look at the code inspector, the custom css class stays at the beginning calendar-header-bg instead at last.
Did you try without .weight-protocol ?
.calendar-header-bg {
background-color: #007DB2;
}
If not work you can use !important tag:
.calendar-header-bg {
background-color: #007DB2 !important;
}
You can also try use only background tag instead background-color:
.calendar-header-bg {
background: #007DB2 !important;
}
I hope this helps...
Good Luck!
Shouldn't FlexBox have some css to do what you are trying to achieve? use inspector and watch for the div that cointains the flexbox.
Can you be more specific?
I'm guessing the problem is specificity also known as importance of selectors. This means that the selector you're using (class nested in class) has little weight overall, and it very likely overwritten by a different, heavier selector from within the library you're using. For instance the library might be targeting a class within a class within an id or something similar.
My advice is to see the applied styles within the dev tools, see what's overwriting your styles and then decide if you'll make your selector stronger( by making it more specific) or just add !important after your background-color declaration.
I have a DIV container that is a CSS class defined on the top level. That container also has a style that has a couple elements that should override the main class elements. As far as I understand, this is what it should be doing, but it seems to ignore everything I am putting in there.
/* In the CSS file. */
div.ItemContainer {
position:absolute;
left:50px;
top:15px;
width:80px;
height:70px;
}
and In the HTML file:
<div class="ItemContainer" style="left:200px; top:150px;">
Test text.
</div>
Am I doing something wrong here? If not, any suggestions on how to get this to work? Thanks.
Sometimes things don't cascade correctly in some browsers. Use the !important flag to override behaviour.
style="left: 200px !important; top: 150px !important"
Your code seems to be alright. Have a look at the markup language you are using (HTML/XTML...) to see if it has an error such as a unclosed quotes, missing tag or missing end tag. Another thing that could mess up your style is the use of JavaScript for styling. It is a bad practice to use JavaScript for styling! Have a close look at what you are doing with the use of JavaScript for styling.
iScroll
Using iScroll seems to be the source of your problem. You might want to use a JavaScript library that does not mess with CSS. Also, you could try to modify the library or find a way to bypass what ever you are doing with the library.
You might find something useful in these links:
jQuery TOOLS
jQuery UI
try !important
left:200px !important;