I need to hide 3 icons in a page where I don't have access to html but where I can modify CSS file.
The html code is:
<img class="color_box" title="Annotations" src="http://www.site.com/images/notice.png">
<span class="with_tooltip" title="This is a message"></span>
<img class="color_box with_tooltip" style="background-color:#FFFFFF;" src="images/clear.gif" title="White">
I tried different combination such as :
.color_box with_tooltip{
display:none;
}
or
.color_box, .with_tooltip{
display:none;
}
but none of them allow to hide all icons. Some are hidden and some others no according how I change my code..
Any suggestions please ?
CSS rules are applied via a specificity level. Rules that are more specific can trump those that are less specific.
So you may have a style like
#id .yourClass {something...}
That is trumping your .yourClass declaration alone.
A way around this is to use the !important flag. Try this:
.color_box, .with_tooltip {display:none !important;}
!important is typical a 'last resort' as it can make future CSS updates a pain, but the one place it is useful is when you have to modify an existing site via CSS only and simply have to strong arm some of your changes.
Try adding the !important attribute to your second selector listed above. It could be that there are other styles in place that are overriding the hiding.
I created a very simple JSFiddle that has this working without using the !important clause. You can remove the CSS and add it again to see it in action:
.color_box, .with_tooltip {display: none !important;}
Related
so I'm using Material UI Components on my react-app, for example for a button text, I would like to give it a margin-top and font-weight, however, I'm using CSS Modules, so I cannot just override the default CSS Styles, so I had to use the !important flag, is there a cleaner/better approach to do this and avoid using the better flag? Here's an example of what I'm looking like for a certain component.
I was adviced to use atomic CSS but googling that it seems like they're advising me to use in-line styles and that's something I've been meaning to avoid for future reusability.
TIA
Got through by setting specific CSS classes, for example for this font weight and margin top, my new CSS looks like
.loginSignUpLink.priority {
margin-top: 4%;
font-weight: 1000;
}
and my classname is as follows
className={classNames(styles.loginSignUpLink, styles.priority)}
Using important in CSS is not a good way. I prefer you please use the parent class or tag to avoid important.
One main thing is very important your CSS run last after all CSS files. It is the most important.
For example please check the below code.
<div class="test">
<span class="span"></span>
</div>
Than write down css for span like this
div.test span.span{ ... }
Also, you use more hierarchy to avoid important in css
body div.test span.span{ ... }
I tried to change the fonts and styles in my joomla website, and to achieve this I installed the following plugin:
Consequently the body font was changed, however the inline styles were not.
How can i disable or remove inline styles, like the following one?
<span style="font-size: 14pt; font-family: 'arial black', 'avant garde';">Test</span>
I need a lot help :)
From the looks on the image it appears to me that this plugin of yours uses CSS selectors to choose which elements it will affect.
Given that my assumption is correct, if your span tag is not being affected its likely because there is a conflict in the CSS selection order.
My suggestion to fix your problem is to add a specific class to your span tag, like for example <span class="myNewShinySpanTag"> and then add the line span .myNewShinySpanTag to the text box of your plugin.
Hope it helps!
good way is find the inline css and remove it.
but if you can not find it you can write an high Priority css to disable this properties.
you should find an unique selector for this code:
span
{
font-size:unset !important;
font-family:unset !important;
}
I'm working on a site for a client that wants to use a specific background color site-wide EXCEPT on one page that's basically used as a separate 1-page website with unique content & styling.
My question is this... how can I apply a CSS style to all BUT a specific page ID?
My CSS currently looks like this:
.et_section_regular, #main-content {background-color: #F5EFE5 !important}
The !important is there because I'm having to override the themes default background color to begin with. I've tried using the following not: selector (referenced here) with no luck:
.et_section_regular:not (.page-id-714 .et_section_regular), #main-content:not(.page-id-714 #main-content) {background-color: #F5EFE5 !important}
Is what I'm trying to do even possible?
DEMO
You cannot choose selectors that are above the selection where you apply :not()
An alternative is to first mention parent selection where your page id is applied then target the inner div's - Check the demo.
CSS:
section:not(.page-id-174) .et_section_regular,
section:not(.page-id-174) #main-content{
background-color: #F5EFE5 !important
}
Note i am using section tag just for the DEMO but you can use body tag - where i assume you have your .page-id-174 applied
I need to assign css that will get "Dusty Arlia" not to underline.
<p>
<span class="published">
By: Dusty Arlia<br />
Published on December 19, 2011<br />
Updated on January 26, 2012
</span>
</p>
I tried using CSS
span.published a:hover {text-decoration:none;}
but that didn't work, so I tried
.published a:hover {text-decoration:none;}
...and more. The CSS is in an external style sheet. I have placed these lines of CSS at the bottom and top of the stylesheet (I think it's at the bottom of the CSS page that gets rendered last). Anyways there is no CSS for the "published" class, but I do have CSS to underline my hyperlinks. I would like the hyperlink for my name not to have an underline. I CAN'T edit my HTML. I have hundreds of pages with this layout. I know I could possible do a "replace all" function if I have to edit the html, but I would like a CSS fix.
if you think the css declaration is being overridden by another stylesheet, you can try saying !important at the end of it, which would override that other style (if it itself didn't already have !important)
span.published a:hover {text-decoration:none !important;}
Your css should work as defined unless some other generic selector is redefining it. Try this:
span.published a:hover {text-decoration:none !important;}
Sounds like you've got some CSS somewhere that's taking precedence over the bit you're adding. If you've got Chrome you can use developer tools to look at all the rules affecting a particular element (right click -> inspect element, look under "Matched CSS rules"). You can do similar with Firebug in Firefox. This should give you the insight you need to fix the problem.
When all else fails, !important can be useful.
I think the problem is, that your a:hover rules are not applied, because your other a selectors have more weight (specifity) and therefore overwrite your a:hover selector.
Eric Meyer has a great article on that subject: http://meyerweb.com/eric/css/link-specificity.html
First of all, make sure your a: selectors have the following recommended order:
A:link
A:visited
A:hover
A:active
To remember this order I always use the LoVe/HAte mnemonic.
By the way, the :hover pseudo class only applies to links which are in hover state (i.e. the mouse is over). Did you also specify the no-underline rules for a:link or a?
If none of that helps you might also try the !important directive. However this should not be necessary at all, but it might help you to figure out where the fault lies.
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;
...
}