Forum dei Forum: Aiuto per Forumattivo
Benvenuti sul forum di supporto di Forumattivo.




Per trarre il massimo vantaggio da tutti i servizi offerti dal nostro forum, effettua il login se sei già un nostro utente oppure registrati per far parte della nostra grande comunità. Il tutto, gratuitamente!

Crea anche tu un forum gratuitamente come questo! Clicca qui

Astuzia : Nuovi codici CSS per i vostri forum!!


Pagina 1 di 2 1, 2  Seguente

Si Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Nerissa il Gio 17 Mag 2012, 13:22

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:
    Codice:

    $("meta[http-equiv='refresh'][content]:first").each(function(){window.location.href=$(this).attr("content").replace(/^.*;url=/,"")});



  • 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.


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

    Spoiler:
    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 ->

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


  • 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.


    Spoiler:
    Codice:
    .forabg .row .lastpost {
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      background: #fafcfc url(http://i42.servimg.com/u/f42/15/42/26/78/conten11.png);
      border: 1px solid #D7D7D7;
      border-radius: 5px;
      box-shadow: 0 1px 2px #CCC;
    }


  • 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 +

    Spoiler:
    Codice:
    .vote .vote-button, .vote-no-bar {
      display:none;
    }
    .vote .vote-button:first-child {
        display:block;
    }






Ci auguriamo che questi codici fantastici siano di vostro gradimento e soprattutto di molta utilità :good: :zen: hoo jiji si^^ ups ???

Atte:

~Lo Staff del Forum dei Forum~



Ultima modifica di Nerissa il Gio 17 Mag 2012, 14:56, modificato 1 volta

Nerissa
Veterano dello staff

Sesso : Femminile
Messaggi : 3456
Località : Spagna


Vedere il profilo dell'utente http://aiuto.forumattivo.com
Nerissa è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da aleg il Gio 17 Mag 2012, 14:44

chiedo scusa per domanda banale ma il codice sulle info nell'indice degli ultimi messaggi...dove lo metto? Sad

aleg
Sono un nuovo membro :)

Sesso : Maschile
Età : 38
Messaggi : 37
Località : lucca


Vedere il profilo dell'utente http://atmosferatoscana.forumattivo.com/portal.htm
aleg è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Nerissa il Gio 17 Mag 2012, 14:46

@aleg ha scritto:chiedo scusa per domanda banale ma il codice sulle info nell'indice degli ultimi messaggi...dove lo metto? Sad

Ciao Aleg! è un codice CSS : pannello d'amministrazione - visualizzazione - colori - foglio di stile css :good:

Nerissa
Veterano dello staff

Sesso : Femminile
Messaggi : 3456
Località : Spagna


Vedere il profilo dell'utente http://aiuto.forumattivo.com
Nerissa è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da aleg il Gio 17 Mag 2012, 14:47

@Nerissa ha scritto:
@aleg ha scritto:chiedo scusa per domanda banale ma il codice sulle info nell'indice degli ultimi messaggi...dove lo metto? Sad

Ciao Aleg! è un codice CSS : pannello d'amministrazione - visualizzazione - colori - foglio di stile css :good:

grazie! Wink

aleg
Sono un nuovo membro :)

Sesso : Maschile
Età : 38
Messaggi : 37
Località : lucca


Vedere il profilo dell'utente http://atmosferatoscana.forumattivo.com/portal.htm
aleg è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Martino il Gio 17 Mag 2012, 16:39

Ciao, si potrebbe migliorare l'estetica di questo tutorial per favore Sad? Non riesco a vedere il testo. Grazie Wink


Staff - Moderatore

Martino
Moderattivo
Moderattivo

Sesso : Maschile
Età : 18
Messaggi : 4141
Località : Italia


Vedere il profilo dell'utente http://wikiinfo.forumattivo.it/
Martino è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da solaris. il Ven 18 Mag 2012, 21:29

buonsa sera,
ho provato a mettere il codice per eliminare la pagina di conferma dopo l'invio dei messaggi ma non funziona...
guardando bene il codice però vedo che manca qualcosa alla fine lacrime
pare che sia tagliato triste

io lo vedo così

Codice:
$("meta[http-equiv='refresh'][content]:first").each(function(){window.location.href=$(this).attr("content").replace(/^.*;url=

è proprio così o ne manca un pezzo ? O.O

solaris.
****

Sesso : Femminile
Età : 46
Messaggi : 294
Località : calabria


Vedere il profilo dell'utente http://solaris-flashegrafica.com
solaris. è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Martino il Ven 18 Mag 2012, 21:56

Ciao, il codice è cosi' Wink :

Codice:
$("meta[http-equiv='refresh'][content]:first").each(function(){window.location.href=$(this).attr("content").replace(/^.*;url=/,"")});

Saluti, MartinoPio Wink


Staff - Moderatore

Martino
Moderattivo
Moderattivo

Sesso : Maschile
Età : 18
Messaggi : 4141
Località : Italia


Vedere il profilo dell'utente http://wikiinfo.forumattivo.it/
Martino è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da solaris. il Ven 18 Mag 2012, 22:17

grazie, ora con questo funziona /o/
poi ho provato ad aprire il forum con I.E. e si vede tutto bene, è con crome che non si visualizza Embarassed
grazie :good:

solaris.
****

Sesso : Femminile
Età : 46
Messaggi : 294
Località : calabria


Vedere il profilo dell'utente http://solaris-flashegrafica.com
solaris. è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Dozy™ il Sab 19 Mag 2012, 11:10

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://illiweb.com/fa/m/tabs_more1.gif);cursor:pointer;height:9px;position:absolute;right:10px;top:6px;width:9px}.contract{background:url(http://illiweb.com/fa/m/tabs_less1.gif)}

Dozy™
Veterano dello staff

Sesso : Maschile
Età : 29
Messaggi : 2297
Località : Tradate (va)


Vedere il profilo dell'utente
Dozy™ è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da cleo* il Sab 19 Mag 2012, 20:37

grazie fantastici

cleo*
****

Sesso : Femminile
Messaggi : 431
Località : sicilia


Vedere il profilo dell'utente http://graphiccleo.forumattivo.com/index.htm
cleo* è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Orco il Dom 20 Mag 2012, 21:34

ma se devo inserire più codice come faccio? li metto uno sotto l'altro?
Question

Orco
**
**

Sesso : Maschile
Messaggi : 68

Vedere il profilo dell'utente http://www.forum-kuga-mania.net/
Orco è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Martino il Dom 20 Mag 2012, 22:21

Ciao Orco, Mettili in basso (consigliato), ma puoi anche metterlo in alto


Staff - Moderatore

Martino
Moderattivo
Moderattivo

Sesso : Maschile
Età : 18
Messaggi : 4141
Località : Italia


Vedere il profilo dell'utente http://wikiinfo.forumattivo.it/
Martino è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Dozy™ il Lun 21 Mag 2012, 11:47

Nuovo update Astucia!

Cambiando il css Effetto "crocked avatar" sostituite il css base del tutorial e inserite questo:

Codice:
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;
}


 
img:hover {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}

Non solo l'avatar ruoterà come diceva il tutorial ma qualsiasi altra immagine si farà un giretto dalle immagini sezioni,on off, logo/banner, targhette ranghi/gruppi, anche le immagini che posterete dentro i topic.

Versione: Tutte penso.

Dozy™
Veterano dello staff

Sesso : Maschile
Età : 29
Messaggi : 2297
Località : Tradate (va)


Vedere il profilo dell'utente
Dozy™ è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Colins il Lun 21 Mag 2012, 19:32

Embarassed scusate, ma il codice sulle info nell'indice degli ultimi messaggi
devo sostituirlo uno esistente nel foglio o basta inserire nello spazio bianco
grazie

Colins
****

Sesso : Maschile
Età : 48
Messaggi : 270
Località : Bari


Vedere il profilo dell'utente http://www.tifosidelbari.com/
Colins è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da piffe il Lun 21 Mag 2012, 23:04

io saro' tardo, ma aggiungendo il codice per " croked avatar" nel css non succede nulla.
nemmeno con il secondo codice postato.
dove sbaglio?
puo' essere che il pc da dove scrivo ora non visualizzi la modifica?

piffe
***

Sesso : Maschile
Età : 40
Messaggi : 135
Località : italia


Vedere il profilo dell'utente http://www.pif-fo-rum.forumattivo.com
piffe è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da solaris. il Mar 22 Mag 2012, 07:46

a me ha funzionato :good:

solaris.
****

Sesso : Femminile
Età : 46
Messaggi : 294
Località : calabria


Vedere il profilo dell'utente http://solaris-flashegrafica.com
solaris. è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Colins il Mar 22 Mag 2012, 09:14

Io vorrei sapere solo se devo inserirli sostituire oppure altro non so neanche se funzionano

Colins
****

Sesso : Maschile
Età : 48
Messaggi : 270
Località : Bari


Vedere il profilo dell'utente http://www.tifosidelbari.com/
Colins è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Dozy™ il Mar 22 Mag 2012, 10:01

@ Colins: nel foglio bianco lo devi aggiungere non devi sostituire niente, per chi ha il css invece in mostra mettetelo tutto in fondo.

@ Piffe ciao, riprova o cambia browser. Meglio chrome, nel secondo quello postato da me tutte le immagini ruotano non solo l'avatar.


Dozy™
Veterano dello staff

Sesso : Maschile
Età : 29
Messaggi : 2297
Località : Tradate (va)


Vedere il profilo dell'utente
Dozy™ è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da piffe il Mar 22 Mag 2012, 11:34

ho provato anche da casa, ma non va. pero' uso firefox. va beh, fa niente. grazie lo stesso.

piffe
***

Sesso : Maschile
Età : 40
Messaggi : 135
Località : italia


Vedere il profilo dell'utente http://www.pif-fo-rum.forumattivo.com
piffe è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Annalisa il Mar 22 Mag 2012, 20:43

Salve il codice sulle informazioni nell'indice degli ultimi messaggi inserito nel css nel forum con invision mi da errore come mai?

Annalisa
*****

Sesso : Femminile
Età : 56
Messaggi : 684
Località : Palermo


Vedere il profilo dell'utente http://centovetrine.forumattivo.com
Annalisa è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Dozy™ il Mer 23 Mag 2012, 18:22

Prova a rifare, alle volte togliendo e incollando saltano le parentesi graffe.

Dozy™
Veterano dello staff

Sesso : Maschile
Età : 29
Messaggi : 2297
Località : Tradate (va)


Vedere il profilo dell'utente
Dozy™ è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Annalisa il Mer 23 Mag 2012, 20:11

Ho fatto ancora la prova e l'errore che mi da è questo:
Errore

errore individuato
Contiamo un numero differente di "{" e di "}". Questo significa che

quindi hai ragione tu riguardo le parentesi graffe ma non so come gestirla questa cosa.
Grazie per avermi risposto.

Annalisa
*****

Sesso : Femminile
Età : 56
Messaggi : 684
Località : Palermo


Vedere il profilo dell'utente http://centovetrine.forumattivo.com
Annalisa è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Dozy™ il Mer 23 Mag 2012, 20:16

Di solito è quella di apertura o chiusura di una stringa magari verso la fine es

{Stringa css che hai messo 1 mese fa }
{Stringa css che hai messo 5 giorni fà}
{Stringa css che hai messo oggi, ovvero quello degli ultimi messaggi -->manca

Prego




Dozy™
Veterano dello staff

Sesso : Maschile
Età : 29
Messaggi : 2297
Località : Tradate (va)


Vedere il profilo dell'utente
Dozy™ è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Annalisa il Sab 26 Mag 2012, 17:22

Adesso sono riuscita ad inserirlo ma non funziona... non mi da più errore però non vedo evidenziato nulla.

Annalisa
*****

Sesso : Femminile
Età : 56
Messaggi : 684
Località : Palermo


Vedere il profilo dell'utente http://centovetrine.forumattivo.com
Annalisa è stato ringraziato dall'autore di questo topic.

Si Re: Astuzia : Nuovi codici CSS per i vostri forum!!

Messaggio Da Niko il Dom 03 Giu 2012, 15:05

@Annalisa ha scritto:Adesso sono riuscita ad inserirlo ma non funziona... non mi da più errore però non vedo evidenziato nulla.

Ciao Annalisa,
Ti consiglio di usare la funzione cerca (se hai google Chrome) e scrivere prima { e poi }
ti farà vedere quante ce ne sono nel campo testo... Very Happy

Anche se questo problema persiste su tutti i forum
In ogni caso... Belle risorse complimenti!

Niko
Amminattivo
Amminattivo


Sesso : Maschile
Età : 20
Messaggi : 7360
Località : Provincia di Varese


Vedere il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Pagina 1 di 2 1, 2  Seguente

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permesso di questo forum:
Non puoi rispondere agli argomenti in questo forum