Come personalizzare le icone delle categorie in vBulletin 4

Avete un forum con vBulletin 4 e volete personalizzare le icone delle vostre sezioni/categorie?

Questa è una delle richieste da parte dei Webmaster che più mi capita di trovare e leggere nelle varie Community dedicate ai CMS, e che oggi tratteremo in questo articolo. La modifica è fattibile, e richiede la modifica di alcuni template e l'installare di un plugin, scaricabile gratuitamente da vBulletin.org.

Ma entriamo subito nel vivo dell'articolo, e vediamo come personalizzare in modo semplice e veloce, le icone delle categorie del vostro Forum vBulletin 4.

1. Collegatevi a questo indirizzo, scaricate il file compresso contenente il plugin per la modifica e scompattatelo in una cartella;

2. Entrate nell'ACP di vBulletin, ed importate il file xml “product-forumcategoryicons.xml”, contenuto nella cartella del plugin, in “Plugin e Prodotti”;

3. Aprite ora il template “forumhome_forumbit_level2_post“, e cercate all'interno la parte di codice:

<img src=”{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<div>
<div>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>

4. Sostituite il codice sopra citato, con il seguente:

<!– Forum Category Icons –>
<vb:if condition=”$vbulletin->options[‘forumiconimg_enabled'] && $forum[‘forumiconimg']”>
<vb:if condition=”$vbulletin->options[‘forumiconimg_location'] == ‘2'”>
<!– replace status icon with category icon –>
<!– new posts –>
<vb:if condition=”$forum[‘statusicon'] == ‘new'”><a href=”forumdisplay.php?{vb:raw session.sessionurl}do=markread&f={vb:raw foruminfo.forumid}&markreadhash={vb:raw bbuserinfo.securitytoken}” rel=”nofollow”>
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” style=”<vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_size'] == ‘1'”>width:{vb:raw forum.forumiconimg_forum_width}px; height:{vb:raw forum.forumiconimg_forum_height}px;<vb:else />width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px;</vb:if>” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”{vb:rawphrase doubleclick_forum_markread}” /></a>
<!– new posts locked –>
<vb:elseif condition=”$forum[‘statusicon'] == ‘new_lock' && $vbulletin->options[‘showlocks']” />
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/lock.png” style=”background-image:url(‘images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}'); background-repeat:no-repeat; <vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};</vb:if> width:48px; height:48px;” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<!– old posts locked –>
<vb:elseif condition=”$forum[‘statusicon'] == ‘old_lock' && $vbulletin->options[‘showlocks']” />
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/lock.png” style=”background-image:url(‘images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}'); background-repeat:no-repeat;<vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};</vb:if> width:48px; height:48px;” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<vb:else />
<!– old posts –>
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” style=”<vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_size'] == ‘1'”>width:{vb:raw forum.forumiconimg_forum_width}px; height:{vb:raw forum.forumiconimg_forum_height}px;<vb:else />width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px;</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_status'] == ‘1' && $forum[‘statusicon'] == ‘old' && $bbuserinfo[‘userid']”><vb:if condition=”is_browser(‘ie')”>filter:alpha(opacity={vb:raw vboptions.forumiconimg_opacity}); -ms-filter:”alpha(opacity={vb:raw vboptions.forumiconimg_opacity})”;<vb:else />opacity:0.{vb:raw vboptions.forumiconimg_opacity};</vb:if></vb:if>” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”{vb:rawphrase forum_contains_no_new_posts}” />
</vb:if>
<vb:else />
<!– do nothing –>
<img src=”{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
</vb:if>
<div>
<div>
<vb:if condition=”$vbulletin->options[‘forumiconimg_location'] == ‘0'”>
<!– category icon after status icon –>
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” alt=”{vb:raw forum.title}” style=”float:left; <vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};<vb:else />margin-right:4px;</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_size'] == ‘1'”>width:{vb:raw forum.forumiconimg_forum_width}px; height:{vb:raw forum.forumiconimg_forum_height}px;<vb:else />width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px;</vb:if>;” />
<div>
<h2 style=”font-weight:bold; font-size:13px;”><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>
</div>
<vb:elseif condition=”$vbulletin->options[‘forumiconimg_location'] == ‘1'” />
<!– category icon under forum title –>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p><img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” style=”float:left; <vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};<vb:else />margin-right:4px;</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_size'] == ‘1'”>width:{vb:raw forum.forumiconimg_forum_width}px; height:{vb:raw forum.forumiconimg_forum_height}px;<vb:else />width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px;</vb:if>” alt=”{vb:raw forum.title}” />{vb:raw forum.description}</p></vb:if>
<vb:else />
<!– do nothing –>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>
</vb:if>
<vb:else />
<!– Forum Category Icons Disabled –>
<img src=”{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<div>
<div>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>
</vb:if>
<!– End Forum Category Icons –>

5. Aprite il template “forumhome_forumbit_level1_post“, e cercate all'interno il codice:

<img src=”{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<div>
<div>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>

6. Sostituitelo con il seguente codice:

<!– Forum Category Icons –>
<vb:if condition=”$vbulletin->options[‘forumiconimg_enabled'] && $forum[‘forumiconimg']”>
<vb:if condition=”$vbulletin->options[‘forumiconimg_location'] == ‘2'”>
<!– replace status icon with category icon –>
<!– new posts –>
<vb:if condition=”$forum[‘statusicon'] == ‘new'”><a href=”forumdisplay.php?{vb:raw session.sessionurl}do=markread&f={vb:raw foruminfo.forumid}&markreadhash={vb:raw bbuserinfo.securitytoken}” rel=”nofollow”>
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” style=”<vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_size'] == ‘1'”>width:{vb:raw forum.forumiconimg_forum_width}px; height:{vb:raw forum.forumiconimg_forum_height}px;<vb:else />width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px;</vb:if>” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”{vb:rawphrase doubleclick_forum_markread}” /></a>
<!– new posts locked –>
<vb:elseif condition=”$forum[‘statusicon'] == ‘new_lock' && $vbulletin->options[‘showlocks']” />
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/lock.png” style=”background-image:url(‘images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}'); background-repeat:no-repeat; <vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};</vb:if> width:48px; height:48px;” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<!– old posts locked –>
<vb:elseif condition=”$forum[‘statusicon'] == ‘old_lock' && $vbulletin->options[‘showlocks']” />
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/lock.png” style=”background-image:url(‘images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}'); background-repeat:no-repeat;<vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”> margin:{vb:raw vboptions.forumiconimg_margin};</vb:if> width:48px; height:48px;” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<vb:else />
<!– old posts –>
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” style=”<vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};</vb:if><vb:if condition=”$vbulletin->options[‘forumiconimg_size'] == ‘1'”>width:{vb:raw forum.forumiconimg_forum_width}px; height:{vb:raw forum.forumiconimg_forum_height}px;<vb:else />width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px;</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_status'] == ‘1' && $forum[‘statusicon'] == ‘old' && $bbuserinfo[‘userid']”><vb:if condition=”is_browser(‘ie')”>filter:alpha(opacity={vb:raw vboptions.forumiconimg_opacity}); -ms-filter:”alpha(opacity={vb:raw vboptions.forumiconimg_opacity})”;<vb:else />opacity:0.{vb:raw vboptions.forumiconimg_opacity};</vb:if></vb:if>” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”{vb:rawphrase forum_contains_no_new_posts}” />
</vb:if>
<vb:else />
<!– do nothing –>
<img src=”{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
</vb:if>
<div>
<div>
<vb:if condition=”$vbulletin->options[‘forumiconimg_location'] == ‘0'”>
<!– category icon after status icon –>
<img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” alt=”{vb:raw forum.title}” style=”float:left; margin-right:4px; width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px; top:{vb:raw vboptions.forumiconimg_top}px;” />
<div>
<h2 style=”font-weight:bold; font-size:13px;”><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>
</div>
<vb:elseif condition=”$vbulletin->options[‘forumiconimg_location'] == ‘1'” />
<!– category icon under forum title –>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p><img src=”images/{vb:raw vboptions.forumiconimg_folder}/{vb:raw forum.forumiconimg}” style=”float:left; <vb:if condition=”$vbulletin->options[‘forumiconimg_margin_location'] == ‘1' OR $vbulletin->options[‘forumiconimg_margin_location'] == ‘3'”>margin:{vb:raw vboptions.forumiconimg_margin};<vb:else />margin-right:4px;</vb:if> <vb:if condition=”$vbulletin->options[‘forumiconimg_size'] == ‘1'”>width:{vb:raw forum.forumiconimg_forum_width}px; height:{vb:raw forum.forumiconimg_forum_height}px;<vb:else />width:{vb:raw vboptions.forumiconimg_width}px; height:{vb:raw vboptions.forumiconimg_height}px;</vb:if>” alt=”{vb:raw forum.title}” />{vb:raw forum.description}</p></vb:if>
<vb:else />
<!– do nothing –>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>
</vb:if>
<vb:else />
<!– Forum Category Icons Disabled –>
<img src=”{vb:stylevar imgdir_statusicon}/{vb:raw forum.imageprefix}forum_{vb:raw forum.statusicon}-48.png” id=”forum_statusicon_{vb:raw forum.forumid}” alt=”” />
<div>
<div>
<div>
<h2><a href=”{vb:link forum, {vb:raw forum}}”>{vb:raw forum.title}</a></h2>
<vb:if condition=”$show[‘browsers']”><span>({vb:raw forum.browsers} {vb:rawphrase viewing})</span></vb:if>
</div>
<vb:if condition=”$show[‘forumdescription']”><p>{vb:raw forum.description}</p></vb:if>
</vb:if>
<!– End Forum Category Icons –>

7. Le modifiche sono già terminate, ora non rimane che configurare il plugin ed altri piccoli dettagli. Create una nuova cartella nella root dove avete vBulletin sul server, (annotando da parte il nome dato alla cartella), e caricate all'interno le varie icone che volete assegnare alle vostre categorie. Vi ricordo, che sono permessi i formati di immagini: jpg, gif e png.

8. Il mio consiglio è quello di dare ad ogni “icona per categoria” un numero, corrispondente all'ID di quella determinata categoria. In questo modo, evirete di confondervi e sarà molto facile risalire all'ID, dall'opzione Forum e Moderatori, Gestione Forum.

9. Ora, andate in Impostazioni – Opzioni vBulletin e scorrete la lista fino a trovare la pagina di configurazione del plugin, intitolata Forum Category Icons.

10. Attivate la modifica spuntando su SI la prima opzione, alla terza invece “Category Icon Location“, decidete se sostituire o aggiungere le vostre icone personalizzate, alle Status Icon. Infine, più in basso, alla voce “Category Icons Folder“, inserite il nome della cartella che avete creato sul server, contenente le varie icone delle categorie.

11. Infine, andate in Forum e Moderatori, Gestione Forum, e configurate categoria per categoria, l'icona che preferite (già caricata via FTP), tramite il nuovo blocco di configurazione che vedete a fondo pagina, alla voce “Forum Category Icon“.

Ecco qualche anteprima immagine del risultato…dei vostri sforzi:

Per qualsiasi problema e/o dubbio, utilizzate i commenti! Alla prossima!