WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#25300 closed enhancement (fixed)

Twenty Fourteen: Tone down the diagonal lines placeholders and recreate the pattern with CSS

Reported by: iamtakashi Owned by: lancewillett
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords: has-patch needs-testing
Focuses: Cc:

Description

Make the diagonal lines little faint so that it's not to harsh when there is no featured image.

However we should keep the contrast for hover state so that the lines are visible when we mouse hover the featured image. Also we should recreate the pattern image with CSS.

Related: #24883

Attachments (4)

25300.diff (2.1 KB) - added by iamtakashi 7 years ago.
Here is the patch to tone down the diagonal lines and to recreate the pattern with CSS.
25300.1.diff (1.7 KB) - added by iamtakashi 7 years ago.
Add fallback colors if gradients are not supported, and this patch is made from the WordPress root directory.
25300.2.diff (1.8 KB) - added by iamtakashi 7 years ago.
Another updated patch
25300.3.diff (3.1 KB) - added by iamtakashi 7 years ago.
Recreate the pattern with CSS and minor style adjustments. Also this patch includes the fix from buffler to stop the flashing.

Download all attachments as: .zip

Change History (15)

@iamtakashi
7 years ago

Here is the patch to tone down the diagonal lines and to recreate the pattern with CSS.

#1 @iamtakashi
7 years ago

  • Keywords has-patch needs-testing added

@iamtakashi
7 years ago

Add fallback colors if gradients are not supported, and this patch is made from the WordPress root directory.

#2 @lancewillett
7 years ago

  • Milestone changed from Awaiting Review to 3.8

@iamtakashi
7 years ago

Another updated patch

#3 @iamtakashi
7 years ago

Here is the before vs after comparison with the latest patch: http://f.cl.ly/items/0L1S1u1e0R3s1O0U3I2w/placeholder-change.jpg

#4 follow-up: @obenland
7 years ago

I don't think toning down the color is at all necessary. We agreed that we keep the pattern around, I like it the way it is.

#5 in reply to: ↑ 4 @iamtakashi
7 years ago

Replying to obenland:

I don't think toning down the color is at all necessary. We agreed that we keep the pattern around, I like it the way it is.

I thought you agreed what I proposed here :) http://core.trac.wordpress.org/ticket/24883#comment:11

What I'm intending here is try to find a middle ground because some disliked the lines from the beginning. And I actually like the lighter version now.

Color (or tone in this case) is subjective and it's difficult to make a decision that every one agrees in a community. I'd like to see others' opinions too. If you like either of them over another, please speak up here.

#7 @celloexpressions
7 years ago

I'd be interested in why one looks better or worse to eveyone else, if you can identify it, because then we can justify our decision one way or the other.

To me, it looks much better with the original, darker styling. The lighter styling seems nice, but it looks terrible on bad screens (too low-contrast, almost looks like a pixelated solid color) and doesn't match the high contrast of the rest of Twenty Fourteen. In the context of the bold black header/sidebar against the white page background, the faint lines seem almost accidental. Since we're consciously including them as a graphical detail, let's make them feel intentional; which, to me, they do with the current tone (could even go slightly darker).

With the darker weight, I think they work better for the purpose of looking good and present-by-design in the absence of a featured image, while the lighter variant feels more like something's missing and it's only there to make you set a featured image.

(Also, test it with the patch from #25363, it makes a big difference on the clarity of the lines when scrolling.)

Either way, if we change the color on hover, that desperately needs a transition. I believe the best approach is to set it to the darker color and only change the opacity, so that we can apply a transition to the opacity. It would be nice if the existing weight/tone went lighter on hover, since that happens when there is a featured image.

#9 @iamtakashi
7 years ago

Discussed in the office hours today and we've decided to keep the original color but replicating the pattern with CSS. IRC log

I'll update the patch including the tip from buffler in #25363

Last edited 7 years ago by iamtakashi (previous) (diff)

@iamtakashi
7 years ago

Recreate the pattern with CSS and minor style adjustments. Also this patch includes the fix from buffler to stop the flashing.

#10 @lancewillett
7 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

In 25610:

Twenty Fourteen: redo the featured image background pattern with CSS plus minor style adjustments. Props iamtakashi, fixes #25300. This also fixes #25363, props buffler.

#11 @lancewillett
7 years ago

In 25614:

Twenty Fourteen: remove unused images, following r25610. See #25300.

Note: See TracTickets for help on using tickets.