Questa guida è un mix di tutorial riguardanti esclusivamente la tagboard. Quì vedremo diversi modi per personalizzarla, e per ogni tipologia di modifica, è presente un tutorial.
In questo tutorial vedremo uno dei modi più semplici e veloci per "integrare" la tagoarb alla tabella del forum.
IMPORTANTE: Con questo metodo, la tagoard si accorpa alla tabella immediatamente sopra la tagboard stessa. Perciò, se avete 5 tabelle, la tag si troverà all'interno della quinta.
Step 1
Inizialmente ci troveremo di fronte ad una situazione come quella presente nell'immagine sottostante: tabella e tgboard ben distinte.
Step 2
Una delle possibiltà per raggiungere il nostro obiettivo, è eliminare la parte "superflua" della tagboard, per poi passare ad unire il restante alla tabella. Eliminiamo quindi l'
mback dalla tag, utilizzando questo codice:
CODICE
.tag .mback {display: none}
E ci troveremo ad avere una cosa di questo tipo:
Come avrete sicuramente notato, tutte le immagini della parte superiore della tagboard (appunto, l'mback sono sparite.
Step 3
Non ci resta che "unire" la tagboard alla tabella. Come? "Sollevando" la tagboard.
Utilizzando questo codice
CODICE
.tag {margin-top: -NUMpx}
otterremo una traslazione verso l'alto della tagboard.
1) La parola
NUM deve essere sostituita da un numero.
2) Il numero di pixel necessari per ottenere l'unione della tagboard alla tabella è variabile; cambia da skin a skin, pertanto potrebbero esser necessarie diverse prove prima di trovare quello giusto. Normalmente si aggira intorno ai 20/30px
3) Il numero inserito
deve essere un
numero negativo! Se inserite un numero positivo, otterrete si una traslazione della tagboard, ma verso il basso. Pertanto, ricordate di inserire un valore
negativo.
Conclusione
Per concludere, e mostrarvi ciò che ho ottenuto io, partendo dalla situazione iniziale, ed usando questo codice
CODICE
.tag .mback {display: none}
.tag {margin-top: -35px}
sono arrivato ad ottenere questo:
Le faccine, come tante altre parti della skin, sono delle semplici immagini. Capta, per svariati motivi, di non volere che queste vengano visualizzate nella tagboard. Esiste un codice che permette di fare ciò, ed è il seguente
CODICE
.tag img {display: none}
.tag [value="Faccine"] {display: none}
Analizziamo il codice.
.tag è la classe che indica la tagboard. Tutto ciò che scriveremo di seguito, avrà effetto esclusivamente sulla tagboard.
img indica che vogliamo andare ad operare sulle immagini.
Quindi, scrivere
.tag img vuol dire che vogliamo agire solo sulle immagini che compaiono all'interno della tagboard (e quindi non le varie barre).
[value="Faccine"] Indica che il bottone "Faccine"
La proprietà all'interno delle parentesi graffe,
display: none, consente di non visualizzare qualcosa, più specificatamente, non fa visualizzare ciò a cui tale proprietà viene applicata. Dal momento che viene applicata alle immagini interne alla tagboard, queste non verranno visualizzate.
Step 1
Inizialmente ci troveremo di fronte ad una situazione come quella presente nell'immagine sottostante
Vogliamo inserire ora, come sfondo alla tagboard, questa immagine
Step 2
Inseriamo il seguente codice in coda al testo che si trova su
Amministrazione > Grafica > Colori e stiliCODICE
.tag .skin_tbl_border, .tag .mainbg {background-image:url(LINK IMMAGINE); background-repeat: no-repeat; background-position: right bottom}
.tag .ww, .tag .aa {background: inherit; border: 0}
Sostituendo a "LINK IMMAGINE", l'indirizzo dell'immagine di sfondo.
Step 3
Abbiamo quindi ottenuto questo
e lo sfondo è stato inserito correttamente
Potrebbe esser necessario modificare le singole righe della tagboard, magari per cambiare qualche dettaglio. E' possibile farlo, sapendo che ogni riga ha una propria classe.
Le classi delle righe sono la classe
.aa e la classe
.ww, presenti anche nelle sezioni.
Immaginiamo di numerare le righe dalla tagboard in ordine crescente, a partire dalla prima (quinid quella più in alto, che corrisponde all'ultimo messaggio scritto in tag). Tutte le righe che hanno un numero dispari, appartengono alla classe
.ww, e quindi la 1°, 3°, 5° ecc ecc...
tutte le righe che hanno numero pari, invece, appartengono alla classe
.aaPer modificare le righe della tagoard è sufficiente scrivere
CODICE
.tag .aa {PARAMETRI}
.tag .ww {PARAMETRI}
scrivendo ovviamente, al posto della parola PARAMETRI, i parametri di queste classi, e quindi quali parametri/caratteristiche si vuole che abbiano le righe della tagboard.
La classica tagboard, ha un aspetto come quello nell'immagine seguente
Ogni messaggio, è preceduto da una "X" rossa. Per gli amministratori del forum, questo è valido per ogni messaggio, mentre per gli utenti, la X compare solo nei propri messaggi. Il suo utilizzo è banale e scontato: cancellare il messaggio.
Purtroppo, questa X non appartiene a nessuna classe, ed apparentemente si è costretti a tenersi la X rossa, senza poter intervenire in alcun modo su essa.
Nonostante l'assenza di classi, però, selezionando la X con il mouse, e scegliendo "visualizza sorgente selezione" (dopo aver cliccato il tasto destro del mouse), possiamo notare come alla X sia associato un valore per il campo
title.
Questo è infatti il codice che ci troviamo di fronte
CODICE
<a href="javascript:canc(' ........ ')" title="elimina" style="color: rgb(221, 34, 51); font-weight: bold;">X</a>
Al posto dei puntini, troviamo un indirizzo, corrispondente al messaggio da cancellare, ma a noi questo non riguarda. La parte che ci interessa è questa
Nonostante la X non possegga alcuna classe, possiamo comunque riuscire ad eseguire delle operazioni su di essa tramite CSS. Il codice che ci consente di farlo è il seguente:
CODICE
.tag [title="elimina"] {color: #HEX !important}
Ringrazio Juunanagou per questo codice.
Analizziamolo:
.tag : Viene indicata la classe su cui verranno eseguite delle modifiche: la tag
[title="elimina"] : elemento che ha il valore
elimina nel campo
title {color: #HEX !important} : assegna un colore a ciò che è stato trovato
In poche parole, all'interno della classe
.tag viene ricercato un elemento che abbia le caratteristiche specificate tra le parentesi quadre, e su ciò che "viene trovato", vengono applicate delle modifiche.
Perchè mettere !important dopo il colore esadecimale?Osservando attentamente il codice della X, quello trovato con "visualizza sorgente selezione", possiamo notare che alla X è assegnato un colore tramite una dichiarazione di stile interna. Questa dichiarazione, ha un'importanza maggiore rispetto a quella che hanno le dichiarazioni nel foglio di stile (CSS), e quindi annulla qualsiasi modifica di stile specificata nel CSS.
Scrivendo
!important a seguito del colore nel foglio di stile, diciamo che il colore
deve essere quello specificato nel CSS, e non quello della dichiarazione di stile.
Per avere un'idea di ciò che accade utilizzando questo codice, ecco un esempio pratico.
Ho usato il codice
CODICE
.tag [title="elimina"] {color: #80C157 !important}
ed il risultato è stato il seguente
Come potete notare, la X è diventata verde.
Guardate questa immagine per capire di che si sta parlando:
LINKLa tagboard ha la medesima struttura del resto del forum. quindi ha un mback (diviso in left/center/right), ha un msub (anch'esso diviso in left/center/right) e possiede mleft ed mright. La struttura di base quindi, è la stessa. Per avere una maggiore personalizzazione della tagboard, talvolta, alcuni vorrebbero usare una grafica diversa rispetto a quella del resto del forum, cambiando i colori, o facendola più leggera, semplificandola, o addirittura aggiungendo degli ulteriori dettagli. Non importa che si vuol fare o perchè, ma tanto il "come" farlo.
Se andassimo a modificare l'immagine della classe
.mback_left, il cambiamento avrebbe effetto in tutto il forum, non solo sulla tag. E' proprio per questo, che l'immagine del post linkato all'inizio ci può aiutare.
Vedete che è raffigurata una tagboard, con tutte le classi ad essa appartenenti. Nell'immagine però, la tag è racchiusa in un rettangolo viola, sopra il quale c'è scritto ".tag"
Questo vuol dire che l'intera tagboard, è racchiusa in una classe chiamata
.tagSapendo questo, riprendiamo l'esempio di prima, per la modifica dell'mback_left. Andando a modificare la classe .mback_left, come già detto, opereremo su tutto il forum. Per modificare esclusivamente la classe .mback_left della tagboard, dovremmo andare a scrivere questo:
CODICE
.tag .mback_left { ... parametri ...}
come potete notare, .mback_left è preceduto da ".tag". Questo vuol dire che ciò che andremo a scrivere tra le parentesi graffe inciderà sull'mback_left, appartenente alla classe .tag
Partiamo dalla tagboard allo stato iniziale.
Per averla "diversa dal solito", o comunque più particolare, si potrebbe ben pensare di nascondere i .codebuttons, ovvero, tutti quei tasti che sono a sinistra e a destra del textinput (la zona in cui si scrive).
Per farlo, è sufficiente usare questo codice:
CODICE
.tag .codebuttons {display: none}
Il risultato sarà questo:
Una diversa gestione dello stile della tagbard, rispetto al resto a quello del forum, può rendere necessario modificare anche il textinput, ovvero, quell'area in cui si va a scrivere il messaggio da inviare nella tagboard.
Per poter fare ciò, il procedimento è analogo a quello visto anche nelle miniguide precedenti a questa, ovvero, si deve sfruttare la classe .tag, che racchiude tutte le altre classi della tagboard.
Scrivendo quindi
CODICE
.tag .textinput {PARAMETRI}
Andremo a modificare le caratteristiche del textinput
solo nella tagboard.
FAQ.Forumfree Tag Board è un'utile funzione del servizio di forumfree e forumcommunity.net che vi consente di inserire una bacheca nel vostro forum, in maniera del tutto gratuita e con semplici passi.
Potete utilizzarla sia come bacheca per le news in cui possono postare solamente gli amministratori per gli aggiornamenti, che come bacheca per le conversazioni tra utenti.
Per inserire la tag board basta andare in amministrazione > gestione tag board > quindi scegliere la sezione, spuntando la casella -> e poi confermare su "registra modifiche".
Tag Board per FFTag Board per FC- Come la rimuovo?In amministrazione > gestione tag board basta togliere la spunta dalle sezioni dove è presente.
- Come inserire una newsboard?Devi andare in amministrazione > gestione tagboard, e indicare che ci possono postare solo gli admin. Così ci posti solo tu e ti fa da newsboard.
- Esiste un modo per inserire una tagboard normale e una tag per le news insieme?Si può creare una tabella da inserire sopra la tagboad, in modo che funga da news board.
Quindi devi andare in amministrazione > inserisci codice html e cliccare sulla scritta rossa in alto:
"Generatore di tabelle con grafica uguale a quella del forum".
Dopo il caricamento una semplice interfaccia ti guiderà nella creazione della tabella.
- Si può inserire una tabella con scrollbar per le news? Certo,basta seguire
questo link.
- E' possibile inserire 2 tag board (ognuna in una sezione diversa...) senza fare in modo che quando scrivo qualcosa in una appaia anche nell'altra?No.
- E' possibile inserire un nome alternativo alla tag board?Andando in "Gestione tagboard" è possibile inserire un nome alternativo che verrà visualizzato
al posto di "TagBoard" o "NewsBoard".
- E' possibile personalizzare lo sfondo della tag board?Per eventuali personalizzazioni andate in modifica colori e stili e modificate i seguenti selettori:
CODICE
.tag .ww {} /* sfondo della prima striscia di sfondo della tag */
.tag .aa {} /* sfondo della seconda striscia di sfondo della tag*/
Le due parti con gli asterischi sono solo commenti, puoi decidere se includerle o meno, io consiglio di sì, in modo da ricordarsi a cosa corrispondono queste righe che andate a mettere.
Per mettere un colore di sfondo alla prima striscia faccio un esempio:
CITAZIONE
CODICE
.tag .ww {background-color:red} /* sfondo della prima striscia di sfondo della tag */
Lo stesso vale per la seconda striscia, cambiando il parametro di colore red con brown, yellow, black (insomma un colore in inglese), oppure sostituendo red con #99FF33 (codice colore corrispondente al verde chiaro) o un altro codice colore fra quelli presenti.
Tabella colori in html.Per inserire una immagine di sfondo (sempre in modifica stili)
aggiungere:
CITAZIONE
CODICE
.tag .aa, .tag .ww {background-image:url(http://)} /* immagine di sfondo della tag*/
Al posto di http:// dovete inserire l'indirizzo internet dello sfondo.
Nota: un modo per non far venire le linee è quello di piazziare l'immagine al posto del mainbg della tag, in questo modo:
CODICE
.tag .mainbg {background-image: url(http://)}
.tag .aa, .tag .ww {background-color: transparent}
(da modificare
solo l'url dell'immagine)
Se volete modificare altre parti,sappiate che non è possibile senza intervenire negli stili del forum.
Se non si sa dove mettere mano con gli stili css del vostro forum, beh, non resta che chiedere
quì aprendo un nuovo topic in cui si dovrete desrivere(molto accuratamente)il vostro problema.
- E' possibile inserire una immagine sopra la tag board?Amministrazione-gestione codice html:
da qui inserisci nella home il codice per inserire le immagini.
Prelevato da
quì.E' esattamente il primo della lista.
E' proprio il primo della lista.
-
Si può aggiornare la tag board?C'è già il pulsante "aggiorna" accanto a quello di invio.
- E' possibile avere il codice della tag board?Non è possibile, attualmente è stato integrato nel codice "lato-server" del forum, non visibile agli utenti.
- Mi vengono cancellati i miei messaggi da un utente qualunque, come è possibile?Probabilmente quell'utente ha lo stesso identico ip del nick che ha postato il messaggio cancellato.
E' un limite della tag board.
Più sotto, sempre in questa discussione, consultate il punto:
- Si può cambiare skin alla tagboard senza modificare gli stili del forum?- E' possibile postare immagini nella tag board?No, al massimo si può apporre un collegamento (link) alle immagini.
- E' possibile posizionare la tag in fondo o in cima al forum?No.
- Non riesco a cancellare i messaggi... Ecco la soluzione.
- E' possibile impedire a certe categorie di utenti di scrivere liberamente?Potete decidere di lasciar scrivere messaggi a:
1) utenti registrati
2) amministratori e moderatori
3) solamente gli amministratori
4) a tutti, indifferentemente.
- Mi piacerebbe configurare l'altezza della tag, come posso settarla?Nell'apposita opzione sempre in amministrazione > inserisci tag board.
- Posso inserirla in tutte le sezioni?Certamente, ma non se ne può inserire più di una per sezione.
- E' possibile modificare i messaggi degli utenti?Non è possibile, si deve per forza cancellare il messaggio in questione e riscriverlo.
- Come posso azzerare tutti i messaggi?Togliendo e rimettendo la crocetta sulla sezione indicata in precedenza per la tag board in amministrazione.
- Come posso cancellare ogni singolo messaggio?Cliccando sulla crocetta rossa accanto il messaggio in questione.
Se non è possibile,ricordo di leggere
questa discussione.
- Vorrei bannare un utente/visitatore che posta messaggi non graditi o che cancella i messaggi altrui, cosa posso fare?Accanto alla crocetta rossa per cancellare i messaggi c'è la scritta "ip", cliccateci sopra, e nella pagina che aprirete, comparirà un numero separato da alcuni punti.
Quindi basta andare in amministrazione > banna utenti e nella casella "Ban per ip" inserite quel numero
visto prima, così com'è.
Qualora fosse un utente registrato, utilizzare il ban per nickname in primo luogo.
- E' possibile aumentare il limite dei caratteri ?Non è possibile farlo.
- Posso rimuovere l'indirizzo ip?Lo vedi solo tu come amministratore, se aggiungi altri amministratori lo vedranno anche loro.
A moderatori e altri utenti non compare.
- Ho dei dubbi o delle richieste riguardanti l'utilizzo della tag, a chi posso chiedere? Rivolgersi
quì.Detto questo, auguro un buon lavoro a coloro che sono interessati a inserire la tag nel proprio forum,ed a modificarla,di conseguenza.
Per qualsiasi problema o info,io sono quì.
Salvo.
