I have 2 css files jquery.ui.all.css and jquery-ui.css(this is customized from jquery theme roller)
I am using the jquery-ui.css for the jsp page & including it in header as link but for a dialog on the same page I want to change it to jquery.ui.all.css without affecting the styling of JSP, how can this be achieved?
It will only conflict if both css file has same classes with different styles. Just remove the css which is not necessary from jquery-ui.css file and use only which is valid for your dialog box.
Related
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.
I am opening an existing aspx page in a jquery dialog but when the page loads the css of the parent screen is overridden by the dialog box screen. How can I prevent that. I cannot change the existing screen. If there is any other dialog that I can use l?
If you load an HTML file that include one or more CSS file, these CSS are gonna be "GLOBAL", as always for CSS. The only way is to write CSS in a way that they do not override each other. Just use classes with different names or different id.
I suggest you to do not load CSS with jquery dialog and write those you need for dialogs in a general file of CSS, so things wont change when you load it.
I am in middle of developing an webapp using a MetroUI CSS. After developing a few pages I understood its css are conflicting with Bootstrap's css, so I removed the Bootstrap's css from the project.
Now in another page where I need to include a class from Bootstrap's css. How can I do that without conflicting the css with MetroUI css?
It sounds like you are trying to use both MetroUI and Bootstrap in your webapp. Since these are two different libraries/frameworks trying to do a lot of the same stuff you are going to have conflicts and that is unfortunately unavoidable.
My recommendation would be to pick the one you plan on using the most and then overwriting any styles you'd like in your own custom style sheet.
For example: You like most things about MetroUI but prefer how Bootstraps buttons look. Well you can reference MetroUI and then pull out the bootstrap button styles you like and include them in a custom style sheet (making sure you overwrite any MetroUI styles you don't like). Then reference your custom style sheet after MetroUI and it will overwrite MetroUI with the Bootstrap button styles you have included.
I wanted to use PHP jQuery upload with the colored buttons, file gallery and all the cool stuff. However this means I have to use the bootstrapper for css with overrides my page settings (divs change settings for margins and such).
Is there a way to have the bootstrapper css just for the jQuery upload elements?
I tried putting the bootstrapper css links above my stuff and even added !important to all my css settings, but I cant get it working properly.
Place your site css file after all other CSS files, if your site shares any id's or classes with Bootstrap and is placed before Bootstrap then Bootstrap is last seen and re-declares those id's and classes which is why it's overriding your site's CSS so place the link below bootstrap.css :-)
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.