PhpBB3 BBCodes

Posted: **26 Dec 2012, 02:45**

With this simple change, we're going to add the icons social, facebook, twitter etc, with transition effect on mouse that ', the small icons rotate in a pleasing effect.
Autore:Tiger

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

Demo:
Here

Styles Series:
Prosilver -Subsilver2
Upload the images contained in the following store. Rar file theme / images of your style in use.

icone.rar: (25.81 KiB) Downloaded 151 times

Start guide:
Open: styles/prosilver/theme/common.css
Add to Very bottom:

Code: Select all

/* 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;
}

This however its HTML code to insert at any of the template you want to place the small icons:

Code: Select all

<!-- 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 -->

Of course you can 'give any alignment you want

Code: Select all

<div align="center" id="dec2">

Subsilver 2:
Code html Similar.
Open: styles/subsilver2/theme/stylesheet.css
Add Very bottom:

Code: Select all

/* 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

Posted: **26 Dec 2012, 19:57**

beautiful effect
good

Posted: **26 Dec 2012, 20:04**

Thanks,My Friends.!