I am developing a website using both bootstrap (v3) and jquery ui (v1.11.4). Generally this is fine, but occasionally when I use a jquery widget (e.g. the tab widget) the css for the widget takes precedence over the bootstrap css. For example:
Does anyone have any tips to help resolve this? I don't want the jquery css overriding the bootstrap css if possible.
Thanks
Simplest way would be to load your bootstrap.min.css after the jqueryui.min.js file. (dirty hack)
Also note that Bootstrap has syntax for making tabs just like that. You might want to use that instead. This is a better approach since it can possibly eliminate the need for JQuery UI, if it's only been used for those tabs.
$('.nav-tabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
There is also a third approach that you can take, that involves manually overriding the CSS using JS function.
also there is !important.
a {
color: #2780e3 !important;
text-decoration: none !important;
}
You can't stop the jQuery css from overriding the Bootstrap css in cases like this. The jQuery css is clearly using a more specific selector that will win every time, regardless of what order css files are loaded in.
However, you can override the jQuery css. In this case, assuming that you wanted to keep the default Bootstrap link color (#2780c3), you would create the following rule in your own css file, and make sure that your css file is the last one loaded into your page:
.ui-widget-content a {
color: #2780c3;
}
Each time you encounter a case where the jQuery css is overriding the Bootstrap css with a more specific selector, you simply create a css rule identical to the overriding jQuery css rule within your own stylesheet and change the property values back to the Bootstrap css default values.
The issue you are encountering has to do with css specificity. Though it was written some time ago, the following article does a good job of explaining the concept: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Related
I don't think it is possible, but I will ask anyway:
Can I apply an external css file (Bootstrap for instance) to a div and its children without affecting the rest of the page.
For example, I need to migrate a footer written with Bootstrap over to an existing page. That page does not use bootstrap. If I link Bootstraps css at the top of the page, the css is applied to the whole page which ruins existing css. How can I just apply the bootstrap styles to the footer section without having to rewrite most of the page's css?
Any suggestions?
I ended up using LESS to compile a new css of bootstrap with a prefix of .bootstrap as seen below. It works, but i wonder if there is a more traditional way of handling this problem.
file: bootstrap-only.less
.bootstrap {
#import 'bootstrap.css'
}
file: bootstrap-only.css
.bootstrap .container {
width: 100%;
}
file: page.html
<style>
.container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">
<div class="not-bootstrap">
<div class="container">I am 20px</div>
</div>
<div class="bootstrap">
<div class="container">I am 100%</div>
</div>
You can try usig scooped css.Please do refer the following sample code.
<div>
<style scoped>
#import "filename.css";
</style>
//your div with its children will come here
</div>
Your inline styles should not be affected by adding Bootstrap as inline styles take precedence over styles from external resources. The only elements that should be affected are the ones in the page that share class names with bootstrap classes.
You can try referencing the Bootstrap css before your own css and your stylesheet will take precedence over the Bootstrap css. Unfortunately this may add styles additional styles to some of your classes which that you didn't explicitly reference in your stylesheet and may still change the look of your page.
For those classes that exist in both bootstrap and your stylesheet it's probably best to just change the names of those classes in your stylesheet and page. A quick way to do this is to use "replace" search for the class name and replace it with the new class name most IDEs have a way to "replace all" so it's often just a bit of typing and a few clicks to change a bunch of styles.
You can try using the Angular 2+, where you can simply create an component and us it anywhere irrespective of the page css. Basically it will create a shadow DOM and will not be accessible outside that component.
I have wordpress site with some layout.
I need to change some css there, but got troubles overriding it.
Via webbrowser my CSS looks like:
It is places (genetated?) somewhere in theme.
Every time I refresh page I got different 'class-xyz' (on the screen it is: class-GkgfbCohxE) name in #inbound-list
I have added to custom CSS below (changed color):
But this is not loaded.
All structure of this CSS:
Do you know how to enable ovverriding this element?
It depends on the theme and plugin you use.
For my experience, this dynamic inline CSS may come from the page builder you use. If it comes from page builder, please check your page builder and adjust the style.
If you want to overwrite the css, you could simply put !important after the color attributes.
To override this css you need to use any parent id like below or you can apply some id to your body tag and write ur css with its reference
see my ex below
#parent #one li{
color: blue;
}
#one.asd li{
color: red;
}
<div id="parent">
<ul id="one" class="asd">
<li>aaa</li>
<li>bb</li>
<li>adfdf</li>
</ul>
</div>
If it's a your theme styles, you can create a child-theme, then overwrite the styles. You can also use the same selector in the child-theme css, WordPress knows that it has to take the ones from the child-theme.
Today I am facing a problem of restricting the scope of css. The
<div class="parent">
<div id="childWithNoCss">
<p>No css</p>
</div>
<div id="childWithCss">
<p>Apply css</p>
</div>
</div>
My css is:
div{
color:red}
p{color:blue}
I need to apply the css specific to the id childWithCss.
The css is fixed (I cannot change it) just need to limit its scope only to a specific element.
I cannot use scope attribute since it is incompatible in some browsers.
Is there any other solution?
Regards
Are you trying to find a workaround for this?
<style scoped>
p {
//some style
}
<style>
If so, there are some jQuery plugins that do the same thing and work for IE, at least for IE 9 and above. Here's one example:
jQuery scoped CSS plugin
If that's not what you're trying to do, can you not just add some nested css? Does this help at all with what you are trying to do?
Load an external CSS for a specific DIV
You can reset the CSS of an element with the css code: all:initial.
You could use some javascript to do this at runtime for the elements you want to reset. I see you tagged your question with angularJS, so jquery should be available.
jquery solution to reset all css for the p in the divs WITHOUT #childWithCss within .parent:
$('.parent div:not(#childWithCss) p').css('all','initial')
http://jsfiddle.net/2yXsL/3/
You should be able to do it with a bit of jquery
if ($('.parent').has('#childWithCss')) {
$('#childWithCss').find('p').css('color', 'red')
}
Reset the color of everything except #childWithCSS to the default text color with a bit of jQuery.
$("p:not(#childWithCSS p)").css("color", "initial");
I'm trying to use font icons with the zurb foundation icon pack and while of course you can display them inline via of course something as simple as;
<i class="fi-alert"></i>
Except when I try to use it as css content (which is how they display them...) I don't get the same result when I do something like content: "\f101" inside of a css class. I just get those squares to display.
Is the only difference that I include them externally? via;
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">
Or what? Am I just missing a src ref in my sass or something inane like that? I'm doing it just how I would expect it to work and have done with others in the past but I get no icon using them from the css, only shown inline with the html? I know it's going to be some dumb oversight so could use another pair of eyes.
Sorry, kicking the dust off my web experience, it's been awhile.
You need to set the font-family to the icon font in the same class where you set the content.
.icon:after{
font-family: "foundation-icons";
content: "\f101";
}
To use them in a css selector like that you have to actually install the font-family for your page and declare that font-family in your css selector before using the code.
This is a decent tutorial https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
Please provide an example of code that works and doesn't work for you.
If you are trying to display icon by adding :content to an existing css element that is not part of icon pack, this will not work. For example this WILL NOT WORK:
HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}
Use 'i' tag to add icons:
HTML: <li class="icon"><i class="fi-alert"></i>text </li>
Every time you see squares you need to check if font files are loaded. There are 4 fonts are used by icon set in case you want to load css on your server and link them manually:
/foundation-icons.eot
/foundation-icons.woff
/foundation-icons.ttf
/foundation-icons.svg
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.