I am trying to add some CSS styling (in addition to the styles already in place) via Javascript (simply because i do not have access to the main CSS file)
http://jsfiddle.net/pbPyU/
HTML:
<a class='store-locator-button'>replace me</a>
JAVASCRIPT:
$(function() {
$('.store-locator-button').addClass('tempstorebutton');
$("a.store-locator-button").each(function(index,el){
$(el).text('BUSCAR UNA TIENDA');
});
});
CSS:
.tempstorebutton{padding:5px; color:#fa5dae;}
It works fine in JSfiddle, but not on my site. Any suggestions?
The order in which CSS is applied is important. You should add your JavaScript code at the bottom of the page to make sure it gets applied in case some other styles are already applied before hand. Try !important property too in case your CSS is overriden.
I would recommend having your own css file being rendered after the one you want to override.
Then you should add those classes that you want to override on your css file with the styles that you want. Otherwise it's a frustrating path you should avoid.
!important declarations should not be used unless they are absolutely necessary.
Every browser has default css settings. You must override css.
one approach is to reset css: reset css example
another approach is to override only the parts you need css with !important
keep in mind that in css the more specific is on a higher priority to render
you can also try to check if the css changes you make appear with changing the css code in firefox firebug or google chrome developer or your browser debugging interface and than you can see if your css tweeks work for real or not.
you can also try to give the class a different name.
hope it helps feel free to correct and edit anyone
Related
I am working on a site like Codepen and we are trying to get it off the ground.
So, a user can write some code in React and then the site will display what they've written, and will also deploy it. The problem is that some of the elements have styles which are being inherited from the main site, and cannot be overridden via CSS; the only way to do it is via inline styling. Is there some sort of JS code to reset styles to default? Something like
H1.style.* = "default"
using !important works, but it would be really to be able to give the user a clean slate for CSS when they're coding...
You can see the actual notebook (as we call it) here: https://djit.su/dL22DiUPUmCf2kQMLBoAJ
As you can see, inline styling works
And also using !important works
:)
I have been developing a webpage for some time now, and I decided to use a react-calendar component from here. In the beginning, when page was lightweight it worked out of the box and, following the example on the webpage, my page rendered this:
Later on in the development, as i added more complexity to the page, calendar became completely disfigured and only displays plainly, like this:
I thought something was overriding my calendar's css properties and tried putting it outside the app div like this:
<div>
<Calendar/>
<App/>
</div>
But calendar's appearance remains unchanged. After inspecting elements in browser I noticed some suspicious crossed out values:
Is there a way of preventing parent override of calendar's css properties? Or am i missing something crucial in code which would make the calendar look neat again? It always looks neat if I install and use it in a clean project (but i'd love to have a working one everywhere :D).
Thanks in advance for your advices! :)
Have a nice day!
If you have a CSS property you can almost always override it. There is no way to tell (for example using javascript) if a css value has been overridden, since it's the browser who does this. Maybe there is something in your code that changed the behaviour by adding a parent class that overrides all its children, or a major CSS style sheet like bootstrap that overrides some others. If this is your case, it's hard to tell without looking at the code.
Good news
You can completely prevent CSS inheritance, by wrapping your component in an iframe.
Or
You can have properties that can almost never be overridden, depending on CSS specificity.
According to MDN web docs:
Inline styles added to an element (e.g., style="font-weight:bold")
always overwrite any styles in external stylesheets, and thus can be
thought of as having the highest specificity.
Have a read at the complete article to understand how it works. This statement though, says that you can always override properties if they are set inline. Now, the problem of using a third-party component is that you cannot set the styles for everything used by the component, and of course the point on using a third-party component is that you don't need to bother about these configurations.
Apart from using inline styles, you can also set the !important flag to your CSS styles, but we come to the problem of the third-party component again.
I suggest these approaches:
1) Create CSS rule to reset values to initial
Basically create a rule called NoInheritanceCalendar for example, that will reset any rules before the calendar's rules.
Set your code to:
<div className="NoInheritanceCalendar">
<Calendar/>
</div>
and in your CSS:
div.NoInheritanceCalendar {
all: initial;
}
2) Wrap it in an iframe
Although not the best approach, this is the only way you could prevent inheritance at all.
3) Copy component's style sheet, add prefix class to all properties so that they are more specific.
If your third-party component's CSS is:
.rule1 {
font ...
width ...
}
.rule2 {
font ...
width ...
}
.rule3 {
font ...
width ...
}
You can create a prefix class to make those more specific:
.MyClass.rule1 {
font ...
width ...
}
.MyClass.rule2 {
font ...
width ...
}
.MyClass.rule3 {
font ...
width ...
}
and add your component in react as:
<div className="MyClass">
<Calendar/>
</div>
These tools help you with this if it is a big style sheet:
autoprefixer
prefixfree
less-plugin-autoprefix
I have a featured slider on my homepage that I had rigged to be completely hidden if javascript is disabled. I had a script that would then display the featured slider if javascript was enabled.
document.write('<style type="text/css">#JQuerySlider1Container{ display: block !important;}</style>');
Apparently that code is not valid according to W3C. (Though it worked so this is a total bummer).
I found an alternative piece of code that I like but I must have !important in order for the slider to be displayed.
document.getElementById('JQuerySlider1Container').style.display='block !important';
But it doesn't work with !important.
Does anybody have a simple solution for this problem?
Its not good practice to add CSS using JS. You should keep HTML, JS and CSS all completely separated.
The way to show/hide things using JS is by default hide the objects you want to hide using CSS, e.g:
#JQuerySlider1Container {display:none;}
The in your JS, add a class to the body, using something like:
$(function() {
$('body').addClass('has-js');
});
Then you can write specific CSS rules knowing that you have JS enabled, e.g:
.has-js #JQuerySlider1Container {display:block;}
Lets say I put the following in <body>
<script src="https://gist.github.com/2059.js"> </script>
looking at that js file, the first line is:
document.write('<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css"/>')
I don't have write permission to that js file. Is it possible to dynamically swap out embed.css and swap in the href to another version of that CSS file? Can this be done such that it requires no user input - the page will load with my own CSS file and not embed.css?
The easiest option here is going to be to load your own CSS in a way that will override the Gist CSS - this is going to be much simpler than trying to dynamically change the code Gist provides. Two options for this:
Add !important to your CSS declarations.
Use the same selectors as the Gist CSS, but prefix them with another selector to make them more specific than the Gist CSS declarations, e.g. mycontentarea .gist-syntax .c
The second option is probably going to be more reliable, as long as you know a selector for an enclosing element. See a working example here (I've replaced the standard Gist string color with a nasty yellow): http://jsfiddle.net/aqGEc/
I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css