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.
Related
I am building a WordPress website and I am using bootswatch theme. This is driving me insane right now, what I want to do is to set my navbar burger menu to show on 1100px not on 992px as it is set in the bootstrap.min.css file. The insane part is that when I change the #media property in style editor (dev console) it works, when I change it in the actual file it still shows 992px. For that matter, any change I make in the actual file is not being applied. I tried clearing the cache and all that stuff but no luck. Is there something I am missing to change a simple property value?
If you want to change in bootstrap file then do not edit in minified version first make changes in unminified version if it works. Then minify your updated file and use that file because it is not recommended to make changes in minified files.
From the Bootstrap documentation it looks like they define the breakpoints in the scss file:
https://getbootstrap.com/docs/5.0/layout/breakpoints/#between-breakpoints
Has this been replaced by something from Bootswatch? I would guess that bootswatch is still using the scss from Bootstrap, you may need to change it in that file also (_variables.scss)
You can simply override the bootstrap styles by simply defining styles in your own CSS file by giving an extra custom class to your container. First, you have to create your own CSS file and import that file properly in your HTML, then give a custom class to your container and define the width in your own CSS file. Here is a little code snippet that may help you:
HTML code
<div class='container custom-class'>//your container goes here</div>
CSS code
.custom-class{
width: 1100px
}
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>;
}
Could somebody tell me how to change (or even find a file with), this code in wordpress?
I know what to change but I have no idea how.
I've already checked:
All of the *.css files in my themes?
All of the *.php files.
And this is not in a Visual Editor in WP.
How to do it?
If it's just a one class that needs it's properties changed go to the visual editor and override the inline style with !important rule, like this:
.content {
min-height: 150px !important;
}
Also be careful when using !important - it should be used sparingly.
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>
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.