Gradiance

[kaigou]

Theme name/layout: Gradiance
Author: Kaigou
Layout info: originally Tranquility III
Image info: 10 substitute icons (5 per style)
Layout url: http://www.dreamwidth.org/customize/advanced/layersource?id=87751&fmt=html

Users can change the 8-scale gradient, the page background, the default text color, the content/comment background color, and colors for active & visited links. As long as the contrast between the 4th color and the 8th color is enough to make text legible, the gradient can go from darkest-dark to lightest-light, or from medium-dark to medium-light, depending on the amount of contrast required. The CSS looks a little funky as a result, but it makes for some easy cut-and-paste to create new color schemes.

The links all go to a test post on my journal, which has multiple replies of varying types (anon, registered, openid) so you can those in action.

Gradiance Amethyst — Gradiance Amethyst Verso
Gradiance Carmine — Gradiance Carmine Verso
Gradiance Celadon — Gradiance Celadon Verso
Gradiance Cerise — Gradiance Cerise Verso
Gradiance Cerulean — Gradiance Cerulean Verso
Gradiance Cobalt — Gradiance Cobalt Verso
Gradiance Emerald — Gradiance Emerald Verso
Gradiance Forest — Gradiance Forest Verso
Gradiance Fuschia — Gradiance Fuschia Verso
Gradiance Grayscale — Gradiance Grayscale Verso
Gradiance Halaya Ube — Gradiance Halaya Ube Verso
Gradiance Harlequin — Gradiance Harlequin Verso
Gradiance Heliotrope — Gradiance Heliotrope Verso
Gradiance Indigo — Gradiance Indigo Verso
Gradiance Jade — Gradiance Jade Verso
Gradiance Lemon — Gradiance Lemon Verso
Gradiance Maize — Gradiance Maize Verso
Gradiance Majorelle — Gradiance Majorelle Verso
Gradiance Midnight — Gradiance Midnight Verso
Gradiance Moss — Gradiance Moss Verso
Gradiance Nadeshiko — Gradiance Nadeshiko Verso
Gradiance Ocean — Gradiance Ocean Verso
Gradiance Ochre — Gradiance Ochre Verso
Gradiance Olivine — Gradiance Olivine Verso
Gradiance Peach — Gradiance Peach Verso
Gradiance Pistachio — Gradiance Pistachio Verso
Gradiance Racing — Gradiance Racing Verso
Gradiance Sangria — Gradiance Sangria Verso
Gradiance Sapphire — Gradiance Sapphire Verso
Gradiance Sienna — Gradiance Sienna Verso
Gradiance Sky — Gradiance Sky Verso
Gradiance Slate — Gradiance Slate Verso
Gradiance Spring — Gradiance Spring Verso
Gradiance Storm — Gradiance Storm Verso
Gradiance Thistle — Gradiance Thistle Verso
Gradiance Vermilion — Gradiance Vermilion Verso
Gradiance Viridian — Gradiance Viridian Verso

The substitute icons fill in when there's a blank for an anonymous poster, an RSS feed, a DW user, or an OpenID user. The last image the blockquote background. [ETA: after further testing, the regular icons look fine even on a reversed setup, so not seeing reason to do that extra bit.]



There are still some outstanding issues that I can't figure out. None of them are really deal-breakers, but if I can find answers to these questions, I'll edit the existing code to reflect the fixes.

I'm presuming separate layouts for reversed (light-on-dark) color schemes, but it seems like it'd be a LOT easier to give users the option of reversing the colors, with a simple yes/no question (which would then flip color_001 for color_008 and so on). Or is it better to treat each as separate themes, on the grounds that users wouldn't be aware ahead-of-time that the colors can be easily reversed in the wizard?

...I think that covers it!

Comments

[foxfirefey]

OMG I love this.

[zvi]

I'm not sure what you're doing exactly, but you are changing the background color for parts of the navbar, but I don't think all of it, and I'm not sure if you're changing the text color at all.

I think the policy is to leave the navbar alone so that it only gets the navbar styling.

[wyntarvox]

I really like how these look! I just have a few things to clear up.

What's the logic for having two separate layouts with differring levels of customisability? Or maybe to rephrase, what's the logic behind restricting the customisability of this layout?

Make sure when you re-submit when you're ready for someone to patch it to add it to the site you pull out any colour definitions from the layout layer. Our policy is to only make colour definitions in theme layers. Also make sure you indicate which theme you want to be the default theme for your layout.

I also feel a bit weird about defining the custom text content; in my opinion, this should be left blank by default and left up to the user to decide whther or not he/she wants to use it. I kind of feel the same about the link text ('# voices', etc), especially since they're pretty specific. I feel like these should be pretty generic, but that might just be me.

re: 3.: If you really want the permalink to persist (even though it and the comment link point to the same place), what you could do is change the function CommentInfo::print() to remove the "} else {" block around the permalink.

[turlough]

I like this layout very much. And I LOVE that it got the username under the icon! It's where I'm condition to look for it so most of DW's styles always confuse me :-)

Re # 1: I think Drifting is the only other DW style that's got the username under the icon (on the reading page, not the recent entries view). I don't know how they've solved it but it should be in the style code somewhere I presume. They don't use the "posting in" line either and personally I think it's rather unnecessary when the names are put under the icon like that.

[kaigou]

Hrrm. You can look up $*color_xx->saturation() and/or $*color_xx->lightness() (which both return ints) Would comparing that for two colors be enough to go on for light-on-dark versus dark-on-light?

Where would I find that?

It seems like the best place to have the regular vs. reversed question would be on the main page/tab of the wizard, under "Basic Options" of Presentation. Using syntax pattern, it might go something like:

set page_contrast = "dark-on-light|(dark-on-light)|light-on-dark|(ight-on-dark)";

I'm not sure where it's setting values for those -- the paren or outside paren -- to change one to a 1/true and the other to a 0/false. Part of that is b/c if, say, I were to use $*color_xx->saturation() as comparative, where/how would I set that up in the wizard to make it intuitive for user that this option reverses the colors?

Y'know, maybe the reversed versions should just be completely different styles (ugh, but still), because currently if someone's looking for a reversed style, there's no way to know you can get that from a regular style. No tags or notes or anything on a style's capabilities, so I'd expect most people wouldn't know ahead of time that they should look at a regular style and find the reverse option.

UNLESS reversal were a more widespread option, in which case, more styles might/could use it -- but even then, you'd run into users looking for the reversal option, potentially, and having to select a style before finding out whether or not it's available.

The upshot is that it seems to me that unless there are tags or some other kind of notation about a style's options, the best route at this time is just to do completely different styles for regular and reversed. Bleah.

[danceswithcats]

Oooh, preeety!

I'm viewing on Firefox 3.5.5 for Windows XP at 1440 x 900 resolution, and it's working great.

[baggyeyes]

I noticed that the entry options :

* Edit Entry
* Edit Tags
* Add Memory
* Share This Entry
* Track This
* Link
* Reply

Are on the side of the entry, and beneath. I like the side option. Obviously having two is a bug.

Errors?

[ninetydegrees]

Kaigou, I wanted to check these so that I could hopefully remove the 'needs testing tag' and file a bug to get them patched but all the links lead to 404 pages. :/