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
Membru onorific
Membru onorific

masculin

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

http://www.infinigame.biz/

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum