jQuery UI and using/not using themes - javascript

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.

Related

How to use bootstrap css and javascript in selected pages in AngularJS?

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.

jQuery upload, boostraper keeps overiding my css

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 :-)

Different bootstrap CSS files?

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.

How to apply Custom theme for jquery dialog?

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.

use twitter bootstrap under a class

I have website built with many custom css styles in some css style files.I want to use twitter bootstrap in the website.but if i include it in my pages like -
<link type="text/css" rel="Stylesheet" href="assets/css/bootstrap.css />
so as you can guess because of this many styles and classes overwritten by bootstrap class and styles and so is lot of problems.so if there is way i can use twitter bootstrap css and js under a class?
I just can add my class name before every class in bootstrap.css file but that is time consuming or i go for it?? from web research i found -
.tw-bs {
#import "less/bootstrap.less";
}
by using lesscss.org.but i did not get yet how do i compile things in my windows pc so i can use twitter bootstrap under .tw-bs class only in my site.if anyone know step by step, save my time.
The best thing we have found is to use a separate CSS file where you deliberately overwrite some of the Bootstrap styles with what you want/need. For example, the default buttons in Bootstrap have rounded corners with a 4px radius. We decided that we wanted a more rounded look, so we put the following into a CSS file:
.btn{border-radius: 10px;}
When you reference your file AFTER the Bootstrap file it will overwrite the default Bootstrap values with yours. Sometimes the Bootstrap specificity is very hard to over-ride, in which case you'll need to style by referencing the ID of the element directly (which is more specific than classes.)

Categories