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
}
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'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.
How to make layout with fixed sized column in Liferay?
I know how it is possible to style it with CSS, but where to put CSS files in Layout project?
May be there are matching styles in aui.css already and I can just use them somehow?
What is better: to embed style into .tpl file or use CSS files?
FINALLY
I just redefined styles for columns by id in my theme:
.columns-3 #column-1 {
width: auto;
}
.columns-3 #column-2 {
width: 840px;
}
.columns-3 #column-3 {
width: auto;
}
How to make layout with fixed sized column in Liferay?
You can use inline styles to fix the width of the columns within the .tpl file. Crude but works :-)
I know how it is possible to style it with CSS, but where to put CSS files in Layout project?
I don't think you can have CSS files in a Layout. CSS files can go in theme. You can modify the .tpl with your custom CSS classes which will be present in your theme's CSS.
May be there are matching styles in aui.css already and I can just use them somehow?
I don't think there are styles having fixed width which you can use and also this theme seems to be automatically generated when using AUI javascripts (as mentioned in this post).
What is better: to embed style into .tpl file or use CSS files?
CSS files are always better since it gives you a lot of flexibility in changing the styles through different themes. So your layout would be dynamic based on the theme applied. Since styling basically is the job of the theme.
As per your requirement you should create the layout with plugins sdk layouts, and that is more flexible.
If you feel to apply the CSS then you have to apply classes to the .tpl file and its respective CSS should be added to the theme custom.css file.
Just of curiosity, what type of fixed layouts are you creating.?