phpBB Italia chiude!
phpBB Italia ringrazia tutti gli utenti che hanno dato fiducia al nostro progetto per ben 9 anni, e che, grazie al grande lavoro fatto da tutto lo Staff (rigorosamente a titolo gratuito), hanno portato il portale a diventare il principale punto di riferimento italiano alla piattaforma phpBB.

Purtroppo, causa motivi personali, non ho più modo di gestirlo e portarlo avanti. Il forum viene ora posto in uno stato di sola lettura, nonché un archivio storico per permettere a chiunque di fruire di tutte le discussioni trattate.

Il nuovo portale di assistenza per l'Italia di phpBB diventa phpBB-Store.it, cui ringrazio per aver deciso di portare avanti questo grande progetto.

Grazie ancora,
Carlo - Amministratore di phpBB Italia

Social-Effect

Modifiche allo stile (template e tema).
Bloccato
Avatar utente
Tiger
phpBB Expert
phpBB Expert
Messaggi: 1998
Iscritto il: 24/05/2011, 12:37
Sesso: Maschio
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.28
Database: MySQL(i) 5.5.35-cll
Località: Roma
Contatta:

Social-Effect

Messaggio da Tiger » 25/12/2012, 12:37

Pagina trascritta sul wiki: http://wiki.phpbbitalia.net/Social-effect

Con questa semplicissima modifica,andremo ad aggiungere le icone social,facebook,twitter ecc,con effetto di transizione,al passaggio del mouse cioe',le iconcine ruoteranno in un piacevolissimo effetto.

Autore:Tiger

Screen:
http://i.imgur.com/LhHuF.png

Demo:
Qui

Stili compatibili:
Prosilver e derivati:
Subsilver2 e derivati
Uppare le immagini contenute nel seguente archivio .rar nella cartella theme/images del vostro stile in uso.
icone.rar
Inizio guida:
Aprire styles/prosilver/theme/common.css
Aggiungere in fondo:

Codice: Seleziona tutto

/* Social-Effect by Tiger\www.bbcodeitalia.com 
--------------------------------------------- */
#dec2 img{
-moz-transition: 2s;
-webkit-transition:2s ;

}

#dec2 img:hover{
-moz-transform: rotate(360deg);
-moz-transition: all 2s ease-in-out;
-webkit-transform: rotate(360deg);
-webkit-transition: all 2s ease-in-out;
}
Questo invece il relativo codice html da inserire a piacere in qualsiasi template si voglia far comparire le iconcine:

Codice: Seleziona tutto

<!-- Inizio Social-Effect by Tiger\www.bbcodeitalia.com -->		
		<div align="center" id="dec2">
&nbsp; <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/facebook.png" alt="*"></a> &nbsp; <a href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/twitter.png" alt="*">
<img width="64" height="64" src="{T_THEME_PATH}/images/linkedin.png" alt="*"> &nbsp; <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/yahoo.png" alt="*"></a> &nbsp; <a rel="nofollow" href="#">
<img width="64" height="64" src="{T_THEME_PATH}/images/rss.png" alt="*"></a> &nbsp; <a href="#">
</div>
<!-- Fine Social-Effect by Tiger\www.bbcodeitalia.com -->	
Chiaramente si puo' dare qualsiasi allineamento si desideri

Codice: Seleziona tutto

<div align="center" id="dec2">
Subsilver 2:
Codice html invariato.
Aprire styles/subsilver2/theme/stylesheet.css
Aggiungere in fondo:

Codice: Seleziona tutto

/* Social-Effect by Tiger\www.bbcodeitalia.com 
--------------------------------------------- */
#dec2 img{
-moz-transition: 2s;
-webkit-transition:2s ;

}

#dec2 img:hover{
-moz-transform: rotate(360deg);
-moz-transition: all 2s ease-in-out;
-webkit-transform: rotate(360deg);
-webkit-transition: all 2s ease-in-out;
}
Screen:
http://i.imgur.com/0snjb.png
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.

Bloccato

Torna a “Stili”

Chi c’è in linea

Visitano il forum: Nessuno e 2 ospiti