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

    Rappel du premier message :


    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
    Euterpe
    FémininAge : 31Messages : 285

    le Lun 28 Mar 2016 - 20:01

    merci
    avatar
    M.O
    MasculinAge : 27Messages : 48

    le Mar 24 Mai 2016 - 3:43

    Merci!
    En ligne
    avatar
    TiGraou
    MasculinAge : 24Messages : 221

    le Mar 7 Juin 2016 - 10:46

    Merci
    avatar
    Rosedesvents
    FémininAge : 30Messages : 90

    le Mer 15 Juin 2016 - 13:49

    Merci
    avatar
    Shakumiro
    MasculinAge : 20Messages : 6

    le Mar 5 Juil 2016 - 18:57

    Merci excellent code !
    avatar
    Keylha
    FémininAge : 17Messages : 82

    le Dim 10 Juil 2016 - 3:47

    Merci beaucoup :3 !



    avatar
    Wiss
    FémininAge : 12Messages : 53

    le Dim 10 Juil 2016 - 16:59

    merci **




    Autre signa:
    avatar
    NanoiHime
    FémininAge : 18Messages : 557

    le Mar 9 Aoû 2016 - 12:23

    mercii



    avatar
    KimmyKinder
    FémininAge : 15Messages : 179

    le Sam 20 Aoû 2016 - 11:14

    Thanks **
    avatar
    Patou972
    FémininAge : 38Messages : 167

    le Jeu 24 Nov 2016 - 17:10

    merci beaucoup
    avatar
    Eil'liathan Tyan'Lirulin
    FémininAge : 26Messages : 315

    le Dim 11 Déc 2016 - 15:50

    Merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Mar 25 Juil 2017 - 22:46