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 à ne pas rater :
Manga Spy x Family Tome 13 édition Collector : où le précommander ?
14.50 €
Voir le deal

    Qeel en 3 colonnes

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

    Mer 30 Juil 2014 - 17:33

    Rappel du premier message :


    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

    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 31Messages : 64

    Lun 28 Nov 2016 - 3:00

    Super merci du partage.




    Qeel en 3 colonnes - Page 4 478753Chantal
    Hallibel
    Hallibel
    FémininAge : 31Messages : 82

    Ven 10 Fév 2017 - 8:07

    Merci tout plein.
    luxury67
    luxury67
    FémininAge : 31Messages : 20

    Lun 27 Mar 2017 - 11:34

    Merci beaucoup !
    Solid6Snake
    Solid6Snake
    MasculinAge : 41Messages : 146

    Lun 29 Mai 2017 - 20:09

    Sympathique merci.
    Ombeline30
    Ombeline30
    FémininAge : 39Messages : 130

    Mer 19 Juil 2017 - 11:02

    Merci ^^
    Miss Noemie
    Miss Noemie
    FémininAge : 31Messages : 26

    Mer 15 Nov 2017 - 17:40

    Merci beaucoup pour ce codage, je cherchais quelque chose dans ce style ^^
    Je vais essayer d'opérer quelques modifications moi-même, mais si je n'y arrive pas... direction les demandes de personnalisation !
    Merci beaucoup, je n'oublierais pas de créditer :3
    jelayde
    jelayde
    MasculinAge : 36Messages : 18

    Sam 18 Nov 2017 - 7:24

    Merci !
    Sam-sam
    Sam-sam
    MasculinAge : 31Messages : 40

    Dim 19 Nov 2017 - 10:54

    Merci
    lilyh
    lilyh
    FémininAge : 29Messages : 8

    Jeu 4 Jan 2018 - 14:52

    merci
    Amasis
    Amasis
    FémininAge : 51Messages : 307

    Dim 8 Avr 2018 - 15:30

    C'est ce qu'il me fallait! Merci beaucoup!
    Tatout
    Tatout
    FémininAge : 28Messages : 60

    Sam 12 Aoû 2023 - 17:58

    Merci beaucoup !! Je l'ai un peu modifié sur mon forum mais ca m'a fait gagner beaucoup de temps ! ham1
    Contenu sponsorisé


      La date/heure actuelle est Jeu 25 Juil 2024 - 8:56