Personalizzare il menù delle dimensioni del testo [Quirks Mode]

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ù delle dimensioni del testo [Standard Mode]

***

In questa discussione trovate un javascript (in tre diverse versioni) che vi permetterà di personalizzare il menù Dimens. (Dimensioni) del modulo di inserimento messaggi e del modulo di risposta rapida.

La guida si divide in quattro parti, nel primo post trovate una introduzione, dove verranno spiegate alcune caratteristiche del BBCode size utilizzato su ForumFree e saranno fornite alcune semplici spiegazioni sul come si dimensiona il testo, il contenuto dell'introduzione vi sarà d'aiuto nell'utilizzo pratico del javascript.

Introduzione

Il menù a tendina Dimens. (Dimensioni) permette l'inserimento di un tag BBCode che può modificare le dimensioni del testo presente in un post, si tratta di un menù utile, su ForumFree, per modificare rapidamente le dimensioni di un testo di breve o media lunghezza, o anche di specifiche parole o frasi da far risaltare all'interno di un testo, con testi molto lunghi o che richiedano una formattazione particolarmente curata, si ottengono risultati migliori via CSS, utilizzando una stile in linea o attribuendo una classe al tag HTML che contiene il testo, classe a cui verranno aggiunti gli appositi attributi in Colori e stili, questo BBCode è

le dimensioni del testo varieranno a seconda del valore di NUMERO, di default sono presenti tre opzioni

1) size=1 corrispondente al testo Piccolo visualizzato nel menù a tendina

utilizzandolo per inserire un testo

il risultato è questo

testo di prova

2) size=7 corrispondente al testo Medio visualizzato nel menù a tendina

utilizzandolo per inserire un testo

il risultato è questo

testo di prova

3) size=14 corrispondente al testo Grande visualizzato nel menù a tendina

utilizzandolo per inserire un testo

il risultato è questo

testo di prova

questi tre valori sono sufficenti per l'utilizzo più semplice di quel tag, il porre in evidenza e/o far risaltare singole parole o brevi frasi all'interno di un testo, o anche per evidenziare un breve messaggio o un paragrafo all'interno di un messaggio lungo, per una regolazione più precisa delle dimensioni, è possibile modificare manualmente il valore del tag size prima di inviare il messaggio, i valori possibili vanno da un minimo di 1 (il valore Piccolo del menù a tendina) ad un massimo di 23, potete vedere qui i 23 testi di esempio

occorre specificare (servirà per meglio comprendere l'utilizzo di una delle versioni del javascript) che i tag BBCode sono stati creati come semplificazione dell'HTML, per essere compresi ed utilizzati dagli utenti dei forum, e che non vengono letti direttamente dai browsers, perchè tale lettura sia possibile il tag BBCode viene convertito, quando il messaggio inserito nel forum viene salvato sul server, nel tag HTML che rappresenta (nel caso di ForumFree, si tratta di un semplice span, a cui vengono aggiunti, tramite uno stile in linea, gli attributi del testo), e anche il valore numerico deve essere convertito in una misura che i browsers possano comprendere.

Le unità di misura delle dimensioni del testo di possono dividere in due categorie principali, assolute o relative, su ForumFree vengono utilizzate principalmente due unità di misura assolute, i punti (pt) e i pixel (px) e, in minor misura, una relativa, a cui accenneremo nella sezione dedicata alla seconda versione del javascript, per ora basterà dire che con il BBCode ForumFree le dimensioni vengono converite in punti (pt), partendo da un minimo di 8pt (size=1) e arrivando ad un massimo di 30pt (size=23), praticamente per passare dal valore del BBCode al valore espresso in punti basta fare valore del BBCode + 7, quindi i tre valori base del menù saranno

Piccolo

dimensione del testo di 8pt, visualizzando il sorgente del messaggio dopo averlo inviato, vedremo infatti che il BBCode è stato convertito in questo HTML


Medio

dimensione del testo di 14pt, visualizzando il sorgente del messaggio dopo averlo inviato, vedremo infatti che il BBCode è stato convertito in questo HTML


Grande

dimensione del testo di 21pt, visualizzando il sorgente del messaggio dopo averlo inviato, vedremo infatti che il BBCode è stato convertito in questo HTML


il rendere in punti (come nella stampa su carta) le dimensioni del testo stabilite tramite le opzioni del menù a tendina e, più in generale, tramite il BBCode size risale alle origini di ForumFree, e prima ancora, al software da cui ForumFree è stata sviluppata (in quelle board, nei messaggi si potevano inserire soltanto tag BBCode, non si poteva usare direttamente l'HTML), e nelle skin originali (e in quelle direttamente derivate da essere) anche la normale dimensione dei caratteri nei messaggi era stabilita in punti, questo consentiva agli autori di skin di "armonizzare" la dimensione scelta, di base, per il testo, con le opzioni del menù.

Con lo sviluppo dello skinning su ForumFre, arrivato a livelli ben superiori alle vecchie skin di base, e anche con il diffondersi dell'abitudine di stabilire le dimensioni del testo in pixel, e non in punti, la cura di questo particolare è stata, di fatto abbandonata, dato che quel menù ha solo tre opzioni, la cosa non ha costituito un problema, però utilizzando i javascript che trovate nei prossimi capitoli della guida potrete non solo personalizzare le opzioni, ma anche aumentarne il numero, quindi potrebbe risultare utile "l'armonizzare" le opzioni che inserirete con le dimensioni del testo previste, per i messaggi, dalla skin utilizzata sul vostro forum, a questo scopo viene fornita qui una piccola tabella di conversione approssimativa fra il testo dimensionato in punti (pt) e quello dimensionato in pixel (px)

Punti	Pixels	Punti	Pixels
6pt	8px	16pt	22px
7pt	9px	17pt	23px
7.5pt	10px	18pt	24px
8pt	11px	20pt	26px
9pt	12px	22pt	29px
10pt	13px	24pt	32px
10.5pt	14px	26pt	35px
11pt	15px	27pt	36px
12pt	16px	28pt	37px
13pt	17px	29pt	38px
13.5pt	18px	30pt	40px
14pt	19px	32pt	42px
14.5pt	20px	34pt	45px
15pt	21px	36pt	48px

Passiamo ora alla seconda parte della guida, cioè a presentare la versione base del javascript che modifica il menù Dimensioni

Come personalizzare il menù delle dimensioni del testo

Versione base, personalizzazione del tag BBCode size

Per personalizzare il menù Dimensioni, inserite questo javascript

in Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine, lo script di esempio inserisce 5 valori, i tre di base, size=1, size=7 e size=14, un valore intermedio fra i primi due, size=4, e il size=21, passeremo ora ad analizzarlo e a spiegare come modificarlo per inserire il numero e il tipo di dimensioni desiderate.

Lo script consiste in due sezioni distinte, la prima, su cui non è necessario intervenire, sovrascrive il menù Dimensioni di ForumFree, nascondendo le tre opzioni preimpostate, la seconda sezione è quella che ci consente di inserire il numero ed il tipo di opzioni da noi desiderate, in questa sezione le parti da modificare sono due, nella prima

var size=new Array("1","4","7","14","21");

vanno inseriti i valori numerici (nell'esempio indicati in blu) che vogliamo vengano assegnati alle opzioni del menù a tendina, come potete vedere vanno inseriti fra doppi apici e separati con una virgola dal valore che li precede, qui un esempio con 9 valori

var size=new Array("1","3","5","7","9,"11,"13,"15,"17");

ovviamente potete inserire i valori che preferite, si consiglia di inserirli in ordine crescente, in modo che nel menù a tendina vengano visualizzati a "scendere", dal minore al maggiore, ricordate che il valore minimo è 1 (8 punti) e il valore massimo è 23 (30 punti), la seconda parte da modificare è questa

var nomi={1: 'ExtraSmall', 4: 'Small', 7: 'Medium', 14: 'Large', 21: 'ExtraLarge'}

che serve ad abbinare ad ogni dimensione un corrispondente testo che verrà visualizzato nel menù a tendina (esattamente come i testi Piccolo, Medio e Grande del menù standard) qui potete inserire i termini che preferite, evitate termini troppo lunghi (che potrebbero causare deformazioni del menù) ed è ovviamente consigliato l'utilizzo di termini che descrivano la dimensione inserita, come potete vedere le dimensioni inserite nella prima parte vanno qui ripetute, dopo ogni valore (in blu) inserite i due punti e lasciate uno spazio, il nome che lo segue va inserito fra apici semplici, in questo modo 'ExtraSmall', separando il nome dal valore sucessivo con una virgola, è teoricamente possibile inserire tutti i possibili valori supportati dal BBCode size (da 1 a 23), per non allungare troppo il menù è comunque consigliabile non inserire più di una dozzina di opzioni.

Terminata la descrizione del'utilizzo del javascript si può passare alla terza parte di questa guida, dove verrà presentata la prima versione alternativa dello script, versione di utilizzo leggermente più complesso, in quanto sostituisce il BBCode con un tag HTML che consente alcune personalizzazioni.

Come personalizzare il menù delle dimensioni del testo

Versione alternativa, con l'utilizzo diretto di un tag HTML

Questa versione alternativa ha lo stesso scopo della versione base, per personalizzare il menù Dimensioni, inserite questo javascript

in Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine, la differenza, rispetto alla versione base, è che non viene più utilizzato il tag BBCode size, lo script inserisce direttamente il tag HTML equivalente, potete vedere qui la differenza fra i due script, versione base

versione alternativa

il tag inserito non sarà questo

ma questo

i vantaggi offerti da questa versione sono

1) non si è limitati alle dimensioni supportate dal BBCode, si può scendere sotto agli 8 punti (sconsigliato) e/o salire sopra ai 30 punti

2) si possono sfruttare dimensioni espresse anche con i mezzi punti, esempio 10.5 (il decimale va separato con un punto, e non con una virgola)

3) si possono sostituire le dimensioni espresse in punti, con dimensioni espresse in pixel, modificando questa parte

basta sostituire il pt (punti) con unpx (pixel)

Le due variabili, quella delle dimensioni

var size=new Array("8","11","14","21","28");

e quella dei nomi che appariranno nel menù a tendina

var nomi={8: 'ExtraSmall', 11: 'Small', 14: 'Medium', 21: 'Large', 28: 'Huge'}

funzionano con le stesse modalità già spiegate per la versione base, l'unica differenza è costituita dal fatto che i valori numerici sono dimensioni espresse in punti (o pixel) e non valori del BBCode, passiamo ora alla quarta parte della guida, che contiene la seconda (e più complessa) versione alternativa di questo script

Come personalizzare il menù delle dimensioni del testo

Seconda versione alternativa, con l'utilizzo diretto di un tag HTML a cui vengono attribuiti dei selettori di classe

In questa quarta parte della guida, trovate la versione più complessa (e personalizzabile) dello script, questa versione non inserisce direttamente un tag che permetta di regolare le dimensioni del testo, quello che viene inserito è uno span generico, senza stili in linea, a cui può, però, essere attribuito un selettore di classe, il risultato sarà una cosa di questo tipo

aggiungerete poi il selettore di classe in colori e stili, dove potrete attribuirgli le caratteristiche che desiderate.

Con questo script potete quindi personalizzare a vostra discrezione ognuna delle opzioni di quel menù a tendina, utilizzando, se volete, diverse unità di misura per le varie opzioni, e aggiungendo, ad ogni opzione, personalizzazioni diverse dal semplice dimensionamento del testo (tipo di font, colore, corsivo, eccetra), postiamo ora lo script con delle opzioni di esempio, questa parte

va sempre inserita in Amministrazione > Grafica > Codice HTML > Codice HTML che sarà mostrato in FONDO a tutte le pagine, come potete vedere è simile alla versione precedente, la principale differenza è nell'utilizzo delle due variabili, in questa

var size=new Array("extrasmall","small","medium","large","huge");

non vanno inseriti i valori numeri di dimensione, ma i selettori di classe che volete utilizzare, l'altra

var nomi={extrasmall: 'ExtraSmall', small: 'Small', medium: 'Medium', large: 'Large', huge: 'Huge'}

serve sempre per personalizzare il testo che appare nel menù a tendina, ad ogni selettore di classe abbinerete il testo corrispondente, fatto questo, aggiungete, in colori e stili, i selettori di classe utilizzati

a cui aggiungerete gli attributi desiderati, come potete vedere, in quelli di esempio, ad ogni classe corrisponde non solo una diversa dimensione del testo, ma anche un diverso tipo di font e un diverso colore del testo

Opzionalmente, ma è sconsigliato, potete aggiungere le classi non in colori e stili, ma in codice HTML, utilizzando una piccola dichiarazione di stile inseribile in Codice HTML che sarà mostrato in CIMA a tutte le pagine

CODICE

<style type="text/css">.extrasmall {font-family: verdana; font-size: 8pt; color: #FF0000}
.small {font-family: arial; font-size: 11pt; color: #00FF00}
.medium {font-family: tahoma; font-size: 14pt; color: #0000FF}
.large {font-family: helvetica; font-size: 21pt; color: #FF00FF}
.huge {font-family: courier; font-size: 28pt; color: #FFFF00}</style>

infine, potete aggiungere un'altra personalizzazione al testo che apparirà nel menù a tendina (attenzione, si tratta di un metodo che non è supportato da tutti i browsers), aggiungendo, in colori e stili (o nella dichiarazione di stile) questi selettori di attributo

le modifiche effettuate con questi selettori si applicheranno al testo visibile nel menù a tendina (identificato, nel foglio di stile del vostro forum, con la classe codebuttons, a cui aggiungerete lo specifico valore delle varie opzioni di quel menù, cioè i selettori di classe che avrete inserito nella variante nomi del primo script