I developed an application, and I used header and footer from another app. I created a separate style sheet for my app, called TestStyleapp.css. When I run my new application, the stylesheet I used from the other app is overriding my new CSS file.
Is there a way to include/reference the Teststyleapp.css (I tried calling it last) other than using !important in front of all the elements in teststyleapp.css?
When I use FireBug, I do not see Teststyleapp.CSS at all.
Even if it is LAST, if it is NOT more SPECIFIC (the other page items are more specific) it will not override what is above it in the stack.
Example:
div .myclass (background-color: red);
other (yours has)
.myclass(background-color:green);
you still see red.
<link rel="stylesheet" href="TestStyleapp.css" type="text/css" media="screen" />
It should be linked as such, between the head tags. Make sure the case is correct. I like using all lowercase and _ as a word separator. Just my personal style.
First, get the .css file to show in the NET tab in Firebug and we'll take it from there.
Related
I'm developing a web app which must have an option to see an area with Bootstrap4.1 or Bootstrap3. All app is developed with Bootstrap3:
I have logic implemented to switch between BT4 and BT3
But when I insert the Bootstrap4 all page is affected.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
How can I apply Bootstrap4.1 only into specific area?
OK. You've got some work to do.
First download Bootstrap 4's source files and open the bootstrap.scss file.
Enclose the whole CSS with a class-name of your choice.
Example:
.your_class_name {
/*Source files*/
}
Now you have an SCSS file.
Then go to this link and copy paste your code and convert it to CSS file.
You'll notice that all the Bootstrap's classes have be preceded with your class name.
Copy that file to your project.
In the HTML code, whenever you want to use the Bootstrap 4 classes, simply start with
<div class="your_class_name"> and enclose your contents in it.
Bootstrap 4's classes will be applied only to the enclosed div's children.
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 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.
I am writing a Chrome Extension where a small panel appears on top of the existing website. When I go to certain websites, I notice that the CSS of my panel has been over-written by the website's CSS. I am currently using Eric Meyer's CSS Reset but it does not seem to be doing the trick. Is there something else I can do?
Here's a nifty 'hack' with iframes, where you don't actually instantiate an iframe:
Append an iframe to the DOM, this will be a container for your do dad
Walk into the iframe and add your HTML code to the innerHTML of the body
It looks like this:
var iframe = document.createElement('iframe');
document.documentElement.appendChild(iframe); //fastest way to append to DOM: http://jsperf.com/insertbefore-vs-appendchild/2
iframe.contentDocument.body.innerHTML = 'Normal link!!';
I'm not familiar with Chrome extensions themselves. But you could try scoping your panel within an 'id':
<div id='my-panel'>
PANEL GOES HERE
</div>
And then in the CSS just have #my-panel as the first selector for all of your css. Take the reset css and add the #my-panel identifier to each element defined there too. Might be tedious... but would ensure you're resetting all of your elements, and virtually guarantee that they'll be reset at a higher priority than anything the website might be defining.
An extension that I just wrote ran into similar problems. I've made most of them disappear, but not all of them. I think that I know why, but I haven't gotten around to fixing the exceptions (this is just a school assignment as of now).
Here is what I found: when a stylesheet is injected through the extension manifest or by the background page, it is treated as a user stylesheet, giving it cascade priority over the default browser stylesheet only. Adding !important directives to your rules will not help, at least in my experience. User stylesheets (added by an extension or manually) can contain !important directives, but they are not honoured by Chrome for some reason -- just check how they show up in the Chrome DevTools, without !important. Adding id attributes won't help either, as specificity will only trump where priority is equal otherwise.
What does work for me:
var ninjaCSS = document.createElement("link");
ninjaCSS.setAttribute("rel", "stylesheet");
ninjaCSS.setAttribute("type", "text/css");
ninjaCSS.setAttribute("href", chrome.extension.getURL('ninja.css'));
document.getElementById("head").appendChild(ninjaCSS);
This code is included in a JavaScript file that is listed in the manifest as a content script, and should run at document load. The CSS file is not listed in the manifest, but is included in the extension folder. Now the stylesheet is on an equal footing with the the other author stylesheets.
Of course, that is just the beginning. You can now give all elements in your panel an id attribute (you probably already have). Whether you use a style reset or not is up to you. But you will have to make sure that your styles specify every single rule that a stylesheet in the wild might try to manipulate. If you do not plan to change a rule from its default, you must still specify that default value. Even if the default value is "none";
Finally, you must bravely ignore all warnings that the !important directive is best used sparingly. Quite the opposite applies here. When you add !important to every one of your style rules, it will be as if you had not used it at all as far as your panel's cascade is concerned. On the other hand, you will now be the boss of your panel. Trust me, somebody is going to tack an !important directive on, say, their button:hover background-image rule. Leading your well-crafted buttons to inexplicably morph into concert images of a 1985 bon jovi concert -- but only when the mouse is hovering, so no worries, right?
appendChild solutions works for me (Devin G Rhode and jCyCle answers). But I noticed these solutions just add the attribute xmlns="http://www.w3.org/1999/xhtml". So I tested my code just by adding this xmlns attribute to my link tag (directly, not using JS) and it works too, don't know why.
Failing:
<link rel="stylesheet" type="text/css" href="filesystem:chrome-extension://................/temporary/Content/Styles/style.css" />
Working:
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="filesystem:chrome-extension://.............../temporary/Content/Styles/style.css" />
I'd like to use Bootstrap from Twitter in my ASP.Net MVC 3 application. I downloaded bootstrap.css and added it to my project in the Content folder. I opened _Layout.cshtml and added a link to the file:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
When I run the application no stylesheet is applied. How do I reference both Site.css and bootstrap.css from my _Layout.cshtml file?
I think the issue here is the inheritance, cascade and specificity CSS. Bear in mind that Twitter's Bootstrap resets all styles.
'If Site.css is before bootstrap.css only bootstrap is applied (which I didn't realize at first). Reverse the order and both work. Strange'
Actually, this makes complete sense. Site.css is loaded with all it's style declarations and immediately afterwards Bootstrap.css is loaded which resets most(if not all styles) thus declarations within Bootstrap.css will be applied. It only appears that both work probably because Bootstrap.css might not have a defined style or Site.css has very specific style defined using html ids or classes.
Reverse the order (with Bootstrap.css first), you are now resetting all styles first and then other styles are being applied. Since Site.css is loaded second, the styles defined therein will be applied to your site.
For your own interest, try to define an inline style within your html doc that has been defined within both 'Site.css' and 'Bootstrap.css', and see how the style gets applied by adding/removing the style definition.
I tried finding a good supporting explanation for CSS cascading, and the best graphic and simple explanation I found was this which notes
If selectors within external and embedded style sheets conflict but
have the same specificity, the final tie-breaker is based on the order
of apperance of the rules: the rule declared later wins. This applies
not only to the order of rules within a single sheet, but also to the
order that the sheets are linked, imported or embedded in the head of
the (X)HTML page.
You can copy and paste the CSS from the bootstrap file into your single .css file in order to cut down on the HTTP requests.
Just place all the bootstrap code at the very beginning and then your personal CSS following it, for organizational purposes.
However what you've done should work. Can you post an example on JSFiddle of what your markup looks like?
For more information see:
http://www.w3.org/TR/html4/present/styles.html#h-14.3