Skip to:
Content

BuddyPress.org

Opened 13 years ago

Closed 11 years ago

Last modified 8 years ago

#3415 closed defect (bug) (duplicate)

Contrast on the error and positive actions needs to be increased a little

Reported by: karmatosed's profile karmatosed Owned by:
Milestone: Priority: normal
Severity: normal Version: 1.5
Component: Templates Keywords:
Cc:

Description

First up the red / errror:

On some screens the red used doesn't quite get the message standing out so my suggestion would be to change to a slightly darker red (screenshots attached):

div#message.error p {
    background-color: #AE0000;
    border-color: #A71A1A;
    clear: left;
    color: #FFFFFF;
}

I'd also possibly suggest removing the gradients to increase legibility and make the messages stand out: see gradientsgone.jpg.

The flipside to this is the green / positive action:

The green itself jars on some screens and again has the contrast issue. Attached screenshots.

My suggestion would be:

div#message.updated p {
    background-color: #D5F082;
    border-color: #B6E527;
    color: #4C610D;
}

See lightgreen.jpg

That's if we keep the light / dark text. I'd suggest reflecting the error message though and going dark green / white text for instance:

div#message.updated p {
    background-color: #547000;
    border-color: #496100;
    color: #FFFFFF;
}

See darkgreen.jpg

I'd also suggest considering the gradient removal too see greennogradient.jpg

I'm marking as a defect but quite happy if this becomes a enhancement - I was on fence which it fell in however it does impact the theme on some screens so therefore leant towards bug.

Attachments (13)

bettercontrast.jpg (40.7 KB) - added by karmatosed 13 years ago.
clash.jpg (51.3 KB) - added by karmatosed 13 years ago.
darkgreengradient.jpg (38.7 KB) - added by karmatosed 13 years ago.
gradientsgone.jpg (30.9 KB) - added by karmatosed 13 years ago.
greennogradient.jpg (42.5 KB) - added by karmatosed 13 years ago.
lightgreen.jpg (35.4 KB) - added by karmatosed 13 years ago.
greenissue.jpg (53.5 KB) - added by karmatosed 13 years ago.
lighterred.jpg (74.5 KB) - added by karmatosed 13 years ago.
redissue.jpg (58.3 KB) - added by karmatosed 13 years ago.
softerred.jpg (105.0 KB) - added by karmatosed 13 years ago.
suggestionone.jpg (71.3 KB) - added by karmatosed 13 years ago.
suggestiontwo.jpg (69.8 KB) - added by karmatosed 13 years ago.
differences.jpg (90.5 KB) - added by karmatosed 13 years ago.

Download all attachments as: .zip

Change History (26)

@karmatosed
13 years ago

#1 @djpaul
13 years ago

(In [4906]) Don't set opacity on from status message paragraphs. See #3415 and #3241

#2 @DJPaul
13 years ago

Part of r4688 has inadvertently changed the styles for these elements; I'm just about to commit a change to correct it back.

The green you've suggested is sort of lime colour; I don't think it fits well with the blue and green colours we use elsewhere in BPD. I'd love to hear what you think of the trunk after you svn up :)

#3 @karmatosed
13 years ago

I've had a look and still it jars a little on certain monitors.

You can see in redissue.jpg and greenissue.jpg

I have 2 suggestions.

  1. The red has a white text but the green doesn't and has the contrast issue. Perhaps using my solution in suggestionone.jpg would work. I'd also suggest a softer red I used in softred.jpg
  1. We go light for both: lighterred.jpg and suggestiontwo.jpg show this.

@karmatosed
13 years ago

@karmatosed
13 years ago

#4 @DJPaul
13 years ago

How did you make 1.5 look like greenissue.jpg?

#5 @karmatosed
13 years ago

I updated my group detail:

  1. Go to a group you are admin of
  2. Go to settings > change something or just hit save changes

However, happens for me on any 'positive' action can recreate on editing my profile too.

#6 @DJPaul
13 years ago

Which browser? My 'positive' green is totally different from yours: http://i55.tinypic.com/281sg37.png

Last edited 13 years ago by DJPaul (previous) (diff)

#7 @karmatosed
13 years ago

Safari but I still see contrast issues in Firefox although less :( I did a compare the browser to show you attached for reference.

#8 @DJPaul
13 years ago

What version of Safari, and what OS?

#9 @karmatosed
13 years ago

I just checked on my laptop (was using different machine) and it's showing as Firefox. The other one was < 5.1 so I think this was issue. Which in theory is ok I assume as support latest version of Safari right? Sorry about false browser alarm.

Just checked on Snow Leopard / 5.1 and see what you see. However I still think it should have contrast increased and maybe go white. It's still hard to read even with the browser oopsey aside.

Last edited 13 years ago by karmatosed (previous) (diff)

#10 @boonebgorges
13 years ago

  • Milestone changed from Awaiting Review to Future Release

#11 @karmatosed
11 years ago

In light of the UI refresh changes this can be closed or at least merged into that ticket as that ticket has a patch for them.

#12 @boonebgorges
11 years ago

  • Milestone Future Release deleted
  • Resolution set to duplicate
  • Status changed from new to closed

The ticket karmatosed is refering to is #4953.

#13 @DJPaul
8 years ago

  • Component changed from Appearance - Template Parts to Templates
Note: See TracTickets for help on using tickets.