I'm implementing a booking process into an already excising WP website. The website has a MailChimp plugin that uses jQuery UI and has a theme designated for that, this part is out of my hands to remove or change.
This affects my code in the booking process by overwriting my custom css (less) for jQuery Datepicker.
My question is how can I reset all the jQuery UI components that have a specific ancestor class (.odin)? So that only components below that class will be reset.
br.
If you must overwrite the css, as seems to be your case, simply use a higher specificity. Get your selectors from your element inspector of choice and add the added specificity of your wrapper class. .odin .datepicker td{ /* your rule */ }
.odin {
*
}
this is called clear hack, its not a good practice to do it. Check alternatives first.
I think the answer to your problem lies not in jQuery but in CSS. You need to have better, more specific css selectors which do not end up getting beaten out by the jQuery UI rules.
I find using this calculator helps!
Related
I am currently implementing a plugin that gets dynamically incrusted into a DIV (not an iframe) and am currently using Bulma as my CSS framework. The issue I am having is that since this plugin is going to be integrated into many sites, it will also inherit the styles applied to the parent website.
Due to many of the classes being a standard name in many frameworks, such as column, button, form, and others, this is creating a conflict.
I have been reviewing a couple of packages that either add a prefix to these classes as well as use a namespace.
Namespace:
The namespace route does not work since this does avoid our plugin from not interfering with any of the other sites' styles, the site's styles still affect ours.
Prefix Packages:
https://www.npmjs.com/package/gulp-class-prefix
The other route I was researching ways to add a prefix to all the classes from our plugin, such as -column, but I understand that this will output a CSS library with all the classes with the prefix but not my HTML files which have the class="column".
I am hoping to find a solution for this, as I would think this is, although not common, a recurring issue/question and I just haven't found the proper solution for this.
Any advice would be appreciated.
You can use the #layer css rule:
The #layer at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.
Example:
/* styles.css */
#layer bootstrapFramework, myPluginStyles;
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css")
layer(bootstrapFramework);
#import url("https://yourPluginStyles.css")
layer(myPluginStyles);
Doing this will override bootstrap classes with your plugin CSS classes. Due to the order of the layers.
Check out the browsers support for the rule.
You can read more about #layer CSS rule here: https://developer.mozilla.org/en-US/docs/Web/CSS/#layer
You can also checkout Web Dev Simplified Channel by Kyle on youtube. Here is the link to the video: https://youtu.be/Pr1PezCc4FU
Hope this answers your question!
Yeah. That's fine. Just add a prefix to the HTML classes too. It should work.
Or you can choose to ditch CSS frameworks for the plugin and write the CSS for the necessary components. You just do a little reset for your component's HTML elements and you can expect a fairly consistent design across multiple different implementations.
I feel this may be just helpful too. custom HTML elements too.
Best of luck.
just use div-to-select * { all:revert }
then add the code for the div & bulma
Explanation
all: revert gets every thing to normal so it makes all other frameworks class's styles to default
please take a look on https://agilecss.com CSS framework and UI kit, it provides some unique features not available in other frameworks, for example all the common used UI elements without JavaScript.
I've developed a dynamic ad banner that consits of html and styles loaded into the host site via javascript. On one particular site, certain styles in the stylesheet for the main page are affecting the html that I'm dynamically loading.
Is there a technique for having the dynamically loaded html only render styles from the css I have loaded along with the html, and ignoring any styles in the host page?
Any advice appreciated.
Put your banner into an iframe.
Add !important to your CSS like
p { color: #ff0000 !important; }
Yeah there is a real easy way. Why dont you have your classes separated form the main page HTML. Give them a unique identification if you want there to be no conflict.
Example
Your main page has a css class .input
Give your dynamically loading page as .Dybamically_input this will server something as a namespace.Also you can use !important to the properties which you definitely want to added.
There is an evolving standard to introduce scope blocks to CSS but that isn't yet supported enough to be of any use. You can use the !important directive, but that is likely also to affect the underlying document if you don't apply it carefully.
The best solution is to create a scope by including all the the HTML in your add banner inside a div with a uniquely named class (and use your own namespace eg. 'cog_myAd' to try to guarantee uniqueness. Then apply styles just to that class, using !important where you might need to override styles that could be changed lower down the cascade of styles.
If you have attached your CSS file to the HTML page then the only solution to it would be using !important for all conflicting CSS properties -
.className{
color: red !important;
}
Use inline styles (the style attribute on all your banner elements you want to style) instead of external css file - this way you will never have a conflict.
The other option as others suggested is to use IFrame.
I have a project that uses JQuery-UI. I recently found formee, which is a nice framework for building forms. One annoyance is that the formee submit button styling overrides the jquery-ui themed button style. How can I get all of the formee goodness but keep my jquery-ui button style? I realize I can edit the formee CSS to remove the button style, but I'm hoping to avoid that.
You can, as you said yourself, remove the offending CSS, which is what I would recommend.
Alternatively you can give the jQuery UI css classes that apply on the relevant button more specificity than the formee classes. This would be second best solution.
As a last case you could add !important; behind all CSS attributes in the classes for jQuery UI... I really wouldn't recommend this.
use this to bring front:
#your-div-id{
position:relative;
z-index:999999;
}
Does anyone know how do I specify that jQuery UI's datepicker will have my own CSS class?
I'm not talking about the div\input that the datepicker is "made on", rather about the pop-up that comes up when you open up the datepicker.
This div's id is: ui-datepicker-div
I can define my own styles for that pop-up using
.ui-datepicker { blah }
but, what if I have several datepickers, and want different styles for each?
I can't even do something like
.myContainer .ui-datepicker { blah }
Since the datepicker's div is added by jQuery such that it is right under "body" in the DOM. That's why I'm asking if there is a way to specify to jQuery UI to add my own class to that div, sort of like the "dialogClass" option that exists with jQuery UI's dialog ...
Thanks
You are correct that there is only one actual datepicker UI element on the page, but you could use the beforeShow event to add a class or change a theme for different elements. I added a small demo here that changes the border for different datepickers. You could add in other styles as you need. Might even be possible to swap to different jquery themes with enough effort :-)
I don't think it is possible with a simple option, but it is possible i think, the code can be seen here.
You should be able to see where the classes are set, I'm no javascript guru, but it should be possible to do something like this:
Datepicker.prototype._currentClass = Datepicker.prototype._currentClass + '-theme1';
then define a class as ui-datepicker-current-day-theme1
Somebody may correct me though!
By default JQuery UI doesn't support multiple calendar styles on 1 page. It could be possible to alter the datepicker component to include it, but you would have to take the time to figure out how to modify the javascript.
Let's say I have widget that uses complicated CSS, and must be embedded in multiple websites that all have their CSSes.
If I prefix all widget's CSS rules with "#widget", they won't apply to anything on the outside, so one problem fixed. Unfortunately CSS rules of the site can still mess the widget.
If I reset all CSS inside #widget with proper reset rules, then hopefully they will override all outside rules, right? (because my rules use #id and outside rules don't know any ids inside my widget, they cannot override them, right? !important notwithstanding)
What's the best way to reset all CSS to known state? Most CSS resets start from browser defaults, they don't reset arbitrary CSSes. Is there any CSS reset that works no matter what?
I came across cleanslate.css while trying to solve the same problem:
https://github.com/premasagar/cleanslate
I've not use it in production yet, but it apparently came out of the development of the BBC World Service widget.
Yes, your css should override anything declared outside the widget, but your reset must be quite comprehensive. I suggest using a modified version of http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/, but you'll have to modify all the selectors yourself.
I would be tempted to strengthen your selectors also, so rather than
#widget tagname{}
Use
html body #widget tagname{}
Your selectors will now have a much higher weight.
Use namespace & reset & LESS
#my-ns {
#import ".../reset.less";
... your other styles ...
}
I use Eric Meyer's reset reloaded to reset CSS styles.
Link:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/