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 quatre bulles

    Partagez
    avatar
    Sauney
    FémininAge : 22Messages : 428

    le Lun 14 Juil 2014 - 0:03

    Rappel du premier message :

    Suite à une demande, voici le LS qui en découle. Il s'agit d'un QEEL sous forme de quatre ronds. Les couleurs sont personnalisables, il suffit d'aller dans le CSS(qui est commenté). Sur la photo il y a un cadre qui n'apparaît pas sur le résultat final, c'était juste pour délimiter l'espace sur mon forum test ! J'ai rajouté les crédits après le screen(merci de ne pas les retirer). Les groupes n'ont pas d'infobulles ni de liens mais c'est possible d'en inclure Wink

    Voici ce que ça donne :


    CSS
    Code:
    .bulleg1{ /* contrôle la grande bulle 2 */
    position: relative;
    margin: 10px 50px -15px 10px;
    padding: -15px 5px;
    float: left;
    width: 250px;
    min-height: 190px;
    background: #d5b86f;
    border-radius: 300px;
    box-shadow: 0px 0px 2px black;
    color: #5C4200;
    }
    .bulleg2{ /* contrôle la grande bulle 2 */
    position: relative;
    margin: 10px -250px 35px auto;
    padding: 5px;
    float: right;
    width: 230px;
    height: 180px;
    background: #d5b86f;
    border-radius: 300px;
    box-shadow: 0px 0px 2px black;
    color: #5C4200;
    }
    #dslabulleg1{ /* contrôle le contenu de la grande bulle 1 */
    width: 150px;
    margin: 20px auto 5px 50px;
    position: relative;
    color: #5C4200;
    }
    #dslabulleg2{ /* contrôle le contenu de la grande bulle 2 */
    width: 160px;
    height: 180px;
    margin: 20px auto 5px auto;
    position: relative;
    color: #5C4200;
    }
    .membres_co{/* contrôle les membres connectés durant les dernières 24h */
    margin-left: -30px;
    background:transparent;
    color: #5C4200;
    width:240px;
    max-height:30px;
    overflow-y: auto;
    word-wrap: break-word;
    }
    .membres_co .row1, .membres_co .gensmall{/* contrôle les membres connectés durant les dernières 24h */
    background:transparent;
    color: #5C4200;}
    .bullep1{ /* contrôle la petite bulle 1 */
    position: relative;
    padding: -15px 5px;
    float: left;
    margin-left: 100px;
    width: 210px;
    min-height: 150px;
    background: #d5b86f;
    border-radius: 300px;
    box-shadow: 0px 0px 2px black;
    color: #5C4200;
    }
    .bullep1 .row1, .bullep1 .gensmall{/* contrôle les anniversaires */
    background:transparent;
    color: #5C4200;
    text-align: center;}
    .bullep2{/* contrôle la petite bulle 2 */
    position: relative;
    margin: -10px 50px 20px -10px;
    padding: 5px;
    float: right;
    width: 185px;
    height: 135px;
    background: #d5b86f;
    border-radius: 300px;
    box-shadow: 0px 0px 2px black;
    color: #5C4200;
    }
    .bullep2 .gensmall{ /* contrôle la couleur concernant les infos de la CB */
    color: #5C4200;
    }
    #dslabullep1{/* contrôle le contenu de la petite bulle 1 */
    width: 190px;
    margin: 20px auto 5px 50px;
    position: relative;
    color: #5C4200;
    }
    #dslabullep2{/* contrôle le contenu de la petite bulle 2 */
    width: 180px;
    margin: 10px auto 5px 5px;
    position: relative;
    color: #5C4200;
    text-align: center;
    }
    .anniversaires{/* contrôle les anniversaires du jour */
    margin-top: -30px;
    margin-left: 30px;
    max-height:40px;
    overflow-y: auto;
    word-wrap: break-word;
    }
    .anniversairessemaine{/* contrôle les anniversaires de la semaine */
    max-height:40px;
    overflow-y: auto;
    word-wrap: break-word;
    }
    .liste_cb{/* contrôle la liste des connectés à la CB */
    width:180px;
    max-height:40px;
    overflow-y: auto;
    word-wrap: break-word;
    }
    .groupes{/* contrôle la liste des connectés à la CB */
    width: 590px;
    height: auto;
    font-family: 'Georgia';
    font-size: 20px;
    text-shadow: 1px 1px 1px #f2e8d1;
    margin-bottom: 20px;
    }
    .groupe1{
    color: #6f8cd5;
    }
    .groupe2{
    color: #839bda;
    }
    .groupe3{
    color: #96abe0;
    }
    .groupe4{
    color: #9683da;
    }
    .groupe5{
    color: #a696e0;
    }
    a.credits{
    text-decoration: none;
    color: #5C4200;
    font-size: 8px;
    }
    a.credits:hover{
    text-decoration: none;
    text-shadow: 0px 0px 2px white;
    }

    .cadre_qeel{
    background-color: transparent;
    border: none;
    width: 600px;
    margin: auto;
    }

    HTML
    Code:
    <!-- BEGIN disable_viewonline -->
    <table class="cadre_qeel" width="100%" border="0" cellspacing="1" cellpadding="0">

      <tr>
      <td class="bulleg1"><div id="dslabulleg1" class="gensmall"><center>{NEWEST_USER}<br /> <b>▬</b><br />
              <div style="width:200px;margin-left: -25px;">{TOTAL_USERS_ONLINE}</div>
              <div style="margin-left: -50px;width:230px;max-height:30px;overflow-y: auto;word-wrap: break-word;">{LOGGED_IN_USER_LIST}</div><b>▬</b><br />
              <table class="membres_co">{L_CONNECTED_MEMBERS}</table></center></div></td>
           
          <td class="bulleg2"><div id="dslabulleg2" class="gensmall"><center>{TOTAL_POSTS}<br /> <b>▬</b><br />
                      {TOTAL_USERS}<br /> <b>▬</b><br />
                      {RECORD_USERS}</center>
          </div></td>
      </tr>
      <tr><td valign="top" align="center"><table class="bullep1" id="dslabullep1"><div class="anniversaires">{L_WHOSBIRTHDAY_TODAY}</div><br />
      <div class="anniversairessemaine">{L_WHOSBIRTHDAY_WEEK}</div>
              </table></td>
     <td class="bullep2"><div id="dslabullep2"> <!-- BEGIN switch_chatbox_activate -->
     
       
                      <span class="gensmall">{TOTAL_CHATTERS_ONLINE}<br /><div class="liste_cb">{CHATTERS_LIST}</div><br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
                      </span>
     
      <!-- END switch_chatbox_activate -->
      <br /><a class="credits" href="http://www.never-utopia.com/">Never Utopia</a></div>
          </td>
      </tr>
              <tr>
                <td class="groupes" colspan="2" align="center"><span class="groupe1">Groupe1</span>  <span class="groupe2">Groupe2</span>  <span class="groupe3">Groupe3</span>  <span class="groupe4">Groupe4</span>  <span class="groupe5">Groupe5</span></td>
      </tr>
    </table>
    <!-- END disable_viewonline -->

    Pour insérer L'HTML dans le template index_body il faudra remplacer la partie
    Code:
    <!-- BEGIN disable_viewonline --> Codeeeeeee
    <!-- END disable_viewonline -->
    qui s'y trouve Wink

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    S'il y a des problèmes avec ce code, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    avatar
    Djeina
    FémininAge : 21Messages : 233

    le Mar 24 Mai 2016 - 11:12

    Merci ^^
    avatar
    Pearlqueen
    FémininAge : 26Messages : 13

    le Jeu 9 Juin 2016 - 21:14

    Merci

    avatar
    Yukimura Esuki
    MasculinAge : 22Messages : 125

    le Sam 18 Juin 2016 - 22:28

    Thx:
    avatar
    NowSprings
    FémininAge : 19Messages : 35

    le Ven 30 Sep 2016 - 2:37

    Merci !



        
    avatar
    Llariarith
    FémininAge : 33Messages : 217

    le Mer 2 Nov 2016 - 8:35

    Merci :hug:
    avatar
    Loona
    FémininAge : 51Messages : 21

    le Jeu 8 Déc 2016 - 14:28

    Merci beaucoup.



    avatar
    Ombeline30
    FémininAge : 33Messages : 124

    le Mar 18 Juil 2017 - 15:42

    Merci ^^
    avatar
    jelayde
    MasculinAge : 30Messages : 10

    le Sam 18 Nov 2017 - 8:04

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 1:04