Sprucing up Gradation Vertical

[foxfirefey]

Hey people, I'm sprucing up Gradation Vertical's appearance in places (with the bonus side effect of improving site themes in general). Bugs I have patches for or will shortly have patches for include:

Bug 878 - Inbox has tropo-red colours hard-coded -- This is where the folder you've selected in the inbox is pink no matter what.
Bug 1255 - Some settings text too dark in Gradation -- Some settings pages are black on black and not readable
Bug 2238 - Gradation Vertical Support unreadable or not dark schemed -- The Support area is not well themed and the Support Board nigh unreadable.
Bug 2243 - Adult content div box colors hardcoded -- not sure what colors to end up making these for all the different schemes (suggestions appreciated), but the adult content page has the warning box color hardcoded to something unreadable on Gradation Vertical.

If anybody else is using Gradation Vertical, please let me know if you run into any awkwardly styled spots not mentioned above.

Hopefully this will also help lead to Gradation Horizontal--denise has the mockups still, and the logo done for Gradation Vertical should work for Gradation Horizontal! The bug for that is here.

ETA: Other bugs filed:

Bug 2204 - RTE on update page does not display properly in gradation-vertical

Comments

[truelove]

I am aware of at least one other bug that's Gradation Vertical theming related, cos I filed it myself: Bug 2204 - RTE on update page does not display properly in gradation-vertical.

If the logo for Gradation Horizontal needs any reworking, lemme know! I've still got the .psd files. (The main reason I worry is that the gradient background is hard-coded into the logo image; transparency was just not going to look right, so yeah.)

[foxfirefey]

...ooooh the RTE. Looks like changing the text area itself should be fairly easy, but that it is difficult to change the toolbar area, because the images are NOT meant to go on black.

[truelove]

I figured that one was going to be a bit thorny! But better y'all are aware of it as an issue! (I'm not even sure why I checked the RTE out, tbh! Am a card-carrying member of tits against the RTE, etc. *g*)

[foxfirefey]

Well, this might be an opportunity to replace the icons in there with things from the Silk set, to match the rest of the site.

[branchandroot]

Yeah, the Support area is kind of a problem for all site schemes, since it's currently styled at the tag level with colors that really don't match anything. Those are lovely. What would be fantastic would be to overhaul those pages and strip out the tag-level css and add Support css to each of the schemes. But that's a *much bigger* bug.

[foxfirefey]

Hmm, I don't think it'd be that hard, really. The big thing would be choosing the colors for each scheme.

[branchandroot]

*wry* Yeah, that was the big part I was thinking of.

[foxfirefey]

To be honest, they can pretty much stay the same in all of the light themed ones save for some subtle tweaks, since the colors have particular meanings for people using support.

http://www.dreamwidth.org/support/help.bml?usescheme=blueshift
http://www.dreamwidth.org/support/help.bml?usescheme=tropo-purple
http://www.dreamwidth.org/support/help.bml?usescheme=tropo-red
http://www.dreamwidth.org/support/help.bml?usescheme=celerity
http://www.dreamwidth.org/support/help.bml?usescheme=lynx

...and here's the horrible one:

http://www.dreamwidth.org/support/help.bml?usescheme=gradation-vertical

[branchandroot]

*considering* Would it be a good idea, do you think, to just change the /link/ colors to something consistent and non-offensive? Those are the part that really clash worst, in most cases.

[foxfirefey]

Yeah, that's what I meant by subtle changes, heh. But, in Gradation's case, it's something of an accessibility issue in some ways, since some people need a light-on-dark to help prevent migraines and whatnot, so simply changing the link colors is not enough.

[branchandroot]

Seriously. That is, um. Dreadful. *somewhat embarrassed to have let that slip by*

[foxfirefey]

Don't be so hard on yourself, it's hard to check for everything!

[niqaeli]

I switched to Gradation the moment it went live and... yeah. I mean, super short-term, changing the link colours to something readable would be a start, but that's definitely still an awful lot of hard-coded light background. *wry*

(I personally keep a zappy bookmarklet on hand to magically make things readable, but it's always frustrating to have to hit it the second a page loads, etc.)

[foxfirefey]

Actually, my patch makes the support area in Gradation look more like this:

[niqaeli]

Oh, that's definitely much better!

[sophie]

What do the row colours mean there? I would normally take red to mean 'closed', but it's open in that example and I can't see any difference between the red and the green req.

The blue and yellow are obviously 'selected' and 'AAC', but don't know about the red.

[foxfirefey]

I don't know what red is, either--all I know is that there's a rule for it that needed to be translated, so I used Firebug to change the class. It actually is a green row that I just changed the class of to .red. I'm not sure in which circumstances it shows up.

[baggyeyes]

Just the main support page the user sees is also pretty hard to see.

http://www.dreamwidth.org/support/

One more.

http://www.dreamwidth.org/interests?view=popular

[foxfirefey]

Support has a patch in, second goes on the list!

[baggyeyes]

Yoinks. That's...really horrible.

[peoppenheimer]

Fey, just to let you know that I am using gradation vertical, if you want a comparatively naive tester for something.

[foxfirefey]

Just keep an eye out for pages that don't look quite right while you browse around the site, and report them if they're not reported already.

[foxfirefey]

The header on shop/history.bml is a bit off key in Gradation:

http://www.dreamwidth.org/shop/history.bml

[foxfirefey]

Highlighted rows on this are not readable:

http://www.dreamwidth.org/manage/circle/edit

[foxfirefey]

If the backgrounds of the selections here could be light-on-dark, that would be best:

http://www.dreamwidth.org/manage/circle/editfilters?style=site

[foxfirefey]

And here:

http://www.dreamwidth.org/manage/tags?style=site

[foxfirefey]

Headers in the import page unreadable:

https://www.dreamwidth.org/tools/importer

[foxfirefey]

"Light gray gradient" unreadable:

http://www.dreamwidth.org/customize/options?style=site

[foxfirefey]

Headers unreadable when things are in the shopping cart:

http://www.dreamwidth.org/shop/cart

[foxfirefey]

And here:

http://www.dreamwidth.org/shop

[foxfirefey]

Browsing S2 styles is unreadable for functions:

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

[foxfirefey]

Ban user list is dark-on-light:

http://www.dev.memewidth.org/manage/banusers

[baggyeyes]

Another one: The account settings

http://www.dreamwidth.org/manage/settings/?cat=privacy

http://www.dreamwidth.org/manage/settings/?cat=mobile

http://www.dreamwidth.org/manage/settings/?cat=othersites

Sorry for the multiple edits. :/

[foxfirefey]

Edits no problem! Those already have a patch in for them.

[niqaeli]

Tossing this up here instead of on zilla, since it seems to be where you're tracking stuff.

The tags manager: http://www.dreamwidth.org/manage/tags

[ldybastet]

It doesn't matter to me that it has some bugs, I love Gradation anyway! It saves my eyes so much!!! :D I'm very grateful for its existence.

[foxfirefey]

I just want to fix them, and add a version with a horizontal menu! I think there's also talk about making the light a tiny bit darker grey (#CCCCCC maybe), so that it's easier on the eyes and not quite as super high contral.

[baggyeyes]

As well, the community admin panel:

If anybody has a community they admin to, maybe they could have a look? Or do you want a screen shot?

http://www.dreamwidth.org/community/settings?authas=

[foxfirefey]

Hrm, is it the lighter row you have a problem with?

[baggyeyes]

It seems to be any text that is in bold or strong; the heading of a setting, for example.

One other thing, the style switched between bold and strong, so you have to keep an eye out for that.

[baggyeyes]

Community management:

http://www.dreamwidth.org/community/settings?authas=USERNAME

Non-highlighted:


Highlighted:



Mobility tab of Account Settings:
http://www.dreamwidth.org/manage/settings/?cat=mobile



(The highlighted text shows what is hidden)

[foxfirefey]

Oh dear--thanks for this! I think I misunderstood you about community management earlier, and tweaked the wrong thing, ha.

[baggyeyes]

:D I should have added screen dumps earlier, but I've been functioning with a deficit of spoons.

Round 2:

[foxfirefey]

http://www.dreamwidth.org/support/see_request?id=4616 -- FAQ insert in Support

http://www.dreamwidth.org/community/settings?authas=bechdel_test -- Community settings (What baggyeyes was telling me.)

[bunnyhero]

i noticed something that only occurs when i am using gradation vertical.

the "help" link at the very bottom of every page links to "http://www.dreamwidth.org/manage/settings/$LJ::SITEROOT/support/", which results in a "page not found."

thanks!