The Quick and Dirty Guide to Creating a Color Theme

[zvi]

The purpose of this guide is to help you change the colors on a style using only the wizard; then save the color settings in a way (as a theme layer) that allows you to re-use them; and, last but not least, share your color settings for other people to use. Remember, if your theme is accepted as an official theme, you get two months of paid time.

You do not have to know any HTML, CSS, S2, or programming to use this method. The most advanced technical skill involved is cut and paste.

NB: This procedure will not work with Zesty. Zesty has to be rewritten to be a real official style.

1. Create a blank style to work with. You only need to do this the first time you create a theme layer for each layout. You can reuse the test style for subsequent theme layers for the same layout.
   1. Open Advanced Customization: Your Styles.
   2. Enter Test Style in the text box marked name, and select the Create button.
   3. Select a Layout from the dropdown menu. Change the name of your style to Test Style: Layout Name. Select the Change button.
   4. Do not select any theme or user layer. Simply select the Save Changes button.
2. Select the Use button for the blank style you wish to work with. (You make this selection in Advanced Customization: Your Styles.)
3. Open the customization wizard's style page, and pick the colors you want. I have found both Color Scheme Designer and the COLOURlovers palettes to be great starting places for color schemes. Look at your journal to make sure everything works the way you want it. Don't forget to check the archive (month and year) and tag pages. You may also want to check an entry page. Keep saving and checking until your color scheme is awesome.

   Laziness tip: If you have difficulty coming up with hover, active, and visited link colors, you may want to check out the Colour Palette Software by COLOURlovers. The tetrad option will give you three colors of the same saturation and value as the color you input, so they are often good options for alternate link colors.

   Accessibility tip: If you want to check to make sure that your foreground color can be read over your background color, do a color contrast check. If you are doing this accessibility check, make sure you are checking all possible combinations on your page. Don't forget about the active and hover colors, and remember that entry titles are links as well, and may (depending on the style) have the visited link color applied to them. (If the style you are modifying only indicates links with colors (i.e. gets rid of underlines), the accessibility guidelines state that the contrast ratio between the link color and the surrounding text should be at least 3:1.)

4. Return to Advanced Customization: Your Styles. Select the edit button for the Testing style you are building a theme for.
5. Your style now has a User layer: Auto-generated Customizations (#XXXXX). Make note of the number.
6. Open the layer for editing: http://www.dreamwidth.org/customize/advanced/layeredit?id=XXXXX [Replace XXXXX with the number you noted in the previous step.]
7. Copy all of the text below the line layerinfo "name" = "Auto-generated Customizations";
8. Paste this text into some third party application, and delete all of the lines which do not begin set color_. I find it most convenient to paste into a spreadsheet, which will allow me to alphabetically sort, but a text editor or word processor will work equally well. Save this text!
9. Return to your browser window, and delete all of the text you just copied. Save and compile. (This will leave this layer clean for you to build your next theme on it.)
10. Open Advanced Customization: Your Layers.
11. Create a layout-specific layer. Select the type Theme for the Layout in which you were just working.
12. Select the Edit button for the newly created theme titled (none), which is a child of the Layout you've been working in.
13. Give the theme a name. Add the following line:

    layerinfo "name" = "YOUR THEME NAME HERE";

14. In order to make your layer source visible to other people, copy and paste the following line.

    layerinfo source_viewable = 1;
    layerinfo is_public = 1;

15. Copy and paste the text you saved from your third party application. You should have several lines all starting with set color_.
16. Save and compile.
17. Return to Advanced Customization: Your Styles. Select the edit button for the Testing style you are building a theme for.
18. For the Theme, select the layer you just finished writing. Save changes. Take note of its number, YYYYYYY.
19. Check to make sure your journal looks the way you really want it to.
20. If you want to submit your style to dreamscapes, so it can become an official Dreamwidth style, copy and paste the following into an entry, adding your actual information as appropriate:

    Theme name/layout: YOUR THEME NAME/LAYOUT NAME
    Author: <user name=yourusername>
    Layout info: http://www.dreamwidth.org/customize/advanced/layersource?id=YYYYYYY
    Layout source: http://www.dreamwidth.org/customize/advanced/layersource?id=YYYYYYY
    <a href="http://www.dreamwidth.org/customize/preview_redirect?themeid=YYYYYYY">Preview</a> Image info: None

    Color only theme layers won't have any images.

    N.B. Post this entry using HTML, not Rich Text

    .

    Tag your work submission.

    Also, you will have to e-mail in a Contributor Licensing Agreement.

21. If there's a problem with your theme that you can't figure out, you may want to ask the good folks at style_system to help you figure out where you went wrong. Alternately, you can post it to dreamscapes as you would have in the previous step, but instead of tagging it submission, tag it draft and ask questions.

Comments

[cesy]

That looks like it could be submitted as a theme. The variation in font is interesting as well - to keep that, you'd just keep all the lines at step 8 instead of deleting the ones that don't start "set color", I think.