Aspect modern butoanelor din interiorul topicului folosind Font Awesome

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Aspect modern butoanelor din interiorul topicului folosind Font Awesome

Mesaj Scris de Emanuel la data de Mar 10 Mai - 23:13

Aspect modern butoanelor din interiorul topicului folosind Font Awesome
Salutari,


Cu ajutorul acestui truc, putem moderniza aspectul butoanelor Citeaza, Editeaza, Sterge, Ip-ul postatorului, din interiorul fiecarui topic.

1. Javascript:


Panou > Module > HTML & JAVASCRIPT > Gestiunea codurilor javascript > Creati un nou cod JavaScript

  • Titlu: Instalare Font awesome
  • Amplasare: Toate paginile
  • Cod:

    Cod:

    (function() {
      var FA = 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css',
          a = document.createElement('LINK');
      a.rel = 'stylesheet';
      a.type = 'text/css';
      a.href = FA;
      document.getElementsByTagName('HEAD')[0].appendChild(a);
    })();




Panou > Module > HTML & JAVASCRIPT > Gestiunea codurilor javascript > Creati un nou cod JavaScript

  • Titlu: Inlocuire imagini Citeaza/Editeaza/Sterge/Ip
  • Amplasare: Topicuri
  • Cod:
    Cod:

    jQuery(function($)
    {

    $("img[src='http://hitsk.in/t/20/31/02/i_icon_quote.png']").replaceWith('<span class="butoanetopic butoanetopic-quote"><i class="fa fa-quote-right"></i> CITEAZA</span>');
    });

    jQuery(function($)
    {

    $("img[src='http://hitsk.in/t/20/31/02/i_icon_edit.png']").replaceWith('<span class="butoanetopic butoanetopic-editeaza"><i class="fa fa-pencil-square-o"></i> EDITEAZA</span>');
    });

    jQuery(function($)
    {

    $("img[src='http://hitsk.in/t/20/31/02/i_icon_delete.png']").replaceWith('<span class="butoanetopic butoanetopic-sterge"><i class="fa fa-scissors"></i> STERGE</span>');
    });

    jQuery(function($)
    {

    $("img[src='http://hitsk.in/t/20/31/02/i_icon_ip.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> IP</span>');
    });

    jQuery(function($)
    {

    $("img[src='http://hitsk.in/t/20/31/02/i_icon_report.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> RAPORTEAZA</span>');
    });


De modificat:
http://hitsk.in/t/20/31/02/i_icon_quote.png - Inlocuiti cu imaginea actuala de la butonul quote.
http://hitsk.in/t/20/31/02/i_icon_edit.png - Inlocuiti cu imaginea actuala de la butonul editeaza.
http://hitsk.in/t/20/31/02/i_icon_delete.png - Inlocuiti cu imaginea actuala de la butonul sterge/delete.
http://hitsk.in/t/20/31/02/i_icon_ip.png - Inlocuiti cu imaginea actuala de la butonul IP.

Imaginile se gasesc in Afisare => Imagini si culori => Administrare imagini => Mod avansat => Butoane

2. CSS:


Panou > Afisare > Imagini si culori > Culori > Foaie de stil css

Cod:
.butoanetopic {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}
.butoanetopic {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    margin-bottom: 0;
    padding: 3px 4px;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}
.butoanetopic-sterge {
    background-color: #B52A26;
    border-color: #902522;
    color: #fff;
}
.butoanetopic-sterge:hover {
        color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

.butoanetopic-quote {
    background-color: #CA8226;
    border-color: #9E661F;
    color: #fff;
}
.butoanetopic-quote:hover {
    background-color: #E48710;
    border-color: #CE7F1A;
    color: #fff;
}
.butoanetopic-editeaza {
    background-color: #1381C3;
    border-color: #0A71AF;
    color: #fff;
}
.butoanetopic-editeaza:hover {
    background-color: #1092E0;
    border-color: #0A71AF;
    color: #fff;
}

.butoanetopic-ip:hover {
    color: #fff;
    background-color: #157254;
    border-color: #0f543e;
}
.butoanetopic-ip {
    color: #fff;
    background-color: #1d9d74;
    border-color: #198764;
}

3. Rezultat:




Succes!  Zâmbet

Tutorial scris de Emanuel
Copyright ˆForumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.
avatar
Emanuel
Administrator
Administrator

masculin

Mesaje : 3121
Varsta : -12
Data de inscriere : 06/11/2012
Multumiri : 841
Niciun avertisment

http://www.infinigame.biz/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum