Astuzia : Nuovi codici CSS per i vostri forum!!

Da Nerissa Gio 17 Mag 2012 - 13:22

Promemoria primo messaggio :

Astuzia : Nuovi codici CSS per i vostri forum!!

Ciao!!

Noi di forumattivo siamo sempre attenti alle richieste degli utenti per migliorare i vostri forum. Per questo motivo siamo lieti di annunciare una serie di codici che sarà senza dubbio di grande utilità cheers

Effetto "crocked avatar"

Applicando questo tutorial ci si arriva a un cambiamento molto bello nello stile degli avatar sul forum. Oltre ad un effetto passando il mouse sopra ogni avatar.

Pannello d'amministrazione -> colori -> Foglio di stile CSS

Codici:

PHPBB2:

Codice:: .poster-profile img{ margin-left: 3px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } .poster-profile img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

PHPBB3:

Codice:: div.postprofile dl dt img{ margin-left: 3px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } div.postprofile dl dt img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

PUNBB:

Codice:: div.user-basic-info img{ margin: 3px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } div.user-basic-info img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

INVISION:

Codice:: dl.postdetails dt img{ margin-bottom: 10px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } dl.postdetails dt img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }

Eliminare pagina di conferma dopo l'invio dei messaggi o MP'S

Aggiungendo questo codice Java Script sarà possibile eliminare la pagina di conferma dopo aver inviato il messaggio o i MP.

Pannello d'amministrazione -> Moduli -> Gestione delle codice Javascript -> Attivare la gestione del codice javascript : SI -> Creare un nuovo java script -> Posizione : TUTTE LE PAGINE

Codice:

Mostrare - Nascondere le categorie

Con questo codice è possibile nascondere o mostrare la categoria del tuo forum con una piccola immagine che servirà a mostrare o no le categorie che l'utente desidera.

Astuzia : Nuovi codici CSS per i vostri forum!! - Pagina 2 7e1e0b24a6354c0ba228ebe

Pannello d'amministrazione -> Moduli -> Gestione delle codice Javascript -> Attivare la gestione del codice javascript : SI -> Creare un nuovo java script -> Posizione : SULL'INDICE

Spoiler:

Pannello d'amministrazione -> Colori -> Foglio di stile css ->

Spoiler:

Effetto sulle informazioni nell'indice degli ultimi messaggi

Con questo codice css si può dare un effetto più professionale alla scatola degli ultimi messaggi visualizzati sull'indice del forum.

Astuzia : Nuovi codici CSS per i vostri forum!! - Pagina 2 Ef2fd089b7674efbad91e07

Spoiler:

Evitare i voti negativi

Questo codice CSS serve per eliminare il tasto dei voti negativi su tutti i messaggi del forum.

Visibile solo il tasto +
Astuzia : Nuovi codici CSS per i vostri forum!! - Pagina 2 630e8f586aa24e67bdf04c5

Spoiler:

Ci auguriamo che questi codici fantastici siano di vostro gradimento e soprattutto di molta utilità :good:

Atte:

~Lo Staff del Forum dei Forum~

Da Annalisa Dom 3 Giu 2012 - 16:59

Grazie Niko ma è proprio il codice che non viene preso, non mi da più nessun errore, lo accetta ma alla fine non cambia nulla.
Ho provato anche con altri browser ma purtroppo non vedo l'effetto che fa qui... evidentemente non va.

Da aibj7 Ven 17 Ago 2012 - 21:10

°Albus Severus° ha scritto:Per chi volesse il codice delle categorie a scomparsa è questo visto che non si vede:

Pannello d'amministrazione -> Moduli -> Gestione delle codice Javascript -> Attivare la gestione del codice javascript : SI -> Creare un nuovo java script -> Posizione : SULL'INDICE

Codice:
function EsconderCategoriaFeitoPorSupero(cid,iflag){var cat=document.getElementById(cid);var button=document.getElementById('b'+cid);if(cat.style.display=='none'){cat.style.display='block';button.className='contract';my_setcookie('_'+cid,'',true)}else{cat.style.display='none';button.className='expand';my_setcookie('_'+cid,'1',true)}}$(function(){x=$('ul.topiclist li.header').get();for(i=0;i<x.length;i++){x[i].style.position='relative';var cid='c'+String(i+1);x[i].parentNode.nextSibling.setAttribute('id',cid);x[i].parentNode.nextSibling.style.display='block';var y='<div id="b'+cid+'" class="contract" onclick="EsconderCategoriaFeitoPorSupero(''+cid+'');"></div>';x[i].innerHTML=x[i].innerHTML+y}cookies=document.cookie.split('; ');for(i in cookies){if(cookies[i].charAt(0)=='_'){cookie=cookies[i].split('=');if(cookie[1]=='1'){cid=cookie[0].substring(1);if(document.getElementById(cid)){EsconderCategoriaFeitoPorSupero(cid,'x')}}}}});

Pannello d'amministrazione -> Colori -> Foglio di stile css ->

Codice:
.contract,.expand{background:url(http://2img.net/i/fa/m/tabs_more1.gif);cursor:pointer;height:9px;position:absolute;right:10px;top:6px;width:9px}.contract{background:url(http://2img.net/i/fa/m/tabs_less1.gif)}

ciao,
io ho inserito i codici ma nel mio forum non compare l'icona per nascondere i vari argomenti!