Hello all,
I need some help figuring out the css id or class that are used in the preview.css (regarding the top header and bottom header areas) when using the color.mdoule. 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.
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 the 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 borwn) 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, 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; height: 48px; 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 ------------------------------------------