Latest topics
» What is the weather like where you live?
Change the look of your like / dislike button's. EmptyYesterday at 23:02 by APE

» Chat World Banner
Change the look of your like / dislike button's. Empty2021-07-28, 15:52 by JENNY

» What movie are you watching ?
Change the look of your like / dislike button's. Empty2021-07-14, 22:54 by JENNY

» RED LOVE Theme
Change the look of your like / dislike button's. Empty2021-07-14, 22:50 by JENNY

» FREE ONLINE GAMES FORUM COMMING SOON
Change the look of your like / dislike button's. Empty2021-07-07, 03:12 by JENNY

» Post Editor Update (Highlighter pen)
Change the look of your like / dislike button's. Empty2021-07-05, 23:48 by Dave

» Change the look of your like / dislike button's.
Change the look of your like / dislike button's. Empty2021-06-29, 05:26 by JENNY

» What was your first job?
Change the look of your like / dislike button's. Empty2021-06-22, 18:51 by pedxz

» Morning/afternoon/night
Change the look of your like / dislike button's. Empty2021-06-16, 22:42 by JENNY

Who’s online ?
Guests : 0
Registered : 0
Users Online :
RefreshView whole list

Change the look of your like / dislike button's.

Go down

Information Change the look of your like / dislike button's.

Post by JENNY 2021-06-29, 05:26

 Change the look of your like / dislike button's.


Hello All The following Tutorial will help you change the look of the new Like buttons.

Works On The Following Forum Versions:


PunBB
PhpBB2
Phpbb3
Invision
ModernBB
AwesomeBB

Before:
Change the look of your like / dislike button's. Captu372

After:
Change the look of your like / dislike button's. Captu371

Admin Control Panel Settings,



Change the look of your like / dislike button's. N116 Log in as Admin / Founder and go to.
ACP  Change the look of your like / dislike button's. 27a110  Display Tab  Change the look of your like / dislike button's. 27a110  Pictures and Colors  Change the look of your like / dislike button's. 27a110  Colors  Change the look of your like / dislike button's. 27a110  CSS Stylesheet Tab  Change the look of your like / dislike button's. 27a110

Change the look of your like / dislike button's. N217 Copy and paste the CSS files for your forum.

CSS Files,



PunBB, PhpBB2 & Phpbb3 CSS Files:
See CSS Files :

Code:

.fa_like_div {
margin-left: 0px;
}
button.rep-button.fa_like, button.rep-button.fa_dislike,button.rep-button.fa_liked,button.rep-button.fa_disliked{
  background: linear-gradient(rgb(49, 49, 49)0%,rgb(49, 49, 49)100%);
  border: 1px solid #2c2c2c !important;
  box-shadow: 0 0 0 1px #2B2B2B inset;
}
.rep-button, .rep-button:active, .rep-button:focus {
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    color: #C2C2C2;
    cursor: pointer;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .4s;
    background-color: #2e2e2e;
}
 
button.rep-button.fa_liked{
  color: #4CAF50;
  border: 1px solid #2c2c2c;
    border-radius: 4px;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .1s;
    background-color: #2e2e2e;
  opacity: 1 !important;
  pointer-events: auto;
  cursor: pointer;
}
button.rep-button.fa_dislike{
  color: #C2C2C2;
  border: 1px solid #2c2c2c;
    border-radius: 4px;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .1s;
    background-color: #2e2e2e;
  opacity: 1 !important;
  cursor: pointer;
}
button.rep-button.fa_disliked{
  color: #F44336 !important;
  border: 1px solid #2c2c2c;
    border-radius: 4px;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .1s;
    background-color: #2e2e2e;
  opacity: 1 !important;
  pointer-events:none ;
  cursor: pointer;
}
.fa_liked path {
    fill: #4CAF50;
  }
.rep-button{
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    color: #C2C2C2;
    cursor: pointer;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .4s;
    background-color: #2e2e2e;
}
.rep-button:hover{
opacity: 0.8;
transition-duration: .5s;
}
 
.rep-button svg {
    color: #4ab01c;
    font-size: 20px;
    text-shadow: 0 0 1px #FFF;
    padding: 4px 3px 6px 7px;
    background-color: #e1e1e1;
    margin: -5px 1px -5px -9px;
  margin-right: 7px !important;
  border-radius: 2px 0px 0px 2px;
}

Invision CSS Files:
See CSS files:

Code:
.fa_like_div {
margin-left: 0px;
}
button.rep-button.fa_like, button.rep-button.fa_dislike,button.rep-button.fa_liked,button.rep-button.fa_disliked{
  background: linear-gradient(rgb(49, 49, 49)0%,rgb(49, 49, 49)100%);
  border: 1px solid #2c2c2c !important;
  box-shadow: 0 0 0 1px #2B2B2B inset;
}
.rep-button, .rep-button:active, .rep-button:focus {
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    color: #C2C2C2;
    cursor: pointer;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .4s;
    background-color: #2e2e2e;
}
 
button.rep-button.fa_liked{
  color: #4CAF50;
  border: 1px solid #2c2c2c;
    border-radius: 4px;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .1s;
    background-color: #2e2e2e;
  opacity: 1 !important;
  pointer-events: auto;
  cursor: pointer;
}
button.rep-button.fa_dislike{
  color: #C2C2C2;
  border: 1px solid #2c2c2c;
    border-radius: 4px;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .1s;
    background-color: #2e2e2e;
  opacity: 1 !important;
  cursor: pointer;
}
button.rep-button.fa_disliked{
  color: #F44336 !important;
  border: 1px solid #2c2c2c;
    border-radius: 4px;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .1s;
    background-color: #2e2e2e;
  opacity: 1 !important;
  pointer-events: auto;
  cursor: pointer;
}
.fa_liked path {
    fill: #4CAF50;
  }
.rep-button{
    border: 1px solid #2c2c2c;
    border-radius: 4px;
    color: #C2C2C2;
    cursor: pointer;
    float: left;
    font-family: Trebuchet MS;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    margin: 3px 11px 0 0;
    outline: none;
    padding: 6px 10px 6px 10px;
    position: relative;
    text-transform: uppercase;
    transition: color .4s;
    background-color: #2e2e2e;
}
.rep-button:hover{
opacity: 0.8;
transition-duration: .5s;
}
 
.rep-button svg {
    color: #4ab01c;
    font-size: 20px;
    text-shadow: 0 0 1px #FFF;
    padding: 4px 3px 6px 7px;
    background-color: #e1e1e1;
    margin: -5px 1px -5px -9px;
  margin-right: 7px !important;
  border-radius: 2px 0px 0px 2px;
}

.rep-button{
  height: 32px;
}

ModernBB CSS Files:
See CSS files:

Code:
/**** main Buttons***/
.rep-button, .rep-button:active, .rep-button:focus {
    background: none;
        background-color: rgba(0, 0, 0, 0);
    background-color: #3793ff !important;
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    margin: 6px 6px 0 0;
    outline: none;
    padding: 4px 11px;
    position: relative;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.rep-button:hover, .rep-button:active:hover, .rep-button:focus:hover {
    background: none;
        background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    margin: 6px 6px 0 0;
    outline: none;
    padding: 4px 11px;
    position: relative;
  background-color: #d31141 !important;
box-shadow: 0 1px 9px rgba(0,0,0,0.6);
}
/**** Thumbs up / Down Icon ***/
.ion-thumbsup {
    background-color: #e9ebed;
    width: 4px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 4px;
    font-size: 16px;
    color: #444;
}
.ion-thumbsdown {
    background-color: #e9ebed;
    width: 4px;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 4px;
    font-size: 16px;
    color: #444;
}
/**** liked Unliked****/
.rep-button.fa_liked{
      color: #2FF706;
    cursor: pointer;
    font-family: inherit;
}
.rep-button.fa_disliked{
  color: #C10303;
    cursor: pointer;
    font-family: inherit;
}
/*** Numbers Background****/
.rep-nb {
    background-color: #2c353b;
    border-radius: 2px;
    font-size: 11px;
    margin-left: 11px;
    padding: 1px 5px 0;
    vertical-align: 1px;
    color: #fff;
}

AwesomeBB CSS Files:
See CSS Files:

Code:
.rep-cat {
background-color: #060606;
display: block;
float: left;
height: 30px;
line-height: 30px;
margin: -6px 10px -6px -11px;
padding: 0 11px;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.22), 0 3px 1px -2px rgba(0,0,0,0.44), 0 1px 5px 0 rgba(0,0,0,0.22);
}
.fa_disliked .rep-cat {
background-color: #FF2D1E;
}
.rep-button {
background-color: #263238;
border: none;
border-radius: 3px;
color: #FFF;
cursor: pointer;
display: inline-block;
margin: 6px 11px 0 0;
outline: none;
overflow: hidden;
padding: 6px 11px;
position: relative;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.22), 0 3px 1px -2px rgba(0,0,0,0.44), 0 1px 5px 0 rgba(0,0,0,0.22);
}
.fa_dislike_list, .fa_like_list {
border-left: 3px solid rgba(0,0,0,0.25);
color: rgb(0, 0, 0);
font-size: 12px;
margin-top: 6px;
padding-left: 7px;
}

You can change the color's your self to make them fit your own forum theme.

Change the look of your like / dislike button's. N316 Don't forget to save  

If you would like to stop your members removing the like or dislike once pressed you can find the following part of the CSS files and change it.
Find:

Code:
pointer-events: auto;

Replace with:

Code:
pointer-events: none;

If you have any problems Please open a new topic and ask for help making sure you give your forum URL and a link to this topic.

We hope you like this great little Trick and Tip on how to make the change. Think Computer





A chat World Official Tricks & Tips Post
JENNY
JENNY
Administrator

Change the look of your like / dislike button's. On_l111
Change the look of your like / dislike button's. Offl111

Mozilla FireFox ®
Female
Posts 1115
Likes Likes : 152
Join date 2010-06-18

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum
© 2020, achatworld.co.uk,
Theme and Images by Leah7,
Codes by Luffy & Ange Tuteur.