I'm completely stumped - what am I missing?
I have a LESS file called Main.less - and VS 2013 automatically generates Main.min.css whenever I save it.
The CSS generated is fine - no errors. When I copy the generated CSS to my Style.css (to verify) it is applied correctly.
I bundle the Main.min.css generated from the LESS file via the usual bundleconfig along with other css files (mainly my bootstrap and site css).
When I run the site, I can see the styles in the referenced bundled source - but the style is not applied! What am I missing?
(here is the .LESS)
#color1: #FFA114;
#color2: #69b1fa;
#std_border: 2px;
.rounded {
border-radius: 10px;
}
.sel_1 {
.rounded;
border: #std_border solid #color1;
}
(here is the .css as it appears in the minified bundle on the browser)
.rounded{border-radius:10px}.sel_1{border-radius:10px;border:2px solid #ffa114}
I can only imagine something is wrong somewhere so that the browsers (latest Chrome and IE) don't even apply the styles. No idea what...
EDIT: UPDATE:
I also referred the generated min.css directly
<link href="/Content/Main.min.css" rel="stylesheet" />
and on browser-> view source -> click on the .css you see the following
.rounded{border-radius:10px}.sel_1{border-radius:10px;border:2px solid #ffa114}.sel_2{border-radius:10px;border:2px solid #ffa114;border-color:#69b1fa}.asel_1{border-radius:10px;border:2px solid #ffa114;border-style:dashed}.asel_2{border-radius:10px;border:2px solid #ffa114;border-color:#69b1fa;border-style:dashed}.map_sel{border:3px double #69b1fa}.line{border-bottom:2px #ffa114 solid;padding:10px}
And the styles are still not applied!
Related
I use kss-node and trying out the simplest project. It just uses the example from the Quickstart guide.
The css is in source/style.css
// Hard rules
//
// Markup: <hr>
//
// Style guide: hard-rule
hr {
border-top: 5px solid #999;
}
I then run
npm-exec kss-node --source source --destination styleguide --css ../source/style.css
The first problem was that the --css option needs the relative path from where the styleguide later is.
But the hr element still looks the same and not 5px thick.
The file is included in the html but Dev Tools says "0 rules" are applied
Could it have something to do with the "//" comments you are using in the css file? Try using a preprocessor and a styles.scss file as the source and then include the styles.css file that sass generates which won't have invalid "//" comments in them.
This seems to working
`
/*
Hard rules
Markup:
Style guide: hard-rule
*/
`
https://github.com/rcaracaus/kss-test
I reread the the documentation to kss-node. The recommended way seems to create a kss template and add the stylesheet in there.
I took the repo of Robert and executed
npm-exec kss-node --init my-template
Then I added following line to my-template/index.html
<link rel="stylesheet" href="../source/styles.css">
Apparently the styles.css file won't be copied to the styleguide directory.
Although this doesn't answer my original question. I feel like it should work without a custom template.
But this works for me.
I'm working on a Orchard theme using Twitter Bootstrap 3.0.x
I added all scripts and styles into MyTheme/Scripts & MyTheme/Styles.
It works find except Glyphicons images.
In CSS files, it references icons by using a relative path (../fonts/glyphicon.....).
So I created a MyTheme/fonts containing all glyphicons files.
However, when I browse these files are not found (404).
For example, when I browse the source code :
http://localhost:9100/Themes/MyTheme/Scripts/bootstrap.js -> OK
http://localhost:9100/Themes/MyTheme/Styles/bootstrap.css -> OK
http://localhost:9100/Themes/MyTheme/fonts/glyphicons.. -> KO
Any idea to do that ?
I know this is late, but maybe it will help other people. You should put your fonts folder in the Content folder looking like this:
http://localhost:9100/Themes/MyTheme/Content/fonts/
After this you should overwrite in a external css file your bootstrap.css and bootstrap.min.css the #font-face of your Glyphicons.
Looking like this:
#font-face{
font-family:'Glyphicons Halflings' !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot) !important;
src:url(../Content/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
url(../Content/fonts/glyphicons-halflings-regular.woff) format('woff'),
url(../Content/fonts/glyphicons-halflings-regular.ttf) format('truetype'),
url(../Content/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg') !important
}
Orchard doesn't seem to get content like your fonts outside the Content folder.
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
I installed the Simple Theme plugin on my Jenkins instance, and I managed to do some (very) basic theme changes.
Does anyone have a better reference to the Jenkins theme?
The plugin page is very low on info...
If I want to override a style attribute, I have to dig into the generated html and do a lot of experimenting.
You can customize your known simple theme with .css file.
Make sure that you have .png logo image, I have added 'Jenkins_home/usercontent/mytheme.css' file 'Jenkins_home/usercontent/logo.png' as my logo.
and follow the css below:
#charset “utf-8”;
#header .logo {
height: 36px;
}
/* Custom style for my Jenkins Platform */
.logo {
background: url(/userContent/logo.png) no-repeat 10px center;
}
.logo img {
display: none;
}
.logo:after {
content: 'Jenkins my instance';
font-weight: bold;
white-space: nowrap;
} // Content after logo
Just check in Jenkins Configuration theme must be CSS URL and you must add path of above 'mytheme.css' file.
& Refresh your Jenkins Page.
Found a simple tutorial here for start:
http://www.techgaun.com/2013/06/customizing-jenkins-layout.html
Open Jenkins in Chrome or FireFox and press F12.
Right click on the UI element you want to change and select Inspect Element.
In the debug window the line in the html is highlighted.
Record the id and/or class of the UI element.
Open style.css and search for the id/class.
Copy the css-code and paste it in .css which you save in the css directory.
In the Theme section on the Configuration page enter css/.css as URL of theme CSS.
Now start altering .css to get the looks you desire.
Enable auto refesh to see the changes, Ctrl-F5 also helps
In my Ruby (1.9.2) Rails (3.0.x) I would like to render a web page as PDF using wicked_pdf, and I would like to control where the page breaks are. My CSS code to control page breaks is as follows:
<style>
#media print
{
h1 {page-break-before:always}
}
</style>
However, when I render the page with wicked_pdf, it does not separate the document into two pages. Is there something else that I must do to get page breaks with wicked_pdf?
For some reason, the "#media print" didn't quite do it. I just went with
.page-break { display:block; clear:both; page-break-after:always; }
for the CSS rule, and then I stuck the following in my page for a page break:
<div class="page-break"></div>
That just worked.
Tried Jay's solution but could not get it to work (maybe a conflict with other css)
I got it to work with this:
<p style='page-break-after:always;'></p>
I had the same problem and I discovered something that might help. This was my page break CSS code:
.page-break {
display: block;
clear: both;
page-break-after: always;
}
This didn't work because of TWO reasons:
I. In one of the SASS imported file I had this line of code:
html, body
overflow-x: hidden !important
II. The other problem was bootstrap
#import "bootstrap"
It looks like because of the float: left in:
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: left;
}
the page break is no longer working. So, just add this after you import bootstrap.
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
float: initial !important;
}
None of these solutions worked for me. I did find a solution that worked for many people in the gem issues here - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524
you want to add CSS on the element that needs the page break. In my case, it was table rows, so I added:
tr {
page-break-inside: avoid;
}
Make sure that the stylesheet link tag includes media='print" or media='all' if you are using an external stylesheet:
<%= stylesheet_link_tag 'retailers_pdf',media: 'all' %>
or
<%= stylesheet_link_tag 'retailers_pdf',media: 'print' %>
otherwise wicked_pdf will not pick it up.
Also note that if you are in the middle of a table or div with a border, that the page-break attributes will not work. In this case, it's time to break out jQuery and start splitting things up. This answer: https://stackoverflow.com/a/13394466/2016616 has a good snippet for position measurement. I am working on clean and repeatable table-splitting code and will post it when I have finished it.
i had the same issue and what ended up working for me was to make sure that my element with
page-break: always;
was on the root of the document, seems when its nested inside of other elements, especially ones with height assigned, the declaration gets ignored.
hope this helps someone.