With base.png you can define as many fancy graphics as you like as black and white transparent png-24. By underlying it with colors you define you can theoratically slice out as many background graphics as you want in diverse colors.
You define which areas below the png to fill in what color in the "fill" array:
// Color areas to fill (x, y, width, height).
'fill' => array(
'gradient-block' => array(0, 0, 10, 250),
'header-bar' => array(0, 250, 10, 146),
'base' => array(0, 1590, 1000, 10),
'header-bar' => array(11, 250, 29, 146),
),
// defined colors from a color scheme
'base' => '#555555',
'gradient-block' => '#444444',
'header-bar' => '#444444',
Now what I have written here does not work at the moment: if you use one defined color (header-bar, in this case) for two different areas of recoloring, it does not color either of them, or only one, or maybe colors them completely in black. One can only use each defined color once in the fill array.
There are sure workarounds: the worst being defining a gazillion of colors, which makes it impossible for a user to change the colors in the backend due to sheer number.
The other one is to place graphics that shall get the same background color in adjacend regions and thus color a bigger area from which you cut out the images.
Neither is really satisfactory and also not necessary, since this is sure a bug. One should be able to define a color once and use it as many times as one wants to recolor base.png.
| Comment | File | Size | Author |
|---|---|---|---|
| #2 | colors.png | 79.37 KB | jarek foksa |
Comments
Comment #1
eigentor commentedAdding Tags
Comment #2
jarek foksa commentedIs there really a need for recoloring and slicing base.png? The same result can be achived much easier with pure CSS: set semi-transparent PNG image as background-image, set chosen color as background-color, and finally add chosen color to color.inc.
base.png slicing makes sense to me only if:
- I want to support IE6 (no transparent PNGs)
- I need a gradient that consist from at least two different color hues
In all other situations slicing and recoloring base.png seems to be an overkill. Perhaps instead of fixing this feature, it should be dropped.
Comment #3
eigentor commentedWell, basically you are right.
I have always been including IE6 in cross-browser debugging, and so I do now.
But what you say makes sense: technically it's the same.
Comment #4
sunLooks like another, hard to answer question regarding IE6 support.
Microsoft finally has EOL'ed IE6 recently. Color module is optional. I'd say it doesn't have to look nice in IE6. The page will be rendered, some colors/backgrounds will look wonky, but is still usable, so what?
Comment #5
jensimmons commentedThis doesn't affect Bartik, since we aren't using Color Module in this way.
Comment #6
tim.plunkettIs this really an IE6 only issue? If so, this can be closed.
Comment #7
devin carlson commentedIE6 support has been dropped from Drupal 8 as of #308865: Drop IE6 support in Drupal core.
Also, I use transparent background images with the color module as described in #2. They work just fine when combined with an IE6 .png fix.