I am currently using Twitter Bootstrap in developing an web app. Now I also need to use jqgrid for the same app. So, I have a couple of CSS included for a page.
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/flick/jquery-ui-1.8.19.custom.css" rel="stylesheet">
<link href="../css/ui.jqgrid.css" rel="stylesheet">
However, the grid table generated by jqgrid on the page looks a bit odd since you find Twitter-ish cells in the jgrid table.
So I am wondering if there are any ways to disable one CSS out of several CSS files that I include for a certain element of the page? This time, I want to disable bootstrap css for div tag with id=grid where the grid will show up.
Pretty vague, but here's your solution: use the dev tools in your browser of choice, but i'm going to explain using Chrome:
hover over the affected jqgrid table and click inspect element. dev tools will open up and you should see all the styles being declared on that element, from the separate stylesheets.
if you see any styles crossed out (being overridden) that come from jqgrid, you need to out specify them in your jqgrid style sheet, for example, by adding a class, id, parent selectors or chaining.
also, if there are styles bootstrap is declaring that jqgrid doesn't address (these you're going to have to sift through manually), the same solution applies: add these styles to jqgrid, while specifying the styles you desire and adding specificity to your declarations so they override bootstrap.
If you posted a link, i could show you, which i think would be much easier then this explanation. but this will achieve the style(s) you desire.
You can't disable a stylesheet reference, but you can change the selectors in it to be more descriptive. e.g. if both of these stylesheets just style div, you'll of course get conflicts. However, if you modify bootstrap's selectors to be #twitter div, you'll get much more precise results.
Related
I'm using google's css package in my google script app:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
However, I would like to use my own css for styling table elements. The only problem is that google's css package contains css for table elements, and it seems to be overwriting my custom css except it's not doing it consistently. For example, on my laptop the web app uses my table css and for my desktop it uses google's css package (both running windows 10 using chrome--although the desktop's chrome might not be updated). Is there any way to ignore google's css for tables or even to know for sure which styling will supersede the other? What if I were using two third party stylesheets that both defined css for tables? How could I specify which one I wanted for a specific selector?
If you want to overwrite styling of other CSS files make sure to include you CSS file after the ones you want to override. And learning about CSS specificity helps alot.
EDIT:
I think this link may help you: https://css-tricks.com/specifics-on-css-specificity/
My jQuery UI calender's css styles are overridden by the bootstrap css styles.
See the following snapshot... the calendar's year text color is not black.
The reason is, bootstrap css are overriding the jQuery css. In browser developer view, if I uncheck the style marked in red, then the style in green arrow gets enabled and everything looks normal.
Question:
How should I fix this issue in the css? Any suggestion is appreciated.
There are various rules governing the order that CSS is processed in. Generally, when two rules apply to the same element, the rule called LAST will supercede the rule called FIRST.
Thus, in your case, I would suggest loading jquery-ui.css after bootstrap.css.
The order in your <head> should be:
<link rel="stylesheet" href="path/to/bootstrap.css">
<link rel="stylesheet" href="path/to/jquery-ui.css">
Notes:
Another reason why jquery-ui.css should be place after bootstrap.css is style structure. Bootstrap.css governs the entirety of your document, it is a style and structure framework, while jquery-ui.css is intended to apply only to select elements.
Alternatively, if your aim is to modify the jQuery UI element, I would recommend creating a custom stylesheet (also placed after both documents), as opposed to altering jquery-ui.css or bootstrap-ui.css. However, this is just to maintain a best practice approach.
And as a final (and sloppy) alternative, apply !important to the style you wish to use to override, like so: color: #fff!important;
I have changed my css sheet for my entire site and it works great. The change has to do with the background color of rows in tables. Although it does what I want, there is one view that I would like to be exempt from this alteration. Is there a way to exclude this view from the change or create a new css sheet for this specific view?
Well, I would come up with a CSS styling strategy. The goal should be to minimize CSS and overrides. Also, having an extra CSS file for just one page will cause an extra HTTP round trip to get the resource. My recommendation is to stick extra CSS classes on this view. Then, override precisely the styles that you need in your global CSS styles.
I figured out the solution which ended up being much easier than I expected. Since I am very new to using CSS and HTML I was unaware of the style tag. However, that is what I was looking for. For anybody looking at this in the future, just use:
<style>
(CSS that you would like to override)
</style>
I have a simple HTML page that is referencing 3 CSS files. The first is a style sheet that is just for the page. The other two are for the styles of two unique modals. These modal CSS files were not created by me and they are happily being used separately on other pages throughout the site.
My problem is that both of these modal CSS files contain a few common selectors and so they are messing up each other's styles.
I understand that the best way to fix this problem is to take one or both of the files and make their selectors unique. One way would be to namespace the selectors.
My questions is, however, now that I'm knee-deep in this page, is there anyway to prevent these CSS conflicts without changing the modal CSS pages as they currently stand? Are there any tools that can help such as LESS? What is the best practice for preventing this in the future?
The best solution indeed would be to refactor those css-files to your need.
However, an easier solution would be to include your stylesheet after those two third-party css-files and re-declare the styles for the common selectors, which automatically overrides the previous settings.
LESS/SASS are excellent tools to help you write CSS faster and more comfortable. I use SASS for private work and really recommend it. They can't help you though with issues like you have atm.
EDIT:
Using !important is possible, but considered bad habit, as it was intended to give the user the possibility to override author-styles with his own. Instead of using !important what you should do is:
Avoid duplicate styles as much as you can.
if you can't avoid this, try to resolve this by either:
cascading (=using the proper sequence to override previous styles)
using selector specificity (W3C-Spec).
Assuming:
...
<link rel="stylesheet" href="this_page.css" />
<link rel="stylesheet" href="modal_1.css" />
<link rel="stylesheet" href="modal_2.css" />
...
Due to the cascading nature of CSS (sorry, I had to) using the same selector over and over overrides any previous styles. Thus, if modal_1.css and modal_2.css both apply style x to the body tag, for example, the second stylesheet will override the first.
The sad part is that there is no way out other than to, as you suggested, modify the two selectors to make them more specific.
Looking to the future, the best way to avoid overriding previously declared styles, is to always be specific about the particular element you are targeting, and it's proper place in the DOM. Note that LESS is simply a CSS preprocessor, which only allows you a different syntax for CSS.
I would suggest to a common class add into body tag of that particular page & target using that particular class. If you tools like LESS or Compass you can easily achieve the aim.
.pageOne{ /*All the styles for this perticular page*/
.header{
}
.sidebar{
}
}
When parse through LESS or Compass it will look like following.
.pageOne .header{}
.pageOne .sidebar{}
This way your page will get a namespace.
I'd like to import an external CSS (eg. Bootstrap) into my site-- the problem is I'd like to apply the Bootstrap styles only to a specific region of the page. When I include Bootstrap, it applies its styles to the entire page, restyling all tables, divs, etc.
Is it possible to only apply Bootstrap to a region (say a parent div or something?)
Thanks
The only way to do this is to have a separate iframe for the content you want to style with Bootstrap (unless you want to edit the Bootstrap CSS, and add your outer div's selector to the beginning of EVERY rule).
HTML5 introduced the new scoped attribute, which is made specifically for your use case, but has not yet been implemented by any one of the major browsers.
If you are using jQuery (which you probably are, since all of Bootstrap's Javascript functionality is dependent upon jQuery), you might wanna try Simon Madine's jQuery Scoped CSS plugin.
Import Bootstrap before your own styles. That way your own styles will overwrite the changes made by Bootstrap where applicable.
I've only tried this locally and not given it any thorough testing but it seems to work fine. I created a div around the content and assigned it an id. Then prefixed all of the bootstrap selectors with the id I assigned the surrounding div. The prefixing was done with a couple of search and replace operations. Perhaps it can be done easier with less
Forgot to mention that the body selector of the bootstrap.css has to be replaced with the id and not prefixed like the other selectors.