Forum gratuit: forum de suport al utilizatorilor Forumgratuit
Doriți să reacționați la acest mesaj? Creați un cont în câteva clickuri sau conectați-vă pentru a continua.

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 Mihai Lun Mai 11, 2020 12:11 am

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://2img.net/s/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://2img.net/s/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://2img.net/s/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://2img.net/s/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://2img.net/s/t/20/31/02/i_icon_report.png']").replaceWith('<span class="butoanetopic butoanetopic-ip"><i class="fa fa-search"></i> RAPORTEAZA</span>');
    });


De modificat:
Aspect modern butoanelor din interiorul topicului folosind Font Awesome 209609infohttps://2img.net/s/t/20/31/02/i_icon_quote.png - Inlocuiti cu imaginea actuala de la butonul quote.
https://2img.net/s/t/20/31/02/i_icon_edit.png - Inlocuiti cu imaginea actuala de la butonul editeaza.
https://2img.net/s/t/20/31/02/i_icon_delete.png - Inlocuiti cu imaginea actuala de la butonul sterge/delete.
https://2img.net/s/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:


Aspect modern butoanelor din interiorul topicului folosind Font Awesome 2h729v6

Succes!  Zâmbet


Aspect modern butoanelor din interiorul topicului folosind Font Awesome Untit104
Aspect modern butoanelor din interiorul topicului folosind Font Awesome KmYIBDv
Aspect modern butoanelor din interiorul topicului folosind Font Awesome Scre1015 Aspect modern butoanelor din interiorul topicului folosind Font Awesome 398 Aspect modern butoanelor din interiorul topicului folosind Font Awesome 2209 Aspect modern butoanelor din interiorul topicului folosind Font Awesome Scre1016 Aspect modern butoanelor din interiorul topicului folosind Font Awesome Portoq16
Mesaje: 22907 ● Utilizatori: 18220 ● Ultimul membru: » Midori «
Mihai

Mihai
Administrator
Administrator

Mesaje : 1478
Varsta : 24
Localizare : București, România
Data înscrierii : 25/09/2014
Mulțumiri : 101
Google Chrome phpBB3

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

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum