Fork me on GitHub




(1) 2 »


Les petits ronds qui tournent facebook twitter
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1158
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".

;)

Posté le : 04/07/2012 09:57
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 3504

Posté le : 04/07/2012 10:03

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Admin Frxoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 3504
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

Posté le : 04/07/2012 10:14

Open in new window
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Xoops accro
Inscrit: 27/07/2005 16:10
De France
Messages: 2970
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-transitionall 0.5s ease-in-out;
-
webkit-transitionall 0.5s ease-in-out;
-
o-transitionall 0.5s ease-in-out;
-
ms-transitionall 0.5s ease-in-out;
transitionall 0.5s ease-in-out;
-
moz-transformrotate(-360deg);
-
webkit-transformrotate(-360deg);
-
o-transformrotate(-360deg);
-
ms-transformrotate(-360deg);
transformrotate(-360deg);
}

Posté le : 04/07/2012 10:51
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1158
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

Posté le : 04/07/2012 11:33
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Xoops accro
Inscrit: 27/07/2005 16:10
De France
Messages: 2970
Fait un "screen" s'il te plaît.

Posté le : 04/07/2012 11:36
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1158
Heuh un quoi ?
Copie d'écran ? Copie du code ?

Posté le : 04/07/2012 11:45
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Xoops accro
Inscrit: 27/07/2005 16:10
De France
Messages: 2970
Citation :
aligato08 a écrit :
Heuh un quoi ?
Copie d'écran ?


oui

Posté le : 04/07/2012 11:50
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1158
Open in new window

Posté le : 04/07/2012 11:57
Partager Twitter Partagez cette article sur GG+
Re: Les petits ronds qui tournent facebook twitter
Xoops accro
Inscrit: 27/07/2005 16:10
De France
Messages: 2970
marche pas ton lien

Posté le : 04/07/2012 12:13
Partager Twitter Partagez cette article sur GG+

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




Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

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