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