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.

[foxfirefey]

Huh--for some reason this style ends up leaving a band of color on the nav strip!

[kaigou]

I just saw Zvi's comment on the same. No idea what I set to make it do that, since I tried to leave navbar stuff alone completely. Must be reading something else in the CSS and applying it, but I'll take a look in a bit and see if I can't clean that up. (I never turn the navbar on, so it completely slipped my mind. Whoops.)

[foxfirefey]

Looks like it's because of this bit:

.page-reply form, .page-entry form {
font-size:1em;
line-height:1.3;
text-transform:none;
}

Restrict it to #canvas or similar, and you should be fine! (Yay Firebug!)

[kaigou]

Yay!

...now if only I could figure out those last 6 things (well, 7, I guess) then I'd really be happy with the style.

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

[kaigou]

I didn't intend to touch the navbar, and tried not to style for it at all. Wierd. I'll take a look at that in a bit, and see what I can tweak.

Too-vague divs causing conflict, it seems.

[zvi]

Oh, classes, how they bemuse us all.

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

[kaigou]

Oh! The custom text is temporary (that's why it says TEMP) because that's MINE, and not necessarily something to keep. I mean, I'm using this style, and I happen to dislike the default text, so I put in my own. And since I keep switching colors as I'm checking, I figured I'd just put it in the base style rather than have to redo it each time.

Shorter version: no, that TEMP section doesn't stay in final version.

Yes, I know the title link points to the same place as the "link" link, but in terms of usability, it makes no sense to have a link that appears and then disappears, even if it is duplicated. Either don't have it at all (and use the title link consistently), or leave it in consistently. So I figure, leave it in consistently. I'll look for the commentInfo bit and twiddle with that.

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?

1. Because I had originally included gradient images as part of the backgrounds, and that means a slight drag on the server. It seemed like a free version shouldn't have that, or the extra bells.
2. The colors were narrowed down to just customizing the basic eight colors, after a bit of discussion on whether or not (and how!) to set up a page for customizing when the final tally comes to something over a 120 different entries for color, even though it's only 8 colors total. It's not that this is impossible, just a real headache, so it seemed like the best way to start was with a simpler version, and to leave the really customizable version as a special whistle.

Will it stay that way? No idea, really. It's just an idea I tossed out there, as a way to have a beefed-up version of the same layout as a treat for paid users.

[afuna]

I think for the link, it should be consistent among all layouts. Ummm. Perhaps throw it into suggestions, to see whether having there are any strenuous objections to having "link" always show?

I like the idea of having two different levels of customizability (as I've told you before *g* if forced to choose, I think I'd prefer simpler to defining everything at once), but hmmmm. I don't know if we're restricting any layouts to paid only. I don't actually know if we can, since even free accounts can just copy and paste (assuming they have the technical knowhow)

[wyntarvox]

Oh, sorry, I completely missed where you commented in the source the temp stuff. My mistake! :)

Like Fu said above, if you feel strongly that the permalink should always be there across all layouts, throw up a suggestion and we'll see where it goes. She has a good point about it being consistent across layouts.

Regarding the free vs. paid distinction, we don't currently have any paid-only layouts and I don't know what the policy/plan is regarding them. If we do go down that track, I don't think the fact that it's tricky to set up the customisation wizard is a good enough reason to make the layout paid-only. If the server issues are significant I guess so, but other than that it should be free as well in my opinion.

Having said that, I'm still not sold on having two different layouts for different customisation levels. I'm worried that it'll clutter the select style page with essentially-identical layouts for relatively little gain, unless I'm misunderstanding how it would work? In my opinion we should go with one or the other. Either let users fully customise it via the wizard, or have only the basic 8 colours customisable in the wizard and users who want more specific customisations can do so with custom layers/CSS.

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

Oh, thanks for the tip! I went and looked at Drifting, but I can't find what in its code lets it do the usernames without the 'posting-as', so I'm not sure where it's re-setting the default. I'm running into the same thing with the "(no subject)" default on comments, which wasn't there when I based the style on Tranquility III, but has returned now that I've got the style set up as completely independent. GUH, this stuff gets annoying sometimes. Or maybe that's just me.

[afuna]

The "posting in" can be nullified by setting the variable:

set text_posting_in = "";

(and then targetting the user tags in the userpic div and making them display: block).

And then the subjects in comments, remove this line from Gradiance:

set all_commentsubjects = true;

re: 4.) hmm, which text do you want to change? I think we're keeping that the same across
official styles so people can navigate easily, but I may be thinking of something other than what you're referring to



re: 6.) set text_tags_item_sep = "";



So I guess just 2.

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

[kaigou]

thanks! not sure where it stands in terms of conversion, but I'm pretty sure it's getting there. Slowly, but surely.

[baggyeyes]

I'm testing this now...(Gradiance-1) ...I used style=mine on this page, and it seems to handle long comment threads beautifully.

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

[kaigou]

Two is not a bug; two options are specifically part of the design. First, because if you're using a screen reader and skip to the post, you'll skip past the first menu and the code to let you skip 'back' to the menu (to then do something with what you've read) would be a hassle. Second, because if you have long uncut posts (or are reading it under the cut), having only the top-left means scrolling back up quite a ways to get to the menu to reply, edit, etc. And, if it's not obvious, having only the second horizontal post-entry menu rather defeats the purpose of the entire design: to have a vertical left-hand menu set aside for quicker scanning.

So it does mean that the menus are duplicates, but it's not nearly as noticeable unless you're dealing with a lot of posts that consist of just one line... then it does look like overkill. I, however, rarely post one-liners (and in fact post multi-multi-liners even before the cut and a whallop more after), so I designed it to satisfy myself and any other long-winded writers like me. XD

[baggyeyes]

I see...

So, are the navigation links

* Recent Entries
* Archive
* Reading
* Network
* Tags
* Memories
* Profile

on the header and on the sidebar for the screen readers as well? If so, cool.

I like the layout - it is very easy to read the entries. I haven't tried modifying it yet, though. Maybe soon.

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. :/

Re: Errors?

[kaigou]

*scratches head*

Erm, I'm not sure? I vaguely recall that I hit a limit of some sort when I started on the G-II version, and realized I could remove a chunk of... layers? styles? ... without it affecting the other type. (Obviously all that work did NOT go into my long-term memory.) However, I believe I have the styles (colors, that is) in a single text file, which I'd used to as cut-and-paste to create the variations.

Hmmm. Also, there are technically three styles -- the two gradiance versions, and then a customized version I've been using for the past six months, which may (or may not) be useful for conversion in terms of seeing how things worked in live environment, because there are some minor differences between the non-customized and a few tweaks I did to the customized version (which I tried very hard to make sure got translated back into the basic version, if it seemed universal enough, but... I'm sure you know how that doesn't always go).

I suppose I could re-upload but I'm not sure which parts to upload, since that -- if I recall correctly, that is -- means removing others to keep from hitting that limit. So if you don't mind dancing a short refresher course on my brainpan by just being very specific about what-and-what, I'd gladly wrap it up for someone else to convert/patch, whatever. XD

Re: Errors?

[ninetydegrees]

I suppose I could re-upload but I'm not sure which parts to upload, since that -- if I recall correctly, that is -- means removing others to keep from hitting that limit.

Only the layout URL works. :/ What we need is the color layers rather than the style previews. Also, you can also link to previews without making styles. Afuna's explained it here: http://dreamscapes.dreamwidth.org/23382.html.

(Just FYI, as a premium paid user, I think you can have up to 300 layers and 100 styles.)