Skip to:
Content

BuddyPress.org

Opened 13 years ago

Closed 13 years ago

Last modified 8 years ago

#3315 closed enhancement (fixed)

activity/comment list button styles

Reported by: djpaul's profile DJPaul Owned by: djpaul's profile 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 13 years ago.
02colours.jpg (70.4 KB) - added by karmatosed 13 years ago.
2versions.jpg (150.2 KB) - added by karmatosed 13 years ago.
03colours.jpg (69.6 KB) - added by karmatosed 13 years ago.
05colours.jpg (70.6 KB) - added by karmatosed 13 years ago.
06colours.jpg (70.5 KB) - added by karmatosed 13 years ago.
explained.jpg (236.9 KB) - added by karmatosed 13 years ago.
buttons.jpg (163.8 KB) - added by karmatosed 13 years ago.
070511-buttons-01.jpg (52.7 KB) - added by mercime 13 years ago.
slight change to buttons
070511-buttons-02.jpg (58.7 KB) - added by mercime 13 years ago.
slight change to button with sprite
sprite.png (1016 bytes) - added by mercime 13 years ago.

Download all attachments as: .zip

Change History (21)

@karmatosed
13 years ago

@karmatosed
13 years ago

@karmatosed
13 years ago

@karmatosed
13 years ago

@karmatosed
13 years ago

@karmatosed
13 years ago

@karmatosed
13 years ago

#1 @karmatosed
13 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.

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

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

Version 1, edited 13 years ago by karmatosed (previous) (next) (diff)

#2 @karmatosed
13 years ago

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

#3 @DJPaul
13 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
13 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 13 years ago by karmatosed (previous) (diff)

@karmatosed
13 years ago

@mercime
13 years ago

slight change to buttons

@mercime
13 years ago

slight change to button with sprite

@mercime
13 years ago

#5 @mercime
13 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
13 years ago

  • Owner changed from karmatosed to DJPaul

#7 @DJPaul
13 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
13 years ago

  • Milestone changed from Awaiting Review to 1.3

#9 @mercime
13 years ago

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

#10 @DJPaul
8 years ago

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