I just realized that my entire Rails app was to pale, and would like a quick fix to make all text look, say, 120% darker. My trouble is, my text color values are all over the places. (If I just have a few text color values, then it could have been easier to find and replace all of them).
Is there a way to do this? I am not familiar with less, but I hope there's some quick fix that can help me out.
I believe less is used to make all the css based on rules so it would be just as hard to implement it now as if you were to re-write your css.
For example if you set the base colour as #base: #ccc; then you can set other colours as a % like
div { .box-shadow(0 0 5px, 30%) }
However, this would still force you to go through and replace all your css values with percents and also learn less... Good longterm solution, but not a quick fix.
I am not an expert on rails but if you were to go through all your files with a replace command and replace #fff with #ccc etc?
Since your css is not less (or Sass)-based there is no straightforward way to accomplish this. However, writing a script that would find all color values in css (using a regex) and replace them with darker color (i.e. decreasing all individual color values by some percentage) wouldn't be a hard thing to do.
Related
If I add too many/too long captions to a vaadin7 timeline, they will only be displayed partially (i.e. the part we have space for is displayed and the remainder is truncated)
How can I increase this area in order to allocate enough space for all?
timeline.setGraphCaption(container, h.toString());
You need to add these rules in your scss file:
.v-timeline-widget .v-timeline-widget-modelegend{
background: inherit;
}
.v-timeline-widget-legend-label{
height: auto !important;
white-space: normal !important;
}
Before:
After
3 points:
While these rules may not met criteria of well-written CSS or good practice rules (I am looking at you !important), they do the trick. Still, better approach would be to get your hand dirty by editing Vaadin Timeline addon sources.
As you surely noticed text background has changed. That's because we override default background which was designed for only one line (you should provide your own background image)
Bottom of the widget is cut off by few pixels. Well, the only way to fix it is to jump into DOM and css and try fix it. Doable but I haven't tried.
I am using flot with the plugin "jquery.flot.axislabels.js", but I can't find other documentation than the README file.
So the general question is "where can I find some complete documentation ?"
And the more specific one is: "How to set the label's color ?"
Some properties are available, such as "axisLabelFontSizePixels", "axisLabelFontFamily", etc... so I've tried "axisLabelColor" and "axisLabelFontColor" without any result.
I tried to use CSS too, according to this: http://people.mozilla.com/~mcote/flot-axislabels/example/
But it does not work either. Maybe CSS is working with an older version of axislabel.js.
Ideally I'd avoid doing this with CSS, I guess that if we are able to choose the font we are able to choose the color. But I cant find what syntax I have to use...
If someone knows something, I'd be glad to read it :-)
Thanks and regards,
S.
From looking at the source code it doesn't look like the plugin provides that option in either of it's two modes of operation:
1.) Draw the labels using the canvas - no ability to set color (only font family and size). If you are handy with JavaScript adding color wouldn't be too difficult. (You are probably using this option since it explains why your CSS doesn't work.)
2.) Draw the labels using HTML DIVs. This is what your linked example does. In it the author specifies the color through an inline CSS tag. How I would do it though to keep it all together is after your plot call:
$('.yaxisLabel').css('color','red');
$('.y2axisLabel').css('color','orange');
$('.y3axisLabel').css('color','green');
$('.y4axisLabel').css('color','purple');
Example here.
I found it simpler to just add !important targeting the classes generated by flot. For targeting axis, you can aim for .yaxisLabel or .xaxisLabel, or for the whole thing target .flot-text.
.flot-text {
color: rgba(255, 255, 255, 0.3) !important
}
I know this question has one accepted answer, but just thought of sharing how I eventually got it working.
FLot version: Flot 0.8.3
I had to explicitly set axisLabelUseCanvas:false and then write a bit of jQuery code:
$('.flot-tick-label').css('color','red');
And there we go, after couple of hours of frustration, it was finally red!
Hope this helps someone who is lost in Flot.
I had to set axisLabelUseCanvas:false explicitly and use $('.axisLabels').css('color','red'); to make them red
If the sass file content is
#some-div
color: #333
font-size: 17px // This value actually has some issue on WebKit because it makes
// the label a little off centered, and is better if it is 16px.
// But on IE, the font turns out to be rather ugly, so we would
// use 17px for now since IE has a larger user base
the above will actually fail, because it will complain the indentation is not correct (starting the second line of comments). How might it be solved to have multiple lines like this? Note: It can be made into all indented the same level as the font-size line (and on top of it), but I'd rather not do it like that in this case.
Sass is very indentation-based. As such, there really is no choice but to either
Combine the comment onto the end of the line, which will be huge and unwieldy.
Move the comment above or below your line.
The documentation for the indentation syntax covers comments in this section.
You might find some of the options useful, for example, you only need to have the first line of the comment with slashes, the rest can be indented, which may be more readable for your purposes.
It would look like this then:
#some-div
color: #333
font-size: 17px
// This value actually has some issue on WebKit because it makes
the label a little off centered, and is better if it is 16px.
But on IE, the font turns out to be rather ugly, so we would
use 17px for now since IE has a larger user base.
SCSS is the preferred syntax to use now as all valid CSS is valid SCSS; it also allows for the type of comments you would like (in addition to quite a few very nifty additions such as using &:hover inside of a selector to group your variations on styles more logically).
In Latex, I've created a new command 'changedtext' to mark specifics parts in my document and make it appear blue:
\newcommand{\changedtext}[1]{\textcolor{blue}{#1} }
Is there any easy way to alter the command to have change bars appear next to the text in the resulting PDF?
If not possible, any other suggestion for a visual markup (other than change bars) that would be clear on a black & white printout would be useful as well.
Update: It might be of interest to readers of this question that some time ago I started using the latexdiff script to mark up changes between two versions. I use it in combination with SVN, which I think works great; if you split up your LaTeX files, you might want to look at this tex.stackexchange question though.
Use one of the changebar macro packages in your command.
One other way which would be very clear in B&W would be highlight (shows as gray background).
Use packages soul and color and define your highlight color:
\usepackage{soul}
\usepackage{color}
\definecolor{lightgray}{rgb}{.92,.92,.92}
\sethlcolor{lightgray}
Now you can use \hl{highlighted text} in text to highlight.
Some half-baked solution (not satisfactory) I just came up with myself, is the use of \marginpar to have some arbitrary indication in the margin, e.g.:
\newcommand{\changedtext}[1]{\textcolor{blue}{#1 \marginpar{r1}} }
will put the text 'r1' (from revision 1) in the margin.
However, when using this, the \changedtext command can not be used everywhere (e.g. in formulas, captions) because LateX will complain (in my case) about 'float(s) lost'.
Still,it might be useful to some people...
I can get sIFR to work but it will only display the bold version of the font I have exported. I checked the report and it seems to be stripping out any font weight that is not bolded in flash. I exported two different files to test, the first with regular and bold and the second with medium and semibold in both cases only the bolded weights were exported. Any ideas on how to fix this?
When exporting the Flash movie, make sure at least one character in the text field has the styles applied to it. Then it should export fine.
I had a similar problem - could not make the font 'bold' style work, and I even whanted my fonts BlackItalic to work. Messing around and reading your post and Marks answer made me try to apply the BlackItalic style to the very first word in the provided fla file. Keeping the css style 'font-weight: normal;' in the config java code was successful!
Until I read some new posts about this I will follow the work flow making individual swf files for every font style - normally I only want to use one or to styles anyway.