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

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: 4051
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 »



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

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