BuddyPress

I just worked out a way to make my “like” buttons the same as the other buttons- comment, favorite and delete- rather than have them appearing as links AND avoid the “like” messages getting in the way of other buttons after clicking “see who else likes this”. Tweaked the CSS and stuck it in my child theme… veeeery happy

Feel free to point out mistakes and improvement. CSS is for the bp-default theme:

.like {
float:right;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #777777;
cursor: pointer;
font: 11px/20px Arial,Tahoma,Verdana,sans-serif;
outline: medium none;
padding: 4px 8px;
margin-right: 5px;
text-align: center;
color: #777777;
text-decoration: none;
}

.like:hover {
float:right;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #E0E0E0 100%) repeat scroll 0 0 transparent;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
color: #555555;
cursor: pointer;
font: 11px/20px Arial,Tahoma,Verdana,sans-serif;
outline: medium none;
padding: 4px 8px;
margin-right: 5px;
text-align: center;
color: #777777;
text-decoration: none;
}

.unlike {
float:right;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #777777;
cursor: pointer;
font: 11px/20px Arial,Tahoma,Verdana,sans-serif;
outline: medium none;
padding: 4px 8px;
margin-right: 5px;
text-align: center;
color: #777777;
text-decoration: none;
}

.unlike:hover {
float:right;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #E0E0E0 100%) repeat scroll 0 0 transparent;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
color: #555555;
cursor: pointer;
font: 11px/20px Arial,Tahoma,Verdana,sans-serif;
outline: medium none;
padding: 4px 8px;
margin-right: 5px;
text-align: center;
color: #777777;
text-decoration: none;
}

.view-likes {
float:right;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #EDEDED 100%) repeat scroll 0 0 transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #777777;
cursor: pointer;
font: 11px/20px Arial,Tahoma,Verdana,sans-serif;
outline: medium none;
padding: 4px 8px;
margin-right: 5px;
text-align: center;
color: #777777;
text-decoration: none;
}

.view-likes:hover {
float:right;
background: -moz-linear-gradient(center top , #FFFFFF 0%, #E0E0E0 100%) repeat scroll 0 0 transparent;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
color: #555555;
cursor: pointer;
font: 11px/20px Arial,Tahoma,Verdana,sans-serif;
outline: medium none;
padding: 4px 8px;
margin-right: 5px;
text-align: center;
color: #777777;
text-decoration: none;
}

Love your CSS, thanks so much for this.

Cool, added to my child’s theme style.css

Thanks !

Failure does not mean I don’t have it; It does mean I have something to do in a different way!