I have a header image that I would like to change responsively. However is shows in CSS as element.style and overrides any CSS that I add. I read some answers on this forum, however I still do not understand what do I need to do to override this setting. I think that my theme manages this. I have code like this and I want to change background-image:
element.style {
background-image: url('https://imagelink.com');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(0, 0, 0, 0);
min-height: 499px;
}
EDIT: My main goal is to background-image responsive for smaller/bigger screens, because my page builder (wpbakery) does not have this option
The rules of priorities are the following:
IDs are the most important (#unique-element).
Classes come next (.multiple-elements).
Names come then (div).
The more elements you have, the most priority. Example: div span.highlight has a higher priority than h1.main-title (2 elements + 1 class VS 1 element + 1 class).
In case of the same priority, it's the latest defined (the one on the lowest line in your file) that matters as CSS rewrited the rules previously defined.
Exceptions:
Inline code (<div style="...">) overrides everything.
Adding !important overrides everything even inline code but is considered bad practice because as it's higher than style="", it's also not affected by any changes you could make from JavaScript.
Examples with a bunch of fish
CSS observes some rules to render the style and you need to follow them in order to manage your styles.
In general, CSS will render first rules with !important, then selectors more specific, and then the last processed (if your specificity is the same and without !important the last rule will be rendered).
A good practice is to increase specificity when you want to override something, you can read more about it here.
Related
I've to remove the inline style of of the div element, can anybody tell me how to select that particular div, I've tried selecting class but inline style has more priority than class selector. Please tell me how to remove the inline style from it, I'm using WordPress and it is theme generated css.
This is one of those just because you can doesn't mean you should moments. Ideally, you should make a child theme and make your updates there. You can find plenty of help on how to make child themes in the WordPress docs.
That said, it is possible, but it's not best practice. This code will override what is in your current inline style.
/* this select a div with the class img-inner with the style attribute */
div.img-inner[style] {
margin: 2rem !important; /* anything you need to override needs an !important */
padding: 0 !important;
}
Once you have the div selected, you can pretty much do what you need. I just put in some declarations as an example. You can add more declarations or override/unset others.
If you need, you can use a more complex attribute selector to see if the style contains something specific.
Please try this -
.col-inner .img a.image-lightbox .img-inner.img-cover{padding: top: 77% !important;margin: 0 !important;}
I am using Wordpress and WPbakery. I have set a full-width, full-height background. But currently the background-position is set to centred with '!important' assigned as I see in the developer tools.
I want to set it to 'top'. I edited in developer tools in chrome and I achieved the desired effect. However I'm not sure how to make the changes permanent. I have tried copy pasting what I saw in the developer tools into the custom css field and editing it to 'top' but it wont override the theme. How do i go about it?
This is the current code seen in developer tools:
.vc_custom_1551104319445 {
background-image: url(https://unlicensedshrink.com/wp-content/uploads/2019/02/ulweb.jpg?id=9) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Not sure in which order custom styles and the default CSS of the theme are output … try increasing the specificity of your selector, f.e. like html .vc_custom_1551104319445 or .vc_custom_1551104319445.vc_custom_1551104319445
When multiple CSS rules apply to an element and try to specify values for the same properties, it becomes a matter of specificity, which one “wins”.
Here are a few resources on that topic:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specificity.keegan.st/
So if you try to overwrite something using the exact same selector you took from the WP/themes styles, it becomes simply a matter of order. Do the WP styles get embedded last? Then they win, otherwise yours would.
A simple way around that, is to increase the specificity of your selector. Selecting elements of this class on the additional “condition” that are descendants of the html element is one way to do that. Or to repeat the class name, so that .foobar becomes .foobar.foobar … and lots of other possible ways.
You need to see which file is producing the code. For instance -
After you know which file is responsible for the code, then you go to the site directory and implement the file in question.
I wouldn't suggest using the vc_ number selector. Best to use or even better add a custom selector on the row or element itself and then apply the following CSS.
.has-bgimg-right.vc_row-has-fill{
background-position:center right !important;
}
What ends up happening if you use the vc_ number selector is if you or your client go to update that field the vc number will change and you will be shaking your head. So create a custom selector class and use the vc_row-has-fill which will never change.
Given the following HTML code generated by a Google+ widget
<div id="widget_bounds" class="Yfd" style="width: 290px;">
What should I declare in my style sheet to override the width to be 100%
I have tried the following
Corrected typo
#widget_bounds, #widget_bounds .Yfd, #widget_bounds .Yfd[style], #widget_bounds[style], .Yfd{
width:100% !important;
}
and various combinations of to no avail.
Other options I have tried are
#widget_bounds, #widget_bounds .Yfd, .Yfd[style], #widget_bounds[style] .Yfd, #widget_bounds[style] .Yfd[style]{
width:100% !important;
}
#widget_bounds .Yfd[style]{
width:100% !important;
}
#widget_bounds{
width:100% !important;
}
.Yfd[style]{
width:100% !important;
}
From reading some comments I think the point has been missed that the HTML has been generated from a Google+ widget for which I only have the option to set pixel widths. I have a responsive designed website and I need to override the inline style to provide percentage widths.
Rather than down voting and voting to close a perfectly legitimate question I would appreciate it if someone is actually able to answer a difficult question.
update
As mentioned by #niels-keurentjes:
There are a few cases where an inline style can be over-ridden, such
as with the !important attribute or with user style sheets.
style="width: 290px;" is an inline style.
from http://webdesign.about.com/od/beginningcss/qt/tipcssinlinesty.htm:
Inline styles have the highest precedence. That means they are going
to be applied no matter what. The only styles that have higher
precedence than inline styles are user styles applied by the readers
themselves.
For more about the cascade: http://www.w3.org/TR/CSS2/cascade.html
For this reason you can't overwrite it with CSS alternative use jQuery to reset this width:
$('#widget_bounds').ccs('width','100%');
The following one :
#widget_bounds{
width : 100%;
}
Better not to use !important cause it breaks the natural cascading in the stylesheets.
P.S. You should check the spelling. The id is named widget_bounds which is different than widet_bounds from your css definition.
It turns out that I was on the right tracks but it is impossible to have a Google+ widget that has a responsive design, The closest I could get to is having fixed width px values for different sized view ports.
An interesting discussion on this can be found here https://plus.google.com/+DustinStout/posts/CxL5k3EBd4x for anyone looking for a solution to this.
how can I force an image to be aligned hard to the left, regardless of what css applies to the container it is placed in?
You could use !important on the style to increase it's precedence over other styles.
style="text-align: left !important;"
Or
#foo { text-align: left !important; }
However, this is considered bad practice. Ideally you should give your selectors the level of specificity required. Could you post up your CSS.
You need to apply a more specific CSS rule to that particular image, e.g. one that references the image by Id or use !important.
#idOfMyImage { /* Desired CSS here */ }
Here's a good (and humorous) overview of specificity in CSS
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
Is there any way to apply a style that will effectively block the
application of any applied or inherited styles for that object and any
contained objects?
No. You'll have to override all other properties being set on it.
Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e
.clearall {
display: block;
clear: both;
height: 1px;
margin: 0 0 0 0; ... }
Now, you can use that class to
<div class"clear">
<div class="awesome"> ..
</div>
</div>
<div class"clear">
<div class="woooow"> ..
</div>
</div>`
So now everytime that you need to reset the style, you can use that class
I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.
It should take care of erase most everything and and you can put your own code after that.
You can always can call !important on an element to override specificity inherits.
.wrapper p{color:red; background:blue;}
.wrapper div p{color:blue !important; background:none !important;}
Actually - no... But you can try to use jQuery for this purposes.
$('.class').removeClass().removeAttr('style');
It should remove all classes from matching elements and clear style attribute. Though, it's untested +)
If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.
If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.
There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).
As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:
.turn-off-all-styles,
.turn-off-all-styles * {
/* Disable every CSS property here */
}
As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.
.turn-off-all-styles,
.turn-off-all-styles * {
margin: 0 !important;
...
}