[TOUTES VERSIONS] Mettre un effet de mouvement sur le titre de vos forums qui bougera et se décalera légèrement sur la droite au passage de la souris

[Freedom SunModérateur]

Messieurs Dames, je vous salue, ⁣

Si cela vous en dit :
Vous pouvez Mettre un effet de mouvement sur le titre de vos forums qui bougera et se décalera légèrement sur la droite au passage de la souris :

Pour cela : On va d'abord coller le code pour avoir un choix de modification dans votre CSS :

Dans votre : Panneau d'administration / Affichage / Images et Couleurs /  Feuille de style CSS

Collez ceci dans votre feuille de style :
Dans ce code, vous pouvez modifier  : Exemple :  /* Couleur départ *//* Couleur d'arrivée */ etc :

Code:

/****Mettre un effet de mouvement sur le titre de vos forums qui bougera et se décalera légèrement sur la droite au passage de la souris****/
.forumlink
{
display: inline;
color: #f71313;   /* Couleur départ */
text-align: left;
transition: all 2s; /* Durée de la transition, mettez les mêmes valeurs partout, ça sera plus facile */
-moz-transition: all 2s;
-webkit-transition: all 2s;
}

span.forumlink:hover
{
  color: #4f7ed9; /* Couleur d'arrivée */
  margin-left: 60px; /* Décalement nombre de px à décaler pour l'arrivée*/
}
/****Mettre un effet de mouvement sur le titre de vos forums qui bougera et se décalera légèrement sur la droite au passage de la souris****/

Maintenant pour que le code fonctionne :

Il faudra déposer ce petit code span dans le template de votre choix, là où vous voulez appliquer le décalage :
Panneau d'administration / Affichage / Templates

Code:

<span class="forumlink">  </span>

Je précise que cette démonstration est une Version du thème en ModernBB, mais cela fonctionne dans toutes versions !

- Exemples en image pour la partie FAQ : Vous pouvez y voir les flèches là où j'ai placé le code du décalage légèrement sur la droite au passage de la souris :



Procédons :

Dans le template : faq_dhtml
Par exemple : Cherchez ceci qui est le titre :

Code:

<h1 class="page-title">{L_FAQ_TITLE}</h1>

Puis insérez le code de span à chaque extrémité du code de caractères { } :

Code:

<span class="forumlink"> </span>

Ce qui vous donnera :

Code:

<h1 class="page-title"> <span class="forumlink">{L_FAQ_TITLE}</span> </h1>

------

- Exemple en image pour la partie Index : Vous pouvez y voir les flèches là où j'ai placé le code du décalage légèrement sur la droite au passage de la souris :



Dans votre : Panneau d'administration / Affichage / Templates / Générale

Dans le template : index_box
Par exemple : Cherchez le code de vos catégories :

Code:

<dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>

Ensuite, ajoutez :

Code:

<span class="forumlink"> </span>

Ce qui vous donnera :

Code:

<dd class="dterm"><div class="table-title"> <span class="forumlink">{catrow.tablehead.L_FORUM}</span> </div></dd>

-----

Etc, répétez ceci dans le reste des templates ou vous souhaitez le mettre :

Important : insérez bien ce code de span à chaque extrémité du code de caractères { } :

Code:

<span class="forumlink"> </span>

En espérant que ceci vous plaira,

Si vous avez des questions, faites le savoir en créant une demande d'Entraide avec un titre assez explicite et si possible avec une capture d'image de votre besoin ! pour qu'une aide vous soit mieux adaptée !

https://www.milouze14.net/f14-entraide#A

Voir cette page pour être certain d'avoir validé votre template :  

https://www.milouze14.net/h2-diverses-aides


À bientôt,