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 :
Trottinette électrique OCEAN DRIVE A9 avec clignotants
299.99 € 599.99 €
Voir le deal

    (Onyx) QEEL à onglets

    The One Pandemonium
    The One Pandemonium
    FémininAge : 30Messages : 97

    Mer 19 Nov 2014 - 1:13

    Ma demande



    Bonsoir! Je me suis remise à la création de forum. Ceci est la toute première commande que je fais, j'espère l'avoir bien préparée et je rêve de quelqu'un qui puisse m'aider... je ne suis pas spécialement un génie du codage (vive le côté droit du cerveau hein) et les numéros etc c'est franchement pas ma tasse de thé... bref... en gros, je remercie de toute mon âme aux codeurs qui se jetteront ici!

    Donc oui, je crois que ma commande concerne surtout le template du QEEL, à moins que le CSS aide aussi. Ma foi, c'est à vous de voire XD scratch


    Schéma(s) et Eléments
    Schémas : J'ai fais l'image en expliquant mon idée, en gros... j'espère que c'est assez clair! :c
    Spoiler:

    Tailles des éléments : 340x230 puis 773x171 (si vous voulez arrondir les dernières dimensions ça me va ^^)
    Puis voici le fond :
    Spoiler:
    Comme je voulais avoir les petites images de groupes cliquables j'ai songé à vous donner direct les petites images concernées (Asturiens, Léronis... etc)
    Spoiler:

    Effets voulus : Je veux juste qu'en cliquant sur les groupes, une description aparaisse en dessous. La description du premier groupe (Asturiens) serait affichée donc par standard, en image! (je m'excuse je n'ai pas encore développé d'images pour le dernier cadre mais je tâcherai moi-même de les coller après le tout!)
    Version de votre forum : PHPBB3.


    Ressources
    Je pense que tout a été précisé!

    Autres précisions ?
    Autre que les onglets, je voulais juste qu'on place toute l'info des membres sur un DIV sur le premier carré en haut, je personaliserais le texte après coup! ^^

    Merci d'avance pour ceux qui tenteront !



    Dernière édition par The One Pandemonium le Mer 19 Nov 2014 - 22:33, édité 1 fois



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) QEEL à onglets 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 19 Nov 2014 - 2:54

    Bouh!

    J'ai un coup de coeur pour ton qeel, alors je le ferai dans la soirée ^^

    Juste un petit quelque chose... Dans ton carré en haut, tu veux mettre quoi exactement? Parce qu'il y a beaucoup d'informations qui peuvent y rentrer :

    - Nombre de messages
    - Nombre de membres inscrits
    - Record du nombre d'utilisateurs
    - Nombre de personnes présents sur le forum
    - Membres connectés sur le forum
    - Membres connectés au cours des 24/48/72 dernières heures
    - Dernier membre inscrit
    - Membres ayant leur anniversaire aujourd'hui
    - Membres ayant leur anniversaire au cours des 7 prochains jours
    - Membres connectés sur la CB

    Donc, voilà, à toi de me dire ce que tu veux mettre ou ne pas mettre Wink


    Edit:
    Eh bien voilà mon premier essai http://forum-test-onyx5.forum-canada.com/
    D'ailleurs, je ne t'ai pas demandé la police à utiliser dans le carré en haut, donc c'est laquelle?



    The One Pandemonium
    The One Pandemonium
    FémininAge : 30Messages : 97

    Mer 19 Nov 2014 - 8:20

    HAAAAN J'ai failli tomber de mon lit en voyant que tu étais passée! Merci beaucoup pour ton aide précieuse! <333
    J'adore le petit effet subtil de la transparence quand on passe le curseur sur les groupes *__*

    Quand au texte, Arial 11px je crois que ça fera l'affaire! Quant aux infos je verrai bien juste celles-ci:
    - Nombre de messages
    - Nombre de membres inscrits
    - Record du nombre d'utilisateurs
    - Nombre de personnes présents sur le forum
    - Membres connectés sur le forum
    - Membres connectés au cours des 24/48/72 dernières heures
    - Dernier membre inscrit



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) QEEL à onglets 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 19 Nov 2014 - 9:06

    Merci ^^

    Bon, tout devrait y être http://forum-test-onyx5.forum-canada.com/

    Commentaires/critiques/demandes?
    (ça fait pas un peu petit 11px?)

    PS: Et je m'en vais me coucher, alors à demain matin ^^



    The One Pandemonium
    The One Pandemonium
    FémininAge : 30Messages : 97

    Mer 19 Nov 2014 - 9:13

    Je me jette à tes pieds là. Franchement, un grand merci pour ton aide si précieuse, c'est exactement ce que je voulais!
    La taille j'allais la garder (peut-être mettrais-je un peu plus d'espace entre les lettres?), pac'que je vais essayer de personnaliser le texte des statistiques pour que ça fasse plus sympathique :) Petite question: peux-tu juste mettre les numéros des statistiques (le chiffre du nombre de messages, le chiffre du nombre de membres, membres online, invités etc) en gras? Désolé je ne l'ai pas précisé *o*



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) QEEL à onglets 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 19 Nov 2014 - 20:50

    Voilà, un petit espace entre les lettres. Pour les chiffres, j'ai mis du gras, mais on ne voyait pas la différence, alors je l'ai aussi mis en italique. Bref : http://forum-test-onyx5.forum-canada.com/



    The One Pandemonium
    The One Pandemonium
    FémininAge : 30Messages : 97

    Mer 19 Nov 2014 - 20:54

    Oh grand merci! C'est parfait! <3



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) QEEL à onglets 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 19 Nov 2014 - 21:18

    Si tout est bon, je te donne les codes ^^

    CSS:
    Code:
    /************************************************************ DÉBUT QEEL ************************************************************/

    /*Fond du qeel*/
    #qeel {
      position: relative;
      width: 797px;
      height: 681px;
      margin: auto;
      background-image: url('http://image.noelshack.com/fichiers/2014/47/1416355134-bg-sans-les-groupes.png');
    }

    /*Carré des informations sur les membres*/
    #qeel_info_members {
      position: absolute;
      top: 28px;
      left: 37px;
      width: 340px;
      height: 230px;
      color: #c9c7be;
      font-size: 11px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: left;
    }

    /*Mise en forme des listes des membres connectés*/
    #userlists {
      margin-top: 5px;
      height: 150px;
      overflow: auto;
    }
    #totalconn {
      margin-top: 5px;
    }
    #totalconn .row1{
      background: transparent;
      vertical-align: top;
    }
    #totalconn .gensmall {
      color: #c9c7be;
      font-size: 11px;
      font-family: arial;
      letter-spacing: 1px;
      text-align: left;
    }


    /*Section des groupes*/
    #qeel_bottom {
      position: absolute;
      bottom: 30px;
      left: 12px;
      width: 773px;
      height: 254px;
      text-align: center; 
    }

    /*Nom des groupes*/
    .qeelonglet {
      opacity: 0.6;
    }
    /*Groupe au survol*/
    .qeelonglet_0:hover {
      cursor: pointer;
      opacity: 0.9;
    }
    /*Groupe actif*/
    .qeelonglet_1 {
      opacity: 1;
    }
    /*Pour aligner l'onglet Deserteurs*/
    #qeelonglet_Deserteurs {
      position: relative;
      top: 5px;
    }

    /*Images de description des groupes*/
    .contenu_qeelonglet {
      width: 773px;
      height: 171px;
      margin-top: 7px;
      display: none;
    }

    /************************************************************ FIN QEEL ************************************************************/

    Template Index_box, à mettre entre le "BEGIN disable_viewonline" et le "END disable_viewonline", inclusivement :
    Code:
    <!-- BEGIN disable_viewonline -->
    <div id="qeel">
     
      <div id="qeel_info_members">
        <span id="totaluser">{TOTAL_USERS}</span>
        <span id="totalpost">{TOTAL_POSTS}</span> et
        <span id="newuser">{NEWEST_USER}</span>.
        <span id="recorduser">{RECORD_USERS}</span>.
        <span id="totalonline">{TOTAL_USERS_ONLINE}</span>.<br />
        <div id="userlists">
          <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
          <div  id="totalconn"><table cellspacing="0" cellpadding="0">{L_CONNECTED_MEMBERS}</table></div>
        </div>
       
        <script type="text/javascript">
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Nos<b><i>");
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membre enregistré/,"</i></b>membre");
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés/,"</i></b>membres");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/,"qui ont posté un total de<b><i>");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/message/,"</i></b>message.");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"</i></b>messages.");
          document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"notre dernière recrue est");
          document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Membres connectés");
          document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Notre record d'utilisateurs en ligne est de<b><i>");
          document.getElementById('recorduser').innerHTML=document.getElementById('recorduser').innerHTML.replace(/le/,"</i></b>le");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout/,"Présentement, il y a<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur en ligne ::/,"</i></b>utilisateur en ligne :<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne ::/,"</i></b>utilisateurs en ligne :<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"</i></b>membre<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"</i></b>membres<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"</i></b>invisible<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"</i></b>invisibles<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité /,"</i></b>passant<b><i>");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités /,"</i></b>passants");
        </script>
      </div>
     
      <div id="qeel_bottom">
       
        <script type="text/javascript">
            //<!--
                    function change_qeelonglet(name)
                    {
                            document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                            document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                            document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                            document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                            anc_qeelonglet = name;
                    }
            //-->
        </script>
       
        <img src="http://image.noelshack.com/fichiers/2014/47/1416355133-asturiens.png" class="qeelonglet_1 qeelonglet" id="qeelonglet_Asturiens" onclick="javascript:change_qeelonglet('Asturiens');" />
        <img src="http://image.noelshack.com/fichiers/2014/47/1416355133-leronis.png" class="qeelonglet_0 qeelonglet" id="qeelonglet_Leronis" onclick="javascript:change_qeelonglet('Leronis');" />
        <img src="http://image.noelshack.com/fichiers/2014/47/1416355134-les-deserteurs.png" class="qeelonglet_0 qeelonglet" id="qeelonglet_Deserteurs" onclick="javascript:change_qeelonglet('Deserteurs');" />
        <img src="http://image.noelshack.com/fichiers/2014/47/1416355134-les-divins.png" class="qeelonglet_0 qeelonglet" id="qeelonglet_Divins" onclick="javascript:change_qeelonglet('Divins');" />
       
        <img src="http://image.noelshack.com/fichiers/2014/47/1416253868-ladycrowcoupe.png" class="contenu_qeelonglet" id="contenu_qeelonglet_Asturiens" />
        <img src="http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg" class="contenu_qeelonglet" id="contenu_qeelonglet_Leronis" />
        <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" class="contenu_qeelonglet" id="contenu_qeelonglet_Deserteurs" />
        <img src="http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg" class="contenu_qeelonglet" id="contenu_qeelonglet_Divins" />
       
        <script type="text/javascript">
            //<!--
                    var anc_qeelonglet = 'Asturiens';
                    change_qeelonglet(anc_qeelonglet);
            //-->
        </script>
       
      </div>
    </div>
    <!-- END disable_viewonline -->


    Et pour ce qui est de le personnaliser...

    Les images des descriptions sont les quatres dernières images à la fin, juste avant un javascript :
    Code:
    <img src="http://image.noelshack.com/fichiers/2014/47/1416253868-ladycrowcoupe.png" class="contenu_qeelonglet" id="contenu_qeelonglet_Asturiens" />
        <img src="http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg" class="contenu_qeelonglet" id="contenu_qeelonglet_Leronis" />
        <img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" class="contenu_qeelonglet" id="contenu_qeelonglet_Deserteurs" />
        <img src="http://www.wired.com/images_blogs/rawfile/2013/11/offset_WaterHouseMarineImages_62652-2-660x440.jpg" class="contenu_qeelonglet" id="contenu_qeelonglet_Divins" />


    Ensuite, pour changer le texte des statistiques, je l'ai déjà changé afin que tu ais déjà la base de fait. Par exemple, disons que tu vois :
    Code:
    document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"Nos<b><i>");

    Cela veut dire que le "Nous avons" de la phrase "Nous avons X membres enregistrés" est remplacé par "Nos". À toi de changer tout cela par les phrases que tu veux tout en faisant attention de garder les balises "gras" et "italique" où elles le sont déjà \o/

    Voili voilou ~



    The One Pandemonium
    The One Pandemonium
    FémininAge : 30Messages : 97

    Mer 19 Nov 2014 - 21:39

    Grand merci à toi je vais voir ça!
    Là en installant ça m'a mis les noms des groupes d'une manière un peu bizarre... est-ce le CSS ou j'ai mal collé? :O
    Le tit lien: http://lazuli.forumactif.org/

    EDIT: J'avais d'autres codes qui touchaient encore aux autres QEEL que j'avais bêtement essayé de faire! Encore merci à toi pour l'efficacité et la rapidité! :hug:



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    (Onyx) QEEL à onglets 1416253868-ladycrowcoupe
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 19 Nov 2014 - 21:49

    De rien, j'ai bien aimé le faire, ton schéma était super beau d'ailleurs ^^

    N'oublies pas de mettre l'icône "terminé" pour que le sujet soit archivé Wink



    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 6:52