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.

-24%
Le deal à ne pas rater :
PC Portable Gaming 15.6″ Medion Erazer Deputy P40 (FHD 144Hz, RTX ...
759.99 € 999.99 €
Voir le deal

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

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    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;
    }



    Anonymous
    Invité

    Lun 28 Juil 2014 - 13:46

    Merci, je déplace ^^
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Dim 3 Aoû 2014 - 20:38

    merci



    Patricia :)
    Cruelly
    Cruelly
    FémininAge : 30Messages : 2605

    Mer 18 Mar 2015 - 4:01

    Merci je vais tenter ^^



    :heart: :heart:
    Anonymous
    Invité

    Dim 29 Mar 2015 - 15:57

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

    Jeu 16 Avr 2015 - 22:54

    Gracias



    Bouton Aide en bas à droite du forum (comme sur ancienne version) HadqjCkktw
    Neymar
    Neymar
    MasculinAge : 25Messages : 139

    Ven 17 Avr 2015 - 13:02

    Yeah merci !
    FreeSpirit
    FreeSpirit
    MasculinAge : 28Messages : 167

    Ven 1 Mai 2015 - 15:31

    Merci
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Ven 8 Mai 2015 - 9:23

    merci
    Bellabimbo444
    Bellabimbo444
    FémininAge : 25Messages : 61

    Sam 30 Mai 2015 - 13:33

    Merci



    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 31Messages : 153

    Mer 10 Juin 2015 - 21:56

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

    Lun 22 Juin 2015 - 21:46

    Merci
    Flitch
    Flitch
    MasculinAge : 34Messages : 45

    Sam 4 Juil 2015 - 13:43

    La solution à ma galère nocturne!!!! Merci
    Grande
    Grande
    FémininAge : 36Messages : 207

    Mer 8 Juil 2015 - 10:24

    Merci



    Bouton Aide en bas à droite du forum (comme sur ancienne version) 171074gwenj10
    DanJack
    DanJack
    FémininAge : 29Messages : 155

    Lun 27 Juil 2015 - 20:46

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

    Jeu 30 Juil 2015 - 11:14

    Merci !



    Bouton Aide en bas à droite du forum (comme sur ancienne version) 322292sweetaddictionShinku145
    BlueGhost
    BlueGhost
    MasculinAge : 22Messages : 138

    Ven 31 Juil 2015 - 3:30

    Merci Very Happy



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

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

    Dim 6 Sep 2015 - 22:16

    Merci !
    Anonymous
    Invité

    Dim 6 Sep 2015 - 22:27

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

    Lun 14 Sep 2015 - 21:14

    merci
    Prince Of Spades
    Prince Of Spades
    MasculinAge : 30Messages : 50

    Jeu 17 Sep 2015 - 15:54

    Merci !
    Luune
    Luune
    FémininAge : 35Messages : 143

    Mer 30 Sep 2015 - 17:21

    Merci beaucoup !
    Eiffel01
    Eiffel01
    MasculinAge : 37Messages : 32

    Lun 21 Déc 2015 - 13:15

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

    Jeu 21 Jan 2016 - 12:00

    merci :)



    eLoChA.
    Kâ Lys
    Kâ Lys
    MasculinAge : 32Messages : 299

    Mar 23 Fév 2016 - 13:59

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



    Bouton Aide en bas à droite du forum (comme sur ancienne version) Bug
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 14:23