-
|
| .
|
- Group
- ForumFree Staff
- Posts
- 48,879
- Status
- Anonymous
|
| |
Sempre più amministratori scelgono questa soluzione per la homepage, così da non dover occupare più spazio del dovuto.
In passato l'unico modo per arrivare a questo risultato era lavorare con il css e quindi dover stare molto attenti al posizionamento dei singoli elementi, sopratutto bisognava controllare la corretta visualizzazione con tutti i browser.
Da qualche mese (cfr. News Settembre 2014) grazie all'inserimento del wiget [TAGBOARD] è invece possibile avere questo effetto dall'html del proprio forum, non dovendosi preoccupare di posizionamenti che creano problemi con alcuni device/browser.
STEP 1
Il primo passo è andare in Amministrazione → Funzioni aggiuntive → Tagboard e rimuovere la tagboard dalla homepage.
Mettete 253px come altezza della Tagboard.
STEP 2
Andare ora in Amministrazione → Grafica → Codice HTML e posizionarsi sul box "Codice HTML che sarà mostrato nella homepage del sito" incollandovi, dove si vuole visualizzare la tagboard e gli ultimi topic, questo codice:
HTML <table style="width: 100%; border: none; border-collapse: separate; border-spacing: 10px 0;"><tr>
<td style="vertical-align:top">[TAGBOARD]</td>
<td style="vertical-align: top; width: 28%">
<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">
<div class="mtitle">Ultimi post</div>
</td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">
<tr>
<td class="ww">
<style>.side_topics {height: 240px; overflow-y: scroll}</style>
[LAST_TOPICS=n:10,avatar:1,asize:30]
</td>
</tr>
</table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center"> </td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br></td>
</tr></table>
In questo modo si avrà un risultato come quello nell'immagine sopra. Ovviamente è possibile modificare il widget degli ultimi topic come scritto qui.
N.B. Questo codice si può usare solo in homepage, perché negli altri box html il widget della tagboard non funziona (ad esempio nei box html che compaiono in tutte le pagine).
STEP OPZIONALI: PERSONALIZZAZIONE
Coloro che masticano un po' di html di base avranno visto che è una struttra tabellare molto semplice: una tabella senza grafica con due colonne, nella prima c'è il widget della tagboard e nella seconda c'è una tabella con grafica uguale a quella del forum con il widget delle ultime discussioni.
Ovviamente ci possono essere molte varianti a questo codice base, di seguito alcune personalizzazioni di base.
1) Disposizione al contrario: a sinistra gli ultimi topic e a destra la tagboard.
HTML <table style="width: 100%; border: none; border-collapse: separate; border-spacing: 10px 0;"><tr>
<td style="vertical-align: top; width: 25%">
<table class="skin_tbl" align="center" cellpadding="0" cellspacing="0"><tr><td class="mleft_top"></td><td><table class="mback" width="100%" cellpadding="0" cellspacing="0"><tr><td class="mback_left"></td><td class="mback_center">
<div class="mtitle">Ultimi topic</div>
</td><td class="mback_right"></td></tr></table></td><td class="mright_top"></td></tr><tr><td class="mleft"></td><td><table class="mainbg" style="text-align:center;width:100%" cellpadding="4" cellspacing="1">
<tr>
<td class="ww">[LAST_TOPICS]</td>
</tr>
</table></td><td class="mright"></td></tr><tr><td class="mleft_bottom"></td><td><table class="msub" width="100%" cellpadding="0" cellspacing="0"><tr><td class="msub_left"></td><td class="msub_center"> </td><td class="msub_right"></td></tr></table></td><td class="mright_bottom"></td></tr></table><br><br></td>
<td>[TAGBOARD]</td>
</tr></table>
2) Widget degli ultimi topic senza tabella con grafica uguale a quella del forum.
HTML <table style="width: 100%; border: none; border-collapse: separate; border-spacing: 10px 0;"><tr>
<td>[TAGBOARD]</td>
<td style="vertical-align: top; width: 25%">[LAST_TOPICS=a:1,sez:194,n:6]</td>
</tr></table>
3) Box delle ultime discussioni più grande/più piccolo.
Per fare questa modifica è sufficiente modificare il valore width di questa cella: HTML <td style="vertical-align: top; width: 25%"> Aumentando il valore il box degli utlimi topic diverrà più grande (e conseguentemente quello della tagboard più stretto), diminuendolo succederà invece il contrario.
4) Aumentare/diminuire la distanza tra la tagboard e le ultime discussioni.
Per fare questa modifica è sufficiente modificare i valori border-spacing della tabella "generale": HTML <table style="width: 100%; border: none; border-collapse: separate; border-spacing: 10px 0;"> Il primo valore, 10px, indica la distanza da destra e sinistra, mentre la seconda, 0, quella dall'alto e dal basso. Qui una veloce guida (in inglese) su come usarlo. |
|
|
| .
|
-
|
| .
|
Advanced Member
- Group
- Member
- Posts
- 2,268
- Location
- ITALIA
- Status
- Offline
|
|
Scusa, vorrei impostare come da immagine
upload
Grazie
|
|
|
| .
|
-
|
| .
|
- Group
- ForumFree Staff
- Posts
- 48,879
- Status
- Anonymous
|
| |
Metti il codice sotto il punto 1 nel forum e poi linkalo qui.
|
|
|
| .
|
-
|
| .
|
Advanced Member
- Group
- Member
- Posts
- 2,268
- Location
- ITALIA
- Status
- Offline
|
|
|
| .
|
-
|
| .
|
- Group
- ForumFree Staff
- Posts
- 48,879
- Status
- Anonymous
|
|
Prima di tutto modificare il widget degli ultimi topic in questo modo:
HTML [LAST_TOPICS=height:210]
In questo modo diminuisci la grandezza degli ultimi topic, ho messo lo stesso valore del box dei messaggi della tagboard, potrebbe essere necessario aumentare il valore.
|
|
|
| .
|
-
|
| .
|
Advanced Member
- Group
- Member
- Posts
- 2,268
- Location
- ITALIA
- Status
- Offline
|
| |
Fatto ho modificato il valore e da codici e stili ho allineato la tag con ultimi topic,rimarrebbe da mettere lo stesso sfondo della tag ed arrotondare la linea di base degli ultimi topic.
|
|
|
| .
|
-
|
| .
|
- Group
- ForumFree Staff
- Posts
- 48,879
- Status
- Anonymous
|
|
Modifica questa parte, da così:
HTML <tr><!--RIGA1-->
<td class="ww">[LAST_TOPICS]</td>
</tr>
A cosi:
HTML <tr style="background: transparent !important"><!--RIGA1-->
<td class="ww" style="background: linear-gradient(to bottom, rgba(219, 229, 252, 0.9) 0%, rgba(180, 202, 247, 0.88) 47%, rgba(197, 214, 249, 0.85) 100%); border: 1px solid rgb(41, 137, 216); border-radius: 0px 0px 12px 12px">[LAST_TOPICS]</td>
</tr>
Ti ho messo il codice base del widget perché non so che impostazioni gli hai messo, assicurati di mettere la tua versione modificata. Il resto non toccarlo.
|
|
|
| .
|
-
|
| .
|
Advanced Member
- Group
- Member
- Posts
- 2,268
- Location
- ITALIA
- Status
- Offline
|
|
Perfetto tutto a posto.
Buon lavoro
|
|
|
| .
|
-
|
| .
|
Senior Member
- Group
- Member
- Posts
- 50,554
- Status
- Offline
|
|
CITAZIONE (-franco- @ 23/11/2014, 22:55) Scusa, vorrei impostare come da immagine uploadGrazie
Scusa, vorrei impostare anche io come da immagine non riesco ad avere la stessa grazie
http://lottoperla90.forumfree.it/
Edited by perla90 - 13/12/2014, 07:16
|
|
|
| .
|
-
|
| .
|
- Group
- ForumFree Staff
- Posts
- 48,879
- Status
- Anonymous
|
|
|
| .
|
-
|
| .
|
Senior Member
- Group
- Member
- Posts
- 50,554
- Status
- Offline
|
|
CITAZIONE (Kakashi @ 12/12/2014, 16:42) Leggi le mie risposte.
ok avevo già provato grazie lo stesso ci riprovo ciao
|
|
|
| .
|
-
|
| .
|
- Group
- ForumFree Staff
- Posts
- 48,879
- Status
- Anonymous
|
| |
Dovresti spiegarci cosa non riesci a fare, altrimenti non è facile aiutarti.
|
|
|
| .
|
-
|
| .
|
Senior Member
- Group
- Member
- Posts
- 50,554
- Status
- Offline
|
|
CITAZIONE (Kakashi @ 12/12/2014, 16:49) Dovresti spiegarci cosa non riesci a fare, altrimenti non è facile aiutarti.
ho messo i vari codici ma non riesco ad avere la stessa come da tua immagine postata
1- alla sx ultimi discussioni-
2-alla dx Tag con più grandezza
ciao
|
|
|
| .
|
-
|
| .
|
- Group
- ForumFree Staff
- Posts
- 48,879
- Status
- Anonymous
|
| |
Rimuovi dal pannello Tagboard la tag dalla homepage, poi copia-incolla il codice al punto 1 del primo post di questo topic nel box html del tuo forum.
|
|
|
| .
|
-
|
| .
|
Senior Member
- Group
- Member
- Posts
- 50,554
- Status
- Offline
|
|
CITAZIONE (Kakashi @ 12/12/2014, 16:59) Rimuovi dal pannello Tagboard la tag dalla homepage, poi copia-incolla il codice al punto 1 del primo post di questo topic nel box html del tuo forum.
grazie gentilissimo ciao
|
|
|
| .
|
184 replies since 22/11/2014, 16:42 41715 views
.