hi guys im trying to overwrite the styles on our wp plugin and style it in our own style sheet is there a way to do this? ive tried making classes for them in the style sheet with the same name as the plugin, ive also tried using !improtantafter... here is what it looks like in dev console.
and this is the code i used to try and overwrite the css for the plugin.
#ai20 h3{ font-weight:bold!important; }
also ive added this just to make sure and still nothing.
.statistics h3 { font-weight:bold!important; }
i have no clue why its not updating the css if anyone can give me a have i would be much appreciated.
The new rule you wrote has not been applied, as you can see in the screenshot you posted, so check the CSS file you added it to and make sure:
That CSS file is linked correctly
The style is not nested in some other rule
The CSS file is not cached (hard refresh)
You can use a custom CSS plugin, a child theme or simple add you overwriting rule to the end of your main CSS file within the editor in Wordpress.
Also, the ID will take precedence over the class, even if the class comes after it. Why are you trying to override with the same property/value?
Once the rule is being correctly applied, this will work fine:
.statistics h3 { font-weight:bold }
Use the plugin https://nl.wordpress.org/plugins/simple-custom-css/
it automatically overwrites your current css and adds the new one, I always use it! All you have to do is call the id or class you want to style in the plugin and style it as you normally would.
Related
Hello for some reason my custom CSS is being overwritten, I have correctly placed my custom CSS below the CDN bootstrap reference but that does not seem to solve the issue. For example if I am trying to change the font color for a header with an h1 inside. When using classes or id's the font color will not change. Though if I target the header by writing whats below in my CSS file it does work
header h1 {
color: white;
}
I do have an some understanding about specificy but I would assume declaring it with a class or id should be specific enough and go over the _reboot.scss file but it does not seem to. I am using BootStrap 5.
In your example cdn or node_modules css always on top. After that put your custom css files.
Order of prioritization when using multiple contradictory css files
I have just started learning SCSS and what I have noticed is, there is something going on with importing partials in the 'main.scss' file. I am using live-server to host the website locally and every time I modify something, in simple words, it doesn't work.
It doesn't show up on the website when it refreshes automatically in the browser.
And now, what I see is all my styles are gone, even though everything in my files is still the same.
This is my main.scss file below.
// ABSTRACTS
#use "abstracts/functions";
#use "abstracts/mixins";
#use "abstracts/variables";
//PAGES
#use "pages/home";
//COMPONENTS
#use "components/button";
//BASE
#use "base/base";
#use "base/animations";
#use "base/utilities";
#use "base/typography";
//LAYOUTS
#use "layouts/header";
#use "layouts/grid";
Note:I also used #import for this, but it's the same.
This is my partial which I am trying to modify.
.row {
max-width: $grid-width;
background-color:yellow;
margin: 0 auto;
margin-bottom: $gutter-vertical;
}
What happens is, the background color doesn't change. It just stays the same. It's not a code problem since I have tried the same with the CSS code inside a style tag. So I am sure it is related to SASS import.
This could be a number of problems:
The element you're trying to style doesn't have class="row" set on it.
You're not importing the right partial. It's impossible to tell what each of the files you're importing are.
Something is overriding the style that you're setting. For example, a more specific selector (e.g., div.row) or something using !important.
The best way to test is to use your developer tools to look at the imported stylesheet (be sure it's there, of course) and search to see if you can find the rule that you've defined. Then, look at the element you're attempting to style and be sure it has the row classname. Last, check to make sure that nothing else is applying a style which would override the style that you expect to find.
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I'm trying to edit some background on a page. I don't have access to the html file, only .css and .js. The page has a default theme that won't expand the background on the whole screen (bottom) because of the structure. I managed to swap the default background .png with an animated gradient through css but now I need to change the div. Tried with the #import url at the very top of the css file to call an external css but it won't work. Are there any ways to override the html structure? thank you
Forgot to say that I don't have access to the default template's css either. The service keeps everything on the server and once I installed the template in the local folder (the whole thing works with dropbox) I found an additional .css and .js in which I can add other code, though they come basically blank. What I need to do is to override the template's div structure from one of those 2 files. Using DevTools i found the name of the template div class and I guess I can download the relative .css. Still don't know how to override it... I'm not too familiar with coding in general...
Not clear with what you're trying to do. But you can always use Javascript DOM manipulation functions.
Check out this link for that: http://callmenick.com/post/basics-javascript-dom-manipulation.
You can also use jquery which provides better API.
If it is in some class definition or in a stylesheet file then use selector with high Specificity to get your definition on high priority
.oldclass{
width:328px;
height:328px;
background-image:url('http://via.placeholder.com/328x328');
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328');
}
<div class="oldclass">
</div>
If it is in inline style, then use !important tag
.oldclass{
width:328px;
height:328px
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328') !important;
}
<div class="oldclass" style="background-image:url('https://www.gravatar.com/avatar/fca24c2acab4d63343d4608ce256dcec?s=328&d=identicon&r=PG&f=1');">
</div>
I am modifying the bootstrap freelancer theme.In the Contact me section when trying to overwrite the "Name" label's color that appears when you try to type in the name input field it appears with #18BC9C but I want it to appear with #3fcbc7. It seems its styling is coming due to a class from a parent div that changes when I click on the input inside.I tried using dev tools "Break on..Attribute modifications" but maybe I'm doing it wrong. I took the classes I saw it had and tried to overwrite it that way as its worked for the other elements but its not working here. My CSS
custom.css
#page-top .floating-label-form-group-with-focus{
color:#3fcbc7!important;
}
#page-top .form-group col-xs-12 floating-label-form-group controls
floating-label-form-group-with-value floating-label-form-group-with-
focus {
color:#3fcbc7!important;
}
Added !important but nothing changed. Added the body id(page-top) for priority but didn't change. I don't want to edit the min css file since I heard that is considered bad practice
Try this by adding this style in your index.html itself
<style>
floating-label-form-group-with-focus label {
color: #3fcbc7;
}
</style>
Or you can add your css which you have provided above ^^
Check in your <head> that you're calling your custom css file AFTER the Bootstrap CSS file. Your custom styles should be called last as the browser reads these CSS rules in order. So if your Bootstrap CSS file comes AFTER your custom one, it's overwriting your custom style sheet.