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 :-)
Related
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 downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.
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.
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.
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.