<HTML>
<HEAD>
<TITLE>Color.module -- How do I find the CSS id's and classes used to dipslay the preview.png?</TITLE>
</HEAD>
<BODY>
<FONT FACE="Verdana, Helvetica, Arial"><SPAN STYLE='font-size:12.0px'>Hello all,<BR>
<BR>
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. :) <BR>
<BR>
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.<BR>
<BR>
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.<BR>
<BR>
Background:<BR>
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) <BR>
<BR>
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. <BR>
<BR>
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.<BR>
<BR>
Issue:<BR>
Need the know the css tag for displaying the top header and the bottom header colors.<BR>
<BR>
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).<BR>
<BR>
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?<BR>
<BR>
Thanks in advance,<BR>
Holly Ferree<BR>
<BR>
----------------------<BR>
Preview.css: <BR>
(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)<BR>
<BR>
#preview #gradient { <FONT COLOR="#0000FF"><-- what should I put here? #preview #_______?<BR>
</FONT> position: absolute;<BR>
left: 0;<BR>
right: 0;<BR>
top: 17px; <FONT COLOR="#0000FF"><-- this space gives the top header the base color <BR>
</FONT> height: 48px; <FONT COLOR="#0000FF"><-- since the name is #gradient, this puts a gradient below the top header<BR>
</FONT> z-index: 2;<BR>
}<BR>
<BR>
*******************************<BR>
Color.inc:<BR>
<BR>
fill' => array(<BR>
'base' => array(0, 74, 900, 426),<BR>
'top' => array(0, 0, 900, 17),<BR>
'bottom' => array(0, 17, 900, 48),<BR>
),<BR>
<BR>
Example of the preview.png layout using Belgian Chocolate theme:<BR>
------------------------------------------<BR>
Top header, dark brown, #6c420e, height: 17px<BR>
------------------------------------------<BR>
Bottom Header, red, #971702, height: 48px;<BR>
<BR>
------------------------------------------<BR>
THIS AREA IS DISPLAYING PERFECTLY<BR>
<BR>
Content Area<BR>
<BR>
base color, tan #d5b048<BR>
height: auto;<BR>
<BR>
Link color: dark brown #6c420e<BR>
Text color: dark red, #494949<BR>
------------------------------------------<BR>
</SPAN></FONT>
</BODY>
</HTML>