Version nécessaire du forum : phpbb2

Ce QEEL a été construit pour un forum fantasy. De fait, il vous faudra une image de fond à mettre pour avoir un résultat comme celui de mis en forme.

HTML

Remplacez le template "index_body" par

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" 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-entier"><div class="struct-qeel">
<div class="gauche-qeel">
  <div class="qeel-stats">Nos majestueuses personnes ont postés <span id="messtot">{TOTAL_POSTS}</span> écrits. Ce monde est peuplé de très exactement <span id="memtot">{TOTAL_USERS}</span> personnes !<br>
        La dernière personne a nous avoir rejoint est notre très cher <span id="newus">{NEWEST_USER}</span>, bienvenue ici !</div>
    <div class="qeel-co"><h2>Le peuple présent</h2><span id="userco">{LOGGED_IN_USER_LIST}</span></div>
  </div>
  <div class="rightright">
        <div id="groupes" class="qeel-groupes">{GROUP_LEGEND}</div>
    <table id="24h" class="qeel-dernier"><h2>Ils étaient là</h2><span class="gensmall">{L_CONNECTED_MEMBERS}</table>
      </div>
  </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('userco').innerHTML=document.getElementById('userco').innerHTML.replace(/Utilisateurs enregistrés :/,"");</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>
<script type="text/javascript">document.getElementById('groupes').innerHTML=document.getElementById('groupes').innerHTML.replace(/[[\]]/g,'');</script>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->

<!-- END switch_legend -->

{AUTO_DST}

CSS

Code:

/**** QEEL DE KOALAVOLANT *****************/

.qeel-entier{ background-image:url('https://i.servimg.com/u/f30/19/45/51/53/qeelte15.jpg');
  background-size:cover;
    box-sizing: border-box;
    padding: 55px 20px;
    background-position: center;}

.struct-qeel{ width:100%; display:flex; justify-content:space-between; align-items:center;}

.gauche-qeel{ width:35%; }
.rightright{ width:35%; }

.qeel-entier h2{ font-size: 45px;
    font-weight: 700;
    font-family: Tangerine;
  margin: 0;
color:#CBB392;
  text-shadow: 2px 2px 2px rgba(49,49,49,1);
}

.qeel-co{    margin-top: 20px;
  height: 112px;
overflow:auto; }

.rightright h2{ margin-top:30px; }

.qeel-dernier, .qeel-dernier .gensmall{
  height:180px;
  overflow:auto;
}

.qeel-dernier .row1{
  background:none;
}

.qeel-dernier .row1 .gensmall{
  font-family:Georgia;
  font-size:15px;
}
.qeel-stats, .qeel-dernier, .qeel-co{ background-color:#2A132B; padding:25px; border-radius:5px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(42,19,43,1);
-moz-box-shadow: 0px 0px 5px 0px rgba(42,19,43,1);
box-shadow: 0px 0px 5px 0px rgba(42,19,43,1);
-webkit-box-shadow: inset 0px 0px 152px 0px rgba(30,14,31,1);
-moz-box-shadow: inset 0px 0px 152px 0px rgba(30,14,31,1);
box-shadow: inset 0px 0px 152px 0px rgba(30,14,31,1);
font-size:15px; line-height:20px; font-family:Georgia; }

.qeel-stats span{ color:#C1A47B; font-weight:bold; }
.qeel-stats span a{ text-decoration:none; }

#userco{    margin-top: 15px;
  display: block; }

.qeel-entier a{ text-decoration:none !important; }

/* Groupes */
.qeel-groupes{ display:flex; flex-wrap:wrap-reverse; justify-content:center; }
.qeel-groupes a{ font-size:12px;padding:10px; border:1px solid #A4804D; background-color:#110012; text-transform:uppercase; font-family:'Fondamento', cursive;
display: inline-block;    margin: 4px 0px;}