Personalizzare il menù dei colori [Quirks Mode]

« Older   Newer »
  Share  
view post Posted on 19/3/2011, 02:27
Avatar

Staff

Group:
ForumFree Staff
Posts:
109,434
Location:
Slayer's Flag

Status:


Attenzione

Questa guida è da utilizzare per i forum in Quirks Mode (Vecchio Template)

se il vostro forum utilizza una skin del nuovo template (Standard Mode) utilizzate la guida linkata qui sotto

Personalizzare il menù dei colori [Standard Mode]

***



In questa discussione trovate (cliccando sullo spoiler) un javascript che vi permetterà di aggiungere nuovi caratteri al menù Colore del modulo di inserimento messaggi e del modulo di risposta rapida.

Quel menù a tendina permette, di default, l'inserimento dei seguenti colori:

Blu

Rosso

Porpora

Arancio

Giallo

Grigio

Verde

per aggiungerne altri inserite questo javascript

CODICE
<script type="text/javascript"><!--
if(document.URL.indexOf('act=Post')!=-1||document.URL.indexOf('?t=')!=-1||document.URL.indexOf('act=Msg&CODE=04')!=-1)
{
var color=new Array("Color_Name_1","Color_Name_2");
var nomi={Color_Name_1: 'Nome_1', Color_Name_2: 'Nome_2'}

var y=document.getElementsByName("COLOR")[0];
for(i=0; i<color.length; i++)
y.options[y.options.length]=new Option(nomi[color[i]] ,color[i]);
y.options[y.options.length - 1].style.color =color[i];
}
//--></script>


in Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine, lo script, come è stato postato, può essere utilizzato per inserire due colori supplementari, le parti da modificare sono due, nella prima

var color=new Array("Color_Name_1","Color_Name_2");

sostituite le parti in blu con i nomi dei colori che volete inserire, in inglese, vanno usati i nomi di colori validi per HTML, qui

#entry116420076

trovate l'elenco dei 147 nomi di colore supportati, esempio

var color=new Array("coral","fuchsia");

per inserire un numero maggiore di colori, la parte da modificare è sempre quella, aggiungendo nuovi nomi di colore, "Color_Name_x" all'array, i nomi vanno inseriti fra doppi apici e separati con una virgola dal nome che li precede, qui un esempio con tre colori

var color=new Array("Color_Name_1","Color_Name_2","Color_Name_3");

quelle che vengono inserite con questo array sono le parole chiave corrispondenti ai colori, che appariranno nel BBCode utilizzato per colorare il testo, con l'array utilizzato come esempio con menù a tendina Colore sarà possibile inserire questi due BBCode

HTML
[color=coral]coral[/color]


coral

HTML
[color=fuchsia]fuchsia[/color]


fuchsia

in aggiunta a quelli di base già presenti, però i vostri utenti, nel menù a tendina, visualizzeranno la parola chiave (nome del colore in inglese) che avreste inserito, per fare in modo che visualizzino il nome del colore in italiano (o in qualsiasi altra lingua desideriate), dovrete modificare anche questa parte dello script

var nomi={Color_Name_1: 'Nome_1', Color_Name_2: 'Nome_2'}

le parti in blu andranno sostituite con gli stessi nomi di colore in inglese che avrete inserito nel primo array, le corrispondenti parti in rosso sostituitele con il testo che volete venga visualizzato nel menù a tendina Colore, utilizzando sempre i colori del primo esempio, il risultato sarà questo

var nomi={coral: 'Corallo', fuchsia: 'Fucsia'}

e il testo visualizzato nel menù a tendina, in corrispondenza dei codici da inserire, sarà questo

Corallo

Fucsia

per inserire un numero maggiore di colori, la parte da modificare è sempre quella, aggiungendo nuove parole chiave in inglese e nuovi nomi in italiano, Color_Name_x: 'Nome_x' all'array, i nomi vanno separati con una virgola dal nome che li precede, dopo Color_Name_x inserite i due punti e lasciate uno spazio, il nome in italiano che lo segue va inserito fra apici semplici, in questo modo 'Nome_x', qui un esempio con tre colori

var nomi={Color_Name_1: 'Nome_1', Color_Name_2: 'Nome_2', Color_Name_3: 'Nome_3'}

un volta inseriti i testi di vostro gradimento da visualizzare nel menù a tendina (evitate i nomi di colore troppo lunghi, che potrebbero causare antiestetici allargamenti del menù a tendina, allargamenti che potrebbero dare problemi ad utenti che utilizzino monitor con definizioni non elevate) noterete che questi nomi, al contrario di quelli preimpostati, non sono colorati col colore corrispondente al codice che inseriscono, potete ottenere anche questo effetto, per i nomi da voi inseriti, aggiungendo un opportuno codice in Colori e stili

AttenzioneIl codice che segue non è compatibile con Internet Explorer 7 e 8, gli utenti che utilizzano quei browsers non visualizzerano i nomi colorati nel menù a tendina


Amministrazione > Grafica > Colori e stili

il codice da inserire sarà questo (uno per ogni colore da voi aggiunto)

.codebuttons [value="Color_Name_x"] {color: #codice_del_colore}

in queste righe di codice sostituirete la parte in blu con i nomi di colore in inglese (le parole chiave) che avrete inserito nella prima parte del javascript, la parte in verde, invece, va sostituita con il valore esadecimale corrispondente a quel colore, li trovate sempre nella tabella dei nomi di colore

#entry116420076

qui un esempio con i due colori già utilizzati nel javascript

CODICE
.codebuttons [value="coral"] {color: #FF7F50}
.codebuttons [value="fuchsia"] {color: #FF00FF}


e il testo visualizzato nel menù a tendina, in corrispondenza dei codici da inserire, sarà questo

Corallo

Fucsia

Per eventuali problemi riguardanti l'utilizzo di questo javascript potete rivolgervi alla sezione Script Support del NewsBoard Forum

Guida e javascript realizzati da ~ Jolteon e kostaki in esclusiva per il NewsBoard Forum

 
Web  Top
0 replies since 19/3/2011, 02:27   2914 views
  Share