| Questo script, permette agli amministratori di poter creare delle skin con alcune parti di CSS con valori variabili che, a seconda dei gusti e delle necessità dell'utente, durante la navigazione potranno essere intercambiati con degli altri valori, preimpostati e scelti dagli stessi amministratori. Gli usi dello script sono molteplici. Permette infatti all'utente di regolare, selezionando da una lista di valori preimpostati, il colore di sfondo, dei font, dei post, ma anche regolare alcune sfumature, dei bordi, dei border-radius, delle grandezze di alcuni font e tanto altro ancora, ovviamente sempre sotto il controllo dell'amministratore che come già detto ha il compito di scegliere sia quali sono gli elementi variabili e sia la lista di valori che questi possono assumere. Lo script può essere, quindi, sia usato per scopi pratici come il migliorare l'esperienza di navigazione nei topic fornendo degli strumenti per migliorare la lettura (come far scegliere un colore per i font e per .color, oppure far scegliere tra diverse grandezze dei font), e sia per scopi meramente estetici. Infine gli skinner, potranno usarlo come una sorta di generatore. Lo skinner stabilirà le combinazioni di colori, immagini o codici css, mentre l'amministratore del forum avrà il compito di scegliere quelli che preferisce e generare il css relativo tramite un apposito bottone per poi installarlo nel forum. Per l'utilizzo dello script in ogni caso, è necessaria una conoscenza seppur minima del CSS. 
Generatore (questa parte è riservata esclusivamente agli skinner o a chi ha intenzione di creare una skin propria) Se interessa esclusivamente la parte relativa all'installazione, ovvero il prelievo di una skin già esistente, bisogna passare alla fase successiva.Questa parte serve a stabilire il CSS dinamico, e verrà svolta con l'ausilio di un generatore, che troverete in questo forum: http://dynamiccss.forumfree.it/Per iniziare una nuova skin, bisognerà aprire una nuova discussione nella sezione DynCss. Nel generatore si troveranno tre importanti box:
- Array: Nel gruppo Array sono contenuti i diversi valori assumibili dagli elementi variabili, separati da |.
Ogni elemento del gruppo è identificato da un "Nome" non modificabile, che corrisponde ad un opzione del menù di selezione "Set" di ogni elemento del gruppo Settaggi, escluso, quello di tipo Colore derivato.
L'elemento array1, è fisso e non può essere modificato.
- Settaggi: Gli elementi che fanno parte del gruppo dei settaggi si dividono in tre tipi: Colore, Immagine e CSS.
Questi rappresentano i settaggi di base, e si ottengono premendo il pulsante "settaggio base".
Per ogni settaggio si devono specificare un "Nome chiave" che corrisponderà al token che verrà sostituito nel CSS (ad esempio nome_chiave, che nel CSS verrà richiamato da @nome_chiave), un "Nome menù" corrispondente al nome che comparirà nel pannello di impostazioni della skin con stile variabile e un "Valore di default" che può essere omesso e che nel caso del Colore corrisponderà ad un colore esadecimale (#ffffff), nel caso dell'Immagine ad un link (https://skin.forumfree.net/social/ff-icon.png), e nel caso del CSS ad una stringa di CSS (border-radius: 5px).
Infine si deve specificare un "Set" che corrisponde ad un elemento del gruppo Array indicato dal suo nome
I tipi Immagine e Colore, hanno a loro volta dei tipi derivati.
L'Immagine può avere il tipo "Immagine collegata", che si ottiene premendo il pulsante "Collega ad un'altra immagine".
Di questo tipo vanno specificati, l'"Immagine principale" dall'apposito menù di selezione selezionando l'immagine che si vuole rendere dipendente (quando si cambia l'immagine principale cambia anche la collegata), il "Valore di default" che deve essere un link all'immagine, e il "Set"
Il Colore può avere il tipo "Colore derivato", che si ottiene premendo il pulsante "Imposta un colore derivato", e si specificano i valori numerici di luminosità, brillantezza, saturazione, opacità e greyscale.
Luminosità e saturazione possono avere valori sia negativi che positivi, gli altri, esclusivamente positivi.
Questi tipi derivati, vengono identificati da una chiave, visibile all'inizio della riga corrispondente al settaggio.
Nel CSS vanno richiamati allo stesso modo dei settaggi normali (Se la chiave è tipo_1, allora nel CSS andrà @tipo_1).
- Css Variabile: Si tratta di normale CSS, in cui i valori che devono esser variabili, vanno indicati tramite appositi token specificati nei settaggi. Ad esempio se abbiamo un settaggio di tipo colore con chiave nome_chiave, nel CSS dovrà esser richiamato con @nome_chiave.
Il CSS del generatore è come del codice normale, con la differenza che andranno inserite le chiavi relative agli elementi variabili. Ad esempio, se color_1 è la chiave relativa ad un elemento colore variabile, nel css la si può utilizzare in questo modo
CODICE .classe {background: @color_1}
Il generatore permette inoltre sia di modificare i settaggi di skin proprie, sia di utilizzare una skin preesistente come base, utilizzando la funzione "Importa", ovvero copiando l'id della discussione in cui sono presenti i settaggi della skin da usare come base, e copiandolo nel box sotto la barra importa. Come esempio per il generatore si può provare ad importare la discussione con id 69250964. Una volta generato il codice si può passare all'installazione sul forum. Installazione (questa parte riguarda sia gli skinner, sia chi vuole installare una skin già pronta) L'installazione dello script, è abbastanza semplice. Ciò che è necessario è avere a disposizione il codice per i settaggi della skin. Questo codice viene viene creato grazie all'ausilio di un forum del generatore, creato appositamente per semplificare la creazione dei settaggi altrimenti molto ostica. Nella sezione principale del forum saranno presenti dei topics. Ogni topic corrisponde ai settaggi di una determinata skin.  Questo topic potrà esser stato creato o da uno skinner che mette a disposizione una skin già pronta, oppure dallo stesso amministratore che sta personalizzando una skin per il proprio forum. Nel topic vengono forniti due varianti del codice, e l'utente deve scegliere una tra queste. La scelta di una, esclude ovviamente l'altra, infatti non possono essere installate contemporaneamente tutte e due le varianti. La differenza tra le due è che nel primo caso (consigliato), tutto il codice sarà inserito in Gestione HTML, e quindi il caricamento sarà leggermente più veloce. Nel secondo caso, da considerare solo se si ha stretta necessità di risparmiare più spazio possibile in HTML, il codice viene prelevato dal forum di prova ogni volta, e questo comporta minor codice da inserire in HTML e quindi maggior spazio disponibile e modifiche automatiche al css variabile qualora lo skinner decidesse di apportare dei cambiamenti (questo può essere sia un vantaggio, sia uno svantaggio), ma inevitabilmente rallenta il tutto. La seconda variante del codice, è sconsigliata, e come già detto va usata solo in estrema necessità. Un esempio di codici forniti, lo si trova in questo topic http://dynamiccss.forumfree.it/?t=69250964Prima variante: CODICE <script type="text/javascript">var nb_scs_obj = '{"skinArrays" : { "array1": ["#42aad6","#f0689d","#d43c3e","#e26446","#e4b23c","#5fa848","#426b8e","#7251cd","#5eb889","#695c4f","#333535"], "array2": ["http://skin.forumfree.net/2156/mback_left.png","http://skin.forumfree.net/2157/mback_left.png","http://skin.forumfree.net/2158/mback_left.png"], "array3": ["http://skin.forumfree.net/2156/mback_center.png","http://skin.forumfree.net/2157/mback_center.png","http://skin.forumfree.net/2158/mback_center.png"], "array4": ["http://skin.forumfree.net/2156/mback_right.png","http://skin.forumfree.net/2157/mback_right.png","http://skin.forumfree.net/2158/mback_right.png"], "array5": ["border-radius: 10px 10px 0 0","border-radius: 30px 30px 0 0","border-radius: 5px 5px 0 0"], "array6": ["http://dumpshare.net/images/6110582batthern.png","http://dumpshare.net/images/3174288back_pattern.png","http://dumpshare.net/images/7131027arches.png","http://dumpshare.net/images/2571430arabesque.png","http://dumpshare.net/images/3725829always_grey.png","http://dumpshare.net/images/657134purty_wood.png","http://dumpshare.net/images/9596259tileable_wood.png"], "array7": ["12px","14px","16px","18px"] }, "skinSettings" : { "color_1": {"type": "hex", "name": "Sfondo, title e dettagli vari", "set": "skinArrays.array1", "def": "#333535"}, "color_1_1": {"base": "color_1", "light": 10, "saturate": -10, "bright": 2, "greyscale": "false"}, "color_1_2": {"base": "color_1", "light": -5, "saturate": -2, "greyscale": "false"}, "color_2": {"type": "hex", "name": "Mback e colori primari", "set": "skinArrays.array1", "def": "#42aad6"}, "color_2_1": {"base": "color_2", "light": 20, "saturate": 10, "bright": 10, "greyscale": "false"}, "color_2_2": {"base": "color_2", "light": 20, "saturate": 10, "opacity": 0.2, "greyscale": "false"}, "color_2_3": {"base": "color_2", "light": 20, "saturate": 10, "opacity": 0.1, "greyscale": "false"}, "color_2_4": {"base": "color_2", "light": 5, "saturate": 10, "opacity": 0.7, "greyscale": "false"}, "color_2_5": {"base": "color_2", "light": -10, "saturate": -10, "greyscale": "false"}, "color_2_6": {"base": "color_2", "light": -5, "saturate": -10, "opacity": 0.4, "greyscale": "false"}, "img_2": {"type": "img", "name": "Pattern di sfondo", "set": "skinArrays.array6", "def": "http://dumpshare.net/images/3174288back_pattern.png"}, "font_1": {"type": "css", "name": "Grandezza font dei post", "set": "skinArrays.array7", "def": "12px"} }, "dynCss" : "body {background-color: @color_1}.mback {background-color: @color_2; border: 1px solid @color_2_5;}.title, .darkbar {background-color: @color_1 !important; border: 1px solid @color_1_2 !important}a, .menu li a {color: @color_2}a:hover, .menu li a:hover {color: @color_2_5}.board .aa img {background: @color_2}.web a:hover {color: @color_1}.on .aa {box-shadow: inset 3px 0 0 @color_2_4}.tag .mback {background-color: @color_1; border: 1px solid @color_1_2}.menuwrap em {color: @color_2}.menu li strong, .menuwrap b {color: @color_1}.forum .annuncio {background: @color_2_2}.forum .importante {background: @color_2_3}#board .stats .bottom .right b {background: @color_2_2}.sunbar {background-color: @color_2; border: 1px solid @color_2_5}.color {font-size: @font_1}.focus {background: @color_2_4 !important}.focus a:hover {color: @color_1 !important}.bottomborder {border-bottom: 1px dashed @color_2_5}.buttons a:hover, .nav a:hover, .pages li a:hover {color: @color_1}.send .mback {background-color: @color_1; border: 1px solid @color_1_2}.pages .current, .pages2 a {background: @color_2}.pages .current:hover, .pages2 a:hover {background: @color_1} .bar div {background: @color_1_1}.max .bar div {background: @color_2}.darkbar .forminput:hover, .fast.send .forminput:hover, .title input.forminput:hover {background: @color_2}.codebuttons:hover {background: @color_2_2; border-color: @color_2_6}.profile .tabs a, .cp .tabs a {background: @color_1}.profile .tabs .current a, .cp .tabs .current a {background: @color_2}.side_calendar .current {background: @color_2 !important}.side_list > *:nth-child(odd), .side_list > *:nth-child(odd) a {color: @color_1}.blog .on {border-color: @color_2}#ssm .ww {background: @color_2} #ssm .title {background: @color_1_2 !important}body {background-image: url(@img_2)}"}'</script>
<script type="text/javascript" src="http://nb.forumfree.it/scripts/ace/skincss_change.js"></script> Seconda variante: CODICE <script type="text/javascript" src="http://dynamiccss.forumfree.it/api.php?t=69250964&st=firstpost&type=js"></script>
<script type="text/javascript" src="http://nb.forumfree.it/scripts/ace/skincss_change.js"></script> Una volta che si ha a disposizione ll codice si può procedere all'installazione dello script. Come prima cosa in Colori e stili, in cima, prima di ogni dichiarazione va inserito /* ------ START ------ */, mentre in fondo, dopo ogni dichiarazione /* ------ END ------ */. Tra questi due commenti deve esser inerito tutto il CSS fisso della skin.   Passando poi al pannello codice HTML, il codice fornito dal generatore va inserito nel box Codice HTML che sarà mostrato in CIMA a tutte le pagine.  Una volta installato lo script, andando nel forum si dovrà scegliere, cliccando sul bottone che comparirà accanto l'input di ricerca  , una configurazione di base che verrà visualizzata da chi non ha gli script disabilitati, e nelle pagine in cui lo script non viene caricato. Una volta scelta la configurazione, si deve premere su  , e dal popup che comparirà, copiare il CSS generato  e salvarlo poi in Colori e stili prima di /* ------ END ------ */ (questa fase non è obbligatoria, ma è meglio prevedere una configurazione anche per queste situazioni). Funzione generatore skin Quest'ultima funzione ("Genera un css di base con questi colori") può esser anche usata dall'amministratore per scegliere la configurazione che più gli piace, installare quella e poi rimuovere lo script, impedendo così la modifica da parte degli utenti, ma mantendendo lo stile che ha scelto. In teoria quindi, anche gli skinner possono montare le loro skin prevedendo degli elementi con stili "intercambiabili" in virtù di quest'ultima caratteristica, creando di fatto delle skin "assemblabili" dagli amministratori. |
