Come creare e modificare una skin vBulletin (fino a 3.8.x)

logo-vbulletin-articoli-klayz
Come creare e modificare una skin vBulletin?

Avete sempre sognato di creare una skin personale per il vostro forum vBulletin? Come creare e modificare una skin vBulletin. Continuate a leggere l’articolo per scoprire come fare!

Introduzione

In questa guida vedremo come creare una propria skin vBulletin. Di default il nostro forum vB ha una skin di colore blu chiaro, una skin semplice e veloce che però ai più non piace. Per questo motivo infatti, nella maggior parte dei casi, la skin viene cambiata con una personalizzata o con una skin scaricata dal web creata da terzi. Per vedere le skin disponibili create da terzi si può far riferimento a questo articolo: Risorse vBulletin [Siti di mod, skin, etc.], sotto la voce “vBulletin Skin/Styles/Grafica”.

Iniziamo specificando che, se si vuole modificare i template della skin, prendendo come esempio la skin di default di vB, che si deve conoscere un minimo di CSS e di XHTML. Il tutto si può fare attraverso il nostro Pannello Admin grazie alle molteplici funzionalità messe a disposizione dalla nostra board vB.

Pratica

Bene, apriamo il nostro programma FTP (ad esempio FileZilla) e rechiamoci nella cartella del nostro forum. Lì creiamo una nuova cartella chiamata /newskin/. Poi apriamo la cartella /images/, copiamo tutto il suo contenuto e incolliamolo nella cartella creata (/newskin/). Adesso chiudiamo il nostro programma FTP e rechiamoci nel nostro pannello admin.

AdminCp -> Skin & Templates -> Gestione Skin -> Aggiungi Nuova Skin

Inseriamo un titolo, specifichiamo “No Parent Style”, e togliamo la possibilità di selezionare la nuova skin agli utenti normali (Permetti selezione utente -> No). Adesso salviamo la nuova skin.

Verremo riportati alla schermata di Gestione Skin. A destra del nome della nostra nuova skin, dal menu a tendina premendo su “Tutte le Opzioni della Skin” verremo mandati ad una nuova schermata che ci presenterà i tre template principali della skin (header, headinclude, footer), le impostazioni della skin e tutti i pannelli CSS.

Nel pannello “Percorsi Immagine” dovremo cambiare tutti i percorsi di default (images/misc..) con i nuovi , relativi alla nostra nuova skin e alla sua cartella che abbiamo creato in precedenza. In modo da avere questi percorsi:

newskin/misc/vbulletin3_logo_white.gif
newskin/buttons
newskin/statusicon
newskin/attach
newskin/misc
newskin/editor
newskin/polls
newskin/rating
newskin/reputation

Perfetto! Adesso dunque potremo agire sulle icone, i bottoni e tutto quello che vogliamo cambiare nella nostra skin a livello di immagini grafiche.

Come cambiare icone/bottoni/pulsanti?

Il procedimento è lo stesso per tutte le immagini che vogliamo cambiare. Apriamo il nostro programma di FTP, rechiamoci nella cartella del nostro forum e apriamo la sottocartella precedentemente  creata (/newskin/). In precedenza abbiamo copiato in quella cartella tutto il contenuto di /images/. Avremo dunque queste sottocartelle:

  • attach
  • avatars
  • buttons
  • editor
  • gradients
  • statusicons
  • smilies
  • reputation
  • regimage
  • rating
  • ranks
  • polls
  • misc
  • icons
  • index.html

Adesso, se ad esempio vogliamo cambiare il bottone per aprire un nuovo thread, dovremo creare una nuova immagine e rinominarla newthread.gif, dopodiché la potremo copia-incollare nella cartella /buttons/ sovrascrivendo l’attuale. Visitando adesso il nostro forum vedremo la nostra immagine al posto di quella di default di vB.

Lo stesso procedimento vale per tutte le immagini presenti nelle sottocartelle della nostra cartella /newskin/.

Come cambiare i CSS e l’aspetto grafico del nostro Forum?

Nella stessa pagina dell’AdminCp (AdminCp -> Skin & Templates -> Gestione Skin -> (skin) -> Tutte le Opzioni della Skin [dal menu a tendina a destra]) abbiamo tutti i pannelli CSS i quali possiamo modificare a nostro piacimento.

Come sopra detto, necessiteremo di un minimo di conoscenza di CSS per poter procedere, nonostante in alcuni punti il nostro vB ci aiuta molto fornendoci interi pannelli di colori selezionabili.

Vedete che ogni pannello CSS ha un nome diverso dagli altri, che inizia molte volte con un punto (esempio: .thead, body, .tcat, etc):

Facciamo riferimento a queste immagini messe a disposizione dalla Jelsoft, prese direttamente dalla documentazione ufficiale:

[Color Map Reference]

Links from this section:

Forum Home Template
Navbar Template
New Thread Template
Thread Template
User Control Panel Template
What’s Going On Template
Forum Display Template

In questo modo sapremo cosa modificare e come modificarlo, vedendo dove andremo ad agire sulla nostra skin.

Modifica dei Template

Oltre che ai colori e alle immagini, si può voler modificare l’aspetto delle tabelle della nostra skin (aggiungendo ad esempio una barra laterale in home, etc). Per modificare l’aspetto di qualsiasi tabella si dovrà agire sui template della nostra skin. Dunque, per modificare i template dovremo andare in:

AdminCp -> Skin & Template -> Gestione Skin -> (skin) -> Modifica Template [dal menu a tendina]

In questa schermata vedremo la lista di tutti i gruppi dei template. Cliccando su un gruppo due volte lo apriremo e vedremo i template che contiene. Per aprire tutti i gruppi si dovrà premere sul pulsante “<< >>”.

I Template Principali

I template principali che si modificano più spesso sono i seguenti:

header: questo template, come il nome stesso dice, contiene tutto il codice della parte alta del nostro forum (nella parte del logo). Modificando questo template dunque andremo ad agire sul codice nella parte alta del forum.

footer: al contrario del primo, questo è tutto il codice della parte bassa del nostro forum; contiene il codice per il box di Selezione Rapida Skin, il codice del testo di copyright e i codigi dell’orario.

headinclude: in questo template sono racchiusi tutti i link e gli script per le applicazioni in javascript, i css e molto altro.

FORUMHOME: questo è il template della pagina principale del nostro forum. Della ‘forumhome’ appunto. D aqui possiamo modificare tutto quello che appare nella home del nostro forum.

navbar: questo è il template della barra di navigazione dove viene mostrato il box di login, il percorso del forum, il titolo della discussione che si sta visualizzando, etc.

postbit(_legacy): il template/i due template che contengono il codice che controlla la visualizzazione dei post.

Adesso non resta altro che fare pratica, creare nuove skin -partendo dal presupposto che le prime non vengono mai come vorremmo- e pubblicarle sul web in modo da poter ricevere consigli, critiche e apprezzamenti. Buona creazione di skin! 🙂

 
0 Kudos
Non ti
muovere!

Condividi il Post