Skip to:
Content
Pages
Categories
Search
Top
Bottom

Make the ”like” button an actual button rather than a link

  • 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 :-D

    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;
    }

Viewing 3 replies - 1 through 3 (of 3 total)
Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.