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 : -21%
PC portable gamer 15,6” Medion ERAZER Deputy P60 ...
Voir le deal
629.99 €

    Qeel en 3 colonnes

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 30 Juil 2014 - 17:33


    Qeel en 3 colonnes


    Suite à une demande de Airore voici un Qeel en 3 colonnes avec les groupes en infobulles.

    Je précise que l'arrière plan jaune correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www


    Et le code :
    Remplacer cette partie du template index-body :
    Code:
    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
      </tr>
      <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
      </tr>
      <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
      </tr>
      {L_CONNECTED_MEMBERS}
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
      <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
      </tr>
      <!-- BEGIN switch_chatbox_activate -->
      <tr>
          <td class="row1">
            <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<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>
          </td>
      </tr>
      <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->

    Par celle-ci :
    Code:
    <!-- BEGIN disable_viewonline -->
    <div id="qeel_titre">Qui est là ?</div>
    <table id="qeel_position">
      <tr>
        <td class="qeel_colonne1"><div class="qeel_bloc">{TOTAL_POSTS}<br/>{TOTAL_USERS}<br/>{NEWEST_USER}<br/>{RECORD_USERS}
    </div><br/>
    <div class="qeel_bloc">{TOTAL_USERS_ONLINE}<br/>{LOGGED_IN_USER_LIST}
    </div>
    </td>
    <td width="20px;"></td>
    <td class="qeel_centre">
    <div class="qeel_groupe" style="background:#5C1010"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#0F2652"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#739E93"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#23471A"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/>
    <div class="qeel_groupe" style="background:#876716"><div class="infobulle">DESCRIPTION DU GROUPE</div></div><br/><a href="http://www.never-utopia.com/" class="ALice">© By A-Lice</a>
    </td>
    <td width="20px;"></td>
        <td class="qeel_colonne2"><table class="transparent">{L_CONNECTED_MEMBERS}</table>
    </td>
      </tr>
    </table>
    <!-- END disable_viewonline -->

    CSS :
    Code:
    .transparent .row1 {
    background-color: transparent;
    }
    .transparent .gensmall {
    font-size:12px;
    }

    #qeel_position {
    position: relative;
    margin:auto;
    }

    #qeel_titre {
    font-size:30px;
    font-weight: bold;
    color:black;
    text-align:center;
    }

    .qeel_colonne1 {
    font-size: 12px;
    text-align: justify;
    width: 255px;
    height: 345px;
    background:#5c7885;
    padding:10px;
    border-top-left-radius:30px;
    border-bottom-left-radius:30px;
    }

    .qeel_centre {
    background:transparent;
    width:130px;
    height:305px;
    padding:20px;
    }

    .qeel_colonne2 {
    width: 255px;
    height: 345px; 
    background:#5c7885;
    padding:10px;
    text-align:center;
    font-size:12px;
    border-top-right-radius:30px;
    border-bottom-right-radius:30px;
    }

    .qeel_bloc {
    width: 235px;
    padding:10px;
    height: 150px;
    background:#d8d2cb;
    border-radius:30px;
    overflow:auto;
    }

    .qeel_groupe {
    position: relative;
    height: 60px;
    width: 60px;
    border-radius:100px;
    overflow: visible;
    margin:auto;
    }

    .qeel_groupe .infobulle {
    position: absolute;
    top: 0px;
    left: 50px;
    width: 150px;
    height: 100px;
    background:#d8d2cb;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
    padding:10px;
    border-radius:30px;
    }

    .qeel_groupe:hover .infobulle {
    opacity: 1;
    visibility: visible;
    z-index: 100;
    transition: 0.5s;
    }

    .ALice {
    font-size:12px;
    text-decoration:none;
    display:block;
    text-align:center;
    }

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


    Dernière édition par A-Lice le Lun 16 Fév 2015 - 11:52, édité 1 fois

    Emelyne
    Emelyne
    FémininAge : 43Messages : 77

    Lun 4 Aoû 2014 - 14:08

    merci
    XIII
    XIII
    MasculinAge : 27Messages : 19

    Mar 5 Aoû 2014 - 20:39

    Merci pour le partage !
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Mer 6 Aoû 2014 - 13:14

    Merci pour le partage  Very Happy 
    ColorTime'Less
    ColorTime'Less
    FémininAge : 27Messages : 106

    Mer 6 Aoû 2014 - 14:31

    Original j'aime ;D
    DanJack
    DanJack
    FémininAge : 30Messages : 155

    Mer 6 Aoû 2014 - 23:00

    Merci beaucoup !
    Allison01
    Allison01
    FémininAge : 40Messages : 225

    Mar 12 Aoû 2014 - 16:28

    sympas Very Happy merci
    24nono38
    24nono38
    FémininAge : 34Messages : 69

    Sam 16 Aoû 2014 - 0:15

    J'aime beaucoup la structure du qeel ^^



    Qeel en 3 colonnes 230763kratossign1
    kreou
    kreou
    FémininAge : 34Messages : 50

    Dim 24 Aoû 2014 - 17:13

    Merci à toi pour le partage :)
    Break-Down
    Break-Down
    FémininAge : 28Messages : 4

    Lun 25 Aoû 2014 - 22:09

    Merci Beaucoup ! Tu me sauves la vie ! *-*
    SEVAN
    SEVAN
    FémininAge : 32Messages : 46

    Dim 31 Aoû 2014 - 20:55

    merci
    Pastiche
    Pastiche
    FémininAge : 30Messages : 78

    Lun 1 Sep 2014 - 17:05

    Oh c'est joli, merci du partage ! ♥♥
    Jamy
    Jamy
    FémininAge : 32Messages : 41

    Lun 1 Sep 2014 - 18:56

    merci du partage ! :)
    Bzzzz
    Bzzzz
    FémininAge : 40Messages : 93

    Sam 13 Sep 2014 - 16:16

    Très jolie merci
    Miyoko
    Miyoko
    FémininAge : 32Messages : 213

    Ven 26 Sep 2014 - 23:25

    thx



    Qeel en 3 colonnes 641359838739
    Ouat
    Ouat
    FémininAge : 40Messages : 74

    Mar 30 Sep 2014 - 20:48

    Merci beaucoup pour ce travail fourni et mis à disposition :love:
    Kikton
    Kikton
    MasculinAge : 28Messages : 29

    Ven 10 Oct 2014 - 11:50

    Merci pour ce beau travail !
    Rynkka
    Rynkka
    FémininAge : 25Messages : 120

    Mer 15 Oct 2014 - 16:25

    Merci pour le partage! ♥



    Qeel en 3 colonnes 48861711
    ginl
    ginl
    FémininAge : 36Messages : 88

    Jeu 16 Oct 2014 - 10:00

    MEP bien sympa! ^^



    Qeel en 3 colonnes Mjsear10
    Qeel en 3 colonnes Galeri10
    Lilynufare
    Lilynufare
    FémininAge : 34Messages : 341

    Sam 18 Oct 2014 - 12:42

    merci du partage :)
    Nearween
    Nearween
    FémininAge : 26Messages : 213

    Jeu 23 Oct 2014 - 18:44

    merci pour le code



    Qeel en 3 colonnes Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Nonze
    Nonze
    MasculinAge : 31Messages : 85

    Dim 2 Nov 2014 - 19:04

    Merci
    Madras
    Madras
    FémininAge : 39Messages : 285

    Mer 5 Nov 2014 - 9:11

    Merci
    Kiki*
    Kiki*
    FémininAge : 28Messages : 32

    Lun 10 Nov 2014 - 21:36

    thanks
    Miss Tigri
    Miss Tigri
    FémininAge : 30Messages : 89

    Lun 17 Nov 2014 - 13:17

    Merci <3
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 15:10