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.
Related
I am currently trying to change the color of a title by referencing a div's class.
So far I have tried:
.pagetitle-title.heading {
color: purple;
}
<div class="container">
<h1 class="pagetitle-title heading">IT•ONE Method</h1>
</div>
And even:
h1 {
color: purple;
}
As mentioned per my comment, it looks like a classic case of "CSS overwrite". One of the "hacks" to avoid this, is to use the CSS property !important to tell the browser which CSS rule is particularly important, and should not be overwritten.
Example: color: purple !important;
CSS applies the style in the fashion that it is loaded. So if you have 1 CSS file with x rules, and a 2nd CSS file with y rules, and they both target the same elements, then the CSS file that was loaded last will generally overwrite the styles of the one prior.
The order is known as the top-down rule, and is only overwritten by the !important property and in-line CSS. The !Importantproperty will generally overwrite any in-line CSS.
Given the information about the top-down rule, and you have the means to edit the CSS and/or choose the order of how the CSS is loaded, you can make sure that you are able to apply your own CSS rules by having them load as the last included file in your project.
Example:
<head>
<link rel="stylesheet" type="text/css" href="loadedfirst.css">
<link rel="stylesheet" type="text/css" href="loadedsecond.css">'
<link rel="stylesheet" type="text/css" href="loadedlast.css">
</head>
In case these 3 files have rules that applies to the same elements, the loadedlast.css file is the CSS that will overwrite the ones prior, except in the case of the !important property and in-line CSS. By managing the order of your CSS, you can avoid having to resort to such "hacks" as using the !important property.
Check your link "stylesheet" for your CSS
Open you debug console and identify your h2 to see if CSS option are targeted
Try another hexa color code
Add "!important" after touy color code
color: purple!important;
I see your code and it's correct method to modify this color so... Try my checklist first and give us your feedback.
I would avoid adding important as much as I can. I would just go higher up the parents and try to target the div as specific as I can. Instead, I would go
.container h1.pagetitle-title.heading {
color: purple;
}
If that doesn't work only then I would use important.
I want to override default Dropdown properties that belong to react semantic UI
Here is my dropdown:
<Dropdown
placeholder="User"
selection
compact
options={userOptions}
/>
The text in my dropdown has too much padding so in my CSS I removed it like so:
.default.text {
font-size: 10px;
padding: 0;
}
I got rid of the padding from the Dropdown icon as well:
.dropdown.icon {
padding: 0 !important;
}
However, as you can see this only worked when I used !important
Related questions:
How come the icon padding only works by using !important -- the text padding did not need !important
I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?
How come the icon padding only works by using !important -- the text padding did not need !important
It depends on how styles are defined inside react semantic UI, don't forget, that CSS is Cascading Style Sheets, so in some cases you need !impotrant to override styles, in other you're not. For example:
p {
color: red;
}
p.colored-1 {
color: blue;
}
p.colored-1 {
color: green;
}
p {
color: red;
}
p.colored-2 {
color: blue !important;
}
p.colored-2 {
color: green;
}
<p class="colored-1">COLOR</p>
<p class="colored-2">COLOR</p>
I hear using !important is bad practice. Should I avoid using it at all costs? How else do I override these properties / What are best practices?
Don't use !important if it's not really necessary, but if there is no other way to override styles - !important will help you.
CSS properties have levels of power called specificity. The stronger specificity, the more it will override other weaker definitions. So, react is probably using strong specificity which override your definitions. Using !important gives a very strong specificity level which wins the ones react is using. Look in the dev took for the winning rule and give an equal or stronger specificity in your style sheet.
So for instance the rule that sets the padding is:
.ui.dropdown .menu>.item
you'll need to override that rule yourself in your style sheet, with the property of padding: 0.
That'll work because your rule will be loaded after the Segment UI rule, and thus override it.
Giving !important considered bad practice because it's very strong and very hard to override, if you will want to do so in the future. There are certain places it's okay to use !important, but this is not the case...
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 am working on a plugin for a wordpress page and in the theme it's going in, there is a style.css for that theme. In that style.css there are CSS attributes that apply to all img and p tags and that is messing up the appearance of my plugin. How can I make it so my plugin, which has its own stylesheet, ignore the style of the theme's css?
Include your stylesheet after the style.css
So:
<link rel="stylesheet" type="text/css" href="/path/to/style.css">
<link rel="stylesheet" type="text/css" href="/path/to/yourStylesheet.css">
If this still is not working use !important, but try to avoid this.
!important is placed after the style rule, like so:
p {
color: red !important;
}
You can also use more specific styles like #SarahBourt said.
#news-item > p {
color: red;
}
Craete a new CSS file and include your stylesheet after the default bootstrap css file, your styles will override the bootstrap styles
If still you are getting some problems you can also use !important next to that style
!important will ensure that your style will be given first preference
Ex:
p{
display:inline-block !important;
}
You can place styles in your stylesheet specifically to override the theme's styles.
Assuming your stylesheet is loading after the default theme stylesheet, then you can do the following.
In your web inspector, find the offending style in the theme's stylesheet. Copy it into your stylesheet, and replace every value with 'initial' to reset it to the defaults, or with your custom styles if that's more appropriate.
If your stylesheet is loading before the theme's styles, then you can still override the theme styles, even if they include !important. To override !important, create a more specific selector than the theme uses (Read about CSS specificity to figure out the best way of doing this), and add !important only to those which have !important in the theme style. If the style you're overriding doesn't use !important, just use the more specific style, as including too many !important tags can make it harder for you or someone else to modify your code later, as you're experiencing now.
In addition, you want to be sure that your overrides only get applied to your plugin, and not the rest of the site. So, wrap the plugin with a div or other element if it isn't already, and give the wrapper a unique class or id, e.g. class="my-plugin". Preface all of your overrides with this class to avoid breaking other areas of the site.
HTML:
<div class="my-plugin>
<!--plugin HTML-->
</div>
CSS:
.my-plugin img {
//override styles
}
.my-plugin p {
//override styles
}
Overriding original styling like this can get messy, but sometimes it's the only way to get things done when you don't have access to the other .css files. Just do the minimum necessary to make your styles more specific and you should be okay.
I'm dealing with a real hash of a site, so this is why I'm asking about this absurd question.
I've looked everywhere to find some sort of way to make a class override another class in the HTML class tag to no avail.
I can either do this, try to untie a ton of spaghetti (which I probably won't be allowed to do anyways), or something anyone else can recommend (would be greatly appreciated).
Is this possible?
class="myClass !important"
If not, is there some sort of equivalent?
Please help! Many thanks in advance!
No, that's not possible. You're going to have to iron out the CSS Specificity by yourself I'm afraid.
If you have the ability to change the HTML templates, you can always go in and add a <div id="override"> or something like that to the outer most wrapper of the page to use as the "master" rule in your CSS classes. Then, in the CSS, you can just add that ID before any of the existing classes or ones that you need to modify.
For instance, if you have the following and want to override the .some-class:
<div class="some-class">Bleh.</div>
And the corresponding CSS:
.some-class { color: red; }
You can wrap the whole thing with:
<div id="override">
<div class="some-class">Bleh.</div>
</div>
And add the #override (or whatever you want to name it) before the .some-class and this rule will take precedence over the other:
#override .some-class { color: green; } /* This will override the red color form the other rule */
.some-class { color: red; }
You can't use !important for entire selectors. You need to find the specific rules you want to override, and use !important on each.
You can add more than one class to a selector as follows:
class="myClass myClass2"
Above is what the class attribute would look like on your HTML element.
As far as the CSS goes, define the classes as follows:
.myClass {
color: black;
font-size: 14px;
}
The above is just a sample of some properties you may have.
Defining "myClass2" after "myClass" in your stylesheet will allow the properties from "myClass2" to overrided the matching ones in "myClass":
//This goes below myClass
.myClass2 {
font-size: 16px;
}
As long as "myClass2" is after "myClass", your font will take the size property of '16px;' The value of "myClass" will be overwritten by that of "myClass2". If "myClass2" comes before "myClass", you can use !important to ensure that style is taken over the one defined later:
//This goes above myClass
.myClass2 {
font-size: 16px !important;
}
Hope this helps.
CSS classes are just a group of styles so you can use class instead of inline style tag.
The !important keyword helps you to override a specific style and not working on classes.
So, for example:
Lets say that we have a css rule on every div somewhere in our CSS file
div{border:solid 1px #ff0000;}
And later on we have this rule:
div{background:#000000;}
Every div in our page will be with border and a background if we want to override the div css rules we need to do something like this:
div{background:none !important;border:none !important;/*...ADD YOUR CSS...*/}
you can create a css reset class to reset all the settings that you want and than add your css