(1) 2 »


aligato08
Les petits ronds qui tournent facebook twitter
#1
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1025
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+
Rapport Haut
alain01
Re: Les petits ronds qui tournent facebook twitter
#2
Team FrXoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 2324
Déjà, je remet le lien de tatane :

http://www.dynamicdrive.com/style/css ... ons_using_css3_transform/

Posté le : 04/07/2012 10:03
Partager Twitter Partagez cette article sur GG+
Rapport Haut
alain01
Re: Les petits ronds qui tournent facebook twitter
#3
Team FrXoops
Inscrit: 16/05/2003 18:10
De Rhone-Alpes
Messages: 2324
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
Partager Twitter Partagez cette article sur GG+
Rapport Haut
tatane
Re: Les petits ronds qui tournent facebook twitter
#4
Admin Frxoops
Inscrit: 27/07/2005 16:10
De France
Messages: 2866
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);
}

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

Aidez nous à  soutenir l'association Neurogel en marche

Xoops demo : Démonstration de templates Xoops
Partager Twitter Partagez cette article sur GG+
Rapport Haut
aligato08
Re: Les petits ronds qui tournent facebook twitter
#5
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1025
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+
Rapport Haut
tatane
Re: Les petits ronds qui tournent facebook twitter
#6
Admin Frxoops
Inscrit: 27/07/2005 16:10
De France
Messages: 2866
Fait un "screen" s'il te plaît.

Posté le : 04/07/2012 11:36

Aidez nous à  soutenir l'association Neurogel en marche

Xoops demo : Démonstration de templates Xoops
Partager Twitter Partagez cette article sur GG+
Rapport Haut
aligato08
Re: Les petits ronds qui tournent facebook twitter
#7
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1025
Heuh un quoi ?
Copie d'écran ? Copie du code ?

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


oui

Posté le : 04/07/2012 11:50

Aidez nous à  soutenir l'association Neurogel en marche

Xoops demo : Démonstration de templates Xoops
Partager Twitter Partagez cette article sur GG+
Rapport Haut
aligato08
Re: Les petits ronds qui tournent facebook twitter
#9
Semi pro
Inscrit: 20/02/2007 15:23
Messages: 1025
Open in new window

Posté le : 04/07/2012 11:57
Partager Twitter Partagez cette article sur GG+
Rapport Haut
tatane
Re: Les petits ronds qui tournent facebook twitter
#10
Admin Frxoops
Inscrit: 27/07/2005 16:10
De France
Messages: 2866
marche pas ton lien

Posté le : 04/07/2012 12:13

Aidez nous à  soutenir l'association Neurogel en marche

Xoops demo : Démonstration de templates Xoops
Partager Twitter Partagez cette article sur GG+
Rapport Haut

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




Mentions légales
  • Numéro d'enregistrement CNIL : 811733 |
  • Propulsé avec XOOPS | Copyright © 2001

Graphisme adapté par Tatane | Grosdunord | Montuy337513

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