I am using wordpress and some plugin theme.Currently my default template contain this attribute.
html {
margin-top: 32px !important;
}
I need to set it to margin 0px.How to override it? I tried to set in in my specific css but can't.
!important carries the highest level of specificity.
As such, there are only two ways to overwrite it:
Add another !important declaration later on in the stylesheet: html { margin-top: 0; }
html {
background: red !important;
}
html {
background: blue !important;
}
<html></html>
Or add an inline !important declaration: <html style="margin-top: 0 !important;">
html {
background: red !important;
}
<html style="background: blue !important;"></html>
If you put your custom css file below template default css file then browser will affected below css first so template css properties will be replaced by your custom css. so you can write
html {
margin-top: 100px !important;
background-color:red !important;
}
html {
margin-top: 0 !important;
background-color:blue !important;
}
<html>
<h1> hello</h1>
</html>
Related
I am not that familiar with CSS and have a very basic question. I simply want to remove right and left padding from the following "div":
<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1">
"sapUixxx" classes are provided by a framework and cannot be adjusted directly. Therefore I declared a new css class "noPaddingRightLeft" and added it to the div:
.sapUiRespGridHSpace1 .noPaddingRightLeft{
padding: 0 0; }
When I check the result in the Chrome debugger tools it looks like this:
CSS at Runtime
There is no sign of my class "noPaddingRightLeft" though it's in the class list of the element. How can I override sapUixxx css files correctly?
Thanks for help
Tobias
Add the important flag to your css
.class {
padding-right: 0 !important;
padding-left: 0 !important;
}
Do:
<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1" style = "padding: 0">
Or create the css class as following:
#__grid2{
padding: 0 !important;
}
Add this to your css:
.sapUiRespGrid.sapUiRespGridHSpace1 {
padding: 0;
}
Question
I need to target a <section> with a specific ID that will show up once in every page. But each will have a unique class. Some of the styles for the section will not apply if that class is added dynamically. Trying to figure out how to best nest the styling using Sass.
Code
Demo
Here is a demo on CodePen.
Because it has the class of .soldout, the background should be grey not red.
HTML
<section id="featured-product" class="soldout">
<h1>This car is no longer avaiable</h1>
<img src="https://img.gta5-mods.com/q95/images/2013-lamborghini-veneno-hq-digitaldials/bb4811-venenomain.jpg">
</section>
SCSS
#featured-product {
/* these styles always apply */
color: #f1f1f1;
font-family: 'Oswald', sans-serif;
text-align:center;
/* These classes should not apply if the section has a class of .soldout */
background: #FC332E;
padding: 25px 30px 45px;
& .soldout {
/* These styles only apply when the element has matching ID and this class added in*/
background: #BDBEBA;
padding: 25px;
}
img { width: 400px; }
}
Remove the space between & and .soldout {
&.soldout {
The way you had it, was you were looking for .soldout WITHIN #featured-product because you had the space.
You weren't looking for #featured-product WITH the class of .soldout
I have a 3 scss file which are the base.css, layout.css and contents.css. I declare them as the following:
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="contents.css">
base.css is for the default styles of elements. I use the layout for the header, footer, and also the wrapper of the website. As for the contents.css, the name speak for itself. Yes it is all the contents of the website. Since I got it separately, I don't practically use specificity. Like for example:
base.css
input {
padding: 12px 0 12px 0;
}
layout.css
layout-wrapper{
/*some styles*/
}
contents.css
input {
font-size:1.5em;
padding: 2px 0 2px 0;
}
Instead of overriding the input of contents.css the style of the base.css gets read first and then comes the contents.css. I wonder why it doesn't work for input because in other elements it was fine. I can achieve my goal if I put a specificity in my input element but it would look like this:
contents.css
layout-wrapper{
/*some styles*/
input {
font-size:1.5em;
padding: 2px 0 2px 0;
}
}
This would defeat the purpose of separating the layout and the contents. So my question is how can I override the input style from contents without any specificity?
even having separated files, specificity is the answer to your problems, other may say to use !important , but avoid that at any cost.
you should give the defaul diff class names or element name like make it default-input for the default css
I am using AjaxToolkit combobox in my page... I am trying to change the width of combo-button . But I couldnot. Because it has inline style by default..
I tried the following code to add style
//Combo css
.ComboClass .ajax__combobox_buttoncontainer button
{
border-radius: 0px;
box-shadow: 0px;
width :12px; height:12px;
}
But border-radius and Box-shadow styles are applying but Width& height is not applying ..
Because ComboBox Button got default inline styles.. I cant remove that line styles too..
Please post me some suggestions....
Add a javascript function to search for and strip the attributes on document ready.
The jquery way is:
$(document).ready(function()
{
document.find(".ajax__combobox_buttoncontainer").removeClass("ajax__combobox_buttoncontainer").addClass("myAwesomeClassWithCoolDimensions");
});
Make sure your css has a myAwesomeClassWithCoolDimensions class.
Finally it works.. Little change on my css. I just added !important property to override the default element (Inline styles)..
<style type="text/css">
.ComboClass .ajax__combobox_buttoncontainer button
{
box-shadow: 0px;
width: 14px !important;
height: 15px !important;
}
</style>
Now I can change width & height of the combo-button.
I have main style.css and the one provided with third party
// Include main CSS
<link charset="utf-8" media="screen" type="text/css" href="http://test.style-hunters.ru/wp-content/themes/style-hunters/style.css" rel="stylesheet">
// Include third party CSS, we have put it to css folder
<link href="http://test.style-hunters.ru/wp-content/themes/style-hunters/css/style.css" rel="stylesheet">
In the second style.css
body {
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
margin: 0;
padding: 20px;
}
This makes all body elements to have padding.
How to resolve it?
Include the third party CSS file first so that you can override undesirable rules in your own file.
You have three good options, two of which are mentioned:
1: Use the !important flag. This is the least desirable, because you forever overwrite the padding rule--what if a page needs to overwrite it?
body {
padding: 0 !important;
}
2: Flip the order; put the third party style sheet first.
3: Use the html tag:
html > body {
padding: 0;
}
/* OR */
html body {
padding: 0;
}
If don't you care about IE6, use the first, if you do, use the second.
Because second css file overwriting to first one. Because of this you have to delete padding : 20px; line from second css file.
If you can't edit second css file you can add !important to first css file. I mean like this :
padding : 0 !important;
In your first CSS file:
html body {
padding: 0;
}
Add more selectivity to your styling rules.
if you add !important after the rule it will override other rules regardless of order.
body{
padding: 0 !important;
}
Don't flip the order bcos in that case other attributes of the second css file can be overwritten by the first css file. So uuse the important flag.