I have a third party CSS file, need to delete, add, override some properties. Meanwhile want to delete some classes without changes in the original one.
e.g.
ThirdParty.css
.cal_navline div
{
position: absolute;
top: 2px;
white-space: nowrap;
}
Is it possible to delete this class without changes within the original css file? Is it possible that above class is not treated or ignored in our code?
You can use !important with a style to override a style.
You can use same class and style with !important which will override the styles.
In order to "delete" properties, you should use their default values.
You see, every property is always set, is just that they have default values.
For example, if you have an element with position: absolute; and you want to remove that, you would use position: static !important;, because the default value of position - that is, when is not set- is static.
The source about what I said about position is here: http://www.w3schools.com/cssref/pr_class_position.asp
Read the part that says:
Default value: static
Same way, every css property has a default value. If you force the default value, is like deleting that property.
(top,left,right,bottom have auto as their default value, some others by default inherit the values of their parents, those have an inherit value as default, etc)
Here is a list with default css values: http://www.w3.org/TR/CSS2/propidx.html
As the above answer, I would keep !important as the last option, if you want to override styles, you can use higher specificity rules like
.container_class .cal_navline div {
position: absolute;
top: 2px;
white-space: nowrap;
}
If still it is not specific, you can use !important to override the third party CSS.
Also, you can use JS in this case if you are open to use it.
Related
I have a page that I need to modify some behavior. The element that I'm working on has a [attribute] directive, like this:
<div class="someClass" myAttributeDirective></div>
The myAttributeDirective has it's own css page that defines some styling, like this:
[myAttributeDirective] {
/* a few different properties */
border: 1px solid red;
position: relative;
}
/* then some more class stylings related to the directive */
So you see, in the css, it's defining some styles for JUST the attribute, so if the attribute exists in any element, apply those stylings.
When I view my element in Dev tools, it doesn't look quite right. In order to "fix" it, I un-check one of the css properties that is causing my issue, the position: relative;.
BUT
I can't change the "core" css for that directive, because it's used throughout the application. AND, if I try to override that property, it doesn't work (actually, cycling through the different position: * options only leads to making things look worse).
So, how do I override that specific property, without changing the core css file?
If you want to override style in any case irrespective of which order style is applied, consider applying style inline in the div.
<div class="someClass" myAttributeDirective style="position:absolute;"></div>
my css file has a property (see below) that applies to all images:
img{height:auto;max-width:100%;}
I have images in a particular div that I don't want to apply this to.
I can assign a new image class but the global one above still takes effect.
Is there a way to prevent the global img applying to images within this div?
Yes if you make more specific your rule then it be primordial like:
div.contenedor img {
height:10%;
max-width:50%;
}
Also set this after the other rule.
You need to change all the previous properties
You want to reset the properties to their defaults. height: auto is the default anyway, so the only one you need to get rid of is max-width, which you need to set to none.
div.auto-width img {
max-width: none;
}
Because this selector has greater specificity (0021 vs 0010) it overrides the original definition.
use the !important property on your new image class.
.auto-width {
max-width: none !important;
}
Also, CSS files are cascading so if you put your new image class after the standard image class, you will be able to override the max-width without the !important statement.
I'm using dojo 1.8 and don't want any padding in my bordercontainer / contentpane layout. The problem is, it seems when I add the claro css file, instead of just applying class styles, the div's i'm using for my content panes get styles applied inline. It almost seems like this is being done programmatically, but only when I add the css file.
For instance, the contentpane I use as my header looks like this:
<div data-dojo-props="region: 'top'"
data-dojo-type="dijit/layout/ContentPane"
id="header"
class="dijitContentPane dijitBorderContainer-child
dijitBorderContainer-dijitContentPane
dijitBorderContainerPane dijitAlignTop"
title="" role="group" widgetid="header"
style="left: 5px; top: 5px; position: absolute; width: 1387px;">
It adds the style="left: 5px; top: 5px...." which I'm pretty sure precludes me from just overriding any type of padding or margin setting with css. I want my content panes to not have any padding or "virtual" padding by using absolute positions like this. How can I still use claro but prevent this behavior?
The 5px comes because you have gutters set to true on the BorderContainer.
Add gutters: false to properties of the BorderContainer.
The dijit.layout widgets performs a resize when rendering, calculating the space it has to work with, and setting itself up as according to whichever layout variant it is (BorderLayout child in your case, which is referred to as 'nested containers'). Hence the inline styling, done programatically.
Your problem is most likely, that the CSS you apply yourself has a lower 'weight' then the styling from claro.css.
Check this link: specificity. This is a term, that covers which selector is highest prioriy. The more specific a css-rule is, the higher the priority.
So you need to 'win' over a class-on-class rule like this:
.claro .dijitContentPane {}
To achieve it, add #id selector - or nodetype-selector or similar. You can also put a prefix, such as 'body' to be general or '#innerContentsWrapper' for a localized rule
.dijitContentPane { /* lowest weight */}
.claro .dijitContentPane { /* third highest weight */ }
.claro div.dijitContentPane { /* second highest weight */ }
body .claro div.dijitContentPane { /* the highest weight */ }
Another thing that will work is setting the following attribute on your div:baseClass="dijitContentPaneNoPadding"
Basically I have two external css in my page.
The first Main.css contains all style rules but I don't have access to it, and hence I cannot modify it. I have access to a second file Template.css , so I need to override the Main.css's values in template.css.
This is easy for which I have to change the value, but how do I remove a property entirely?
Like say a class .c1 has height: 40px;, how do I get rid of this height property?
You have to reset each individual property back to its default value. It's not great, but it's the only way, given the information you've given us.
In your example, you would do:
.c1 {
height: auto;
}
You should search for each property here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
For example, height:
Initial value : auto
Another example, max-height:
Initial value : none
In 2017, there is now another way, the unset keyword:
.c1 {
height: unset;
}
Some documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/unset
The unset CSS keyword is the combination of the initial and inherit
keywords. Like these two other CSS-wide keywords, it can be applied to
any CSS property, including the CSS shorthand all. This keyword resets
the property to its inherited value if it inherits from its parent or
to its initial value if not. In other words, it behaves like the
inherit keyword in the first case and like the initial keyword in the
second case.
Browser support is good: http://caniuse.com/css-unset-value
.c1 {
height: unset;
}
The unset value added in CSS3 also solves this problem and it's even more universal method than auto or initial because it sets to every CSS property its default value and additionally its default behawior relative to its parent.
Note that initial value breaks aforementioned behavior.
From MDN:
Like these two other CSS-wide keywords, it can be applied to any CSS property, including the CSS shorthand all. This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not.
like say a class .c1 has height:40px; how do I get rid of this height property?
Sadly, you can't. CSS doesn't have a "default" placeholder.
In that case, you would reset the property using
height: auto;
as #Ben correctly points out, in some cases, inherit is the correct way to go, for example when resetting the text colour of an a element (that property is inherited from the parent element):
a { color: inherit }
An initial keyword is being added in CSS3 to allow authors to explicitly specify this initial value.
To get rid of the fixed height property you can set it to the default value:
height: auto;
You need to provide a selector with higher specificity than the one in Main.css. With that selector, set the values of the properties you want to their default, e.g.
body .c1 {
height: auto;
}
There is no "default" value that will work for all properties, you need to look up what the default is for each one and use that.
I had an issue that even when I did overwrite "height" to "unset" or "initial", it behaved differently from when I removed the previous setting.
It turned out I needed to remove the min-height property too!
height: unset;
min-height: none
Edit: I tested on IE 7 and it doesn't recognize "unset", so "auto" works better".
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;
...
}