Override CSS style of an external widget - javascript

I have a Wordpress where I want to use the tree counter widget from this site: https://kb.tree-nation.com/knowledge/tree-and-co2-counters (the top one).
How do I override the CSS style of that widget? Custom CSS in Wordpress doesn't work.
I actually just need to show the number value (the count of trees).

If you embedded an iframe that is hosted in another website, you will not be able to edit the style of the elements inside the iframe by adding CSS to your website.

Related

Web Widget using html, js and bootstrap

I am building a web widget using javascript only and not using iframe. I want my web widget not to use page's css. I cant use custom css and also don't want to use iframe as it will not be user friendly.
How can i restrict my web widget not to use page's css. As my web widget will return html code and that html uses that page css.
There is a thing like CSS reset: https://meyerweb.com/eric/tools/css/reset/
It basically resets all css properties for a given subtree.

Don't apply css on specific page

Is it possible and how to do not apply css on specific web page?
For example, i have some div's on Master Page and some css for them
.header {...}
But i have also some page (Home page), which is different from all site-style.
So i don't want to appy css from Master Page and i don't want overwrite existing css rules like this :
#specific.header{...}
Maybe there is solution such as add new Master Page.
Is it good to add some css using JS before page is loaded?
Maybe you can try any of these options:
Wrap all your standard pages under a <div id="whatever">, except the specific page you want free of your general css. Then prefix your css rules with #whatever, so a {color:red;} would be #whatever a {color:red}
This approach is very easy using LESS, because there is no need of prefixing every rule, just wrap them inside #whatever { ALL YOUR RULES}
Dynamically loading of your css, via JS or your server logic if you are using any MVC flavoured framework.

Changing CSS stylesheet on button click

I folks, I've had a good look through but nothing seems similar to mine.
I've just finished creating a custom CMS and now want to implement customization capabilities, like templates.
I believe it uses Javascript but, I have a variety of of stylesheets on a server. css.css, css1.css etc with css.css being the main.
Is it possible that on a button click, I could choose a different sheet meaning that in essence, the sheet I would choose became the main style sheet, css.css?
Thanks for any help you can offer.
Yes, you can insert a link element in the head of your page. You can do this using document.createElement, or using JQuery if you use that. If you actually want to toggle the style sheets, you can remove the previous link element, or just replace its href attribute.

Widget CSS being interfered with by external page CSS

Just created a javascript widget that injects the content on the 3rd party site using DOM. I include a css file with the widget. However, I keep running into instances where the external pages css will interfere with the widget css and add something weird like a background image or border too my widget elements that I don't have defined in my css. Any easy way to go around this? I've already added
!important
to all the css rules. Thanks!!
As in my opinion, I, with no doubt, say that in the external css, not the widget css, have added something that would add the border or background to ALL divs. You might want to check that out.

jQuery UI and using/not using themes

We're using jQuery UI Tabs at the top of the page (with no themes, using our own styles in the screen.css file) and using jQuery UI Datepicker later on down the page.
We want to use a jQuery Theme for the Datepicker, but we want to use our own styles for the Tabs. But as soon as we include the Themes, it (obviously) styles both completely in a particular style.
Is there anyway of setting a jQuery UI component to have a theme or not? Some sort of configurable? Or is it purely about the style class names and doing what you need there? ... It's just having blank (no themes) is easier to style from, then trying to undo what the Theme stylesheets are setting...
jQueryUI completely relies on the class names currently imported to the html page. They all of start with ui-
Since it's just plain CSS you can do one of two things:
cut and paste the classes you want from the theme's css into your own css file.
import the theme's css file and overwrite the classes you are interested in with your own css.
Check out the Advanced Theme Settings link on the right side of this download page, right under the theme dropdown box. There you can define a CSS scope to limit your theme to a particular portion of a page.
Then you just need to put that css scope class on a parent of the datepicker.

Categories