I am using a link generated from a RSS converter (webrss.com), which sits inside a javascript tag at the end of my html. I have needed to convert an RSS feed to HTML for displaying on some digital signage. It works great, except I am having trouble overriding its default styles. I can change .li and .a styles but not font-size in the body or html tags.
I have looked everywhere for a solution and have tried using !important in my CSS but it isn't working. I would like to use an external style sheet and have it override all styles in the js tag at the end of my html.
Is this possible? I'm new to this and am stuck, please help!
Possible they are setting some of the styles inline on the elements eg. <span style="font-size:12px">contents</span> using JS themselves. If they are, there is no way to override it with CSS you'll have to use js your self to override their styles.
Basically, specificity and valid css can be your issue.
Specificity: You can inspect element to see what styles are applying. Assuming your css code is valid, it will show up for the selected element, below the css rules taking precedence above your own. Something like "li {font-size: 11px !important;}" should take precedence above all others, unless there is a more specific selector using the important piece as well.
Validity: For all html elements (li, a, body, html), you select them by just writing them out (ie "html {color: red;}" NOT ".html {color: red;}". I see you've mentioned .li and .a in your question, which may have just been an accident. Note that the dot is not necessary unless it is a class name assigned (ie. ). Check if your css is even listed in the inspector for that element to check if your css is valid.
You can override inline styles with css. The important tag trumps the inline style. See http://css-tricks.com/override-inline-styles-with-css/
The best way to override rule in JS is using CSSOM, I found this lib may help:
https://github.com/cssobj/cssobj
It's render CSSOM from JS, and you can change rules directly from JS.
Related
I have a Wordpress page and I have added a Sidebar widget for an air quality measurement device. The script generated by the device is written looks like this:
<div name="airvisual_widget" key="somecodehere"></div>
<script type="text/javascript" src="https://www.airvisual.com/scripts/widget_v2.0.js"></script>
And this generates a widget that looks like this:
So the layout is very weird and gets off limits and there are not really many layout options on the website that generates that widget code. Is it possible to overwrite or edit the standard layout inside this javascript code? And how can one do that?
I did take a look at the widget code. And was able to change the layout using CSS.
You can add CSS for these classes and use !important to override existing properties of the widget
Once you know the dom structure and CSS selectors, you can add custom css targetting these selectors. For example, in the above screenshot, if you want to change the height of div with class bodyAirvisualWidget, you can add custom CSS like
.bodyAirvisualWidget {
height: 200px;
}
You can choose to add !important to force your css. However you need to be careful as same css selector may be targetting multiple element. In that case you may want to make your css selector more specific like div.className > div.anotherClass > .bodyAirvisualWidget to avoid unintended side effects
If it was a simple html page, you can add CSS directly in a <style> tag or in a CSS file and include css file into your page.
In case of Wordpress, you can add custom CSS via Wordpress CSS editor (My Site → Design → Customize → Additional CSS)
I'm using CKEditor to allow users to edit HTML documents. I need to allow the users to be able to place any kind of CSS or HTML into their documents. When the user's document CSS has !important rules they change the styling of the CKEditor toolbar.
This can be seen here: https://jsfiddle.net/hqpfjzyr/1/
Click on the "Link Preview" and you'll see the buttons of the toolbar are also red.
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
The only thing that I can think of is to add more CSS targeting the toolbar and explicitly setting every attribute to the correct value with !important rules but that seems like a daunting task.
What am I missing here?
This behavior is described by the CKEditor docs here (https://docs.ckeditor.com/ckeditor4/latest/guide/skin_sdk_reset.html) but I can't seem to figure out how to apply it. My skin stylesheet includes a reset.css but it doesn't seem to affect the styling.
What is described on CKEditor docs doesn't include case with !important flag, because it can't work like you want to. This flag overwrites other css rules including ones in reset file. If you still want to use !important inside editor you might consider to use classic editor instead of inline. Change CKEDITOR.inline( to CKEDITOR.replace. How does that help? Classic editor is rendered inside iframe, which has separate styles that can't affect anything outside it.
Basically what i want to do is grab all CSS that is referenced in an external stylesheet e.g <link rel="stylesheet" href="css/General.css"> and append it to any existing styling for each HTML element in my page. (make all CSS inline)
The reason for this is because i need to call .html() to grab a div and send to server to be made into a PDF. The downside with this tool is that it only recognises inline CSS.
Are there any ways to do this?
Edit: the question that was linked to mine as a "possible duplicate" spoke only of putting everything in the <style> tag. while that may be useful, im mainly concerned with loading into the style="" html atribute
In the past I've used window.getComputedStyle(element); for this purpose. It will return a map of all styles applied to the element, which you can then loop across and apply as an inline style. I wouldn't apply them to the actual DOM if you can avoid it (just create a document fragment / concat it in the style of the string you're sending up). It will be a performance nightmare to actually apply that many inline styles to an element.
Using computed styles still might not be enough, as there are vendor prefixed styles in the user agent stylesheet. If you send up markup from Firefox to PhantomJS(webkit), you will obviously not get the same looking element.
I am building a mass mailer system where you can see a preview of the email before it is sent. I render the email html into a preview box using jquery -- $().html(theHtml).
Html emails use all inline css for their styles. When I fill the html, it overrides some of my css.
I am looking for a solution to completely stop this from happening. Is there any way to self contain the email html/css so it does not affect the entire document?
I understand that adding !important to my styles will do the trick, but it is not a very scalable option.
Thanks in advance.
Unfortunately !important is the only way to override an inline style - that's just how specificity works.
However you might be able to get around it by making all of the "wrapper" CSS (e.g. the CSS for YOUR page, not the HTML email preview) more specific by using IDs and classes etc so that their styles don't get overridden by generic style declarations embedded in the HTML email.
I'm a little confused though - are you trying to override "inline" styles (as in elements with the style="your css here" attribute) or embedded CSS (e.g. "your css here")? If it's the latter, just make important stuff more specific in your own CSS.
Some more info about specificity: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Using an iframe as Sander suggested might be a simpler solution than trying to restructure your CSS specificity rules though.
Are you using the same class/id names for your website and the emails? This should not be the case.
I highly recommend using a pseudo-namespace for your CSS.
Basically, add an arbitrary prefix to your CSS that won't be contained in the inlined 3rd-party content: <div class='foo'> becomes <div class='myapp-foo'>
Having used this practice on our projects recently, it requires only a bit more discipline, but makes the app easier to manage for embedding other content.
I've got a CSS file which provides some styles, but one of them really sucks (the <code> tag styling). I'd like to eliminate it, possibly through JavaScript. Is there a quick way to do this?
Edit: These elements don't need styling, and I don't need to replace the existing styling, I just need to get rid of it.
You can make a more specific CSS declaration for <code>. Mileage may vary, depending on your mark-up.
body code {
... your styling ...
}
See: http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/
I ended up just altering the stylesheet and hosting a copy. Not ideal, but functional.