Fork me on GitHub




(1) 2 »


#1 Les petits ronds qui tournent facebook twitter
aligato08 Posté le : 04/07/2012 09:57
Pour faire suite à la discut avec Tatane, j'ouvre donc ce sujet, car je trouve très sympa ces petits ronds qui tournent sur notre forum xoops France :) :)

Donc, mon thème est XDgallery

et j'aimerais mettre ces petits ronds à la place des carrés mis dans le thème sous "liens sociaux".

;)
Rapport Haut
#2 Re: Les petits ronds qui tournent facebook twitter
alain01 Posté le : 04/07/2012 10:03
Déjà, je remet le lien de tatane :

http://www.dynamicdrive.com/style/css ... ons_using_css3_transform/
Rapport Haut
#3 Re: Les petits ronds qui tournent facebook twitter
alain01 Posté le : 04/07/2012 10:14
Si tu veux que la rotation à 360, il ne te faut que cette partie du css :

Citation :
<style>

p#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out; }

p#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg); }
</style>


et dans ton theme,
tu dois ajouter ceci :
<p id="socialicons">
<a href="http://tonlien.fr/"> <img border="0" src="tonimage.png" /></a></p>


le fichier css, tu peux l'intégrer par un include dans ton theme.html
Rapport Haut
#4 Re: Les petits ronds qui tournent facebook twitter
tatane Posté le : 04/07/2012 10:51
1 - Télécharge les images yahoo.png,twitter.png,facebook.png,delicious.png,rss.png dans le dossier images de ton thème.

2 - Dans le fichier XDGallery/xotpl/slider.html vers la ligne : 76 remplace

<div id="barnavsocial">
    
<h2>Reseaux sociaux</h2>
<ul>
<li><a href="<{$xoops_url}>"><img src="<{xoImgUrl images/deviantart.png}>" width="48" height="48" alt="deviantart" /></a></li>
<li><a href="<{$xoops_url}>"><img src="<{xoImgUrl images/rss.png}>" width="48" height="48" alt="Flux rss" /></a></li>
<li><a href="<{$xoops_url}>"><img src="<{xoImgUrl images/twitter.png}>" width="48" height="48" alt="Twitter" /></a></li>
<li><a href="<{$xoops_url}>"><img src="<{xoImgUrl images/facebook.png}>" width="48" height="48" alt="facebook" /></a></li>
<li><a href="<{$xoops_url}>"><img src="<{xoImgUrl images/stuble.png}>" width="48" height="48" alt="stuble" /></a></li>
<li><a href="<{$xoops_url}>"><img src="<{xoImgUrl images/delicious.png}>" width="48" height="48" alt="delicious" /></a></li>
</ul>    
</div>


par

<div id="barnavsocial">
    
<h2>Reseaux sociaux</h2>
<p id="socialicons3">
<a href="http://www.dynamicdrive.com/">
<img border="0" src="<{xoImgUrl images/rss.png}>" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="<{xoImgUrl images/delicious.png}>" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="<{xoImgUrl images/facebook.png}>" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="<{xoImgUrl images/twitter.png}>" /></a>
<a href="http://www.dynamicdrive.com/">
<img border="0" src="<{xoImgUrl images/yahoo.png}>" /></a>
</p>
    
</div>


3 - Dans ton fichier XDGallery/css/slider.css ligne 35 ajoute :

p#socialicons3 img:hover{ 
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}
Rapport Haut
#5 Re: Les petits ronds qui tournent facebook twitter
aligato08 Posté le : 04/07/2012 11:33
Merci beaucoup tatane, cela fonctionne correctement...
sauf, bien vi y'a toujours un truc :

le texte "modules sociaux"
que j'ai remplacé par "restons connectés"
ne se voit plus, il est noir.

En même temps je ne sais pas si cela est utile de le mettre.

Encore merci pour les détails
Rapport Haut
#6 Re: Les petits ronds qui tournent facebook twitter
tatane Posté le : 04/07/2012 11:36
Fait un "screen" s'il te plaît.
Rapport Haut
#7 Re: Les petits ronds qui tournent facebook twitter
aligato08 Posté le : 04/07/2012 11:45
Heuh un quoi ?
Copie d'écran ? Copie du code ?
Rapport Haut
#8 Re: Les petits ronds qui tournent facebook twitter
tatane Posté le : 04/07/2012 11:50
Citation :
aligato08 a écrit :
Heuh un quoi ?
Copie d'écran ?


oui
Rapport Haut
#9 Re: Les petits ronds qui tournent facebook twitter
aligato08 Posté le : 04/07/2012 11:57
Open in new window
Rapport Haut
#10 Re: Les petits ronds qui tournent facebook twitter
tatane Posté le : 04/07/2012 12:13
marche pas ton lien
Rapport Haut

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

118 Personne(s) en ligne (99 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 118 | Plus ...