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 :
Jeux, jouets et Lego : le deuxième à ...
Voir le deal
-20%
Le deal à ne pas rater :
-20% Récupérateur à eau mural 300 litres (Anthracite)
79 € 99 €
Voir le deal

    [QEEL] QEEL vierge et sans tableaux

    Pito
    Pito
    MasculinAge : 27Messages : 127

    Lun 11 Jan 2016 - 22:09

    Ma demande



    Ayy! j'ai un petit problème avec le QEEL : je ne sais pas comment faire pour le personnaliser. Ou plutôt, j'ai vraiment du mal à comprendre comment fonctionnent les tableaux, alors j'aurais aimé pouvoir faire un QEEL de la même façon que je ferais une page HTML externe (pouvoir placer les éléments où bon me semblent à l'aide de float ou position). Malheureusement le code que j'ai vu sur le tutoriel ici ne propose qu'avec un tableau, et c'est quelque chose de pré-fait donc difficilement modifiable pour un nooby comme moi. En clair voila... ce serait pour avoir un code de QEEL simple où je pourrais ajouter moi-même les variables et les éléments à personnaliser par la suite. Toutes mes tentatives à supprimer les tables donnent des trucs bizarres, donc voila.... merci d'avance!

    Schéma(s) et Eléments
    Je m'occuperais de la personnalisation et de tout ce qu'il y a avec, j'ai juste besoin d'un QEEL vierge qui puisse rester dans son contenteur (et dont les éléments peuvent être déplacés).
    Version de votre forum : PHBB2


    Ressources
    Je vous donne la template de base d'un QEEL de base :
    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 -->


    Autres précisions ?
    Ce serait cool si vous pouviez m'expliquer comment vous avez fait, après l'avoir fait, histoire que je puisse le reproduire tout seul par la suite! merci encore!


    Dernière édition par Pito le Jeu 14 Jan 2016 - 10:49, édité 1 fois
    Aki'
    Aki'
    FémininAge : 27Messages : 258

    Mar 12 Jan 2016 - 10:03

    Salut !

    Ce n'est pas vraiment une commande il me semble, enfin à confirmer par quelqu'un du staff. Pour arriver à faire un QEEL, il faut comprendre, comme pour toute template, à quoi sert chaque variable  de la partie que tu souhaites modifier. Une fois que tu as la liste à quoi cela correspond, tu supprimes tout ce que tu as entre
    Code:
    <!-- BEGIN disable_viewonline --><!-- END disable_viewonline -->

    Ensuite tu peux coder la structure que tu veux, soit un tableau, soit avec des div et les positionnements. Une fois que tu as la structure vierge, tu rajoutes les variables au bon endroit et tu règles les points qui  ne te vont pas (certaines variables ont besoin d'être dans des tableaux, d'autres vont avoir une écriture énorme....).

    Je ne sais pas si mon explication t'a aidé et si c'était ça que tu attendais.

    Edit : Je me disais bien que j'avais vu ici un tutoriel sur le QEEL. https://www.never-utopia.com/t37668-comprendre-son-qeel-et-le-personnaliser
    Pito
    Pito
    MasculinAge : 27Messages : 127

    Mar 12 Jan 2016 - 11:40

    Merci pour la réponse rapide!


    mais disons que j'ai déjà essayé ça (ou du moins je crois).. le soucis c'est que la plupart de mes variables refusent de bouger quand je mets un margin ou un top/left etc; peu importe que je les mette en float, en position relative ou absolute. je sais pas vraiment si c'est juste un bug de ma part ou si j'ai mal fait quelque chose mais voila les codes utilisés et le résultat que ça donne :

    HTML:
    Code:
    <!-- BEGIN disable_viewonline -->
    <div class="qeel1"><div class="judge1"></div>
     <span class="gensmall">
       <div class="retard"> {LOGGED_IN_USER_LIST}</div>
       <div class="retard2">{L_CONNECTED_MEMBERS}</div>
     <div class="stats">
       {TOTAL_USERS_ONLINE}<br />
     {NEWEST_USER} <br />
     {TOTAL_POSTS}<br />
       {TOTAL_USERS}<br /></div></span>
     <!-- BEGIN switch_chatbox_activate -->
     <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>
     <!-- END switch_chatbox_activate -->
    <!-- END disable_viewonline -->

    CSS
    Code:
    /*--------------------------------------------------------------------------------------------------------------- QUI EST EN LIGNE */

    .qeel1 {
          background-image: url(http://www.pixenli.com/images/1452/1452460064088657000.png);
        height: 722px;
        width: 1006px;
        margin-left: 24px;
        margin-top: 13px;
       color: black;
    }

    .qeel1 td.row1 {
      background: none;
    }

    .judge1 {
        background-image: url(http://www.pixenli.com/images/1452/1452519189038971700.jpg);
        float: left;
        height: 271px;
        margin-left: 16px;
        margin-top: 11px;
        width: 356px;
    }

    .partenaires {
        float: left;
        margin-left: 69px;
        margin-top: 55px;
    }

    .retard {
        float: left;
        height: 171px;
        margin-left: -17px;
        margin-top: 77px;
        overflow: auto;
        text-align: justify;
        width: 952px;
    }

    a:hover{
    text-decoration: none !important;
    }
     
    a {
    text-decoration: none !important;
    }
     
    a:link {
    text-decoration: none;
    }
     
    a:visited {
    text-decoration: none;
    }

    /*.retardgroupes {
      position: absolute;
      margin-top: 38px;
      margin-left: 230px;
      width: 371px;
      height: 144px;
      background-image: url(http://www.pixenli.com/images/1422/1422443912008178900.jpg);
    }*/

    .retard2
    {
    float: left;
        font-size: 10px;
        height: 30px;
        margin-left: 0;
        margin-top: -250px;
        padding: 5px;
        text-align: center;
        width: 922px;
    }

    .stats {
      position: relative;
      margin-right: 20px;
      float:left;
      margin-top: 38px;
      font-size: 10px;
      color: black;
      font-family: Oswald;
      width: 980px;
      height: 300px;
    }

    .stats a.gensmall{
      font-size: 8px;
      color:black
    }

    et ... voila ce que ça donne : http://prntscr.com/9p3v6o

    certains éléments peuvent être déplacés (comme les utilisateurs enregistrés); mais les connectés des X dernières heures a carrément disparu (il peut aussi être déplacé, apparemment, mais il n'apparaît pas, même si je joue avec les Z-index).... EDIT : en fait, il est là, en bas à gauche, mais il veut pas bouger et il est tout écrasé xD... donc voila. Si vous pouviez me dire ce que j'ai loupé dans la mixture pour que ça marche, ça serait cool. merci d'avance!
    Aki'
    Aki'
    FémininAge : 27Messages : 258

    Mar 12 Jan 2016 - 19:18

    Salut !

    Personnellement, je ne peux pas t'aider comme ça sans savoir où les choses vont. Qui plus est, je ne suis absolument pas fan des float je préfère le positionnement absolute et relatif que je trouve plus simple à utiliser et qui permet de faire quelque chose de propre.

    Je te conseille de passer une vraie commande et de demander des explications après pour comprendre.
    Pito
    Pito
    MasculinAge : 27Messages : 127

    Jeu 14 Jan 2016 - 10:48

    je vois... bon bah je vais faire sans pour l'instant. Merci quand même!
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Ven 15 Jan 2016 - 2:33

    Salut!

    Du coup, est-ce que cette commande est terminée? Parce que si tu veux, on peut aussi la déplacer dans "problème avec mon code" pour que des personnes viennent t'aider à comprendre ce qui cloche. Entre autre, certaines variables du qeel sont faites de façon bizarre et doivent absolument être entourées de tableau (sans les colonnes ou les rangées). Par exemple, la variable pour les connectés du 48h en fait partie.

    Du coup, il faudrait remplacer cela :
    Code:
    <div class="retard2">{L_CONNECTED_MEMBERS}</div>

    Par ceci :
    Code:
    <div class="retard2"><table>{L_CONNECTED_MEMBERS}</table></div>

    Et il y a d'autres petits détails que quelqu'un pourrait sûrement t'aider avec Wink



    Contenu sponsorisé


      La date/heure actuelle est Lun 29 Avr 2024 - 3:11