[development] Color.module -- How do I find the CSS id's and classes used to dipslay the preview.png?

[Holly Ferree]

Please email answers/suggestions to hferree at gmail.com since I don't know the
time required for the mailing list email to activate.

Thanks,
Holly
------------------------------------------------------

Hello all,

I sent this to the themes group and didn't get any repsonses, so I'm sending
it here hoping that someone might know the answer since it is more of a
coding question. :)

Does anyone know where I can find a list of the id's and classes used in
preview.css to display the preview.png as an exact small replica? I need to
find the classes for the top header and the bottom header.

I have not found any documentation specifying the id's and classes that can
be used when styling areas in the preview.png, and am out of possible names
they could be. I've even looked at other themes that use the color module
and have not had success. I've read the color.module and it's css file and
no luck. The book page on drupal is helpful for creating the color.inc and
the base.png but misses the preview.png information. If a solution does
exist I plan on adding a comment to the page with the solution. My theme
colorizes perfectly so the what I thought as the hard part works.

Background:
I decided to learn more and create my own theme that integrates the
color.module. I have everything working and the colors switch to mercury,
ash, etc. without any trouble. :o) (very happy that it works)

But I am having difficulty with the preview.png showing correctly. It wants
to combine the top header color and the bottom header color in a gradient,
that is not used in my theme. And I figure that since the colors display
 properly when a different theme color set is chosen, it would be nice for
the preview.png to show the user an exact preview before they select their
new color set. 

My theme uses the top header (with brown) and the bottom header (with blue).
There is no gradient used, so I want it to reflect that in the preview.png.

Issue:
Need the know the css tag for displaying the top header and the bottom
header colors.

I have it semi working for the top 16px -- it shows the base color if I use
the css pasted below (but I want the top header color, since that is the
actual color it will be).

The bottom header area that is 48px high wants to display the gradient (top
header and bottom header...all I want is the bottom header color). Does
anyone know the correct css to insert so that it doesn't use the gradient
but uses the bottom header color?

Thanks in advance,
Holly Ferree

----------------------
Preview.css: 
(the top:17px allows the top header color to display perfectly :D. However
the height: 48px displays the gradient which I would like it to display the
bottom header color but I don't know the correct css tag. I've tried
changing #gradient to #bottom, #header, #headerbottom, and #header-bottom,
but no luck for either)

#preview #gradient { <-- what should I put here? #preview #_______?
  position: absolute;
  left: 0;
  right: 0;
  top: 17px; <-- this space gives the top header the base color
  height: 48px; <-- since the name is #gradient, this puts a gradient below
the top header
  z-index: 2;
}

*******************************
Color.inc:

fill' => array(
    'base' => array(0, 74, 900, 426),
    'top' => array(0, 0, 900, 17),
    'bottom' => array(0, 17, 900, 48),
  ),

Example of the preview.png layout using Belgian Chocolate theme:
------------------------------------------
Top header, dark brown, #6c420e, height: 17px
------------------------------------------
Bottom Header, red, #971702, height: 48px;

------------------------------------------
THIS AREA IS DISPLAYING PERFECTLY

Content Area

base color, tan #d5b048
height: auto;

Link color: dark brown #6c420e
Text color: dark red, #494949
------------------------------------------