zvi: self-portrait: short, fat, black dyke in bunny slippers (Default)
still kind of a stealthy love ninja ([personal profile] zvi) wrote in [site community profile] dw_styles2009-09-14 09:08 pm
Entry tags:

The Quick and Dirty Guide to Creating a Color Theme

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 [community profile] style_system to help you figure out where you went wrong. Alternately, you can post it to [site community profile] dreamscapes as you would have in the previous step, but instead of tagging it submission, tag it draft and ask questions.

kerravonsen: Stone egg on moss: "Art is Life, Life is Art" (art)

[personal profile] kerravonsen 2009-09-15 04:38 am (UTC)(link)
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.
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)

[personal profile] afuna 2009-09-15 05:05 am (UTC)(link)
Humm, that reminds me. *edits the dreamscapes submission guidelines to make it clear that color themes "count" as submissions*
afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)

[personal profile] afuna 2009-09-15 05:01 am (UTC)(link)
Edited my previous entry to link to this one!
foxfirefey: A firework bursts over the Las Vegas night skyline. (yay)

[personal profile] foxfirefey 2009-09-15 05:11 am (UTC)(link)
Thank you!
denise: Image: Me, facing away from camera, on top of the Castel Sant'Angelo in Rome (Default)

[staff profile] denise 2009-09-15 08:39 am (UTC)(link)
Thank you so much for writing this up!
feuervogel: photo of the statue of Victory and her chariot on the Brandenburg Gate (Default)

[personal profile] feuervogel 2009-09-15 12:15 pm (UTC)(link)
Is there a way to do this from an existing custom style?
feuervogel: photo of the statue of Victory and her chariot on the Brandenburg Gate (Default)

[personal profile] feuervogel 2009-09-18 12:56 am (UTC)(link)
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.
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2009-09-15 01:14 pm (UTC)(link)
Step 1.2 apparently fails if you have a free account - you've already reached the maximum number of styles.
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2009-09-15 10:01 pm (UTC)(link)
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: (Default)

[personal profile] alyndra 2012-02-07 03:34 pm (UTC)(link)
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.
cesy: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2009-09-15 01:34 pm (UTC)(link)
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: The words "Onyx" and "Lynx" with x superimposed (Default)

[personal profile] onyxlynx 2009-09-15 03:54 pm (UTC)(link)
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: "Cesy" - An old-fashioned quill and ink (Default)

[personal profile] cesy 2009-09-15 04:00 pm (UTC)(link)
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.
rising: a woodcut-style image of a knife held in a hand. (Default)

[personal profile] rising 2009-09-15 06:29 pm (UTC)(link)
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!)

[personal profile] bindingthreads 2011-05-28 02:52 am (UTC)(link)
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

[personal profile] bindingthreads 2011-05-28 05:36 am (UTC)(link)
Oh, I just realized something from the [site community profile] 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: A guy looking ridiculous by doing a fashionable posing with a mouse, slinging the cord over his shoulders. (geek)

[personal profile] foxfirefey 2011-05-28 05:47 am (UTC)(link)
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.

[personal profile] bindingthreads 2011-05-28 06:09 am (UTC)(link)
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

[personal profile] bindingthreads 2011-06-16 10:09 pm (UTC)(link)
Oh, cool! :D

Thank you again for making this guide, it is ridiculously helpful. :)
sevilemar: Rock On, Dean Winchester! (Default)

[personal profile] sevilemar 2011-09-26 02:52 pm (UTC)(link)
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 :)

[personal profile] bindingthreads 2011-10-28 06:38 pm (UTC)(link)
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