So I admit this is very close to a question that is to broad, but I think it counts as an acceptable question.
So been playing around with Angular Material, and yes it has a lot and cool stuff, and I like the idea of getting more or less a full styleguide to web layout as part of the package (have a look at http://www.google.com/design/spec/material-design/introduction.html it is worth a read)
My question is though, how do I use the pallette. I defined a palette in my java script (like the one below)
$mdThemingProvider.definePalette('Stackit', {
"50":"#f6f7f9",
"100":"#c9d3d9",
"200":"#a8b8c2",
"300":"#7d95a5",
"400":"#6b8798",
"500":"#5e7787",
"600":"#516775",
"700":"#455763",
"800":"#384751",
"900":"#2c373f",
"A100":"#f6f7f9",
"A200":"#c9d3d9",
"A400":"#6b8798",
"A700":"#455763",
'contrastDefaultColor': 'dark', // whether, by default, text (contrast)
// on this palette should be dark or light
'contrastDarkColors': ['50', '100', //hues which contrast should be 'dark' by default
'200', '300', '400', 'A100'],
'contrastLightColors': undefined // could also specify this if default was 'dark'
});
So we have a pallette, and it picks up some of these colors automatically, for example, run this code and your md-toolbar will change colours.
However, there are a lot of colours in a palette, but I haven't figured out how to use them in a useful manner.
Say for example that I want my webpage to have to type of sections, one light grey with black text, one dark grey with white text, all are about half a screen size each, might have some icons or pictures, as well as some text.
So how I would do it normally would be something like
<div class=dark style="height: 350px">
Some welcome text and saying hi
</div>
<div class=light style="height: 350px">
A nice picture and some other bits
</div>
<div class=dark style="height: 350px">
Now lets do something with a big button
</div>
So in Material Design I'll get the divs by setting up a layout=row and a flex, nice layout and scroll down over my zebra.
However, in theory I would like to use color 100 for light and 600 for dark from my palette, but there does not seem to be a way to do so. Yes, I can create a CSS class with those colours, but it means that the whole Palette things seems rather wasteful.
After much faffing about, I manage to figure out part of it.
There is a md-accent option which seems to be create for this very purpose. You do need to set the accent first.
.accentPalette('grey')
In my case, I just needed the grey one, but you could define the whole palette using definePalette. So using our example above, the configuration would look as follows:
$mdThemingProvider.theme('default')
.dark()
.primaryPalette('Stackit')
.backgroundPalette('Stackit')
.accentPalette('grey')
.warnPalette('red');
Then all you need to do to make light (grey) text on black background:
<H1 class="md-accent">Prototypes</H1>
Related
Components like button, toolbar allow for a color input like <button color="primary">, which is handy because it automatically updates the color of the text inside. But when I just wne to color a component with color, I realized that it doesn't allow for a color input.
Browsing briefly through the marterial component docs, it seems to me entirely random whether a component accepts a color input or not. Is there any rhyme or reason to this? I'd be much happier if every component could have a color input.
OK, I had not internalized (but now understand) that, under material design, there are many parts of an interface that you are simply discouraged to color (roughly speaking the 'body' of your content), and that these not-to-be-colored parts are made greyscale (light or dark depending on your theme). To-be-colored items tend to be banners, navigators, buttons, etc.
I found it instructive to go through the list of components and put each one into one of two lists depending on whether they allow for a color directive:
DO HAVE COLOR DIRECTIVE:
mat-checkbox
mat-datepicker
mat-form-field
mat-radio-group
mat-radio-button
mat-slider
mat-slide-toggle
mat-toolbar
mat-list-option
mat-selection-list
mat-tab-nav-bar (<nav mat-tab-nav-bar [backgroundColor]="background">)
mat-tab-group
mat-button (<button mat-button>Basic</button>)
matBadge (<span matBadge="4" matBadgeColor="accent">Text with a badge</span>)
mat-chip
mat-icon
mat-spinner
mat-progress-spinner
mat-progress-bar
matRipple (<div matRipple [matRippleColor]="myColor"></div>)
mat-paginator
DO NOT HAVE COLOR DIRECTIVE:
mat-autocomplete
matInput (<input matInput>)
mat-select
mat-menu
mat-drawer-content
mat-drawer
mat-drawer-container
mat-sidenav-content
mat-sidenav
mat-sidenav-container
mat-toolbar-row
mat-card
mat-divider
mat-accordion
mat-expansion-panel
mat-action-row
mat-expansion-panel-header
mat-grid-list
mat-grid-tile
mat-grid-tile-header
mat-grid-tile-footer
mat-nav-list
mat-list
mat-list-item
mat-horizontal-stepper
mat-step
mat-tab
mat-tree-node
mat-tree
mat-button-toggle-group
mat-button-toggle
mat-chip-list
MatBottomSheet
MatDialog
MatSnackBar
matTooltip
MatSortHeader
MatTable
Note: some of these are not compnents, per say, but are activated by e.g. a directive. In some (not all!) cases, I included in brackets how that 'component' is used.
I have an emoji, and I want it to be white, but when I run the program it appears red. How do I change it to white?
rating.text = "\(♥♥♥♥♥)"
rating.textColor = UIColorRGB("ffffff")
The following answer explains why you can't change the color of Emoji characters. The glyphs are essentially images.
If you want to be able to use a heart symbol that you can color, try using one of the non-Emoji heart characters like ♥︎.
Or ensure the label's font isn't using the Apple Color Emoji font.
I needed to do this for a project and found a couple of ways to go about it. Each has its limitations, but still, usefull tricks to know.
First, you could append the unicode text presentation selector after the emoji to get it to render as text, then use your font color.
Limitations:
Text representation of that emoji might not be available and you get unknown character representation instead.
The detail of the text representation is often less
Alternatively, you can use CSS filters on the emoji itself to change its hue (plus saturation, contrast, grayscale, etc)
Limitations:
Requires access to the page's css (Works fine for your own webpage, but you couldn't, for instance, use this within an instagram post)
The emoji graphic is application-dependent, so the outcome
could be unpredictable. For instance, the folder icon on firefox is
(presently) an ugly blue color. I filter it to a yellow tint, but on
other browsers (which render it yellow to start with) the code below will cause the very problem I was trying to fix!
Anyway, here are some examples with both css and html variations of the approaches:
.folderitem_normal:before {
content:'\1f4c2';
margin-right:4px;
}
.folderitem_presentation_selector:before {
color: magenta;
content:'\1f4c2\FE0E';
margin-right:4px;
}
.folderitem_css_filter:before {
content:'\1f4c2';
filter: hue-rotate(180deg) brightness(1.5);
margin-right:4px;
}
<div class="folderitem_normal">Normal appearance of emoji for comparison (HTML 📂)</div>
<div class="folderitem_presentation_selector">Presentation selector. Notice how it has been colored like normal text. (HTML 📂︎)</div>
<div class="folderitem_css_filter">Css filter looks nice, but results are application-dependent. (HTML = N/A)</div>
looking for high chart sample program, I haven't used Highcharts before, but it seems there are no sliders built take a look at the answer.
Actually Highcharts in general are not free.. For me it's simple bullet graph. In Highcharts for that you can use bar chart with scatter point
The bullet concept will work for this, though it will take some work to get styling like that. There are plenty of useful options for styling such a chart though without relying on the physical gauge metaphor.
A quick variation on the bullet chart approach that puts them into a single chart and removes the banding:
http://jsfiddle.net/jlbriggs/kwtZr/41/
It relies on a custom extension to produce the 'line' marker type:
Highcharts.Renderer.prototype.symbols.line = ...
{{
edit in response to comments below:
updated example with some additional formatting options and clean up:
http://jsfiddle.net/jlbriggs/kwtZr/55/
be wary of using multiple colors unless the colors truly mean something.
Using additional color to highlight items that require attention is a good use of color.
Using color to highlight every possible status of something (shades of green, fading to shades of yellow, fading to shades of red...), is a bad use of color that is sadly over used and even expected by some.
FWIW
Also important to reiterate that the purpose of this type of display is very well handled by a bullet chart, which is definitely worth looking into migrating to somewhere along the way. Reference:
http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf
http://en.wikipedia.org/wiki/Bullet_graph
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
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.