QEEL Meitha

Effets au survol :


QEEL conçu pour l'index complet Meitha.
Le carré vide à côté des partenaires est un emplacement pour une cbox.

phpBB2

Pour activer l'affichage des derniers connectés, panneau d'administration > Affichage > Page d'accueil > Généralités. Dans le bloc "Général", cochez "oui" à "Afficher la liste des membres connectés au cours des 24* dernières heures :".

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link href="https://fonts.googleapis.com/css?family=Roboto|Cousine|Montserrat:900i" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

Dans votre panneau d'administration, Affichage > Templates > Général > index_body, remplacez l'intégralité du template par le suivant :

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table width="100%" border="0" cellspacing="0" 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="" 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>
                  <div class="forum-links forum-linkssmall">
                  <!-- BEGIN switch_user_logged_in -->
                    <div><span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span></div>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
                    <div><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span></div>
 <!-- END switch_delete_cookies -->
                  </div>
                  <div class="forum-links">
                          <div><a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a></div>
                          <div><a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a></div>
                          <div><a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a></div>
 <!-- BEGIN switch_on_index -->
 <!-- BEGIN switch_delete_cookies -->
                          <div><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></div>
 <!-- END switch_delete_cookies -->
 <!-- END switch_on_index -->
 </div>
 </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 id="qeel">
  <h1>Nos précieux voyageurs</h1>
  <div id="qeel-wrap">

    <div class="qeel-stats"><div>{TOTAL_USERS}</div><div>{TOTAL_POSTS}</div><div>{NEWEST_USER}</div></div>
    

    <div class="qeel-online">
      <div class="qeel-stats2">{TOTAL_USERS_ONLINE}</div>
      <div>{LOGGED_IN_USER_LIST}</div>
    </div>
    <div>
      <div><table>{L_CONNECTED_MEMBERS}</table></div>
      <div>
        <a href="{U_TODAY_ACTIVE}"><i class="fas fa-fire"></i><div>Sujets actifs du jour</div></a>
        <a href="{U_TODAY_POSTERS}"><i class="fas fa-trophy"></i><div>Top 20 des posteurs du jour</div></a>
        <a href="{U_OVERALL_POSTERS}"><i class="fas fa-thumbs-up"></i><div>Top 20 des posteurs du forum</div></a>
        <a href="/?mode=delete_cookies" rel="nofollow"><i class="fas fa-cookie-bite"></i><div>Supprimer les cookies du forum</div></a>
      </div>
    </div>
    <div class="qeel-groups">
      <a href="#">Groupe 1</a>
      <a href="#">Groupe 2</a>
      <a href="#">Groupe 3</a>
      <a href="#">Groupe 4</a>
      <a href="#">Groupe 5</a>
      <a href="#">Groupe 6</a>
      <a href="#">Groupe 7</a>
      <a href="#">Groupe 8</a>
    </div>
    <div class="qeel-cbox"></div>
    <div class="qeel-affilates">
      <div>
        <h2>Coup de coeur</h2>
        <a href="#" target="_blank"><img src="http://via.placeholder.com/150x100" /><div>Nom du forum</div></a>
        <a href="#" target="_blank"><img src="http://via.placeholder.com/150x100" /><div>Nom du forum</div></a>
        <a href="#" target="_blank"><img src="http://via.placeholder.com/150x100" /><div>Nom du forum</div></a>
      </div>
      <div>
        <h2>Partenaires</h2>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
        <a href="#" target="_blank" class="partenaire"><div>Nom du forum</div><img src="http://via.placeholder.com/88x31" /></a>
      </div>
    </div>
  </div>
  <div id="credit">Codage par <a href="http://terrible.forumactif.org/" target="_blank">Awful</a></div>
</div>
<script>
  $(document).ready(function(){
  $('.qeel-online').html($('.qeel-online').html().replace(/Utilisateurs enregistrés : /ig, ''));
  $('.qeel-stats').html($('.qeel-stats').html().replace(/Nous avons |Nos membres ont posté un total de /ig, '').replace(/membre enregistré/ig, 'membre').replace(/membres enregistrés/ig, 'membres').replace(/L'utilisateur enregistré le plus récent est /ig, ""));
  $('.qeel-stats2').html($('.qeel-stats2').html().replace(/Il y a en tout /ig, ''));
  });
</script>

<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />


{AUTO_DST}

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/***********************************
*** QEEL PAR AWFUL ***
**********************************/
/****** LIENS INDEX *******/
 .forum-links {
     display: flex;
     justify-content: space-around;
     align-items: center;
     height: 50px;
     margin: 0px -10px;
}
 .forum-links a {
     text-decoration: none!important;
     color: #bababa;
     font-size: 7px;
     transition: color 0.3s;
     border: 1px solid #dedede;
     padding: 0 10px;
     text-transform: uppercase;
     font-family: 'Cousine', monospace;
     letter-spacing: 1px;
     display: block;
     height: 15px;
     line-height: 17px;
}
 .forum-links a:hover {
     color: #595959;
}
 .forum-linkssmall {
     height: 20px;
     margin-top: 15px;
}
 .forum-linkssmall a {
     font-size: 10px;
}
/**** QEEL ****/
 #qeel {
     margin: 0px -10px;
     font-family: 'Roboto', sans-serif;
}
 #qeel a {
     text-decoration: none!important;
}
 #qeel h1 {
     margin: 0;
     height: 100px;
     text-align: center;
     line-height: 100px;
     background: linear-gradient(180deg, #C3A7CC 0%, #4E1F57 100%);
     font-family: 'Montserrat', sans-serif;
     font-style: italic;
     color: #fff;
     font-size: 30px;
     text-transform: lowercase;
     text-shadow: 1px 1px 0px #332347;
}
 #qeel-wrap {
     display: flex;
     padding: 10px 20px;
     flex-wrap: wrap;
     text-transform: uppercase;
     font-size: 10px;
}
 .qeel-stats {
     width: 200px;
     display: flex;
     flex-direction: column;
}
 .qeel-stats > div {
     background: #fbfbfb;
     border: 1px solid #d4d4d4;
     height: 30px;
     line-height: 30px;
     box-sizing: border-box;
     padding-right: 10px;
     text-align: right;
     font-family: 'Cousine', monospace;
     font-size: 8px;
     letter-spacing: 1px;
     position: relative;
     margin-bottom: 10px;
}
 .qeel-stats > div::before {
     content: "\f27a";
     width: 30px;
     height: 28px;
     background: #C3A7CC;
     position: absolute;
     left: -1px;
     border: 1px solid #b28eb9;
     top: -1px;
     line-height: 28px;
     font-family: "Font Awesome 5 Free";
     font-weight: 900;
     font-size: 11px;
     color: #fff;
     text-align: center;
     text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
}
 .qeel-stats > div:nth-child(1)::before {
     content: "\f535";
}
 .qeel-stats > div:nth-child(3)::before {
     content: "\f005";
}
 .qeel-stats2 {
     margin-bottom: 5px;
     font-family: 'Cousine', monospace;
     font-size: 8px;
     text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}
 .qeel-online {
     height: 160px;
     width: 350px;
     box-sizing: border-box;
     margin: 0 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
}
 .qeel-online > div:last-child {
     background: #fff;
     height: 100%;
     box-sizing: border-box;
     overflow: auto;
     padding: 8px;
}
 #qeel-wrap > div:nth-child(3) {
     flex: 1;
     display: flex;
     flex-direction: column;
}
 #qeel-wrap > div:nth-child(3) > div:first-child {
     flex: 1;
     overflow: auto;
     background: #fff;
     padding: 8px;
}
 #qeel-wrap > div:nth-child(3) table {
     border-collapse: collapse;
}
 #qeel-wrap > div:nth-child(3) td.row1 {
     background: transparent;
     padding: 0;
}
 #qeel-wrap > div:nth-child(3) .gensmall {
     font-family: 'cousine', monospace;
     font-size: 7px;
     letter-spacing: 1px;
}
 #qeel-wrap > div:nth-child(3) > div:last-child {
     text-align: center;
     margin-top: 10px;
     display: flex;
     justify-content: center;
     background: #dcc6e3;
     padding: 5px 0;
     box-sizing: border-box;
     border: 1px solid #b28eb9;
}
 #qeel-wrap > div:nth-child(3) > div:last-child a {
     display: inline-block;
     height: 30px;
     width: 30px;
     background: #C3A7CC;
     border: 1px solid #b28eb9;
     text-shadow: 1px 0px 0px #b28eb9, -1px 0px 0px #b28eb9, 0px 1px 0px #b28eb9, 0px -1px 0px #b28eb9;
     border-radius: 50%;
     font-size: 15px;
     margin: 0 5px;
     position: relative;
     color: #fff;
     line-height: 30px;
}
 #qeel-wrap > div:nth-child(3) > div:last-child a i {
     line-height: 30px;
}
 #qeel-wrap > div:nth-child(3) > div:last-child a div {
     position: absolute;
     pointer-events: none;
     text-shadow: none;
     color: #000;
     background: #fbfbfb;
     font-family: 'Cousine', monospace;
     font-size: 7px;
     width: 100px;
     line-height: 1;
     height: 50px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     left: -33px;
     top: -70px;
     border: 1px solid #ccc;
     box-sizing: border-box;
     letter-spacing: 1px;
     padding: 0 5px;
     visibility: hidden;
     opacity: 0;
     z-index: 2;
     transition: all 0.2s;
}
 #qeel-wrap > div:nth-child(3) > div:last-child a div::before, #qeel-wrap > div:nth-child(3) > div:last-child a div::after{
     content: "";
     height: 10px;
     width: 10px;
     background: #ccc;
     transform: rotate(45deg);
     position: absolute;
     bottom: -5px;
     left: 42px;
}
 #qeel-wrap > div:nth-child(3) > div:last-child a div::after{
     background: #fbfbfb;
     bottom: -4px;
}
 #qeel-wrap > div:nth-child(3) > div:last-child a:hover div {
     animation: pulse 0.3s linear 1;
     visibility: visible;
     opacity: 1;
     top: -50px;
}
 @keyframes pulse{
     11.1% {
         transform: none
    }
     25% {
        transform: scale(0.9) skewX(-12.5deg) skewY(-12.5deg);
    }
     75% {
        transform: scale(1.1)skewX(6.25deg) skewY(6.25deg);
    }
     100% {
         transform: none
    }
}
 .qeel-groups {
     flex: 100%;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     margin-bottom: 30px;
     margin-top: 20px;
}
 .qeel-groups a {
     width: calc(25% - 8px);
     background: #fbfbfb;
     margin-bottom: 5px;
     height: 30px;
     text-align: center;
     display: flex;
     box-shadow: 0px -1px 0px #605ca8 inset;
     color: #605ca8;
     transition: all 0.3s;
     font-size: 10px;
     font-family: 'Montserrat', sans-serif;
     font-style: italic;
     letter-spacing: 1px;
     flex-direction: column;
     justify-content: center;
}
 .qeel-groups a:hover {
     box-shadow: 0px -50px 0px #605ca8 inset;
     color: #fff!important;
}
 .qeel-groups a:nth-child(2) {
     box-shadow: 0px -1px 0px #448ccb inset;
     color: #448ccb;
}
 .qeel-groups a:nth-child(2):hover {
     box-shadow: 0px -50px 0px #448ccb inset;
}
 .qeel-groups a:nth-child(3) {
     box-shadow: 0px -1px 0px #3cb878 inset;
     color: #3cb878;
}
 .qeel-groups a:nth-child(3):hover {
     box-shadow: 0px -50px 0px #3cb878 inset;
}
 .qeel-groups a:nth-child(4) {
     box-shadow: 0px -1px 0px #a0410d inset;
     color: #a0410d;
}
 .qeel-groups a:nth-child(4):hover {
     box-shadow: 0px -50px 0px #a0410d inset;
}
 .qeel-groups a:nth-child(5) {
     box-shadow: 0px -1px 0px #b52f34 inset;
     color: #b52f34;
}
 .qeel-groups a:nth-child(5):hover {
     box-shadow: 0px -50px 0px #b52f34 inset;
}
 .qeel-groups a:nth-child(6) {
     box-shadow: 0px -1px 0px #f7941d inset;
     color: #f7941d;
}
 .qeel-groups a:nth-child(6):hover {
     box-shadow: 0px -50px 0px #f7941d inset;
}
 .qeel-groups a:nth-child(7) {
     box-shadow: 0px -1px 0px #a186be inset;
     color: #a186be;
}
 .qeel-groups a:nth-child(7):hover {
     box-shadow: 0px -50px 0px #a186be inset;
}
 .qeel-groups a:nth-child(8) {
     box-shadow: 0px -1px 0px #000 inset;
     color: #000;
}
 .qeel-groups a:nth-child(8):hover {
     box-shadow: 0px -50px 0px #000 inset;
}
 .qeel-cbox {
     width: 320px;
     height: 300px;
     background: #fff;
     margin-right: 15px;
}
 .qeel-affilates {
     flex: 1;
}
 .qeel-affilates h2 {
     margin: 0 0 10px;
     font-family: 'Montserrat', sans-serif;
     font-style: italic;
     text-transform: none;
     font-size: 25px;
     color: #fff;
     flex: 100%;
     line-height: 25px;
     text-shadow: 1px 1px 0px #969696;
}
 .qeel-affilates > div:first-child h2 {
     text-align: right;
}
 .qeel-affilates > div:first-child {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     margin-bottom: 15px;
}
 .qeel-affilates > div:first-child a {
     position: relative;
     height: 100px;
     overflow: hidden;
}
 .qeel-affilates > div:first-child a div {
     position: absolute;
     height: 100%;
     width: 100%;
     top: 100%;
     background: rgba(255,255,255,0.7);
     display: flex;
     justify-content: center;
     flex-direction: column;
     text-align: center;
     font-family: 'Montserrat', sans-serif;
     font-style: italic;
     color: #b28eb9;
     border: 1px solid;
     box-sizing: border-box;
     transition: top 0.3s;
}
 .qeel-affilates > div:first-child a:hover div {
     top: 0;
}
 .qeel-affilates > div:nth-child(2) h2 {
     padding-left: 30px;
}
 .qeel-affilates > div:last-child {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 .partenaire {
     display: inline-block;
     width: 88px;
     height: 31px;
     position: relative;
     margin-bottom: 5px;
}
 .partenaire div {
     position: absolute;
     pointer-events: none;
     transform: translate(-20px, 0);
     opacity: 0;
     transition: all 0.3s;
     position: absolute;
     background: #fbfbfb;
     bottom: 5px;
     left: 55px;
     font-size: 7px;
     padding: 6px 8px 4px;
     text-transform: uppercase;
     display: flex;
     color: #969696;
     white-space: nowrap;
     z-index: 2;
     border: 1px solid #d4d4d4;
     font-family: 'Cousine', sans-serif;
     letter-spacing: 1px;
     flex-direction: column;
     justify-content: center;
}
 .partenaire:hover div {
     opacity: 1;
     transform: translate(0px, 0);
}
/***********************************
*** CREDIT ***
**********************************/
 #credit {
     text-transform: uppercase;
     font-size: 8px;
     letter-spacing: 1px;
     color: #a4a4a4;
     text-align: center;
     text-shadow: 0px 1px 0px #fff,0px -1px 0px #fff,1px 0px 0px #fff,-1px 0px 0px #fff;
}
 #credit a {
     text-decoration: none !important;
     color: #939393;
     transition: color 0.3s;
}
 #credit a:hover {
     color: #2f2f2f;
}

Dans les options du CSS, à "optimiser votre CSS", cochez "non".

Chalut !
Je voulais savoir si c'était possible de changer les typo du code ?

Merci d'avance

Hey bonsoir !

J'aime beaucoup l'habillage Meitha, tout est niquel mais ça fait maintenant plus de deux heures que j'essaye de modifier le QEEL, et plus précisément les intitulés des statistiques, j'avoue que mes yeux commencent à clairement saturer XD du coup, je viens quémander demander un peu d'aide s'il te plait ^^

Voilà, merci d'avance et merci pour les codes !

Premièrement merci pour ce QEEL il est magnifique c:

Mais j'aurais besoin d'une petite information, je ne comprends pas comment mettre la CB dans l'espace blanc prévu pour elle. Je suis sûrement un peu paumé ou à l'ouest parce que je sens que c'est simple, mais je ne comprends pas comment faire. Merci de bien vouloir me répondre si tu vois ce petit message c:

Coucou !
Je réponds un peu tardivement, désolé :c
Dans le template, tu as une ligne :

Code:

<div class="qeel-cbox"></div>

Tu peux installer ta CB dans cette div ! c:
N'hésite pas à poster dans la partie aide en cas de souci