Skip to:
Content

BuddyPress.org

Opened 9 years ago

Closed 9 years ago

Last modified 4 years ago

#3315 closed enhancement (fixed)

activity/comment list button styles

Reported by: DJPaul Owned by: DJPaul
Milestone: 1.5 Priority: normal
Severity: Version: 1.2
Component: Templates Keywords: needs-patch needs-ui
Cc:

Description

After r4611, it's more apparent that the blue and orange button styles on these screens are hard to see, especially on the grey style of nested comments.

It would be nice to tweak the colour of these "buttons" so they are easier to see, and hopefully pass the WCAG guidelines.

Attachments (11)

01colours.jpg (78.6 KB) - added by karmatosed 9 years ago.
02colours.jpg (70.4 KB) - added by karmatosed 9 years ago.
2versions.jpg (150.2 KB) - added by karmatosed 9 years ago.
03colours.jpg (69.6 KB) - added by karmatosed 9 years ago.
05colours.jpg (70.6 KB) - added by karmatosed 9 years ago.
06colours.jpg (70.5 KB) - added by karmatosed 9 years ago.
explained.jpg (236.9 KB) - added by karmatosed 9 years ago.
buttons.jpg (163.8 KB) - added by karmatosed 9 years ago.
070511-buttons-01.jpg (52.7 KB) - added by mercime 9 years ago.
slight change to buttons
070511-buttons-02.jpg (58.7 KB) - added by mercime 9 years ago.
slight change to button with sprite
sprite.png (1016 bytes) - added by mercime 9 years ago.

Download all attachments as: .zip

Change History (21)

@karmatosed
9 years ago

@karmatosed
9 years ago

@karmatosed
9 years ago

@karmatosed
9 years ago

@karmatosed
9 years ago

@karmatosed
9 years ago

@karmatosed
9 years ago

#1 @karmatosed
9 years ago

I have had a bit of a play and come up with a few variations as shown in 2versions.jpg (in attached jpgs).

I've also included the contrast tool checker on this as there is a full WCAG pass and a partial one.

Explained.jpg goes into which is which and also has the colours to show.

Please consider jpgs may not be properly showing contrast which is why included the colour swatches done through contrast checker.

At this point more looking for opinions and feedback than saying these are what we should be doing. So.. what you think :)

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

#2 @karmatosed
9 years ago

  • Owner set to karmatosed
  • Status changed from new to assigned

#3 @DJPaul
9 years ago

Another approach is to more concentrate on making these look like buttons, especially as we use these highlight colours in other parts of BP Default

#4 @karmatosed
9 years ago

I've had a more 'what if play' and come up with a few options numbered in buttons.jpg/ Number 5 on the jpg shows a hover suggestion.

I would suggest we use CSS gradients too for this.

My personal preference would be also to use the number 3 version in buttons.jpg with number 5 as the hover effect.

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

@karmatosed
9 years ago

@mercime
9 years ago

slight change to buttons

@mercime
9 years ago

slight change to button with sprite

@mercime
9 years ago

#5 @mercime
9 years ago

I could have sworn I posted some info here already after I attached the images earlier :-)

In any case, for the first image 070511-buttons-01.jpg, I just made some minor changes to the style like so:

a.bp-primary-action, .comment-reply-link, #reply-title small a {
    	background: #ffffff none; 
	border-radius: 4px 4px 4px 4px;
	border-color: #FFF9DB #FFE8C4 #FFE8C4 #FFF9DB;
	border-style: solid;
	border-width: 2px 2px 2px 2px;
	color: #FFA200;
    	font-size: 11px;
    	padding: 2px 6px;
    	text-decoration: none;
	text-shadow: 0 1px 0 #eeeeee;
}

a.bp-secondary-action, span.highlight {
    	background: #ffffff none;
	border-radius: 4px 4px 4px 4px;
	border-color: #EBF7FF #D6E9F5 #D6E9F5 #EBF7FF;
	border-style: solid;
	border-width: 2px 2px 2px 2px;
	color: #059AE7;
    	font-size: 11px;
    	padding: 2px 6px;
    	text-decoration: none;
}

For the second image, 070511-buttons-02.jpg, I just added some padding to the right and used sprite to add some spice :-)

#6 @karmatosed
9 years ago

  • Owner changed from karmatosed to DJPaul

#7 @DJPaul
9 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

Thank you very much for your designs on this, the issue's been resolved with the recent activity / comment styling updates.

#8 @DJPaul
9 years ago

  • Milestone changed from Awaiting Review to 1.3

#9 @mercime
9 years ago

Saw the resolution in testbp.org and l like it :-)

#10 @DJPaul
4 years ago

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