Lun 24 Avr - 14:39

Coucou ! Etant donné que tu m'as donné un coup de main avec mes catégories j'ai eu envie de te passer commande pour mon petit QEEL, seul élément qui manque pour la réforme complète de mon forum  

Forum : Le forum de test ou il y a déjà pas mal de choses & Le forum actuel ou c'est tout pas beau moche :(
Version : PHPBB2
Taille du forum : ... Aucune idée? x_x' Je ne sais pas ou on trouve ça è_é
Elément(s) demandé(s) : Un QEEL s'il te plaît !
Maquette :

Clic!:

Description (peut remplacer la maquette ou la compléter) : Comme indiqué, un effet d'opacité sur l'image au milieu et si possible que les couleurs de fond des "Groupes" s'éclaircissent quand on passe la souris dessus. S'il y aurait moyen de personnaliser le texte des derniers connectés/membres...
Du style "Aventuriers ayant parcouru ces terres dans les dernières 24h" et "40 Aventuriers" plutôt que "Membres" ce serait gééééniaaal
Et ou cas ou, si on rajoute des races, ce serait possible que ça ne déforme pas absolument tout? Là dans le schéma on en compte 9 mais on en prépare deux nouvelles donc peut-être en faire 11 de base :o
Couleurs (si pas de maquette graphique) : Du gris, quelque chose de neutre.
Polices à utiliser : Cinzel
Images à utiliser : Aucune en particulier, on personnalisera nous \o
Acceptez-vous que le code finisse en LS ? Ca m'arrangerait que non mais je vais y réfléchir 8D
Mode de rendu : via le sujet !
Autre chose à ajouter ? J'ai hâte, je suis sûre que tu feras du merveilleux travail

Lun 24 Avr - 14:51

Pouet pouet

J'adore vraiment ces smileys XD
Ca me semble jouable, j'attaque ce soir :3 Ne te tracasse pas, si tu ne veux pas que le code finisse en LS je comprendrais ! Après certains me demandent d'attendre la MAJ suivante, c'est vraiment comme tu le sens !

Ce que je peux te proposer pour les groupes, c'est de mettre une petite illustration ou un gif sous les 9 (qui prendrait la taille de 11 groupes en attendant l'ajout des deux manquantes) pour que ça reste harmonieux. Ca t'irait ? Au pire si je tente il y a toujours moyen de modifier.

A bientôt

Lun 24 Avr - 14:54

Hm j'ai du mal à saisir ce que tu me proposes mais je te fais confiance, au pire voilà tu tentes et on verra ce que ça donne, vu ce dont tu es capable j'ai pas de soucis à me faire

A bientôt

Lun 24 Avr - 21:50

Voila mon rendu : www.


CSS

Code:

/**************************** QUI EST EN LIGNE ? ****************************/

#chocolat {
  background: #808080;
  width: 100%;
  margin: auto;
  font-family: verdana;
}

.colonne_gauche_qeel, .colonne_milieu_qeel, .colonne_droite_qeel {
  float: left;
  margin: auto;
  width: 30%;
  margin: 2% 1.5%;
  display: block;
}

.colonne_gauche_qeel {
  margin-left: 7%;
}

.colonne_milieu_qeel {
  float: left;
  width: 30%;
}

.colonne_droite_qeel {
  float: left;
  margin: auto;
  text-align: center;
  width: 25%;
}

.bloc_qeel {
  background: #eeedf2;
  padding: 5%;
  margin: 2%;
  width: 95%;
  font-size: 11px;
  color: #808080;
}

.trans, .gensmall {
  background: none;
  font-size: 11px !important;
}

.paonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;    width: 50%;
  background: #fff;
  padding: 2%;
  text-align: center;
  margin: 2% 0;
  font-size: 11px;
}

.paonglet_0 {
  width: 50%;
  background: #eeedf2;
  padding: 2%;
  text-align: center;
  margin: 2% 0;
  font-size: 11px;
}

.contenu_paonglet {
  width: 269px;
  height: 225px;
  font-size: 11px;
  z-index: 1;
  position: relative;
  margin-left: 5px;
  margin-top: 0%;
  display: none;
  background-image: url('http://img4.hostingpics.net/pics/460510img2.jpg');
}

#img_qeel {
  position: relative;
  margin-left: -5px;
}

/**************************** FIN QUI EST EN LIGNE ? ****************************/

Dans le template Index_body, remplacer :

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} :&nbsp;{GROUP_LEGEND}</span></td>
   </tr>
   <!-- BEGIN switch_chatbox_activate -->

Par :

Code:

<!-- BEGIN disable_viewonline -->

<div id="chocolat">
    <div class="colonne_gauche_qeel">
             <div class="bloc_qeel" style="height: 150px; overflow: auto;">
                   <span id="celine">{TOTAL_USERS_ONLINE}</span>
                   <script type="text/javascript">document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"").replace(/utilisateur(s?) en ligne/,"braves sont sur nos terres").replace(/::/,":").replace(/Enregistré(s?)/,"Aventuriers").replace(/Invisible(s?) et/,"Froussards & ").replace(/Invité(s?)/,"Intrigués."); </script>
                   <br /><br />
                   <span id="alpha">{LOGGED_IN_USER_LIST}</span>
                   <script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés/,"Aventuriers en ligne");</script>
               </div>
            <div class="bloc_qeel" style="height: 150px; overflow: auto;">
                   <table id="trans">{L_CONNECTED_MEMBERS}</table>
              <script type="text/javascript">jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des * dernières heures : ','Aventuriers ayant parcouru ces terres dans les dernières * heures :'));</script>
        </div>
            <div class="bloc_qeel">
                   <span id="yosh">{NEWEST_USER}.</span>
                   <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier brave à nous avoir rejoint est");</script>
          </div>
    </div>
    <div class="colonne_milieu_qeel">
            <div class="bloc_qeel" style="height: 150px; overflow: auto;">
                         <span id="matt">{TOTAL_USERS}</span>
                       <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"").replace(/membre enregistré/,"Aventuriers");</script>
                       <span id="bert">{TOTAL_POSTS}</span>
                   <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"ont envoyé un total de").replace(/messages/,"corbeaux.");</script>
                     <br /><br />
                     <span id="connectes">{RECORD_USERS}.</span>
                   <script type="text/javascript">document.getElementById('connectes').innerHTML=document.getElementById('connectes').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Le record d'aventuriers en exploration est de");</script><br /><br />
                     <table class="trans">{L_WHOSBIRTHDAY_TODAY}</table>
            </div>
     
      <div class="contenu_paonglets">
        <div class="contenu_paonglet" id="contenu_paonglet_defaut" style="display: block;">
      <img src="http://img4.hostingpics.net/pics/748200img.jpg" />
   </div>
       
   <div class="contenu_paonglet" id="contenu_paonglet_un" style="padding: 3%;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue metus, porta luctus diam non, aliquam blandit odio. Vivamus ac massa vitae neque vulputate pretium nec vel dui. Aliquam at turpis quis ex pellentesque semper. In egestas vulputate volutpat.
   </div>

        <div class="contenu_paonglet" id="contenu_paonglet_deux" style="padding: 3%;">
      Fusce sit amet augue vel libero bibendum vehicula a eget nibh. Pellentesque bibendum nisi ipsum, consectetur dignissim quam consequat sit amet. Curabitur volutpat dolor eget enim condimentum porta. Donec malesuada odio ac ex dignissim ullamcorper.
   </div>

     <div class="contenu_paonglet" id="contenu_paonglet_trois" style="padding: 3%;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue metus, porta luctus diam non, aliquam blandit odio. Vivamus ac massa vitae neque vulputate pretium nec vel dui. Aliquam at turpis quis ex pellentesque semper. In egestas vulputate volutpat.
   </div>

       <div class="contenu_paonglet" id="contenu_paonglet_quatre" style="padding: 3%;">
      Fusce sit amet augue vel libero bibendum vehicula a eget nibh. Pellentesque bibendum nisi ipsum, consectetur dignissim quam consequat sit amet. Curabitur volutpat dolor eget enim condimentum porta. Donec malesuada odio ac ex dignissim ullamcorper.
   </div>
 
     <div class="contenu_paonglet" id="contenu_paonglet_cinq" style="padding: 3%;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue metus, porta luctus diam non, aliquam blandit odio. Vivamus ac massa vitae neque vulputate pretium nec vel dui. Aliquam at turpis quis ex pellentesque semper. In egestas vulputate volutpat.
   </div>
 
    <div class="contenu_paonglet" id="contenu_paonglet_six" style="padding: 3%;">
      Fusce sit amet augue vel libero bibendum vehicula a eget nibh. Pellentesque bibendum nisi ipsum, consectetur dignissim quam consequat sit amet. Curabitur volutpat dolor eget enim condimentum porta. Donec malesuada odio ac ex dignissim ullamcorper.
   </div>
 
     <div class="contenu_paonglet" id="contenu_paonglet_sept" style="padding: 3%;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue metus, porta luctus diam non, aliquam blandit odio. Vivamus ac massa vitae neque vulputate pretium nec vel dui. Aliquam at turpis quis ex pellentesque semper. In egestas vulputate volutpat.
   </div>
       
        <div class="contenu_paonglet" id="contenu_paonglet_huit" style="padding: 3%;">
      Fusce sit amet augue vel libero bibendum vehicula a eget nibh. Pellentesque bibendum nisi ipsum, consectetur dignissim quam consequat sit amet. Curabitur volutpat dolor eget enim condimentum porta. Donec malesuada odio ac ex dignissim ullamcorper.
   </div>
 
     <div class="contenu_paonglet" id="contenu_paonglet_neuf" style="padding: 3%;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin augue metus, porta luctus diam non, aliquam blandit odio. Vivamus ac massa vitae neque vulputate pretium nec vel dui. Aliquam at turpis quis ex pellentesque semper. In egestas vulputate volutpat.
   </div>
</div>
     
        <script type="text/javascript">
            //<!--
                    var anc_paonglet = 'defaut';
                    change_paonglet(anc_paonglet);
            //-->
            </script>
    </div>
    <div class="colonne_droite_qeel">
           
      <script type="text/javascript">
            //<!--
                    function change_paonglet(name)
                    {
                            document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                            document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                            document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                            document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                            anc_paonglet = name;
                    }
            //-->
            </script><div class="paonglets">
                <span class="paonglet_0 paonglet" id="paonglet_defaut" onmouseover="javascript:change_paonglet('defaut');" style="background: none; color: #cc9966 !important;"></span><br />
            <br /><br /><br />
            <span class="paonglet_0 paonglet" id="paonglet_un" onmouseover="javascript:change_paonglet('un');" style="color: #cc9966 !important;">Groupe 1</span>
                <span class="paonglet_0 paonglet" id="paonglet_deux" onmouseover="javascript:change_paonglet('deux');" style="color: #5e518b !important;">Groupe 2</span>
                <span class="paonglet_0 paonglet" id="paonglet_trois" onmouseover="javascript:change_paonglet('trois');" style="color: #3ea472 !important;">Groupe 3</span>
      <span class="paonglet_0 paonglet" id="paonglet_quatre" onmouseover="javascript:change_paonglet('quatre');" style="color: #82899d !important;">Groupe 4</span>
      <span class="paonglet_0 paonglet" id="paonglet_cinq" onmouseover="javascript:change_paonglet('cinq');" style="color: #99110c !important;">Groupe 5</span>
      <span class="paonglet_0 paonglet" id="paonglet_six" onmouseover="javascript:change_paonglet('six');" style="color: #3997af !important;">Groupe 6</span>
      <span class="paonglet_0 paonglet" id="paonglet_sept" onmouseover="javascript:change_paonglet('sept');" style="color: #fc6f93 !important;">Groupe 7</span>
                <span class="paonglet_0 paonglet" id="paonglet_huit" onmouseover="javascript:change_paonglet('huit');" style="color: #3997af !important;">Groupe 8</span>
      <span class="paonglet_0 paonglet" id="paonglet_neuf" onmouseover="javascript:change_paonglet('neuf');" style="color: #fc6f93 !important;">Groupe 9</span>
            </div></div>

  <div style="clear: both;"></div>
</div>


<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN switch_chatbox_activate -->

Je verrais demain si tu rencontres des difficultés ^^

Pour l'image de fond des groupes opaques, il faudra par contre passer par photoshop, mettre un calque noir par-dessus et mettre l'opacité vers 40% puis mettre le lien de l'image dans le CSS dans ".contenu_paonglet", j'ai pas trouvé d'autres solutions désolée :$

Mar 25 Avr - 12:15

Je te l'ai dit par MP mais c'est juste parfait, merci encore, et quelle rapidité

Mar 25 Avr - 12:38

Avec plaisir :)