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>
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 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 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 am trying to duplicate a menu section but want the background and on hover colours to be the opposite. The CSS stylesheet/website was not created by me and I am not used to coding.
This page is VERY MUCH in progress https://www.wildedge.co.uk/archery-academy-session/
but I would like the menu to change colour for the 2 lines, eg
.squareboxarchery{background-color:#546734;}
.squareboxarchery:hover{background-color:#425227;}
.squarearcherytitle{color:#ffffff;}
and
.squarebox{background-color:#425227;}
.squarebox:hover{background-color:#546734;}
.squaretitle{color:#ffffff;}
I cant work out how to make it a separate entity...
Any help would be much appreciated!
Looking at the dom, I think that :
the second div.fixed_site layer_wrapper should be moved, now its in the first fixed_site layer_wrapper; its logic that two same structures have to be on the same level.
Once that done, you can easily separate your css by :
/* applies to the first line */
div.fixed_site layer_wrapper squarebox {}
and
/* applies to the second line */
div.fixed_site layer_wrapper + div.fixed_site layer_wrapper squarebox {}
you are using wordpress theme. and you need to login your CMS and do some selections and save the page. if its not working then you need to add extra css for the page with css property !important to overwrite background colors and text colors, hover colors etc.
which will be look like.
.squareboxarchery{background-color:#425227;!important}
.squareboxarchery:hover{background-color:#546734;!important}
.squarearcherytitle{color:#ffffff;!important}
and
.squarebox{background-color:#546734;!important}
.squarebox:hover{background-color:#425227;!important}
.squaretitle{color:#ffffff;!important}
use which one you want from above 2 sets.
Or simply add the the lines into style.css which will work for you.
If you are using a CMS -Content Manager System normally you have to overwrite by using !important after your style.
But there is also another way to avoid using it !important. Install FileZilla, go to the folder where it is the main.css of your website and change manually the lines of code. And then upload again this file in your website. But be careful, if you did not use to do this, duplicate these files twice for security. If you make a mistake you have always the original on your computer.
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.