-
dani3000.
User deleted
Per creare l'effetto Accendi / Spegni al passaggio del mouse sopra le targhette, bisogna inserire il seguente codice in Amministrazione>Modifica colori e stili>In fondo a tutto il codice CODICE.web a:link img, .web a:visited img {filter:alpha(opacity=30); -moz-opacity: 0.5; opacity: 0.5}
.web a:hover img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0}
Ecco vari tipi di collegamenti:
Collegamento esternoCODICE<a href="http://indirizzo_sito">testo</a>
Collegamento esterno con immagineCODICE<a href="http://indirizzo_sito"><img src="http://indirizzo_immagine"></a>
Collegamento a messaggioCODICE<a name="target"></a> - <a href="#target">testo</a>
Ecco i più frequenti codici di formattazione (Ovviamente escludendo i codici pronti nel modulo di scrittura):
Scrittura carattere non-standard
testo
CentrareCODICE<div align="center">immagine/testo</div>
MovimentoCODICE<marquee direction="up" scrollAmount=1 height="30" width="70%">immagine/testo</marquee>
Movimento bloccato al passaggio del mouseCODICE<marquee onmouseover="this.stop()" onmouseout="this.start()">immagine/testo</marquee>
Movimento rallentato al passaggio del mouseCODICE<marquee scrollamount='5' onMouseover='this.scrollAmount=1' onMouseout='this.scrollAmount=5'>immagine/testo</marquee>
Testo sbarrato (testo)CODICE<s>testo</s>
Testo con alone (Solo per IE)CODICE<div style="width:100%;filter:glow(color=colore)">testo</div>
Testo sfumatoCODICE<div style="width:100%;filter:blur">testo</div>
ApiceCODICE<sup>...</sup>
PediceCODICE<sub>...</sub>
Affiancare immagine al testoCODICE<div style="float: left; margin-right: 4px">Immagine</div> Testo
Ecco come creare una lista personalizzata:CODICE<ul type="[color=green]disc[/color]">
<li>voce</li>
<li>voce</li>
<li>voce</li>
</ul>
Dove disc può essere sostituito da circle o square a seconda dell'effetto che si vuole ottenere.
Per fare menù a tendina, basta utilizzare il seguente codice:CODICE<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Per creare invece un pulsante, utilizzare il seguente codice:CODICE<button>testo</button>
Per inserire una scollbar, ecco il codice:CODICE<div style="overflow:auto; height:60px">testo<br><br><br><br><br><br></div>
Dove "br" simbolegga l'accapo. Per avere la scrollbar orizzontale sostituire height con width.
Per inserire una showcase nella tabella del vostro forum, bisogna inserire questi codici rispettivamente in Amministrazione>Gestione codice HTML>in cima al forum e nella cella della tabella dove volete appaia la showcase:
In cima al forumCODICE<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 9;
}
.thumbnail span{
position: absolute;
background-color: #xxx;
padding: 5px;
left: -1000px;
border: xxxpx dashed #xxx;
visibility: hidden;
color: #xxx;
}
.thumbnail span img{
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{
visibility: visible;
top: 0;
left: xxxpx;
}
</style>
Al posto di #xxx dovete inserire il codice del colore che deve apparire nel parametro settato, quindi quello del testo per color, quello dello sfondo per backgorund-color e quello del bordo per border.
Al posto di xxxpx dovete inserire la dimensione in pixel del parametro settato, quindi la larghezza del bordo per border, e la posizione di spostamento dell'immagine grande rispetto a quella piccola per left (che puô tranquillamente essere sostituito con right se la volete a destra).
Il bordo può inoltre essere normale (solid), tratteggiato (dashed), a puntini (dotted) o con qualsiasi altro settaggio normale dei bordi.
Nella cella della vostra tabella, dove volete appaia lo showcase, inserite questo:CODICE<a class="thumbnail" href="link a cui deve portare l'anteprima se cliccata; si può anche togliere, eliminando il parametro href"><img src="link dell'immagine di anteprima" border="0">
<span><img src="link dell'immagine"> </span></a>
Il codice map viene utilizzato per dividere un'immagine in più aree che portano a link differenti. Ecco il codice:HTML<map name="titolomappa">
<area shape="rect" COORDS="0,0,20,10" href="link" TITLE="testo">
</map>
<img src="linkimmagine" usemap="#titolomappa" border=0 width=larghezza height=altezza>
Name: il titolo della mappa. Serve per richiamare la mappa da usare per l'immagine scelta (infatti si trova poi usemap="#titolomappa")
Shape: è la forma della mappa. Può essere rect (Rettangolo: le coordinate di riferiscono all'angolo in alto a destra e in basso a sinistra cioè 4 numeri), circle (Cerchio: le coordinate si riferiscono al centro e al raggio, quindi 3 numeri) e tante altre.
Href: il link di quell'area precisa.
Title: se si vuole dare un titolo a quell'area.
Per fare più aree nell'immagine basta ripetere il codice in questo modo:HTML<map name="titolomappa">
<area shape="rect" COORDS="0,0,20,10" href="link" TITLE="testo">
<area shape="rect" COORDS="10,20,30,40" href="link" TITLE="testo">
<area shape="rect" COORDS="50,60,70,80" href="link" TITLE="testo">
<area shape="rect" COORDS="90,100,110,120" href="link" TITLE="testo">
</map>
<img src="linkimmagine" usemap="#titolomappa" border=0 width=larghezza height=altezza>
Esempio:SPOILER (click to view)CODICE<map name="mappa1">
<area shape="circle" COORDS="10,20,3" href="http://meravilandia.forumcommunity.net/" TITLE="Meravilandia">
<area shape="circle" COORDS="20,40,4" href="http://forumcommunity.net/" TITLE="Forumcommunity">
<area shape="rect" COORDS="50,60,70,80" href="http://forumfree.net/" TITLE="Forumfree">
<area shape="rect" COORDS="70,70,100,130" href="http://blogfree.net/" TITLE="Blogfree">
</map>
<img src="linkimmagine" usemap="#mappa1" border=0 width=140 height=100>
1. create una nuova sezione chiamata "separazione" (o un qualsiasi altro nome di vostra scelta)
2. posizionatela dove volete che appaia la separazione
3. copiatene l'id della sezione
4. nel css, inserite questo codice:CODICE#fxxx .aa, #fxxx .bb, #fxxx .cc, #fxxx .xx, #fxxx .yy, #fxxx .ww, #fxxx .zz {border: none; font-size: 0; height: 20px; background-color: #hex}
#fxxx .aa img, #fxxx br {display: none}
#fxxx .desc {font-weight: bold; font-size: 10px}
Al posto di #fxxx dovete inserire l'id della vostra sezione. Se l'id è 12345, quindi, verrà #f12345.
Mi raccomando, #f non deve sparire.
Senza quello, il codice non funziona.
Al posto di #hex inserite il codice esadecimale del colore che volete appaia come sfondo della separazione. Se volete il bianco, ad esempio, sarà #ffffff; se volete il nero sarà #000000 e così via.
Tutti i parametri (border, font-size, height, background-color, font-weight, font-size, ...) possono essere modificati a piacere. L'unico che deve restare com'è è display: none.
5. una volta inserito il codice, tornate sulla pagina di gestione sezioni
6. cancellate il nome della sezione di separazione e sostituitelo con un codice invisibile (< i >< /i > o < b >< /b >, per intenderci)
7. nella descrizione della sezione mettete la scritta che volete appaia come nome della separazione
Per nascondere i nomi delle sottosezioni, inserire il seguente codice DOPO la descrizione della sezione in questioneCODICE</span><p class="nascosta"><span>
Per inserire alla fine del Forum un testo nell'area delle statistiche, usare il codice in "In cima al Forum":CODICE<script type="text/javascript">stats='<br>Forum creato il <b>Data</b> da <a href="linkprofilo"><b>nomeutente</b></a>'</script>
Per inserire le ultime discussioni del forum (da inserire in cima al forum)CODICE<script type="text/javascript">
function NextBirthday(list){document.write(" <tr><td class="sunbar" colspan="2">TITOLO<tr><td class="ww" align="center"><img src='URL IMMAGINE A FIANCO'><td class="ww"><p class="kpinfo"> TESTO");
}
</script>
Sostituite quindi XXXXX con l'id del vostro forum e sostituite, se necessario, forumfree co forumcommunity.
Per inserire nel vostro forum delle icone on/off differenti per ogni sezione, inserite i seguenti codici dove indicato:
Amministrazione>Modifica Immagini>c_on e c_on_resCODICE<div class="C_ON"></div>
Amministrazione>Modifica Immagini>c_off e c_off_resCODICE<div class="C_OFF"></div>
Amministrazione>modifica colori e stiliCODICE#fxxx .c_on {height: xxpx; width: xxpx; background-image: url(link del bottone on che volete appaia)}
#fxxx .c_off {height: xxpx; width: xxpx; background-image: url(link del bottone off che volete appaia)}
dove #fxxx va sostituito con l'id della sezione e xxpx con le dimensioni dell'immagine.
Per ricavare l'id della sezione, cliccateci con il tasto destro>proprietà>l'id sono i numeri presenti.
Ad esempio, la mia sezione ha questo indirizzo:CODICEhttp://narutobegin.forumcommunity.net/?t=32542453&view=getlastpost#lastpost
L'id è 921284, quindi nel codice, per sostituire on e off di questa sezione metterò #f921284.
#f non può mancare, perché è quello che fa capire al sistema che lì deve mettere quella data immagine. Senza il codice non funziona.
Per settare le dimensioni dell'immagine, semplicemente sostituite le due xx davanti a px con le dimensioni in pixel dell'immagine.
Se ad esempio usate un'immagine 50x50, metterete 50px.
Questo va ripetuto per tutte le sezioni del forum.
.