AccueilFAQRechercherMembresGroupesS'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.


    Bouton Aide en bas à droite du forum (comme sur ancienne version)

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 23Messages : 5018

    le Mar 1 Juil 2014 - 0:04


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Effets Divers



    Ceci est un code crée suite à la Demande de Clarisse, ici.

    Pour phbb2 ▬ CSS3 & HTML5 ▬ Bouton au Repos au hover et une fois cliqué


    Les effets


    La boîte "glisse" pour s'ouvrir.
    Les contenus internes ne sont pas fournis!
    Vous pouvez changer l'image de la crois ou alors simplement mettre un texte!

    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> overall_header :
    Juste après ça:
    Code:
    <body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
    Mettez ça:
    Code:
      <div id="target_po">
        <div id="bouton_po">
          <a href="#target_po">Aide</a>
        </div>
        <div id="tableau_po"><div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>
          <div id="tableau_po_interne">
            <h1 class="titre_po">
              Titre Contenu
            </h1>
            Contenu
          </div>
        </div>
      </div>

    Le CSS:
    Code:
    /********** DÉBUT BOUTON **********/

    /* Mise en forme du bouton */
    #bouton_po {
      /* Position */
      position: fixed;
      bottom: 0px;
      right: 20px;
      z-index: 900;
      /* Taille */
      width: 65px;
      height: 25px;
      padding: 5px;
      /* Couleur de fond puis de texte */
      background-color: #B7B7B7;
      color: black;
      text-align: center;
      /* Bordure */
      border: 2px solid black;
      border-bottom: 0px solid;
      transition: all ease 0.5s;
    }

    /* Mise en forme du bouton au passage de la souris */
    #bouton_po:hover {
      background-color: #D8D6D6;
      transition: all ease 0.5s;
    }

    /* Mise en forme du lien dans le bouton */
    #bouton_po a, #bouton_po a:hover {
      color: black;
      letter-spacing: 0px;
      text-decoration: none !important;
      transition: all ease 0.5s;
    }

    /* Effet sur le lien au passage de la souris */
    #bouton_po:hover a, #bouton_po:hover a:hover {
      color: black;
      letter-spacing: 3px;
      text-decoration: none !important;
      transition: all ease 0.5s;
    }

    /* Mise en forme du contenu */
    #tableau_po {
      visibility: hidden;
      /* Position du contenu */
      position: fixed;
      bottom: 0px;
      right: 20px;
      z-index: 999;
      /* Hauteur de base pour l'effet. */
      width: 0px;
      height: 0px;
      /* Couleur de fond puis de texte */
      background-color: #B7B7B7;
      color: black;
      /* Bordure */
      border: 2px solid black;
      transition: all ease 0.5s;
    }

    /* Apparition du contenu au click sur le bouton */
    #target_po:target #tableau_po {
      visibility: visible;
      /* Taille du contenu */
      width: 401px;
      height: 556px;
      transition: all ease 0.5s;
    }

    /* Marge entre le bord et le bouton de fermeture */
    #tableau_po .fermer {
      margin: 3px;
    }

    /* Dans le cas où le bouton de fermeture est un texte */
    #tableau_po .fermer a, #tableau_po .fermer a:hover {
      text-decoration: none !important;
    }

    #tableau_po .fermer a {
      color: black;
      transition: all ease 0.5s;
    }

    #tableau_po .fermer a:hover {
      color: white;
      transition: all ease 0.5s;
    }

    /* Pour un overflow: auto */
    #tableau_po_interne {
      /*taille*/
      height: 535px;
      width: 390px;
      margin: auto;
      overflow: auto;
    }

    /* Mise en forme des titres dans le contenu */
    h1.titre_po {
      width: 100%;
      border: 0px solid;
      margin: 0px;
      margin-bottom: 10px;
      background: none;
      font-weight: normal;
      text-align: center;
      border-bottom: 1px solid black;
      font-size: 15pt;
    }
    /********** FIN BOUTON **********/

    Changer la croix / ce qui permet de fermer l'aide


    Le code correspondant est celui-ci:
    Code:
    <div class="fermer"><a href="#"><img src="http://image.noelshack.com/fichiers/2014/24/1402677746-2014-06-13-184010.png" /></a></div>
    Il suffit de retirer l'image ou la changer mais ne touchez surtout pas le lien autour, ni la div, uniquement l'image ou vous ne pourrez plus fermer votre aide!
    Le code CSS correspondant est celui-ci:
    Code:

    /* Marge entre le bord et le bouton de fermeture */
    #tableau_po .fermer {
      margin: 3px;
    }

    /* Dans le cas où le bouton de fermeture est un texte */
    #tableau_po .fermer a, #tableau_po .fermer a:hover {
      text-decoration: none !important;
    }

    #tableau_po .fermer a {
      color: black;
      transition: all ease 0.5s;
    }

    #tableau_po .fermer a:hover {
      color: white;
      transition: all ease 0.5s;
    }



    avatar
    Halloween
    FémininAge : 23Messages : 9744

    le Lun 28 Juil 2014 - 13:46

    Merci, je déplace ^^

    avatar
    patriciadpt30
    FémininAge : 54Messages : 240

    le Dim 3 Aoû 2014 - 20:38

    merci



    Patricia :)
    avatar
    Cruelly
    FémininAge : 24Messages : 2547

    le Mer 18 Mar 2015 - 4:01

    Merci je vais tenter ^^




    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Dim 29 Mar 2015 - 15:57

    Je trouve ce système assez sympa et pratique ! Merci pour le LS ! <3
    avatar
    servity
    MasculinAge : 45Messages : 82

    le Jeu 16 Avr 2015 - 22:54

    Gracias



    avatar
    Neymar
    MasculinAge : 19Messages : 138

    le Ven 17 Avr 2015 - 13:02

    Yeah merci !
    avatar
    FreeSpirit
    MasculinAge : 21Messages : 160

    le Ven 1 Mai 2015 - 15:31

    Merci
    avatar
    Ouat
    FémininAge : 33Messages : 74

    le Ven 8 Mai 2015 - 9:23

    merci
    avatar
    Bellabimbo444
    FémininAge : 19Messages : 61

    le Sam 30 Mai 2015 - 13:33

    Merci



    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 149

    le Mer 10 Juin 2015 - 21:56

    Merci beaucoup !
    avatar
    Chèlha
    FémininAge : 24Messages : 121

    le Lun 22 Juin 2015 - 21:46

    Merci
    avatar
    Flitch
    MasculinAge : 28Messages : 45

    le Sam 4 Juil 2015 - 13:43

    La solution à ma galère nocturne!!!! Merci
    avatar
    Grande
    FémininAge : 29Messages : 206

    le Mer 8 Juil 2015 - 10:24

    Merci



    avatar
    DanJack
    FémininAge : 23Messages : 155

    le Lun 27 Juil 2015 - 20:46

    Merci beaucoup ! C'est très utile ♥
    avatar
    Khouro13
    FémininAge : 18Messages : 208

    le Jeu 30 Juil 2015 - 11:14

    Merci !



    avatar
    BlueGhost
    MasculinAge : 16Messages : 125

    le Ven 31 Juil 2015 - 3:30

    Merci Very Happy





    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    avatar
    hurudy
    MasculinAge : 37Messages : 40

    le Dim 6 Sep 2015 - 22:16

    Merci !
    avatar
    Kelalin
    FémininAge : 25Messages : 1720

    le Dim 6 Sep 2015 - 22:27

    Merci (((o(*゚▽゚*)o)))
    avatar
    EOS
    MasculinAge : 24Messages : 34

    le Lun 14 Sep 2015 - 21:14

    merci
    avatar
    Prince Of Spades
    MasculinAge : 24Messages : 50

    le Jeu 17 Sep 2015 - 15:54

    Merci !
    avatar
    Luune
    FémininAge : 29Messages : 125

    le Mer 30 Sep 2015 - 17:21

    Merci beaucoup !
    avatar
    Eiffel01
    MasculinAge : 30Messages : 32

    le Lun 21 Déc 2015 - 13:15

    THE code, merci beaucoup
    avatar
    Elocha
    FémininAge : 67Messages : 255

    le Jeu 21 Jan 2016 - 12:00

    merci :)



    eLoChA.
    avatar
    Kâ Lys
    MasculinAge : 54Messages : 299

    le Mar 23 Fév 2016 - 13:59

    Naturellement, un gros merci à toi Nyo pour ce magnifique code! :)



    Contenu sponsorisé


      La date/heure actuelle est Lun 11 Déc 2017 - 8:44