Découvrir le conceptSans inscriptionMettez les créditsCommandes ouvertes
Le Deal du moment :
Nike : Jusqu’à 50% sur les articles de ...
Voir le deal

KoalaVolant
KoalaVolant
Lun 6 Juil 2020 - 10:39
Version nécessaire du forum : phpbb2

Ce QEEL a été construit avec l'aide de Miettes pour le Javascript qui permet de changer les groupes au clic.
Il utilise un root pour les couleurs mais si cela vous déplait vous pouvez remplacer main-color par #333 par exemple.

Si vous choisissez d'autres codes de ce thème, pour les couleurs, voici les étapes :
1. Retirer les :root{ leur contenu } de tous les CSS des codes de ce thème que vous choisirez
2. Rajouter cet unique :root qui est disponible sur le sujet "Concordance des couleurs"

Ce code fait partie du thème complet "Douceur minimaliste"




HTML



Remplacez le template "index_body" par

Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline pa-wrap" width="100%" border="0" cellspacing="1" cellpadding="0">
 <!-- BEGIN message_admin_titre -->
 <tr>
 <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
 </tr>
 <!-- END message_admin_titre -->
 <!-- BEGIN message_admin_txt -->
 <tr>
 <td class="row1" rowspan="3" align="center" valign="middle">
 <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
 </td>
 </tr>
 <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/> </td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
 <!-- END switch_delete_cookies -->
 </td>
 <td width="50%" align="right">
 <span class="gensmall">
 <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
 <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
 <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
 <!-- BEGIN switch_on_index -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
 <!-- END switch_on_index -->
 </span>
 </td>
 </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span> </td>
                        <td><input class="post" type="password" size="10" name="password"/>&nbsp;</td>
                        <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                    </tr>
                </table>
            </td>

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                    <!-- BEGIN fb_connect -->
                    <div class="fb-login-button"></div>
                    <!-- END fb_connect -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<div class="qeel-total">
  <div class="qeel-title">Qui traîne à CHARLOTTESVILLE ?</div>
  <div class="qeel-gauche">
    <div class="membre-mess">
      <span class="qeel-membre" id="memtot">{TOTAL_USERS} Membres</span>
      <span class="qeel-mess" id="messtot">{TOTAL_POSTS} Messages</span>
    </div>
    <div class="degr dern-in">Il vient d'arriver parmi nous</div>
    <div class="dern-in2" id="newus">{NEWEST_USER}</div>
    <div class="qeel-credits">Le contexte vient de Loukoum. Le design, les codes proviennent de KoalaVolant. Le JS du QEEL vient de Miettes</div>
  </div>
    <script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/Nos membres ont posté un total de/,"");</script>
<script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/messages/,"");</script>
<script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/message/,"");</script>
  <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/Nous avons/,"");</script>
<script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membre enregistré/,"");</script>
<script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membres enregistrés/,"");</script>
<script type="text/javascript">document.getElementById('newus').innerHTML=document.getElementById('newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
    <div class="qeel-milieu">
      <div class="wrap-groupes">
        <span class="groupe1"></span>
        <span class="groupe2"></span>
        <span class="groupe3"></span>
        <span class="groupe4"></span>
        <span class="groupe5"></span>

                          
      </div>
        <div id="descr_groupes">
          <div class="qgroupe1"><img src="https://nsa40.casimages.com/img/2020/06/28/200628100124142471.gif"><span><strong>Dead Inside</strong> - Vous êtes la racaille de Charlottesville. Autant dire que vous trempez dans les affaires qui ne sont pas nettes. Vous faites semblant d'être comme tout le monde, mais au fond, vous savez que vous êtes des p'tits vilains. Vous ne suivez pas les règles, vous faites même les votres. Personne n'ose se mettre dans votre chemain ; vous n'êtes pas fréquentable.
            </span></div>
            <div class="qgroupe2"><img src="https://nsa40.casimages.com/img/2020/06/28/200628102312890394.gif"><span><strong>Invincible</strong> - Vous êtes les petits travaillants de Charlottesville. Vous ne faites pas d'histoire, vous n'êtes pas les plus riches, ni les plus pauvres. Pour vous c'est métro, boulot, dodo. Vous n'êtes pas du genre à faire de vagues.
              </span></div>
              <div class="qgroupe3"><img src="https://nsa40.casimages.com/img/2020/06/28/200628104134228963.gif"><span><strong>Propaganda</strong> - Vous êtes de ceux qui pensent que l'argent achète tout. Vous n'hésitez pas à glisser une enveloppe brune pour avoir ce que vous voulez, ou pour convaincre les gens que vous avez une notoriété. Vous êtes les rois et les reines de Charlottesville vous êtes reconnus et reconnus pour vos frastes et vos manoirs  sans fin. Faites attention de ne pas tomber de votre tour d'ivoire. </span></div>
                
                <div class="qgroupe4"><img src="https://nsa40.casimages.com/img/2020/06/28/200628110522587349.gif"><span><strong>Stockholm Syndrome</strong> - Vos ancêtres sont le sang et la poussière de cette ville. Ils l'ont construit de leur main et vous êtes leurs fiers héritiers. Vous rêves parfois de partir, mais impossible pour vous de laisser votre famille et vos origine. Vous êtes attachés à Charlottesville, et lorsque vous la quittez, c'est pour mieux y revenir.
                  </span></div>
                  
 <div class="qgroupe5"><img src="https://nsa40.casimages.com/img/2020/06/28/200628100124142471.gif"><span><strong>Etudiants</strong> - Les étudiants sont tous ceux apprenant encore au sein de l’école de Daegu. Plusieurs cursus différents leur sont offerts. Le classique est pour ceux ayant commencé leurs études avant leurs vingt-cinq ans. Le tardif, pour ceux ayant commencé leurs études après leurs vingt-cinq ans. Et le second cursus s’adresse à ceux désirant apprendre une seconde spécialisation. Seuls les étudiants inscrits dans un second cursus sont autorisés à utiliser la magie en-dehors de l’école.
Tous ces étudiants ne vivent pas forcément au même endroit et ne suivent pas les mêmes cours, mais ils se croisent régulièrement dans les différents bâtiments de l’école.
</span></div>
      
      </div>
      </div>
      <div class="qeel-droite">
        <div class="enlign"><span id="memen">{LOGGED_IN_USER_LIST}</span></div>
        <script type="text/javascript">document.getElementById('memen').innerHTML=document.getElementById('memen').innerHTML.replace(/Utilisateurs enregistrés :/," ");</script>
        <div class="infos-ligne">{TOTAL_USERS_ONLINE}</div>
        <div class="dern-co"><table id="24h" class="qeel-dernier"><h2 class="degr">Ils étaient là il y a moins de 78 heures</h2><span class="gensmall">{L_CONNECTED_MEMBERS}</span></table></div>
                  <script type="text/javascript">document.getElementById('24h').innerHTML=document.getElementById('24h').innerHTML.replace(/Membres connectés au cours des 78 dernières heures :/," ");</script>
      </div>
    </div>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />

{AUTO_DST}

CSS



Code:
/* Couleurs */

:root{
  --main-color:#555;
  --snd-color:#fff;
  --third-color:#888;
  --four-color:#FCC5A0;
  --five-color:#B38C7E;
  --five-v-color:#FAC0B6;
  --six-color:#E2B790;
    --six-v-color:#DAC5CA;
  
  --font1: 'Source Sans Pro', sans-serif;
  --font2:'Playfair Display', serif;

  --groupe1:#4f5bff;
  --groupe2:#ff3d2f;
  --groupe3:#00a427;
  --groupe4:#bd8d00;
  --groupe5:#4f5bff;
  --groupe6:#ff3d2f;
  --groupe7:#00a427;
  --groupe8:#bd8d00;
}

.degr{ background: var(--five-color);
background: -webkit-gradient(left top, right top, color-stop(0%, var(--five-color)), color-stop(100%, var(--six-color)));
background: -webkit-linear-gradient(left, var(--five-color) 0%, var(--six-color) 100%);
background: linear-gradient(to right, var(--five-color) 0%, var(--six-color) 100%);
    position:relative; z-index:20;
}

.degr:before{ content:''; background:var(--third-color); position:absolute; z-index:-1; top:0; left:0; width:0%; height:100%; transition:600ms; }
.degr:hover:before{ width:100%; }

/* QEEL par Koala Volant */

.qeel-total{   width:800px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}

/* Titre du QEEL */
.qeel-title{ color:var(--five-color); text-align:center; width:100%; margin:20px 0px; font-size:25px; font-family:var(--font2); }

/* Gauche QEEL */
.qeel-gauche{ width:240px; }

/* Membre et Mess */
.membre-mess{ display:flex; justify-content:space-around; }
.membre-mess span{ display:block; padding:10px; font-size:11px; text-align:center; color:var(--main-color); letter-spacing:1px;
  font-family:var(--font1); text-transform:uppercase; width:90px; border:1px solid var(--four-color); }

/* Dernier inscrit */
.dern-in{ padding:5px; text-align:center; color:var(--snd-color); border:3px double var(--snd-color); margin:10px 0px; font-family:var(--font1); font-size:15px; }
.dern-in2{ border:1px solid var(--four-color); padding:5px; font-size:15px; font-weight:normal; font-family:var(--font1); text-align:center; text-transform:uppercase; }

/* Credit */

.qeel-credits{ font-size:12px; line-height:13px; font-family:var(--font1); color:var(--snd-color); background-color:var(--third-color); padding:5px; margin:10px 0px; }

/* Milieu QEEL */

.qeel-milieu{ width:220px; }
.wrap-groupes{ display:flex; justify-content:center; }

/* Petits groupes */

.wrap-groupes span{ display:block; height:30px; width:30px; margin:0px 3px; cursor:pointer; }
.groupe1{ background-color:var(--groupe1); }
.groupe2{ background-color:var(--groupe2); }
.groupe3{ background-color:var(--groupe3); }
.groupe4{ background-color:var(--groupe4); }
.groupe5{ background-color:var(--groupe5); }

/* Description Groupe */

.qgroupe1 strong{ color:var(--groupe1); }
.qgroupe2 strong{ color:var(--groupe2); }
.qgroupe3 strong{ color:var(--groupe3); }
.qgroupe4 strong{ color:var(--groupe4); }
.qgroupe5 strong{ color:var(--groupe5); }
#descr_groupes span strong{ text-transform:uppercase; font-family:var(--font1); }

#descr_groupes{ position:relative; height:170px;  }
#descr_groupes div{ display:none; justify-content:space-between; width:100%; position:absolute;  top:10px; left:0px; height:150px; font-size:11px; }
#descr_groupes img{ width:30%; height:170px; object-fit:cover; }
#descr_groupes span{ width:65%; display:block;     height: 170px;    overflow: auto; text-align:justify;}

#descr_groupes .actif{ display:flex; }

/* Droite QEEL */

.qeel-droite{ width: 320px; }

/* En ligne */

.enlign{ min-height:30px; max-height:30px; overflow:auto; padding:10px; border:1px solid var(--four-color); }
.enlign a{ font-family:var(--font1); font-size:14px; line-height:16px;  }

/* Statistiques */

.infos-ligne{ padding:10px; font-family:var(--font1); font-size:12px; background-color:var(--six-color); color:var(--snd-color);  margin:10px 0px; }

/* Derniers connectés */

.dern-co h2{ padding:5px; text-align:center; color:var(--snd-color); border:3px double var(--snd-color); margin:10px 0px; font-family:var(--font1); font-size:14px; font-weight:normal;}

.qeel-dernier{ width:100%; }
.qeel-dernier .gensmall{ display:block; padding:5px; border:1px solid var(--six-color); min-height:50px; max-height:50px; overflow:auto;  }
.qeel-dernier .gensmall a{ font-size:12px; line-height:13px; font-family:var(--font1); }
.qeel-dernier td.row1{ background:none !important; }

.degr, .ssfo a{ background: var(--five-color);
background: -webkit-gradient(left top, right top, color-stop(0%, var(--five-color)), color-stop(100%, var(--six-color)));
background: -webkit-linear-gradient(left, var(--five-color) 0%, var(--six-color) 100%);
background: linear-gradient(to right, var(--five-color) 0%, var(--six-color) 100%);
    position:relative; z-index:20;
}

.degr:beforen .ssfo a:before{ content:''; background:var(--third-color); position:absolute; z-index:-1; top:0; left:0; width:0%; height:100%; transition:600ms; }
.degr:hover:before .ssfo a:hover:before{ width:100%; }

Jquery



Cette partie est à ajouter dans Modules >Gestion des Pages javascript.
Il faut donc activer les pages javascript et mettre ça sur "toutes les pages"

Code:
;( function(){

  $(document).ready( function(){
    
  // par défaut
  $('.wrap-groupes .groupe1').addClass('dpb-bloc');
  $('#descr_groupes .qgroupe1').addClass('actif');
    
       $('body')
         .on('click', '.wrap-groupes [class^="groupe"]', function(){
              var $this = $(this),
              // on récupére le nom du groupe
              idGroupe = $this.attr('class');

              // On désactive tous les groupes
              $('.wrap-groupes [class^="groupe"]').removeClass('dpb-bloc');
              $('#descr_groupes [class^="qgroupe"]').removeClass('actif');

              // On active le bon groupe
              $('.wrap-groupes .'+ idGroupe +'').addClass('dpb-bloc');
              $('#descr_groupes .q'+ idGroupe +'').addClass('actif');
          });

  });

})($);
Revenir en haut

Nos amis proches

QEEL Parto512 Logo WyvArtem