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.


    QEEL en trois lignes

    Partagez
    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Ven 2 Mai 2014 - 18:50

    Qui est en ligne?



    Ceci est un code de QEEL crée suite à la Demande de B-lueberry, ici.

    Version phbb2 ▬ CSS3 & HTML5 ▬ Pas besoin de poster pour avoir le code, mais un bonjour et un merci fait toujours plaisir! ▬ Ce que ça donne


    Le code


    Vous trouverez à la suite le code brut avec quelques commentaires. Cependant, pour des informations supplémentaires quant à comment modifier ce code, suivez les indications postées plus bas, intitulées "Modifications supplémentaires".

    Code HTML à la place dans index_body, entre BEGIN disable_viewonline et END disable_viewonline
    Code:
    <!-- BEGIN switch_viewonline_link -->
     <!-- END switch_viewonline_link -->

     <!-- BEGIN switch_viewonline_nolink -->
     <!-- END switch_viewonline_nolink -->
    <div id="qeel">
      <div id="groupes_qeel">
        <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
          </div>
        </div>
        <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet dolor nulla. Fusce porta, ipsum eu tincidunt aliquam, velit nisl cursus lectus, quis laoreet risus dui a nunc. Maecenas nec erat hendrerit, eleifend nisl quis, posuere enim. In turpis felis, mollis ultrices dui quis, mattis rutrum diam. Donec ac porta purus, in sagittis sem. Suspendisse potenti. Suspendisse porta ac est nec accumsan. Curabitur non dui accumsan, tempor nunc vel, vehicula diam. Phasellus pharetra metus ut tortor commodo lobortis.</section>
          </div>
        </div>
        <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
          </div>
        </div>
        <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
          </div>
        </div>
        <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
          </div>
        </div>
      </div>
      <div id="contenteur_infos_qeel"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" />
        <div id="utilisateur_online_qeel"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
     {RECORD_USERS}<br />
     <br />
     {LOGGED_IN_USER_LIST}</span></div>
        <div id="infos_qeel"><span class="gensmall">{TOTAL_POSTS}<br />
     {TOTAL_USERS}<br />
     {NEWEST_USER}</span></div>
      </div>
      <table id="connectes_qeel">{L_CONNECTED_MEMBERS}</table>
    <div style="width: 100%; text-align: center;">©NyoTheNeko pour Never-Utopia</div>
    </div>
     <!-- BEGIN switch_chatbox_activate -->
     <!-- BEGIN switch_chatbox_popup -->
     <!-- END switch_chatbox_popup -->
     <!-- END switch_chatbox_activate -->

    Le CSS:
    Code:
    ]/* ------- DEBUT MISE EN FORME QEEL (index-box)------- */
    /* Ceci est le contour du QEEL.  */
    #qeel {
      width: 800px;
      border-radius: 200px;
      background-color: #D5A35E;
      /* Modifiez les valeurs de padding pour retirer la hauteur supplémentaire. Pensez également à changer le border-radius pour ne pas couper les rectangles dans le QEEL */
      padding-top: 120px;
      padding-bottom: 120px;
    }

    /* Rectangle du haut contenant les images du QEEL */
    #groupes_qeel {
      width: 750px;
      height: 150px;
      padding-top: 50px;
      /* Permet de faire voir les infobulles si elles dépassent du carré  */
      overflow: visible;
      margin: auto;
      margin-bottom: 20px;
      /* La dernière variable détermine l'opacité du fond. Ici: un blanc avec opacité 0.6 */
      background-color: rgba(255, 255, 255, 0.6);
    }

    /* Div contenant à la fois l'image et l'infobulle. */
    .infobulle_groupe_qeel {
      position: relative;
      /* Permet de mettre les images à la suite. */
      display: inline-block;
      margin: auto;
      /* À changer selon la taille de l'image */
      width: 100px;
      height: 75px;
      overflow: visible;
      /* Permet de mettre une marge entre les images */
      margin-left: 10px;
    }
     
    /* Mise en forme de l'infobulle */
    .infobulle_groupe_qeel div {
      position: absolute;
      /* À modifier pour changer la position, par rapport à l'image de groupe, de la bulle. */
      top: 60px;
      left: 80px;
      /* Taille de l'infobulle */
      width: 200px;
      height: 150px;
      /* Couleur de l'infobulle */
      background-color: white;
      /* Couleur du texte dans l'infobulle */
      color: black;
      border: 2px solid black;
      border-radius: 20px;
      opacity:0;
      /* Ajoutez ici des transform si vous voulez + d'effets */
      transition: all 0.5s ease-in-out 0s;
      z-index: 999;
      visibility: hidden;
    }
     
    .infobulle_groupe_qeel:hover div, .infobulle_groupe_qeel:focus div {
      /* Ajoutez ici des transform si vous voulez plus d'effets. */
      opacity:1;
      transition: all 0.5s ease-in-out 0s;
      visibility: visible;
    }

    /* Nom du groupes dans l'infobulle. À modifier comme n'importe quel titre. */
    .nom_groupe_qeel {
      font-family: 'Georgia';
      font-size: 18pt;
      width: 100%;
      text-align: center;
      background-color: #D5A35E;
    }

     /* Texte dans le QEEL. Hauteur à modifier si la hauteur de l'infobulle est modifiée. */
    .txt_groupe_qeel {
      width: 90%;
      height: 75px;
      font-size: 9pt;
      text-align: justify;
      margin: auto;
      overflow: auto;
    }

     /* Contient les trois cases de la deuxième ligne */
    #contenteur_infos_qeel {
      width: 750px;
      margin: auto;
      overflow: hidden;
      margin-bottom: 20px;
    }

     /* Image qui est en ligne */
    #i_whosonline {
      float: left;
    }

     /* Contient les utilisateurs actuellement en ligne */
    #utilisateur_online_qeel {
      float: left;
      width: 190px;
      margin-left: 10px;
      height: 220px;
      padding: 5px;
      text-align: justify;
      overflow: auto;
      background-color: rgba(255, 255, 255, 0.6);
    }

    /* Contient les infos générales du forum. */
    #infos_qeel {
      float: left;
      width: 190px;
      margin-left: 10px;
      height: 220px;
      padding: 5px;
      text-align: justify;
      overflow: auto;
      background-color: rgba(255, 255, 255, 0.6);
    }

    /* Tableau des derniers connectés les dernières 48h/24h/etc */
    #connectes_qeel {
      width: 750px;
      height: 150px;
      margin: auto;
      overflow: auto;
      background-color: rgba(255, 255, 255, 0.6);
    }

     /* Permet de retirer le fond de la table des derniers connectés & le réaligner. */
    #connectes_qeel td {
      vertical-align: top;
      background: none;
    }

    /* -------- FIN MISE EN FORME QEEL (index-box)--------- */

    Informations


    L'image du QEEL est de 330px de largeur et 230px de hauteur.
    Les images de groupe sont de 100px de hauteur et de 75px de hauteur.

    Vous pouvez rajouter des groupes o en retirer en ajoutant ce bout de code:
    Code:
    <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
          </div>
        </div>
    Notez que les groupes ne sont pas centrés. En effet, il vous faudra ajouter une div autour des groupes en lui donnant la largeur qu'il vous faut et margin: auto.
    Exemple pour deux groupes:

    HTML:
    Code:
    <div id="qeel">
      <div id="groupes_qeel">
        <div id="contour_groupes_qeel">
        <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">Texte texte texte texte</section>
          </div>
        </div>
        <div class="infobulle_groupe_qeel"><a href="#" title="Groupe 1"><img src="http://i55.servimg.com/u/f55/09/03/38/36/untitl11.jpg" /></a>
          <div><h2 class="nom_groupe_qeel">Nom du Groupe</h2><section class="txt_groupe_qeel">orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce laoreet dolor nulla. Fusce porta, ipsum eu tincidunt aliquam, velit nisl cursus lectus, quis laoreet risus dui a nunc. Maecenas nec erat hendrerit, eleifend nisl quis, posuere enim. In turpis felis, mollis ultrices dui quis, mattis rutrum diam. Donec ac porta purus, in sagittis sem. Suspendisse potenti. Suspendisse porta ac est nec accumsan. Curabitur non dui accumsan, tempor nunc vel, vehicula diam. Phasellus pharetra metus ut tortor commodo lobortis.</section>
          </div>
        </div>
    </div>
    </div>

    CSS:
    Code:
    #contour_groupes_qeel {
      /* Taille de 2 images + les 10px de marge. */
      width: 210px;
      margin: auto;
      overflow: visible;
    }

    Modifications supplémentaires


    Comme vous avez pu le remarquer, ce code est "brut" c'est à dire que beaucoup de choses sont modulables. Si vous voulez des exemples, de choses à changer ou SAVOIR comment modifier certaines choses, n'hésitez pas à poster à la suite. Voici une liste d'idée qui pourraient être expliquées plus tard si besoin est:

    • Avoir une image de fond de QEEL  (CSS à modifier: #QEEL)
    • Avoir d'autres effets sur l'infobulle pour son apparition, disparition (CSS à modifier: .infobulle_groupe_qeel div et .infobulle_groupe_qeel:hover div, .infobulle_groupe_qeel:focus div
      [/i]
    • Avoir des effets sur les images de groupes (CSS à ajouter: .infobulle_groupe_qeel img et .infobulle_groupe_qeel img:hover)
    • Effets sur les blocs (CSS à modifier: #groupes_qeel, #i_whosonline, #utilisateur_online_qeel, #infos_qeel et #connectes_qeel)
    En ligne
    Okhmhaka
    FémininAge : 31Messages : 31713

    le Lun 5 Mai 2014 - 17:37

    Un code bien annoté et des explications pour modifier le code, c'est parfait^^

    Je te remercie pour ce LS !



    B-lueberry
    FémininAge : 21Messages : 20

    le Dim 11 Mai 2014 - 16:57

    Merci beaucoup pour le LS et la réalisation de cette demande ♥
    BlueBerry ♪
    FémininAge : 19Messages : 85

    le Sam 17 Mai 2014 - 20:17

    mercii



    Petit Harfang
    FémininAge : 16Messages : 78

    le Ven 23 Mai 2014 - 9:07

    Merci :)
    Onna
    FémininAge : 20Messages : 17

    le Mar 27 Mai 2014 - 9:09

    Merci~!
    PuppetBlue
    FémininAge : 24Messages : 86

    le Lun 16 Juin 2014 - 9:46

    Merci, j'adore !



    Zoé
    FémininAge : 17Messages : 175

    le Sam 28 Juin 2014 - 8:34

    merci !



    Dacina moe
    FémininAge : 38Messages : 131

    le Sam 5 Juil 2014 - 3:36

    Merci :)
    Lilynufare
    FémininAge : 25Messages : 227

    le Sam 5 Juil 2014 - 16:07

    Merci du partage, j'aime beaucoup
    Eil'liathan Tyan'Lirulin
    FémininAge : 25Messages : 305

    le Sam 17 Jan 2015 - 15:45

    Sais plus ou donner de la tête ><
    Puunch
    FémininAge : 24Messages : 18

    le Mar 17 Fév 2015 - 17:25

    merci :)(aa)
    LOUVE ☽
    FémininAge : 26Messages : 51

    le Lun 6 Avr 2015 - 21:36

    merci :)
    Contenu sponsorisé

    Aujourd'hui à 15:09


      La date/heure actuelle est Mar 6 Déc 2016 - 15:09