Custom reading list colors

[afuna]

ETA: Posted! http://dw-nifty.dreamwidth.org/4374.html (with minor edits, including removing exclamation points *g*)


So many people do not know that Dreamwidth has had custom reading list colors for a long time now!

Putting up a draft entry, shall polish and post to dw_nifty or dw_styles (but I think I may need to do a "here's how to create and start editing your theme layer" first, which I keep putting off)

Enable the custom reading list colors defined by your style

Custom reading list colors are disabled by default, so you'll need to enable it, but it is available for all styles (with the exception of Zesty).

Go to Customize Journal Style, under "Additional Options" select "Use my custom reading list colors"

Most styles implement it as a border around the userpic. However, some styles, such as Negatives, have implemented it as part of the entry border. If you don't like where your style puts the custom colors, you can also customize them by setting some variables in the advanced customization area.

Customize reading list colors using provided presets

Several presets are provided so you can apply the custom colors to different sections of your journal without needing to know CSS. This is not customizable via the wizard, but can be set using a theme layer.

If you don't know how to create a theme layer, see these instructions for creating and customizing a theme layer (!! update to entry after it's been posted to dw_styles)

You'll first need to enable the "Use my custom reading list colors" option for your style, on the Customize Journal Style page, as above.

Then set the foreground and the background sections. For example, if you want to have the poster name be the foreground color, and the userpic border to be the background color, then:

set custom_foreground_element = "postername";
set custom_background_element = "userpic_border";

If you want something that makes the custom colors show up along the edges of the entry so that it's visible as you scroll down, you can set it so that the entry border uses the background color for that user; the links at the bottom will use the user's foreground colors:

set custom_foreground_element = "bottom_links";
set custom_background_element = "entry_border";

The complete list of valid values for the foreground location are: "subject", "userpic_border", "postername", "entry", "metadata", "bottom_links". The complete list of valid values for the background location are: "subject", "userpic_background", "entry_border", "metadata_background", "footer_border"

Use a custom template

If none of the preset locations look good to you, and you're comfortable with CSS, you can target specific elements, without needing to edit any functions.


First, enable custom colors as above.

Then, add something like this to your theme layer -- it sets the background color of the entry to the user's background color, and the foreground color of the entry to the user's foreground color:

set custom_colors_template = "%%new%% .entry-content {background-color: %%background%%; border: solid 1px %%foreground%%;}";

Or something like this, which makes the left border thick, and then sets it to a custom color, but does not set any foreground color:

set custom_colors_template = "%%new%% div.entry-content {border-left: solid 2em %%background%%; }";

Notice the %%new%% -- you should begin the template with this; it will be replaced with the poster's name later. Put %%foreground%% wherever you would put the hex code for the foreground color; put %%background%% where you would put the hex code for a background color.

One important note

The custom colors template and the custom colors element presets are mutually exclusive. If you have defined the custom_colors_template, then custom_foreground_element and custom_background_element will have no effect.

So, if you're setting the foreground and the background elements, first clear the custom colors template (which may be defined by your layout):

set custom_colors_template = "";

And then set your foreground and background elements:

# foreground is the postername, background is the userpic border same as above
set custom_foreground_element = "postername";
set custom_background_element = "userpic_border";

These instructions are applicable to core2 styles only; if you have imported your journal style from elsewhere, you'll need to look for instructions for that specific style.