Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Xenforo : Avoir un logo css pivotant à 360° au passage de la souris
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="deleted247906" data-source="post: 4829563"><p>Bonjour à tous, voici un tutoriel pour avoir un logo css (liste <a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank">ici</a>.) tournant à coté d'un pseudo au passage de la souris.</p><p>Pour cela, telecharger font awesome <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">ici</a>.</p><p>Allez dans votre <strong>AdminCP > Apparences > Templates ></strong> <strong>page_container_js_head</strong></p><p>Sous</p><p>[CODE]<!--XenForo_Require:JS-->[/CODE]</p><p>Mettez</p><p>[CODE]<link rel="stylesheet" href="font-awesome-4.1.0/css/font-awesome.min.css">[/CODE]</p><p>Ensuit, direction <strong>EXTRA.CSS</strong></p><p>Donc là je vais mettre en couleurs des parties, la légende se trouve dessous c'est très important !</p><p></p><p>.username .<strong><span style="color: #ff0000">style3</span></strong>:before {</p><p>content: "<span style="color: #000000">\</span><strong><span style="color: #0000ff">f005</span></strong>";</p><p>font-family: FontAwesome;</p><p>margin-right: 4px;</p><p>display: inline-block;</p><p>-webkit-transition-duration: 0.8s;</p><p>-moz-transition-duration: 0.8s;</p><p>-o-transition-duration: 0.8s;</p><p>transition-duration: 0.8s;</p><p></p><p>}</p><p>.username:hover .<strong><span style="color: #ff0000">style3</span></strong>:before {</p><p>-webkit-transform: rotate(360deg);</p><p>-moz-transform: rotate(360deg);</p><p>-ms-transform: rotate(360deg);</p><p>-o-transform: rotate(360deg);</p><p></p><p>}</p><p></p><p>Alors, pour ce qui est en rouge : C'est le groupe, pour savoir le numéro d'un groupe allé dans Utilisateurs > Groupe d'utilisateur puis cliquez sur le groupe, regardez dans l'URL le numéro. Remplacez le 3 par le numéro.</p><p></p><p><span style="color: #0000ff"><strong>f005 : </strong><span style="color: #000000">C'est si vous voulez changé le petite icone, là c'est l'étoile</span></span> pleine. Pour savoir comment changé rendez-vous<a href="http://fortawesome.github.io/Font-Awesome/icons/" target="_blank"> ici</a>. Cliquez sur l'icone de votre choix, puis regardez:</p><p><img src="http://image.noelshack.com/fichiers/2015/07/1423689661-sans-titre.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p><p>J'ai pris comme exemple le logo youtube, mais c'est pareil à tous les logos.</p><p>Là en l'occurence si je veux le logo youtube qui tourne, à la place, je vais écrire content: "\f16a";.</p><p>J'éspère que ce tutoriel vous aura plus, si vous avez des questions n'hesitez pas <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite351" alt=";)" title="Clin d'oeil ;)" loading="lazy" data-shortname=";)" /></p></blockquote><p></p>
[QUOTE="deleted247906, post: 4829563"] Bonjour à tous, voici un tutoriel pour avoir un logo css (liste [URL='http://fortawesome.github.io/Font-Awesome/icons/']ici[/URL].) tournant à coté d'un pseudo au passage de la souris. Pour cela, telecharger font awesome [URL='http://fortawesome.github.io/Font-Awesome/']ici[/URL]. Allez dans votre [B]AdminCP > Apparences > Templates >[/B] [B]page_container_js_head[/B] Sous [CODE]<!--XenForo_Require:JS-->[/CODE] Mettez [CODE]<link rel="stylesheet" href="font-awesome-4.1.0/css/font-awesome.min.css">[/CODE] Ensuit, direction [B]EXTRA.CSS[/B] Donc là je vais mettre en couleurs des parties, la légende se trouve dessous c'est très important ! .username .[B][COLOR=#ff0000]style3[/COLOR][/B]:before { content: "[COLOR=#000000]\[/COLOR][B][COLOR=#0000ff]f005[/COLOR][/B]"; font-family: FontAwesome; margin-right: 4px; display: inline-block; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .username:hover .[B][COLOR=#ff0000]style3[/COLOR][/B]:before { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } Alors, pour ce qui est en rouge : C'est le groupe, pour savoir le numéro d'un groupe allé dans Utilisateurs > Groupe d'utilisateur puis cliquez sur le groupe, regardez dans l'URL le numéro. Remplacez le 3 par le numéro. [COLOR=#0000ff][B]f005 : [/B][COLOR=#000000]C'est si vous voulez changé le petite icone, là c'est l'étoile[/COLOR][/COLOR] pleine. Pour savoir comment changé rendez-vous[URL='http://fortawesome.github.io/Font-Awesome/icons/'] ici[/URL]. Cliquez sur l'icone de votre choix, puis regardez: [IMG]http://image.noelshack.com/fichiers/2015/07/1423689661-sans-titre.png[/IMG] J'ai pris comme exemple le logo youtube, mais c'est pareil à tous les logos. Là en l'occurence si je veux le logo youtube qui tourne, à la place, je vais écrire content: "\f16a";. J'éspère que ce tutoriel vous aura plus, si vous avez des questions n'hesitez pas ;) [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Xenforo : Avoir un logo css pivotant à 360° au passage de la souris
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut