Personnaliser Widget FA Latéral

Bien le bonjour à tous et toutes,

Ce n'est pas grand chose mais après avoir passer toute une journée à chercher une solution je me tourne vers vous afin d'obtenir un petit coup de main parce qu'à force de regarder des codes et des codes et des codes, je ne vois plus rien...

Sur le prochain thème de notre forum (en préparation sur mon forum de test : Test) nous aimerions installé le Widget FA Coulissant onclick que j'ai trouvé ICI sauf que nous, on le voudrait "OnMouseOver" et que j'arrive pas à trouver l'endroit où faire cette modification.
Et donc, j'ai besoin de votre aide éclairée parce que je suis dans le noir complet.

En vous remerciant à l'avance de l'aide que vous pourriez m'apporter, je vous souhaite une excellente journée.

Hello :)

L'ouverture et la fermeture du bloc se fond en CSS, pourrais-tu nous copier / coller celui du widget pour qu'on t'indique où chercher s'il te plait ?

Bien sûr, pas de soucis, le voilà :

Code:

/* WIDGETS */

#left /* changer par right pour le widget de droite */
{
  position: fixed;
  top: 0;
  left: 0; /* changer par right pour le widget de droite */
  width: 235px !important;
  height: 100%;
  overflow: auto;
  background:#b7a0aa;
  border-right: 20px solid #723E64; /* changer la couleur bordure - changer par border-left pour le widget de droite */
  border-radius: 0px 10px 10px 0px;
  margin-left: -235px; /* changer par margin-right pour le widget de droite */
  transition: 1s;
}
.button_widgets
{
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 0; /* changer par right pour le widget de droite */
  margin-top: -30px;
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  width: 60px;
  height: 150px;
  background: url(http://i62.tinypic.com/11vo5si.jpg); /* mettre ici image du bouton - taille ci-dessus 60par150 */
  transition: 1s;
}
.button_widgets a
{
  display: block;
  width: 100%;
  height: 100%;
}
.button_widgets .close
{
  display: none;
/* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
}
#open:target #left /* changer par juste left par right pour le widget de droite */
{
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  transition: 1s;
}
#open:target .button_widgets
{
  margin-left: 235px; /* changer par margin-right pour le widget de droite */
  transition: 1s;
}
#open:target .close
{
  display: block;
}
#open:target .open
{
  display: none;
}

Merci encore pour cette réponse rapide ^^

up

Hello hello,

On va commencer par faire une toute petite modification dans le HTML.
Actuellement les boutons sont ici :

Code:

<div class="button_widgets"><a href="#open" class="open"></a><a href="#close" class="close"></a></div>

On va les déplacer dans le code pour les mettre juste après cette ligne là :

Code:

<div id="left">

Comme on n'a plus besoin du click, tu peux même supprimer tout ça :

Code:

<a href="#open" class="open"></a><a href="#close" class="close"></a>

Maintenant, on va venir enlever toute cette partie là du CSS :

Code:

.button_widgets a
{
  display: block;
  width: 100%;
  height: 100%;
}
.button_widgets .close
{
  display: none;
/* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
}
#open:target #left /* changer par juste left par right pour le widget de droite */
{
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  transition: 1s;
}
#open:target .button_widgets
{
  margin-left: 235px; /* changer par margin-right pour le widget de droite */
  transition: 1s;
}
#open:target .close
{
  display: block;
}
#open:target .open
{
  display: none;
}

Et à la place on met juste ces petites lignes :

Code:


#left:hover /* changer par juste left par right pour le widget de droite */
{
  margin-left: 0px; /* changer par margin-right pour le widget de droite */
  transition: 1s;
}
#left:hover .button_widgets
{
  margin-left: 235px; /* changer par margin-right pour le widget de droite */
  transition: 1s;
}

Dis nous si ça fonctionne bien & si tu veux des explications (ou si c'est bon) ♥

C'est parfait, merci beaucoup pour ton aide, ça marche comme sur des roulettes

Je comprends à peu près ce qu'on à fait mais pourquoi avoir déménagé la div dans le template ?

Alors, avant, la div était en dehors de #left (juste au dessus en fait je crois)

Nous, on veut changer le comportement au survol de #left donc en CSS on ne peut modifier que ce qui est à l'intérieur ou après #left, pas ce qui est avant

Voici 2 exemples simples :

Pour cibler une div ".toto" à l'intérieur de #left :

Code:

#left .toto

Pour cibler une div .toto juste après par exemple :

Code:

#left + .toto

Mais avec un sélecteur CSS on ne peut pas sélectionner ce qui est avant #left

En déplaçant .button_widgets à l'intérieur de #left, on peut maintenant le sélectionner, et ainsi le déplacer au survol pour le mettre à droite :p

ok, d'accord, je comprends mieux, merci de ton explication ainsi que ton aide ^^

Contente d'avoir pu t'aider, bon courage pour ton forum !

Si tout est bon, pense à éditer ton premier message pour cocher l’icône "Terminé" :)