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
Related
Goal:
I have a specific clientlib ready with "critical CSS" that I would like to add to a page template in <style> tags, per Google's performance recommendations on a high-traffic e-Commerce site.
Problem:
We all know how to add a file reference in HTL:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css # categories='template.noncritical'}"/>
but how would I output plain generated CSS styles on the page via HTL? Is there some other HTL property I could use?
I want this:
<style>
/* contents of AEM clientlib CSS here */
</style>
Tried:
I have Googled, searched StackOverflow, and looked in the AEM docs about clientlibs, but haven't found anything about inlining styles, except to
use a third-party script to inline critical CSS. (don't want to do)
modify HTML Library Manager OSGi configuration to inline all styles by default (don't want to do)
I am looking for something AEM-native that can be turned "on" or "off" in HTL. Thanks for reading and offering any solutions you may have.
You can try https://github.com/dmantsevich/aem-critical-css
It will generate CSS files and "integrate" with AEM. You can use it for extract small component CSS.
Some features:
CSS will be loaded only, if component presents on the page
Supports 2 injection types: <style /> and <link />
Supports less, css, scss.
CSS will be injected only once
Example:
MyComponentTemplate.html
<sly data-sly-use.aemCriticalCSS="${'./_aem-critical-css.js'}"
#aem-critical-css="my-component/my-component.scss">${aemCriticalCSS.inject # context="unsafe"}</sly>
Where my-component/my-component.scss is a path to css (related to ui.frontend/src/ folder). We used it on several projects and it helps to improve rendering performance. (path can be configured)
You can use the Core Components functionality https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/including-clientlibs.html?lang=en#inlining
<style type="text/css"
data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' # categories='wknd.base'}">
${clientlibs.cssInline # context="unsafe"}
</style>
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;
Is there a way that I can define css so that, for example all paragraphs (<p>) on this specific page are formated according to that css, but not other pages on the plone site?
Inline-css does work, but that's pretty annoying for larger tables I'd like to style.
You should use
ploneCustom.css or related custom CSS file which is merged with other CSS files in portal_css registry
Use <body> CSS classes to target a single page only
More <body> CSS can be added for custom needs. What kind of page you need to target with CSS.
http://collective-docs.readthedocs.org/en/latest/templates_css_and_javascripts/css.html#adding-new-css-body-classes
Also you can include CSS as <head> viewlet if needed but this approach is not recommended.
http://collective-docs.readthedocs.org/en/latest/views/viewlets.html#viewlets-for-one-page-only
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 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.