While developing, despite live-reload and everything, I usually use DevTools to test the css code to apply.
Problem is, that the changes I apply are only temporary, and saving them directly to the original files with PostCSS and SASS is hard, add Angular2 and ShadowDom and I can't even find the css source file in the Source tab, figure saving in the original source scss file… Any way it would not be what I want, which is simply to log the changes I make, like for example:
p {
[…]
- font-size: 1rem;
+ font-size: 1.5rem;
[…]
}
li {
- color: #FFF;
+ color: #000;
}
Expecially thanks to the extremely annoying WebStorm's "feature" of automatically saving files every time you go out of its scope I can't tell how many times I found a solution in DevTools and then lost it when I forgot a single detail and I get mad trying to figure out what I did to manage to make it work. Also because the changes might have been applied to several elements, and I might forget to have changed one.
I tried to go through all the Chrome's extensions and I only find answers dated to 2012 suggesting to use DevTool's Source tab, that apparently doesn't even work with Angular2 and ShadowDom.
Anybody knows a solution?
Related
For the past two hours I've been trying to figure out a strange behavior when trying to override bootstrap in Django.
At the beginning, without any custom css file, the result was this:
Then I created a custom css file: my_site/css/master.css
.index-jumbotron {
background-color: #006DB0;
}
#main-title {
text-align: center;
color: white;
}
It resulted in this:
So far, so good.
But now, if I change anything on that same file (even when putting !important and taking good care of the specificity system), the result is always the same as the image immediately above.
However, when I indicate my template to point to another file my_site/css/master2.css or css/master.css, indeed the result is as I would have expected:
I can't get my head around this. Do you have any idea? Do you know if the package django-bootstrap3 could have anything to do with that? I installed it in between my two different version of the custom css file.
Looks like a browser caching issue - did you say 'disable cache' in the developer toolbar (network tab) of your browser? This is usually the easiest solution.
Another option is to open the styles file in your browser and hit 'ctrl+r' to force reload of the css file.
I'm using angularjs along with the angular-material framework. I started writing my project based on the angular-seed project.
In my project I have a form that contains <md-select> elements. My problem is that the selection view is always only as big as 5 select options. I want to see more options when scrolling.
I looked around the angular-material source code and found this !default SASS variable which controls how many options are displayed. I want to make it bigger.
The way I understand it, !default means SASS will ignore the value of that variable if it's already defined elsewhere.
But I also understand that the SASS preprocessor takes a single SASS file as input and outputs a single CSS file - which means I can't override a SASS variable in one file from another file.
I'm also quite confused on which component is responsible for compiling the .scss files found in the angular-material framework and at what stage are they compiled. Are they compiled when installed by Bower? Are they compiled when I call npm start?
I'm new to all these technologies so even though those stuff might seem trivial, I don't really know what to search for to find answers to these questions, I tried and found nothing.
Well I just looked around and realized that the angular-material Bower package comes with css files that have already been pre-processed from scss files. There's nothing I can do to affect that variable.
To show more options in the md-select component I just resorted to the ugly solution of adding these hard-coded pre-calculated attributes to my stylesheets:
md-select-menu {
max-height: 784px !important; }
md-select-menu md-content {
max-height: 784px !important; }
EDIT:
Actually I found this solution even nicer:
md-select-menu {
max-height: 100vh !important; }
md-select-menu md-content {
max-height: 100vh !important; }
It fills as much of the view as possible with options
I am using Bootstrap theme in Drupal CMS.
I use Firebug to check the CSS class and HTML elements of the page.
But whenever I check, it is showing CSS class/ which is the understood, However, is there a way we can check the corresponding LESS variable?
For Example:
If we check button using firebug, the .btn CSS selector will shown font-weight: normal;,
.btn {
font-weight: normal;
}
And Corresponding LESS,
#btn-font-weight: normal;
Shortest answer: no, but if you run
lessc less/style.less css/style.css --source-map
before your watcher you'll be able to
use your inspector to see which LESS file each style comes from.
Not what you're hoping for, but it least it'll help you track things down.
The loong answer
There is no way to see .btn {font-weight: #btn-font-weight} when inspecting the compiled styles, necessarily: compiling LESS to CSS replaces the #btn-font-weight with normal.
As hinted at by #tjaart-van-der-walt, using source maps may be helpful for you. With sourc emaps, you still won't see raw LESS variables but you will be able to jump right to the LESS file where the style is defined… the right line, even. You'll still need to refer to your original file to sort out LESS-specific code, but at least you'll know exactly where to look (e.g. my-partial-less-file.less:18 rather than my-compiled-css.css:212).
So if you have a one.less
* {
background: red
}
and a two.less
* {
border: 1px solid green
}
that compile to main.css
* {
background: red;
}
* {
border: 1px solid green;
}
in the inspector you'll see something like
where before you would have seen something like
("something like" because these are Chrome screenshots.)
There are two steps to getting source maps working: 1. set up a main file (mentioning this for anyone else who reads this question; in your case this is already taken care of: less/style.less is your main file), 2. generate the source map, and 3. enable source mapping in your inspector.
1. When we get to B, it's going to be save a lot of hassle if we can just generate the source map off a single file. That requires structuring the LESS files with a main file that #imports all your other files. For example,
/styles
└─┬─ main.less
└─ components
└─┬─ one.less
└─ two.less
and main.less looks like
#import 'components/one';
#import 'components/two';
Not exactly sure what your copy of the Bootstrap Drupal theme, but in the copy I downloaded from your link it looks like the file of interest is less/style.less so you don't have to do anything here.
2. There are a bunch of ways to generate source maps while compiling LESS to CSS (there are dev apps that will do it, grunt and gulp tools, and command line tools). Since you're using using the bare command line tool Deadsimple LESS CSS Watch Compiler, let's stick with that model.
In order to run less-watch-compiler, you've already installed LESS. In case anyone else reading this hasn't, to do that you run
$ (sudo) npm install -g less
Among other things, that installed the compiler lessc, which has support for generating source maps. Run
$ lessc less/style.less css/style.css --source-map
This says "run the less compiler on less/style.less, output the compiled stylesheet to css/style.css, and generate a style.css.map sourcemap. (Full lessc documentation is here.)
(2.5 at this point you can run your less-watch-compiler less css, and follow your normal workflow)
3.
Turn on source mapping in your browser's inspector. Firebug doesn't support source mapping, but Firefox's built-in inspector does: open the inspector, right-click on any style, and select "show original sources." Mozilla's documentation is here. (Fwiw, Firebug is on track to be merged into Firefox's Developer Tools. Learn about that here.) Chrome also has built-in support: inspector --> "..." menu (top right) --> Settings --> "Sources: Enable CSS source maps" (for me, this was turned on by default), and so does Edge (documentation here; appears to be turned on by default).
Where can I find documentation about the GNOME Shell theme css elements?
For instance, if I want to change the style of the "Activites" which css class/id do I have to tweak?
More in general I'm looking for somethings that maps each gnome shell element to its class / id in the css
Thanks!
This might be a little dated, but I was able to track down a somewhat authoratiative source. Starting with the documentation that turns up for developing on gnome shell:
https://wiki.gnome.org/Projects/GnomeShell/Development
The CSS section mentions that the theme stuff is located in gnome-shell/source/gnome-shell/data/theme/gnome-shell.css. Of course, it doesn't give a link or anything. From there, I googled for the source code, picked a reasonably recent version and hoped that I could browse the code using the path in the documentation. Lo and behold, the CSS!
https://git.gnome.org/browse/gnome-shell/tree/data/theme/gnome-shell.css?h=gnome-3-18
In my case, I wanted to make all of the font smaller but I didn't know what the root element was. I was able to determine that stage is what I should target with something like font-size: 0.8em in my custom theme in ~/.themes/Naddeo/gnome-shell/gnome-shell.css. This is my entire CSS file in case someone else is trying a real theme but they want to override one or two things. To use it, just pick it in the gnome tweak tool as your shell theme.
#import url("/usr/share/gnome-shell/theme/gnome-shell.css");
stage {
font-size: 0.8em;
height: 1.50em;
}
Well I still cannot find documentation, however by looking into other themes I could finally find what I was looking for this specific case.
#panelActivities
is the style to tweak
I recently start using flying-saucer library to generate a pdf from html web page. Everything works fine, except that the CSS rules, that look similar with the one below, are ignored.
TD.standardActiv
{
FONT-SIZE: 10pt;
COLOR: #1a467a;
FONT-FAMILY: Arial;
BACKGROUND-COLOR: #6f9bce;
}
If I change the 'TD' to 'td', everything is working properly. Does anyone know how to solve this? I thought about replacing all upper case identifiers, but it's an ugly solution, because of the amount of css files that should be updated.
You have three options:
Download all the CSS's yourself and run them through some case converter code
The Powah of Open Source: Change the underlying code to be case insensitive.
Update to a newer version of FS/iText. This may have already been fixed.
Number 3 is trivial, but may not work. Number 1 may not be practical, I'm not that familiar with Flying Saucer.
I'm a big fan of #2. You'll probably have to modify the source to iText's com.itextpdf/lowagie.text.html.simpleparsers.StyleSheet class. The trunk already changes the tags to lower case, so I'm guessing #3 just might be all you need.