Twenty Fourteen: Improve the Basic Child Theming Experience

[celloexpressions]

As a default theme, Twenty Fourteen should be very easy to customize with CSS and child themes. For visual changes, this means our CSS should be a simple as possible, so that developers (and the many new devs or non-devs that will try to make tweaks) don't have to hunt down hundreds of selectors to make common, seemingly simple changes.

Twenty Fourteen is okay at this right now, but we can do a bit better and will save a lot of time and effort by removing things that we don't need but everyone else would need to override, for example.

The best way to approach this is to try to make changes that you might want in a child theme (universally bigger fonts, for example), then looking for places where it seems like there's too much to override. In those cases, check whether there are redundant rules in Twenty Fourteen's style.css. Redundant rules are places where a child element has identical rules to a parent that could be removed without changing anything visually (do make sure the rules aren't needed for responsive or other dynamic components).

For an initial pass, I've identified a few potential simplifications relating to the process of changing the header, sidebar and footer from a dark to a light background. Screenshots and patches coming.

[celloexpressions]

Remove unnecessary color layer in header nav (same as header background)

[celloexpressions]

Before and after of header nav issue -- removing our unneeded property saves people needing to hunt it down

[celloexpressions]

Fix site description padding with header shadow (this IS a visual change, but should be considered because it's almost an issue for vanilla Twenty Fourteen - shadow overlaps text a bit but we're on a pure black background)

[celloexpressions]

Site description overlaps header shadow if background color is *anything* but #000

[celloexpressions]

I found three issues in the header/sidebar/footer for color changes:

• unneeded selector on the header nav
• site description is set to overlap the shadow on the header. We should probably give it some more padding/margin; it's only not an issue for us by default because the background is pure black (#000), anything else and it'll show up.
• it is almost impossible to figure out how the sidebar's background color is set. Took me forever, and I'm pretty familiar with Twenty Fourteen and using tools to find where style rules are set. If Chrome hadn't recently added pseudo-elements to the document tree in their inspector, I wouldn't have found it. On top of the fact that we're using a pseudo-element, the rule is burried 3500 lines into our main css file. I think this will be one of the most common things people will want to change, and the solution is simple if you know it. We either need a good way of documenting this, or to use a different, more cumbersome method for setting the sidebar background color (I do really like how this is being done, haven't seen this approach before, but it's unexpected).

See patches and screenshots above for the first two. The third one is certainly fixable, but will be less eloquent. We need to decide if we'd rather have a solution that's beautiful code or easy to customize for coloring the left sidebar background.

[celloexpressions]

Custom CSS I used for testing header/sidebar/footer color changes.

[iamtakashi]

@celloexpressions,

I prefer to remove the shadow rather than moving down the site description. I'd like to keep it to be aligned with the bottom of the header. We can remove the background color from .primary-navigation as you suggested.

[celloexpressions]

Remove header text shadow to fix issues with non-black sidebar background colors and give a cleaner look.

[celloexpressions]

First two things have patches and are good to go. Third needs discussion.

Additional areas we should audit:

• Featured Content colors
• Main content colors
• Changing font sizes
• Changing site width
• Centering the site in the browser

And anything else that would be a very commonly made change in child themes/custom css.

[iamtakashi]

I don't think we need to alter how the left sidebar is colored. It might not be a familiar way for some but it works very well and we should educate users by doing this rather than taking an expected, hacky, cumbersome method.

[celloexpressions]

Create the MediaElements players' time rail and volume container backgrounds with a semi-transparent color so that it adjusts with the player background color if that's changed.

[celloexpressions]

Replying to iamtakashi:

I don't think we need to alter how the left sidebar is colored. It might not be a familiar way for some but it works very well and we should educate users by doing this rather than taking an expected, hacky, cumbersome method.

I agree, let's try to document it somewhere, though (Codex page?).

Just added a patch that improves the handling of the MediaElements players' gray color.

[iamtakashi]

I'm ok with committing the following patches.

• ​26188.header-nav.diff​
• ​26188.site-description.2.diff
• ​26188.mediaelement-players-inner-background.diff

[lancewillett]

In 26579:

Twenty Fourteen: CSS fixes, props celloexpressions. Fixes #26188.

• Remove unnecessary color layer in header nav (same as header background).
• Fix site description padding with header shadow.
• Create the MediaElements players' time rail and volume container backgrounds with a semi-transparent color so that it adjusts with the player background color if that's changed.