Like widgets for VB4.1.X

Hello~

I have enabled the Like system on my forum . I want to improve it visuals like this



Current visuals are this

Everything regarding like system is controlled by CSS , you can customize it according to your likes

so where do i put CSS code for Like system to

On vBulletin 4 it is located inside vbseo_buttons.css template , on vB3 it is located on vbseo/resources/css/vbseo_buttons.css

ok here is the all code do i put it at the end or replace which line ..

Code:

@charset "UTF-8";.vbseo_buttons {
    font-size: {vb:stylevar small_fontSize};
    position: relative;
}
.vbseo_buttons .vbseo_links {
    visibility:hidden;
    padding: {vb:stylevar padding};
    margin: 0;
    width: auto;
}
.vbseo_buttons .vbseo_share , .vbseo_buttons .vbseo_like, .vbseo_buttons .seperator {
    display: inline-block;
    float: {vb:stylevar right};
    padding: 0 {vb:math {vb:stylevar padding}/2.5};
}
.vbseo_buttons .vbseo_liked {
    border-color:#D5D5D5 #B3B3B3 #999999;
    border-style:solid;
    border-width:1px; 
    background: {vb:stylevar postbit_userinfo_background.backgroundColor} url(vbseo/resources/images/forum/vbseo_like.png) 5px center no-repeat;
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-radius: {vb:stylevar border_radius}; 
    clear: both;
    display: block;
    padding: {vb:math {vb:stylevar padding}-3} {vb:math {vb:stylevar padding}-3} {vb:math {vb:stylevar padding}-3} ;
    padding-{vb:stylevar left}: {vb:math {vb:stylevar padding}*2.5};
    margin: {vb:stylevar padding};
    <vb:if condition="$stylevar['textdirection'] == 'rtl'">
        background-position: right;
    </vb:if>
}
.vbseo_liked_image {
    {vb:stylevar left}:{vb:math {vb:stylevar padding}/2};
    position:absolute;
    top: {vb:math {vb:stylevar padding}/2};
} 
.postbit-lite .postbithead.likehead { 
    max-height: 1.05em; 
    overflow: hidden;
    line-height:1.5em;
    font-size: {vb:stylevar small_fontSize};
    padding: {vb:math {vb:stylevar padding}-4} {vb:stylevar padding} {vb:math {vb:stylevar padding}-3}
}


.postbit-lite .postbithead.likehead strong {
    font-size: {vb:stylevar small_fontSize};
    font-weight: 900;
}
.postbit-lite .posttext.likedate {
    font-size: {vb:stylevar small_fontSize};
    margin-top: -{vb:stylevar padding};
    color: {vb:stylevar shade_color};
}
.postbit-lite .posttext.likedate .time {
    color: {vb:stylevar shade_color};
}
/* Share CSS */
.vbseo_share_body {
    width: 280px;
    border: {vb:stylevar postbit_userinfo_border};
    background: {vb:stylevar postbit_userinfo_background.backgroundColor};
    border-radius: {vb:stylevar border_radius};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    position: absolute;
    {vb:stylevar right}: 0px;
    visibility:hidden;
    z-index: 9000;
    box-shadow: 0 4px 7px;
    -moz-box-shadow: 0 4px 7px;
    -webkit-box-shadow: 0 4px 7px;
}
.restore .vbseo_share_body {
    top: -80px;
}
.vbseo_share:hover .vbseo_share_body {
    visibility: visible;
}


.vbseo_share_body li {
    width: 140px;
    border: none;
}
.restore ul.vbseo_share_body li {
    list-style: none inside;    
}
.vbseo_share_body li:hover {
    background: #ffeb90;
}
.vbseo_share_body li.share_header {
    background: #ddd;
    font-size: 120%;
    width: 270px;
    padding: 3px 5px;
    border-radius: {vb:stylevar border_radius};
    -moz-border-radius: {vb:stylevar border_radius};
    -webkit-border-radius: {vb:stylevar border_radius};
    border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-bottom-left-border-radius: 0;
    border-bottom-right-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-bottom-right-border-radius: 0;
}
.vbseo_share_body li:hover.header {
    background: #ddd;
}
.vbseo_share_body li.left {
    float: {vb:stylevar left};
    clear: {vb:stylevar left};
}
.vbseo_share_body li.right {
    float: {vb:stylevar right};
    clear: {vb:stylevar right};
}
.vbseo_share_body li img {
    float: {vb:stylevar left};
    padding: {vb:math {vb:stylevar padding}-6};
    position: relative;
    top: -2px; 
    margin: 0;
}
.vbseo_share_body li > a {
    padding: {vb:math {vb:stylevar padding}-6};
    display: block;
    color: #343434;
    text-decoration: none;
}


/* like tree CSS */


#vbseo-likes {
    float: {vb:stylevar right};
    margin:0;
    color:#3e3e3e;
    height:50px;
    background-color:#f6f6f6;
    border:1px solid #e7e7e7;
    -moz-border-radius:{vb:stylevar border_radius};
    border-radius:{vb:stylevar border_radius};
    -webkit-radius-border:{vb:stylevar border_radius};
    position:relative;
    *z-index: 10000;
    color:3e3e3e;
    font-family: Arial, Helvetica, sans-serif;
    *width:128px; 
    min-width:108px;
    cursor:pointer;
}


#vbseo-likes:hover {
    background-color:#F3F3F3;
}


#vbseo-likes.vbseo-likes-preload, #vbseo-likes.vbseo-likes-tpreload  {
    background:url("vbseo/resources/images/forum/vbseo-likes-ajax-loader.gif") no-repeat scroll 95% 5% #F3F3F3;
}


#vbseo-likes.vbseo-likes-preload .vbseo-likes-count, #vbseo-likes.vbseo-likes-tpreload .vbseo-likes-count {
    opacity: .4;
}


#vbseo-likes.vbseo-likes-active, #vbseo-likes.vbseo-likes-tpreload {
    -moz-border-radius:5px 5px 0 0;
    border-radius:5px 5px 0 0;
    -webkit-radius-border:5px 5px 0 0;
    background-color:#F3F3F3;
    border-bottom-color:#F3F3F3;
    -moz-box-shadow:2px 4px 5px #CCCCCC;
    -webkit-box-shadow:2px 4px 5px #CCCCCC;
    box-shadow:2px 4px 5px #CCCCCC;
} 


.vbseo-likes-count {
    /* background:url("vbseo/resources/images/forum/vbseo_likes_heart.png") no-repeat scroll 10px 13px transparent; */
    font-family:Tahoma,Calibri,Verdana,Geneva,sans-serif;
    font-size:26px;
    font-weight:bold;
    height:30px;
    float:{vb:stylevar right};
    padding-top:9px;
    padding-bottom:11px;
    padding-{vb:stylevar left}:40px;
    padding-{vb:stylevar right}:9px;
    position: relative;
}
.vbseo-likes-count-image {
    position: absolute;
    top: 13px;
    {vb:stylevar left}: 10px;
}
.vbseo-likes-count em {
    background:url("vbseo/resources/images/forum/lkarrow.png") no-repeat scroll {vb:stylevar right} -2px transparent;
    font-size:11px;
    font-style:normal;
    font-weight:normal;
    margin-{vb:stylevar left}:4px;
    padding-{vb:stylevar right}:14px;
}


#vbseo-likes.vbseo-likes-active .vbseo-likes-container, #vbseo-likes.vbseo-likes-tpreload .vbseo-likes-container {
    display:block;
} 




.vbseo-likes-container {
    display:none;
    background-color:#F3f3f3;
    top:50px;
    {vb:stylevar right}:-1px;
    position:absolute;
    border:1px solid #e7e7e7;
    border-top:none;
    min-width:196px;
    _width:196px;
    border-radius:5px 0 5px 5px;
    -moz-border-radius:5px 0 5px 5px;
    -webkit-border-radius:5px 0 5px 5px;
    -moz-box-shadow:2px 4px 5px #CCCCCC;
    -webkit-box-shadow:2px 4px 5px #CCCCCC;
    box-shadow:2px 4px 5px #CCCCCC;
    z-index:9000;
    *z-index:10002;
}


ul.vbseo-likes-tabs {
    list-style:inside none;
    margin:0;
    padding:9px 10px 6px;
    *z-index: 10003;
}


ul.vbseo-likes-tabs li {
    display:inline;
    margin:0;
    padding:0;
    line-height:12px;
    *z-index: 10004;
}


ul.vbseo-likes-tabs li a {
    text-decoration: none;
    padding:1px 5px;
    font-size:11px;
}


ul.vbseo-likes-tabs li a:hover, ul.vbseo-likes-tabs li a.active {
    color: #FFF;
    -moz-border-radius:3px;
    border-radius:3px;
    background-color:#888; 
}


ul.vbseo-likes-tabs li.vbseo-likes-fusion {
    position:absolute;
    {vb:stylevar right}:0;
    top:-1px;
    height:1px;
    width:108px;
    background-color:#F3F3F3;
}


ul.vbseo-likes-list {
    list-style:inside none;
    margin:3px;
    padding:0;
    background-color:#fff;
    border-bottom:1px solid #EBEBEB;
    *z-index: 10003;
}


.vbseo-likes-list li {
    margin:0px;
    border-top:1px solid #EBEBEB;
    font-size:14px;
    padding:8px 10px;
    line-height:12px;
    position:relative;
    cursor:pointer;
    *z-index: 10004;
}


.vbseo-likes-list li:hover {
    background-color:#ffeb90;
}


.vbseo-likes-avatar {
    float:{vb:stylevar left};
    height:24px;
    overflow:hidden;
    width:24px;
    *z-index: 10005;
}


.vbseo-likes-info {
    margin-{vb:stylevar left}:33px;
    line-height:12px;
    *z-index: 10005;
}


.vbseo-likes-hearts {
    background:url("vbseo/resources/images/forum/vbseo_like_bg.png") no-repeat scroll 100% 2px transparent;
    height:16px;
    position:absolute;
    {vb:stylevar right}:10px;
    top:15px;
    z-index:1;
    *z-index: 10006;
}


.vbseo-likes-hearts strong {
    font-size:16px;
    font-weight: bold;
    padding-right:16px;
    z-index:1;
}


.vbseo-likes-postby {
    color:#999999;
    font-size:11px;
    display:block;
    margin-{vb:stylevar left}:33px;
    margin-{vb:stylevar right}:44px;
    word-wrap:break-word;
    *z-index: 10006;
}


.vbseo-likes-postby strong {
    display:block;
    color:#3e3e3e;
    height:14px;
    font-size:12px;
    font-weight:normal;
    white-space:nowrap;
}


.vbseo-likes-link {
    position:absolute;
    top:0;
    {vb:stylevar left}:0;
    width: 100%;
    height: 100%;
    *z-index: 10004;
}


.vbseo-likes-tipsy {
    {vb:stylevar left}:-230px;
    font-size:10px;
    padding:5px;
    position:absolute;
    z-index:100000;
    opacity:0.8;
    top:0px;
    display:none;
    *z-index: 100005;
}


.vbseo-likes-list li:hover .vbseo-likes-tipsy {
    display: block !important;
}


.vbseo-likes-tipsy-arrow {
    background:url("vbseo/resources/images/forum/vbseo-like-arrow.gif") no-repeat scroll {vb:stylevar left} top transparent;
    background-position:{vb:stylevar right} top;
    height:9px;
    {vb:stylevar right}:1px;
    top:16px;
    position:absolute;
    width:5px;
}


.vbseo-likes-tipsy-inner {
    -moz-border-radius:3px;
    border-radius:3px;
    background-color:black;
    color:white;
    width:200px;
    min-height:23px;
    padding:5px 8px 4px;
    text-align:{vb:stylevar left};
    word-break: break-all;
}

You will need to replace the default elements with your markup styles.

this is the vbseo_buttons.css of my current style i am using

And you'll need to change it to what ever you want it to look like. We don't support customizations to custom themes. You are on your own with changing it to look like you want.