vHosting 0
vhs728x90
Risultati da 1 a 14 di 14
  1. #1
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Ciao,

    ecco a voi un piccolo tut su come aggiungere delle icone personalizzate ad ogni forum in MyBB, e come applicarvi un effetto opaco passando con il mouse sull'icona o sul link del forum.

    Puntualizzo che le modifiche le ho effettuate su un tema di default, in MyBB 1.6.7 e usando Google Chrome come browser (su Linux).


    AGGIUNGIAMO LE ICONE


    1

    Andiamo nel template forumbit_depth2_forum.

    Cerchiamo:
    Codice:
    <td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
    ...e subito sotto aggiungiamo:
    Codice:
    <td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/icon_{$forum['fid']}.png"  title="" class="ajax_mark_read" /></td>
    (Nel caso volessimo mettere le icone delle sezioni al posto delle icone on/off, invece di aggiungere il secondo codice, lo sostituiamo al primo. E ovviamente, ignoriamo le modifiche dal punto 2 al 5.)



    2

    Andiamo nel template forumbit_depth1_cat.

    Cerchiamo:
    Codice:
    <td class="thead" colspan="5">
    ...e sostituiamolo con:
    Codice:
    <td class="thead" colspan="6">
    3

    Cerchiamo:
    Codice:
    <td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
    ...e sostituiamo con:
    Codice:
    <td class="tcat" colspan="3"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>


    4

    Andiamo nel template forumdisplay_subforums.

    Cerchiamo:
    Codice:
    <td class="thead" colspan="5" align="center"><strong>{$lang->sub_forums_in}</strong></td>
    ...e sostituiamo con:
    Codice:
    <td class="thead" colspan="6" align="center"><strong>{$lang->sub_forums_in}</strong></td>
    5

    Cerchiamo:
    Codice:
    <td class="tcat" width="2%">&nbsp;</td>
    ...e subito dopo aggiungiamo:
    Codice:
    <td class="tcat" width="2%">&nbsp;</td>


    Spiegazione: in pratica, dal punto 2 al punto 4 abbiamo incrementato di uno il valore di colspan, poiché nel punto 5 stiamo per aggiungere un nuovo <td>.

    Il nome delle icone deve essere:

    Codice:
    icon_ID.png
    L'ID delle sezioni si trova nelle url delle sezioni stesse. Nel caso fosse attivo qualche rewrite, è sempr epossibile ottenerlo dalla gestione forum nell'AdminCP.

    Per variare l'estensione e/o il prefisso, basta modificare il codice evidenziato in rosso, nel punto 1.
    La modifica va effettuata su ciascun tema (nel caso ne se usino più di uno) e le icone devono essere posizionate nella cartella /images di ciascun tema (meno che non specifichiate un percorso diverso a quello evidenziato in verde nel punto 1).


    AGGIUNGIAMO L'EFFETTO OPACO


    Se, dopo aver messo le icone, volete applicar loro un effetto opaco, continuate con la lettuta del tutorial.

    6

    Andiamo nel template forumbit_depth2_forum.

    Cerchiamo:
    Codice:
    <td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/icon_{$forum['fid']}.png"  title="" class="ajax_mark_read" /></td>
    ...e dopo il tag <img aggiungiamo:

    Codice:
     id="icon_{$forum['fid']}" onmouseout="document.getElementById('icon_{$forum['fid']}').style.opacity=0.5;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=50" onmouseover="document.getElementById('icon_{$forum['fid']}').style.opacity=1;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=100"
    In questo modo abbiamo aggiunto un id con il nome dell'icona, e, tramite javascript, gli appichiamo un'opacità del 50% (onmouseout) che diventa 100% se ci passimo sopra col mouse (onmouseover).

    EDIT: nel caso qualcuno volesse che le icone, al caricamento della pagina siano già al 50%, può aggiungere lo stesso contenuto dell'onmouseout a onload, oppure può usare direttamente il seguente codice al posto del precedente:

    Codice:
    id="icon_{$forum['fid']}"onload="document.getElementById('icon_{$forum['fid']}').style.opacity=0.5;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=50"
    onmouseout="document.getElementById('icon_{$forum['fid']}').style.opacity=0.5;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=50" onmouseover="document.getElementById('icon_{$forum['fid']}').style.opacity=1;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=100"

    7

    Nello stesso template cerchiamo:

    Codice:
    <strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
    ...e dopo il tag <a aggiungiamo:

    Codice:
      onmouseout="document.getElementById('icon_{$forum['fid']}').style.opacity=0.5;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=50" onmouseover="document.getElementById('icon_{$forum['fid']}').style.opacity=1;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=100"

    Se abbiamo fatto tutte le modifiche come si deve, dovremmo avere le nostre icone aggiuntive con l'effetto opaco.

    A breve dovrei mettere le anteprime della modifica, nel caso me ne dimenticassi non esitate a ricordarmelo.

    :bai
    Ultima modifica di MaxSteel; 18-07-13 alle 23:35 Motivo: Aggiunto EDIT al punto 6
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  2. I seguenti 4 utenti hanno ringraziato MaxSteel per questo post

    jpninside (30-09-13),Kendrick Lamar (18-07-13),xMasterProx (21-08-12)

  3. #2
    Data Registrazione
    18/05/13
    Messaggi
    238
    Grazie dati
    25
    Ringraziato 23 volte in 20 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Io avrei un piccolo problema, non so se sia stato fatto apposta così, ma quando aggiorni la pagina vedi le icone alla loro forma "normale" poi quando ci passi sopra non fa niente, quando togli il mouse sopra l'icona l'opacità diminuisce e quando ci ritorna sopra aumenta. Io vorrei che quando aggiorni la pagina si veda l'icona con l'opacità non alla sua forma normale e quando ci passi sopra aumenti. Non so se mi sono spiegato bene, questo è il mio forumbit_depth2_forum

    Codice:
    <tr>
    <td class="{$bgcolor}" align="center" valign="top" width="1"><img id="{$forum['fid']}" onmouseout="document.getElementById('{$forum['fid']}').style.opacity=0.5;document.getElementById('{$forum['fid']}').filters.alpha.opacity=50" onmouseover="document.getElementById('{$forum['fid']}').style.opacity=1;document.getElementById('{$forum['fid']}').filters.alpha.opacity=100" src="{$mybb->settings['bburl']}/sezioni/{$forum['fid']}.png"  title="" class="ajax_mark_read" /></td>
    <td class="{$bgcolor}" valign="top">
    <strong><a onmouseout="document.getElementById('{$forum['fid']}').style.opacity=0.5;document.getElementById('{$forum['fid']}').filters.alpha.opacity=50" onmouseover="document.getElementById('{$forum['fid']}').style.opacity=1;document.getElementById('{$forum['fid']}').filters.alpha.opacity=100" href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
    </td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
    <td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
    </tr>

  4. #3
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Nel passo numero 6, usa questo codice:

    Codice:
    id="icon_{$forum['fid']}"
    onload="document.getElementById('icon_{$forum['fid']}').style.opacity=0.5;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=50" 
    onmouseout="document.getElementById('icon_{$forum['fid']}').style.opacity=0.5;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=50" onmouseover="document.getElementById('icon_{$forum['fid']}').style.opacity=1;document.getElementById('icon_{$forum['fid']}').filters.alpha.opacity=100"
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  5. Il seguente utente ha ringraziato MaxSteel per questo post

    Kendrick Lamar (18-07-13)

  6. #4
    Data Registrazione
    18/05/13
    Messaggi
    238
    Grazie dati
    25
    Ringraziato 23 volte in 20 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Funziona, grazie!

  7. #5
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Aggiungo la modifica nel primo post nel caso qualcuno volesse la tua stessa cosa.
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  8. #6
    Data Registrazione
    25/07/13
    Messaggi
    3
    Grazie dati
    3
    Ringraziato 0 volte in 0 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Funziona veramente, grazie mille veramente!
    Adesso il mio forum ha qualcosa di più "cool" - Ti ho anche messo Grazie alla guida!

    Ho anche messo il link della guida che ho seguito in questa comunicazione importante del mio forum: http://netoftech.altervista.org/Thre...tto-opaco.html

  9. #7
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Grazie per il grazie e per aver fatto riferimento alla guida sul tuo forum, anche se sembrerebbe offline. :o
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  10. #8
    Data Registrazione
    30/05/14
    Messaggi
    48
    Grazie dati
    3
    Ringraziato 5 volte in 3 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    salve, volevo fare una piccola modifica, non volendo l'icona per ogni forum avevo pensato di mettere un controllo sull'esistenza dell'immagine , questo il codice in forumbit_depth2_forum, essendo nuovo non so neanche se è possibile usare codice php all'interno dei templates, comunque questa la mia prova naturalmente andata male, potete aiutarmi?

    Codice:
    <tr>
    <td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
    <td class="{$bgcolor}" align="center" valign="top">
    <if file_exists("{$theme['imgdir']}/icon_{$forum['fid']}.png") then>
    <img height="100" width="100" src="{$theme['imgdir']}/icon_{$forum['fid']}.png"  title="" class="ajax_mark_read" />
    <else />
    &nbsp;
    </td>
    <td class="{$bgcolor}" valign="top">
    <strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$subforums}</div>
    </td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
    <td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
    </tr>?

  11. #9
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Per poter interpretare il php nei template di MyBB ti serve il seguente plugin: http://mybbhacks.zingaburga.com/showthread.php?tid=260 (scaricabile senza registrazione).
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  12. #10
    Data Registrazione
    30/05/14
    Messaggi
    48
    Grazie dati
    3
    Ringraziato 5 volte in 3 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    sono riuscito a farlo, ho installato il plugin, adesso però volevo modificare il percorso dove mettere le immagini, non le voglio nella cartella del tema ma dentro una cartella ForumImages della cartella generale Images, sapete dirmi come devo cambiare
    qua ? src='{$theme['imgdir']}/icon_{$forum['fid']}.png'

  13. #11
    Data Registrazione
    30/05/14
    Messaggi
    48
    Grazie dati
    3
    Ringraziato 5 volte in 3 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    credo di esserci riuscito, non ho ben capito se esiste una variabile che contiene il path della cartella images, comunque l'ho messo fisso, questo il contenuto di forumbit_depth2_forum
    Codice:
    <tr>
    <td class="{$bgcolor}" align="center" valign="top" width="1"><img src="{$theme['imgdir']}/{$lightbulb['folder']}.gif" alt="{$lightbulb['altonoff']}" title="{$lightbulb['altonoff']}" class="ajax_mark_read" id="mark_read_{$forum['fid']}" /></td>
    <td class="{$bgcolor}" align="center" valign="top" width="1">
    <?php
    $image = "images/board/icon_".$forum['fid'].".png"; 
    if(file_exists($image)) 
    echo  "<img height='100' width='100' src={$image} />" 
    ?> 
    </td>
    <td class="{$bgcolor}" valign="top">
    <strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
    </td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
    <td class="{$bgcolor}" valign="top" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
    <td class="{$bgcolor}" valign="top" align="right" style="white-space: nowrap">{$lastpost}</td>
    </tr>

  14. #12
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    No, purtroppo non esiste un path per la cartella /images.
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

  15. #13
    Data Registrazione
    17/12/14
    Località
    Torino, Italy
    Messaggi
    47
    Grazie dati
    4
    Ringraziato 3 volte in 3 post
    Mentioned
    0 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    Credo che tu m'abbia già risposto, max, ma continuo a perdermi tra i PM.
    Tralasciando il discorso dell' opaco, che non mi interessa, quali differenze ci sono ( se ci sono, come credo ) per la 1.8.x?

    p.s. sono ancora indietr... cerco di capire quale sia il valore di $theme['imgdir']... nel mio caso dovrebbe essere /mybb/images/alphagamingv1.8 o cos'altro? Credo sia un'informazione essenziale, per me.
    Mi sfugge anche la determinazione del valore di $lightbulb['folder']...
    E' in qualche modo possibile capire dove son definite queste variabili e magari verificarne i valori correnti?

    A questo punto credo sia necessario, per me, un esempio di come aggiungere un'immagine 100x100 ad un forum.
    Ad esempio, questa:

    al forum INDICE - SOL III
    Non voglio che lo faccia tu, altrimenti non imparerò mai. Mi serve solo uno spiegone, in parole povere, del procedimento da seguire.
    Quando m'hai spiegato il discorso del colore delle celle, mi hai fatto venir mal di testa. Magari per te era chiaro ma per me no :) ricordati che ci ho un'età :D
    Speravo che myBB fosse più semplice. Magari offre molto più di phpBB che, tuttavia, mi pare più immediato su molte cose......

  16. #14
    Data Registrazione
    23/11/09
    Messaggi
    5,267
    Grazie dati
    498
    Ringraziato 1,038 volte in 885 post
    Mentioned
    172 Post(s)

    Predefinito Re: [GUIDA] Icone dei forum personalizzate ed effetto opaco

    La variabile $theme['imgdir'] contiene il percorso specificato in Image Directory nelle impostazioni del tema. Per verificare il suo valore basta andare nelle impostazioni del tema.

    La variabile $lightbulb['folder'] indica invece lo stato del forum che può essere on o off in base a se ci sono nuovi messaggi o meno, offlock se è un forum chiuso e offlocklink se si tratta di un link anziché di un forum. Il valore della variabile viene stabilito da MyBB e oltre alla natura del forum (se è un link o un forum, e se è chiuso nel caso sia un forum) dipende anche dall'utente (se ha preso visione dei nuovi messaggi oppure no).

    Per quanto riguarda la guida, come hai ben intuito, ci sono delle differenza tra il tema di default di MyBB 1.6 e di MyBB 1.8, tra le tante l'immagine di stato non è più chiamata con il tag <img> bensì tramite CSS. Ma non è che cambi molto la modifica in sé.

    In vero avevo in programma di aggiornare le mie guide per la nuova versione di MyBB, questa compresa, ma il tempo è quel che è... Se ti interessa l'approccio, non è ben diverso da quello di questa guida che in sintesi è: aggiungere una nuova colonna alla tabella per l'immagine, aggiornare i vari colspan e caricare le immagini nella cartella scelta. Ribadisco quanto detto (forse in privato, non ricordo) che tra immagini 100x100 o icone 32x32 non fa alcuna differenza, la guida è la stessa. Se posso darti un consiglio, se hai del tempo installa MyBB 1.6 e prova questa modifica fino al punto che ti interessa, così da poter entrare nella mentalità della modifica, penso possa essere un buon esercizio.

    Probabilmente non è lo spiegone che ti aspettavi, ma se devo fare uno spiegazione quanto più esauriente possibile, faccio prima a fare una guida magari con delle immagini a supporto.


    O.T.1: il colore delle celle diciamo che non è semplice da modificare in quanto usa classi globali e modificando quelle poi si va a modificare anche quello che non si vuole. Sarò ben lieto di fare un piccolo tutorial anche per quello se necessario
    O.T.2: sinceramente trovo più intuitivo MyBB che phpBB :)
    "In theory, theory and practice are the same; in practice they, are not." · Yogi Berra

Tag per Questa Discussione

Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
Seguici!
P.IVA: 02750560738
Cionfs © - Cionfs ® - Marchio registrato numero 0001524896
© Cionfs'Forum CMS - Cionfs'Forum CMS - Guide Gratis - Supporto CMS - E' vietata la copia anche parziale senza autorizzazione.
Questo sito utilizza cookies di analytics su dati esclusivamente aggregati e cookies di terze parti per migliorare l'esperienza dell'utente tramite plugin sociali e video.
Cliccando su oppure continuando la navigazione sul sito accetti i cookies. Per l'informativa completa clicca qui.