Aspect modern butoanelor din interiorul topicului folosind Font Awesome

Vezi subiectul anterior Vezi subiectul urmator In jos

  • 0

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:
https://hitsk.in/t/20/31/02/i_icon_quote.png - Inlocuiti cu imaginea actuala de la butonul quote.
https://hitsk.in/t/20/31/02/i_icon_edit.png - Inlocuiti cu imaginea actuala de la butonul editeaza.
https://hitsk.in/t/20/31/02/i_icon_delete.png - Inlocuiti cu imaginea actuala de la butonul sterge/delete.
https://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
Membru onorific
Membru onorific

Mesaje : 3190
Varsta : -11
Data înscrierii : 06/11/2012
Multumiri : 844
Niciun avertisment

Vezi profilul utilizatorului http://www.infinigame.biz/
Emanuel 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