chiming: (Default)
Elizabeth Baker ([personal profile] chiming) wrote2012-03-17 02:33 pm

Guide to: Themeing Abstactia

Out of date!

DW has recently changed their themes so that all colors are giving in rgb values rather than HEX. As such, the following guide needs some adjustments that I have not yet made!

If anyone's curious how I do it, and for my own reference...

1.) Create a new background image. This can be anything; just make sure it's the same width / height and that it 'fades' into a solid color at the left, right, and bottom borders. (The solid color it fades to will be your background color.)

Alternatively, you can use one of the existing Abstractia background colors and play with the hue in PhotoShop or your preferred program. Either of these methods is totally acceptable. ♥

2.) Create the transparent images that cause most of the visual 'oomph'. This step can be safely skipped if you're creating a dark theme, because the default set will work just fine. (Copy an existing theme file's background images section.) However, if you're creating a light theme, I find that just using white and black is too dull, so I create new files in the appropriate color.

Because creating images is an annoying thing to do while you're playing around with shades and hues, I find it easier to use HSLa to replace the images while I'm picking colors. (Warning: a browser with CSS3 support is required, like the latest version of Chrome / Firefox / Safari.)

So, go to your journal and select an appropriate "light" Abstractia theme, like Sky or Au Lait. Then go to the Custom CSS section, and add this in, modifying it as needed:

HSLa can be a bit tricky, so here's the run-down: H is hue, S is saturation, and L is lightness. Because PhotoShop's coloring can be a bit inexact, I like to use the Eyedropper tool to grab a color from my background image, copy its HEX value, and then head over here to convert it. (If that link is broken, do an internet search for "hsl to rgb to hex".)

The a in HSLa just means its opacity, and is in a decimal value. (.4 = 40%, etc.)

Now you have a HUE value, which will be very important from now on.

Once you're done tweaking the colors and have them to your satisfaction (you can probably leave my SAT and LIGHT values, but feel free to play around), throw your HSL back into that converter and grab a HEX.

Create a 1x1 pixel image in PhotoShop or whatever program you're using and fill it with the HEX value color. Then adjust its opacity to match each of the different 'images', and save it iwth the appropriate filename. (The comments I've put into the CSS should help!)

3.) Set up colors with the Color Customization field. This is the easiest step, since you can probably just grab each color, open PhotoShop's color menu, and paste it into the field, adjusting the HUE to get a new HEX for each field.

4.) With all of the above done, copy one of the existing Abstractia theme files (like Au Lait). Find and replace!

Now you have a theme layer!

More instructions, step-by-step for creating theme layers / submitting themes / etc., are forthcoming. This is just a quick-and-dirty list for people who already know the rest of it but might not be sure where to start with this particular layout.