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.

-50%
Le deal à ne pas rater :
-50% Baskets Nike Air Huarache
64.99 € 129.99 €
Voir le deal

    QEEL en quatre bulles

    Sauney
    Sauney
    FémininAge : 28Messages : 435

    Lun 14 Juil 2014 - 0:03

    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 :
    QEEL en quatre bulles 273163screenqeel

    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 ^^



    QEEL en quatre bulles Signne10
    Anonymous
    Invité

    Mar 22 Juil 2014 - 18:16

    Super Sauney, merci Wink
    Venise
    Venise
    FémininAge : 40Messages : 270

    Mer 23 Juil 2014 - 13:56

    merci
    shala
    shala
    FémininAge : 32Messages : 213

    Ven 25 Juil 2014 - 18:09

    merci



    Boou
    Boou
    FémininAge : 31Messages : 50

    Lun 28 Juil 2014 - 22:43

    Merci :)
    Tatia38
    Tatia38
    FémininAge : 34Messages : 316

    Mer 30 Juil 2014 - 8:57

    merci Very Happy Very Happy Very Happy 
    Freya Lazare
    Freya Lazare
    FémininAge : 36Messages : 122

    Jeu 31 Juil 2014 - 15:02

    Merci ^^
    Velvet-Mist
    Velvet-Mist
    FémininAge : 32Messages : 45

    Lun 4 Aoû 2014 - 19:27

    Merci, je vais le tester aussi *A* ♥
    Helvelina
    Helvelina
    FémininAge : 32Messages : 82

    Lun 4 Aoû 2014 - 19:49

    Merciii
    Choubakawa
    Choubakawa
    MasculinAge : 30Messages : 87

    Sam 9 Aoû 2014 - 11:16

    Merci :)



    QEEL en quatre bulles Witche13
    Shinozuki
    Shinozuki
    FémininAge : 23Messages : 6

    Sam 23 Aoû 2014 - 19:36

    C'est super ça ! :o
    Merci ! ^^
    Damned
    Damned
    FémininAge : 22Messages : 109

    Dim 14 Sep 2014 - 10:46

    Merci
    Idril Palanén
    Idril Palanén
    FémininAge : 31Messages : 83

    Dim 21 Sep 2014 - 21:36

    Hey, merci beaucoup pour ce code !
    Faucon
    Faucon
    FémininAge : 24Messages : 64

    Sam 27 Sep 2014 - 15:30

    Merci Very Happy
    plushmasters
    plushmasters
    FémininAge : 31Messages : 71

    Sam 4 Oct 2014 - 18:40

    je love :)
    Nonze
    Nonze
    MasculinAge : 30Messages : 85

    Dim 2 Nov 2014 - 19:12

    Merci
    JasLo
    JasLo
    FémininAge : 22Messages : 76

    Sam 8 Nov 2014 - 12:59

    Cool, merci !
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Sam 8 Nov 2014 - 13:35

    Merci !!
    avatar
    Claclou02
    FémininAge : 25Messages : 46

    Sam 8 Nov 2014 - 18:19

    Merci. ^^
    Loukoum
    Loukoum
    FémininAge : 30Messages : 1461

    Jeu 27 Nov 2014 - 8:50

    Merci Sauney



    Anonymous
    Invité

    Dim 30 Nov 2014 - 17:44

    J'aime bien Very Happy
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Jeu 4 Déc 2014 - 2:54

    merci
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Sam 6 Déc 2014 - 2:02

    Merci ! ^^
    Kamora
    Kamora
    MasculinAge : 31Messages : 18

    Mar 16 Déc 2014 - 1:55

    C'est simple mais j'aime beaucoup
    Milou
    Milou
    FémininAge : 24Messages : 163

    Mar 16 Déc 2014 - 16:54

    thanks ^^



    QEEL en quatre bulles 693002signa
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 9:49