Modifica colori per i titoli degli argomenti

Da **Niko** Lun 16 Mar 2015 - 16:20

Modifica colori per i titoli degli argomenti

Di default ci sono solamente 14 colori diversi da scegliere per i titoli dei tuoi argomenti. Con questo piccolo trucchetto saremo capaci di personalizzare la lista di colori disponibili. Inoltre, saremo capaci di nascondere i colori che non ci interessano Wink

argomenti colori - Modifica colori per i titoli degli argomenti Scr13

argomenti colori - Modifica colori per i titoli degli argomenti Act_bottom

Attenzione: dovresti avere attivata l'opzione Autorizza i colori nei titoli dei soggetti per poter usare questa astuzia. Puoi trovare questa opzione andando verso Pannello di amministrazione ► Generale ► Messaggi & email ► Configurazione

Scegli Si per attivare l'opzione :new:

Aggiunta di nuovi colori
Per aggiungere colori aggiuntivi alla lista drop-down, vai verso Pannello di amministrazione ► Moduli ► HTML & javascript ► Gestione del codice javascript e crea un nuovo codice :new:

Titolo: a tua scelta
Dove: In tutte le pagine
Codice:
Codice:
$(function() { if (!document.post || !document.post.topic_color) return; var colors = { 'Crimson' : '#DC143C', 'Tomato' : '#FF6347', 'Orange Red' : '#FF4500', 'Pink' : '#FFC0CB', 'Magenta' : '#FF00FF', 'Violet' : '#EE82EE', 'Sky' : '#87CEEB', 'Light Sky' : '#87CEFA', 'Slate Blue' : '#6A5ACD', 'Steel Blue' : '#4682B4', 'Teal' : '#008080', 'Lime' : '#00FF00', 'Dark Green' : '#006600', 'Light Green' : '#90EE90', 'Yellow Green' : '#9ACD32' }, a, b = document.post.topic_color, c = b.childNodes, i = 0, j = c.length, k; for (k in colors) { a = document.createElement('OPTION'); a.innerHTML = k; a.style.color = colors[k]; a.value = colors[k]; b.insertBefore(a, b.firstChild); }; for (; i<j; i++) if (c[i].style.color == document.post.subject.style.color) c[i].selected = 1; });

Modifiche da apportare

All'inizio del codice vedrete una serie di colore. All'interno di questo elemento sarete in grado di modificare i vari colori. E' importante includere il nome del colore e il relativo codice colore Wink

Ad esempio:

Codice:: var colors = { 'Red' : '#FF0000', 'Green' : '#009900', 'Blue' : '#0000FF' },

Possiamo aggiungere tutti i colori che preferiamo. Come potete vedere nell'esempio i codici vanno inseriti come 'nome colore' : 'codice colore' e andrebbero separati da una virgola. L'ultimo colore non necessita di una virgola perchè questo mostrerebbe un errore per i vecchi browser.

Per scegliere i colori più facilmente vi proponiamo questi due strumenti:

Rimozione di colori
Magari vorresti anche rimuovere alcuni colori dalla lista predefinita. Ad esempio potresti voler rimuovere il colore bianco e grigio perchè non si visualizzano facilmente sugli sfondi chiari. Per fare questo vai verso Pannello di amministrazione ► Moduli ► HTML & javascript ► Gestione del codice javascript e crea un nuovo codice :new:

Titolo: a tua scelta
Dove: In tutte le pagine
Codice:
Codice:
$(function() { if (!document.post || !document.post.topic_color) return; var badeggs = [ '#FFFFFF', '#999999', '#FFFF00' ], o = document.post.topic_color.childNodes, i = 0, j = o.length, k, v, l = badeggs.length; for (; i<j; i++) { for (k = 0; k<l; k++) { v = badeggs[k].toLowerCase(); if (o[i].innerHTML.toLowerCase() == v || o[i].value.toLowerCase() == v) { o[i].style.display = 'none'; o[i].selected && ( o[i].nextSibling ? o[i].nextSibling.selected = 1 : o[i].previousSibling.selected = 1 ); } } } document.post.subject.style.color = document.post.topic_color.value; });

Modifiche da apportare

All'inizio del codice puoi trovare un array di codici colore. In questa array sarai capace di scrivere i nomi o i valori dei colore che desideri rimuovere dalla lista predefinita

Codice:: var badeggs = [ '#FFFFFF', '#999999', '#FFFF00' ],

Possiamo aggiungere alcuni, o anche tutti i colori: non c'è limite. Ogni colore che vuoi rimuovre andrebbe separato da una virgola. Puoi usare sia il nome del colore che il suo valore :bene:

è preferibile rimuovere il colore con il suo valore perchè se inserite il colore red questo sarà ancora visibile come rosso in lingua italiana. Quindi varia a seconda della lingua del forum Wink

Per facilitarvi il lavoro, ecco un elenco dei vari colori predefiniti:

Name	Value
Dark red	#660000
Red	#FF0000
Orange	#FF9933
Brown	#663300
Yellow	#FFFF00
Green	#006600
Olive	#666633
Cyan	#00FFFF
Blue	#0000FF
Dark Blue	#000099
Indigo	#6600FF
Grey	#999999
White	#FFFFFF
Black	#000000

Se volete rimuovere tutti i colori predefiniti e partire da capo inserendo i nostri colori personalizzati, questa è l'array da utilizzare:

Codice:: var badeggs = [ '#660000', '#FF0000', '#FF9933', '#663300', '#FFFF00', '#006600', '#666633', '#00FFFF', '#0000FF', '#000099', '#6600FF', '#999999', '#FFFFFF', '#000000' ],

Staff FDF - Forum di supporto per Forumattivo IT
Copyrigth FORUMATTIVO.COM
Tutorial creato da Ange Tuteur del forum di supporto inglese e tradotto da Niko