Schimbați aspectul butonului dvs. de îmi place / nu-mi place.

Vezi subiectul anterior Vezi subiectul urmator In jos

  • 0

Tutorial Schimbați aspectul butonului dvs. de îmi place / nu-mi place.

Mesaj Scris de Mihai Mier Iun 23, 2021 9:40 pm

Schimbați aspectul butonului dvs. de îmi place / nu-mi place.

Bună seara,
Următorul tutorial vă va ajuta să schimbați aspectul noilor butoane Apreciază.

 Funcționează pe următoarele versiuni

De acord PunBB
De acord PhpBB2
De acord PhpBB3
De acord Invision
De acord ModernBB
De acord AwesomeBBBETA

Înainte
Schimbați aspectul butonului dvs. de îmi place / nu-mi place. Captu372

După
Schimbați aspectul butonului dvs. de îmi place / nu-mi place. Captu371

 Setările panoului de administrare

Schimbați aspectul butonului dvs. de îmi place / nu-mi place. N116 Conectați-vă ca administrator / fondator și accesați:
Panou de Administrare Schimbați aspectul butonului dvs. de îmi place / nu-mi place. 2924924668 Afișare Schimbați aspectul butonului dvs. de îmi place / nu-mi place. 2924924668  Imagini și culori Schimbați aspectul butonului dvs. de îmi place / nu-mi place. 2924924668 Foaie de stil CSS Schimbați aspectul butonului dvs. de îmi place / nu-mi place. 2924924668

Schimbați aspectul butonului dvs. de îmi place / nu-mi place. N217 Copiați și lipiți fișierele CSS pentru forumul dvs.

 Foaie de stil CSS

Fișiere PunBB, PhpBB2 și Phpbb3 CSS:
Vedeți foaie de stil CSS:
Cod:
 
.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: none;
  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 fișiere CSS:
Vedeți foaia de stil CSS:
Cod:
.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: none;
  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: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.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;
}

Fișiere CSS ModernBB:
Vedeți foaie de stil CSS:
Cod:
/**** 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;
}
Fișiere CSS AwesomeBB:
Vedeți foaia de stil CSS:
Cod:
.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;
}
Puteți schimba culoarea dvs. pentru a le face să corespundă propriei teme a forumului.

Schimbați aspectul butonului dvs. de îmi place / nu-mi place. N316 Nu uitați să salvați 

Dacă aveți probleme, vă rugăm să deschideți un subiect nou și să cereți ajutor, asigurându-vă că dați adresa URL a forumului și un link către acest subiect.

Sperăm să vă placă acest mic truc și sfat despre cum să faceți schimbarea.
Mihai

Mihai
Administrator
Administrator

Mesaje : 1463
Varsta : 23
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 87
Pachetul Premium Google Chrome phpBB3

http://fgsuport.forumgratuit.ro
Mihai a fost mulțumit de autorul acestui subiect.

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum