Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei gią un nostro utente oppure registrati per far parte della nostra grande comunitą. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Rendere i bottoni pił moderni con Font Awesome


Tutorial Rendere i bottoni pił moderni con Font Awesome

Messaggio Da teo il Lun 27 Giu 2016, 21:53

Rendere i bottoni pił moderni con Font Awesome 

Carissimi utenti,

Avete voglia di rendere pił #moderno il vostro forum #forumattivo  Question  Con questo semplice tutorial potrete rendere i bottoni del vostro forum pił semplici e moderni

Installazione di Font awesome


Pannello di amministrazione ► moduli  ► HTML&JAVASCRIPT  ► gestione dei codici Javascript  

:new:  Andiamo a cred un nuovo Javascript. 


  • Titolo: Font awesome
  • Posizione: tutte le pagine 
  • Codice: 

Codice:
(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); })();

:per:  salviamo le modifiche.

Modifica dei bottoni


:new:  Andiamo ora a creare un altro Javascript 


  • Titolo: bottoni moderni
  • Posizione: negli argomenti
  • Codice: 


Codice:
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> CITA</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> MODOFICA</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> ELIMINA</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> RAPPORTO</span>'); });

Da modificare nel codice:

http://hitsk.in/t/20/31/02/i_icon_quote.png - eliminate e sostituite con l'immagine attuale della citazione
http://hitsk.in/t/20/31/02/i_icon_edit.png - eliminate e sostituite con l'immagine attuale del bottone "modifica"
http://hitsk.in/t/20/31/02/i_icon_delete.png - eliminate e sostituite con l'immagine attuale di "elimina"
http://hitsk.in/t/20/31/02/i_icon_ip.png - eliminate e sostituite con l'immagine attuale di "vedere IP"

Installazione del codice CSS


Passiamo ora al codice CSS e andiamo verso: Pannello di amministrazione ►visualizzazione ► colori ► foglio di stile CSS

Codice:
.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; }

:new: Salviamo Le Modifche

Risultato



Ecco qui, ora finalmente i nostri bottoni sono molto pił moderni.

Saluti da Forumattivo


teo
Aiutattivo
Aiutattivo


Sesso : Maschile
Etą : 20
Messaggi : 1394
Localitą : Cremona


Vedere il profilo dell'utente http://Ilforumditutti.net
teo č stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum