AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-20%
Le deal à ne pas rater :
Drone Dji DJI Mini 4K (EU)
239 € 299 €
Voir le deal

    Personnaliser Widget FA Latéral

    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Jeu 1 Oct 2015 - 10:53

    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.



    Personnaliser Widget FA Latéral  30xivrd
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Jeu 1 Oct 2015 - 13:54

    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 ?

    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Jeu 1 Oct 2015 - 14:50

    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 ^^



    Personnaliser Widget FA Latéral  30xivrd
    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Dim 4 Oct 2015 - 10:11

    up



    Personnaliser Widget FA Latéral  30xivrd
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 4 Oct 2015 - 12:14

    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) ♥

    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Dim 4 Oct 2015 - 13:16

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

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



    Personnaliser Widget FA Latéral  30xivrd
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 4 Oct 2015 - 13:39

    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 Sad

    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

    P'tit loup
    P'tit loup
    MasculinAge : 42Messages : 451

    Dim 4 Oct 2015 - 14:14

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



    Personnaliser Widget FA Latéral  30xivrd
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 4 Oct 2015 - 15:02

    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é" :)

    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 22:34