Change Color of "apply layout" button text in celerity

[faithofone]

Title:
Change Color of "apply layout" button text in celerity

Area:
customizing themes

Summary:
Change the color of the "apply layout" button text where you pick page layouts. When viewing in Celerity it's white on light green.

Description:
On this page: http://www.dreamwidth.org/customize/options

Way down at the bottom where you pick your page layout (how many columns), when you view it in Celerity the buttons are light green with white text (screen cap: http://img63.imageshack.us/img63/5407/51199333.png).

I'd like to see this changed to something with at least a little more contrast, if not be changed to have the buttons match all the other buttons on that page.

Poll #4943 Change Color of "apply layout" button text in celerity

Open to: Registered Users, detailed results viewable to: All, participants: 40

View Respondents

This suggestion:

View Answers

Should be implemented as-is.
31 (77.5%)

Should be implemented with changes. (please comment)
1 (2.5%)

Shouldn't be implemented.
0 (0.0%)

(I have no opinion)
8 (20.0%)

(Other: please comment)
0 (0.0%)

Comments

[snakeling]

When you look at the CSS for Celerity, there's something weird happening. The CSS that should apply to the buttons on this page is this bit:

.customize-button, .theme-item .theme-button, .layout-item
.layout-button {
    background: #DDDDAA;
    border: 2px solid #000;
    border-top: 2px solid #DDDDAA;
    border-left: 2px solid #DDDDAA;
}

Except that the CSS doesn't apply properly to either the Save Changes/Reset to Default buttons *or* to the Apply Layout buttons. And in fact, it seems the only page where buttons are styled, since about everywhere else (though admittedly I haven't checked everywhere) they aren't styled and left to take whatever look your browser wants them to have.

[faithofone]

Ah-hah! Thanks for pointing me in this direction. After about two hours of trying to get a grasp on how that layout page is put together, I figured out where the CSS is having conflicts with itself.

In: http://s.dreamwidth.org/stc/widgets/layoutchooser.css (used regardless of site scheme)

.layout-item .layout-button {
font-size: 11px;
color: #fff;
background: #f4717a;
border: 2px solid #f6828b;
border-bottom: 2px solid #c1272d;
border-right: 2px solid #c1272d;
}

In: http://s.dreamwidth.org/stc/celerity/celerity.css (clearly celerity only)

.layout-button {
background: #DDDDAA;
border: 2px solid #000;
border-top: 2px solid #DDDDAA;
border-left: 2px solid #DDDDAA;
}
.customize-button {
color: #222;
background: #DDDDAA;
border: 2px solid #999966;
}

As you can see here, the .layout-button is given a white font in the overall style sheet, but it isn't overridden in the celerity sheet.

For the borders, the second declaration for .customize-button in the celerity sheet is overriding the borders already set for it. But it isn't applied to all the buttons, just the specific ones for Save Changes/Reset to Default.

I'm not sure which button look is intended for all the buttons on that page, but if we change both declarations in celerity.css to the following, it'll render a consistent look across the entire page, making all the buttons colors match the current Save Changes button.

.customize-button, .theme-item .theme-button, .layout-item
.layout-button {
color: #222;
background: #DDDDAA;
border: 2px solid #999966;
}

[faithofone]

Eep, I really need to be more careful with my copy and paste, and pay for an account so I can edit my gosh darn comments.

That second code snippet should read:

.customize-button, .theme-item .theme-button, .layout-item
.layout-button {
background: #DDDDAA;
border: 2px solid #000;
border-top: 2px solid #DDDDAA;
border-left: 2px solid #DDDDAA;
}
.customize-button {
color: #222;
background: #DDDDAA;
border: 2px solid #999966;
}

[feathertail]

I guess posting in dw_suggestions does help change things, huh? ~.^