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.

Le Deal du moment : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

    QEEL en quatre bulles

    Sauney
    Sauney
    FémininAge : 28Messages : 435

    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 :
    QEEL en quatre bulles - Page 2 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 - Page 2 Signne10
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Mar 6 Jan 2015 - 5:44

    Merci!
    Anonymous
    Invité

    Dim 22 Fév 2015 - 20:16

    merci =)
    AkaZukin
    AkaZukin
    FémininAge : 29Messages : 35

    Dim 8 Mar 2015 - 16:26

    Merci! :)
    Niortais
    Niortais
    MasculinAge : 39Messages : 27

    Jeu 26 Mar 2015 - 14:19

    Merci
    BlueGhost
    BlueGhost
    MasculinAge : 22Messages : 138

    Lun 4 Mai 2015 - 15:16

    Très beau, bravo Very Happy



    QEEL en quatre bulles - Page 2 1476882517-signa

    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    erika02
    erika02
    FémininAge : 27Messages : 278

    Mer 3 Juin 2015 - 17:25

    Merchi :3



    QEEL en quatre bulles - Page 2 45054210
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Mer 10 Juin 2015 - 12:36

    Merci beaucoup :)



    QEEL en quatre bulles - Page 2 Edkidd11
    Liia
    Liia
    FémininAge : 28Messages : 91

    Lun 27 Juil 2015 - 14:04

    Merci:3
    Yasashi
    Yasashi
    FémininAge : 28Messages : 74

    Ven 31 Juil 2015 - 17:18

    Zoli ! Merci
    melah
    melah
    FémininAge : 33Messages : 8

    Sam 29 Aoû 2015 - 10:15

    merci
    Anonymous
    Invité

    Sam 29 Aoû 2015 - 15:34

    Merci !!! (´ω`★)
    Isaac Berntsson
    Isaac Berntsson
    MasculinAge : 30Messages : 29

    Jeu 17 Sep 2015 - 14:01

    Merci !
    Anonymous
    Invité

    Mar 29 Sep 2015 - 12:32

    Merci beaucoup
    Bully
    Bully
    FémininAge : 21Messages : 39

    Mer 30 Sep 2015 - 13:32

    Merci
    Nartiifiice
    Nartiifiice
    FémininAge : 26Messages : 88

    Dim 4 Oct 2015 - 22:58

    tnx
    Hylia
    Hylia
    FémininAge : 23Messages : 100

    Mar 13 Oct 2015 - 17:29

    Merci!



    QEEL en quatre bulles - Page 2 _hylia10
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Dim 13 Déc 2015 - 15:03

    Il est chouette, merci ! :)



    Just want to be yours.
    Voltino
    Voltino
    MasculinAge : 29Messages : 55

    Ven 12 Fév 2016 - 11:48

    Merci
    Necko
    Necko
    MasculinAge : 26Messages : 29

    Sam 13 Fév 2016 - 12:10

    Merci
    Neya
    Neya
    FémininAge : 24Messages : 164

    Lun 15 Fév 2016 - 21:18

    Thank's !
    Ari
    Ari
    FémininAge : 22Messages : 109

    Ven 26 Fév 2016 - 16:57

    Merki ^^
    Sapphire
    Sapphire
    FémininAge : 27Messages : 48

    Jeu 3 Mar 2016 - 20:39

    Merci beaucoup !
    Kaleessi
    Kaleessi
    FémininAge : 31Messages : 78

    Mar 8 Mar 2016 - 16:23

    Mercii du partage!! :)
    Ellebasi
    Ellebasi
    FémininAge : 56Messages : 190

    Sam 19 Mar 2016 - 16:37

    Merci pour ce que tu offres.



    QEEL en quatre bulles - Page 2 4fci
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Ven 25 Mar 2016 - 1:00

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 8:44