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

[kerravonsen]

Thank you! When the weekly roundup post encouraged people to submit colour schemes, and I went over to dreamscapes seeing all these Tabula Rasa submissions, I silently wailed and said "but how am I supposed to submit a colour scheme?". And now I know.

[zvi]

You're welcome.

[afuna]

Humm, that reminds me. *edits the dreamscapes submission guidelines to make it clear that color themes "count" as submissions*

[afuna]

Edited my previous entry to link to this one!

[foxfirefey]

Thank you!

[zvi]

Welcome!

[denise]

Thank you so much for writing this up!

[zvi]

You're welcome.

[feuervogel]

Is there a way to do this from an existing custom style?

[zvi]

It depends on how the style was customized. It's more complicated to create themes and layouts from CSS modifications of an official style, but it's possible to get someone to do the conversion for you, if you're starting with one of the official styles.

[feuervogel]

What I've done for my current layout is change the hex colors in the wizard, based on Transmogrified. It's not perfect at the moment, but it's easier than mucking about with a blank slate, so to speak.

[zvi]

You can't do it quick and dirty, in that case. The colors are being selected in two different files when you do it that way, and you won't be building on top of the higher level (theme) file when you move the lower level (user) customizations into a separate theme file. You can only have one theme file at a time.

What you could do is write down all of the hex colors that you selected doing it your way, and then go back and do it this way, writing in all of the hex colors on a clean slate, and then proceed from there.

[cesy]

Step 1.2 apparently fails if you have a free account - you've already reached the maximum number of styles.

[zvi]

You should be able to do it for one style, with a free account. Has that account already previously created a named style?

[cesy]

Hmm. It has Transmogrified, and I don't think I've ever changed or customised anything on that account style-wise. Possibly there's still a layer I need to delete first anyway.

[alyndra]

I've never created a named style either, just played around with a few preexisting ones, and I had this same issue. Should I file a bug report? I was hoping to post my current journal colors as a draft to see if they might be okay for a theme submission, but I don't want to delete everything I've been fiddling with the past couple days just to create a test style.

Any suggestions?

BTW, this is what I got (it looks like it's counting every style I've ever tried on my journal, modified or not):

Error
You've reached your maximum number of styles. You have 14 current styles of 1 maximum styles.

[zvi]

Go to the advanced area and delete your customizations from styles you've tried previously. It will treat those previous customizations as styles when counting how many you have.

[cesy]

Thank you for writing all this out! I just created a new light-on-dark version of Funky Circles, and will try and do similarly for the other styles that need it later.

[onyxlynx]

Hmmmm...maybe I should document the look of my page (I can't call it a style; I just played with the colors until I liked them).

[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.

[zvi]

No, you still don't need all of the lines at step 8. You want to keep the ones that start set_color_ and the ones that start set_font_

[ex_rising236]

Oooooh. Thank you! I'd been wondering about this sort of thing too, since I tend to play with colours entirely and I had a few ideas to submit, and I so don't know css. (Bookmarked this!)

[zvi]

Glad to help.

[bindingthreads]

This is such a fantastic and clear guide. Thank you for writing it up! I just made my first color theme using your guide. :D

[zvi]

You're welcome!

[bindingthreads]

Oh, I just realized something from the dreamscapes community.

Instead of:

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

layerinfo source_viewable = 1;"

Should it be this?

"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;"

I was trying to match the instructions from this post and their post, and I wasn't quite sure which was correct. :)

[foxfirefey]

You are going to want to use both!

layerinfo "is_public" = 1; -- If this is present and set to 1, that means the layer is available for other users to use in their own S2 styles. This makes previews work.

layerinfo source_viewable = 1; -- If this is present and set to 1, that means the layer's source is viewable to others. That doesn't mean they can use this layer like with is_public, although if they can see the source they can make a layer of their own with the code.

[bindingthreads]

Ah, gotcha!

Thank you for clarifying exactly what was going on in the code! It makes a lot more sense now that I know what it's setting. :D

[zvi]

I never said, but thanks for the catch. I did update!

[bindingthreads]

Oh, cool! :D

Thank you again for making this guide, it is ridiculously helpful. :)

[sevilemar]

Thank you so much for writing this up, it was a tremendous help. I've just completed my first color theme (for Blanket) and will submit to dreamscapes as soon as I can think of a name.

Ah, incidentally, they have this really neat way of displaying info, source and preview of what you've created at dreamscapes (goes after the "author" part of the template):

Layout: < a href="http://www.dreamwidth.org/customize/advanced/layerbrowse?id=xxxxxx">Info || < a href="http://www.dreamwidth.org/customize/advanced/layersource?id=xxxxxx">Source || < a href="http://www.dreamwidth.org/customize/preview_redirect?themeid=xxxxxx">Preview

[Ehm, I have no idea how to display code as plain text, so hope this is alright]

It's not in their profile (as far as I can see), but it's a cool thing to know nonetheless :)

[zvi]

Editing to add. Thanks.

[bindingthreads]

Just a quick note:

The copy and paste for submission says

"Layout info: http://www.dreamwidth.org/customize/advanced/layersource?id=YYYYYYY"

Which is the same as the link to the layout source. Did you mean this instead? :)

http://www.dreamwidth.org/customize/advanced/layerbrowse?id=yyyyyyy