TYPE : PHPBB2

HTML

Il faut remplacer index_body

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="qeeltotal">
  <div class="qeelgroupes">
    <a class="groupe1" href="">Groupe 1</a>
    <a class="groupe2" href="">Groupe 2</a>
    <a class="groupe3" href="">Groupe 3</a>
    <a class="groupe4" href="">Groupe 4</a>
    <a class="groupe5" href="">Groupe 5</a>
    <a class="groupe6" href="">Groupe 6</a>
  </div>
  <div class="qeelreste">
    <div class="qeelstats">{TOTAL_POSTS} | {TOTAL_USERS}<br>
      {TOTAL_USERS_ONLINE}
      </div>
      
      <div class="qeelco2">
        <div class="dayQEEL"><table id="24h">{L_CONNECTED_MEMBERS}</table></div>

        <div class="qeelusnew"><div class="qeelfond"></div>
        <div class="qeeluser">{LOGGED_IN_USER_LIST}</div>
        <div class="qeelnew">
          <span class="vavaqeel" id="avatar_dernier_membre"></span>
          <div class="dern-in2" id="newus">Bienvenue à <br><span id="dernier_membre">{NEWEST_USER}</span></div>
       </div>
          </div>
          
        </div></div></div>
 <script type="text/javascript">document.getElementById('newus').innerHTML=document.getElementById('newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />

{AUTO_DST}

CSS

Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :
Note : Le QEEL a juste des couleurs en plus, les couleurs de groupe

Code:

:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
  
  --groupe1:#3F00A7;
  --groupe2:#A5005C;
  --groupe3:#097B0A;
  --groupe4:#FF7800;
  --groupe5:#3094CF;
  --groupe6:#97649B;
  
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
  
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{     scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:

/* Code de QEEL par KoalaVolant */

  /* Pour le fond en image */
  
  .qeelgroupes{ background:var(--main-color-v); background-position:center; background-size:cover; clip-path: polygon(0 0, 100% 0%, 100% 86%, 50% 100%, 0 86%);
  display:flex; justify-content:center; flex-wrap:wrap; position:relative; padding-bottom:43px; }
  .qeelgroupes:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color);  
    mix-blend-mode: hard-light; }

/* Structure */

.qeeltotal{ width:800px; display:flex; justify-content:space-between; padding:20px; background-color:var(--grisc); }
.qeeltotal a{ text-decoration:none !important; }
.qeeltotal *{ box-sizing:border-box; }
.qeelgroupes{ width:265px; padding:5px; padding-bottom:41px; }
.qeelreste{ width:720px; margin-left:10px;  }

/* Groupes */

.qeelgroupes a{ position:relative; display:block; z-index:99; background-color:var(--white);     padding: 3px;
    width: 83%;    margin: 4px;    text-align: center;    font-family: var(--font1);    text-decoration: none !important; }

.groupe1{ color:var(--groupe1) !important; }
.groupe2{ color:var(--groupe2) !important; }
.groupe3{ color:var(--groupe3) !important; }
.groupe4{ color:var(--groupe4) !important; }
.groupe5{ color:var(--groupe5) !important; }
.groupe6{ color:var(--groupe6) !important; }

.qeelgroupes a:hover{ background-color:var(--black); color:var(--white) !important; }

/* Reste et stats */

.qeelstats{ background-color:var(--main-color); color:var(--white); padding:10px; font-size:14px; }
.qeelco2{ display:flex; justify-content:space-between; margin-top:6px; }
.dayQEEL .row1{ background:none; !important; }
.dayQEEL .row1 .gensmall{     background-color: var(--white);    height:208px;    display: block;    overflow: auto;    padding: 10px;  width: 295px; }

.qeelusnew{ width: 269px; margin-top:3px;}

.qeelfond{ background-image: url('https://i.servimg.com/u/f30/19/45/51/53/fondfo11.jpg');  width: 100%;    height: 65px; background-size:cover; }
.qeeluser{     background-color: var(--white);    font-size: 14px;    padding: 9px;    height: 75px;  overflow: auto; margin-top:5px; }
.dern-in2{     background-color: var(--white);    margin-top: 5px;    padding: 10px;  text-align: center; font-family: var(--font2);    font-size: 19px;
    line-height: 19px;    color: var(--main-color);}
.dern-in2 strong{ font-family:var(--font3); }

TYPE : ModernBB

HTML

Il faut remplacer index_body

Code:

{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
 <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
 <div class="user_login_form center">
 <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
 <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
 <br />
 <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
 {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <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>
            <!-- END switch_social_login -->
 </div>
 </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
 <div class="panel introduction">
 <!-- BEGIN message_admin_titre -->
 <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
 <!-- END message_admin_titre -->

 <!-- BEGIN message_admin_txt -->
 <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
 <!-- END message_admin_txt -->
 </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
<div class="qeeltotal">
  <div class="qeelgroupes">
    <a class="groupe1" href="">Groupe 1</a>
    <a class="groupe2" href="">Groupe 2</a>
    <a class="groupe3" href="">Groupe 3</a>
    <a class="groupe4" href="">Groupe 4</a>
    <a class="groupe5" href="">Groupe 5</a>
    <a class="groupe6" href="">Groupe 6</a>
  </div>
  <div class="qeelreste">
    <div class="qeelstats">{TOTAL_POSTS} | {TOTAL_USERS}<br>
      {TOTAL_USERS_ONLINE}
      </div>
      
      <div class="qeelco2">
        <div class="dayQEEL">{L_CONNECTED_MEMBERS}</div>

        <div class="qeelusnew"><div class="qeelfond"></div>
        <div class="qeeluser" id="userlist">{LOGGED_IN_USER_LIST}</div>
        <div class="qeelnew">
          <span class="vavaqeel" id="avatar_dernier_membre"></span>
          <div class="dern-in2" id="newus">Bienvenue à <br><span id="dernier_membre">{NEWEST_USER}</span></div>
       </div>
          </div>
          
        </div></div></div>
 <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('userlist').innerHTML=document.getElementById('userlist').innerHTML.replace(/<br>Utilisateurs enregistrés :/,"Utilisateurs enregistrés :");</script>
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}


{AUTO_DST}

CSS

Les couleurs marchent par les root. Voici donc le code à mettre avant, si vous n'avez pris aucun des codes déjà présents sur ce thème :
Note : Le QEEL a juste des couleurs en plus, les couleurs de groupe

Code:

:root{ --main-color:#A3171A;
  --snd-color:#970000;
  --main-color-v:url('https://i.servimg.com/u/f30/19/45/51/53/fondbi10.jpg');
  --white:#fff;
  --black:#444;
  --grisc:#dedede;
  --griscc:#f0f0f0;
  
  --groupe1:#3F00A7;
  --groupe2:#A5005C;
  --groupe3:#097B0A;
  --groupe4:#FF7800;
  --groupe5:#3094CF;
  --groupe6:#97649B;
  
  --font1:'Anton', sans-serif;
--font2:'Kaushan Script', cursive;;
--font3:'Lato', sans-serif;}

  /* Ascenseur */
  
  ::-webkit-scrollbar {height:12px; width:5px; background:none; margin-right:5px;}
::-webkit-scrollbar-thumb {background:var(--main-color); height:30px; border-radius:30px;}
::-webkit-scrollbar-corner {background:none;}
.cate-descr span, .redpres *{     scrollbar-color: var(--main-color) var(--white);
  scrollbar-width: thin; }

Puis le reste :

Code:

/* Code de QEEL par KoalaVolant */

  /* Pour le fond en image */
  
  .qeelgroupes{ clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 50% 100%, 0% 86%);  background:var(--main-color-v); background-position:center; background-size:cover;
  display:flex; justify-content:center; flex-wrap:wrap; position:relative; padding-bottom:43px; }
  .qeelgroupes:after{ position: absolute; content: ''; z-index:7;display: block; top: 0; left: 0; height: 100%; width: 100%;  background: var(--main-color);  
    mix-blend-mode: hard-light; }

/* Structure */

.qeeltotal{ width:800px; display:flex; justify-content:space-between; padding:20px; background-color:var(--grisc); }
.qeeltotal a{ text-decoration:none !important; }
.qeeltotal *{ box-sizing:border-box; }
.qeelgroupes{ width:265px; padding:5px; padding-bottom:41px; }
.qeelreste{ width:720px; margin-left:10px;  }

/* Groupes */

.qeelgroupes a{ position:relative; display:block; z-index:99; background-color:var(--white);     padding: 3px; font-size:18px;
    width: 83%;    margin: 4px;    text-align: center;    font-family: var(--font1);    text-decoration: none !important; }

.groupe1{ color:var(--groupe1) !important; }
.groupe2{ color:var(--groupe2) !important; }
.groupe3{ color:var(--groupe3) !important; }
.groupe4{ color:var(--groupe4) !important; }
.groupe5{ color:var(--groupe5) !important; }
.groupe6{ color:var(--groupe6) !important; }

.qeelgroupes a:hover{ background-color:var(--black); color:var(--white) !important; }

/* Reste et stats */

.qeelstats{ background-color:var(--main-color); color:var(--white); padding:10px; font-size:14px; font-family:var(--font3); }
.qeelco2{ display:flex; justify-content:space-between; margin-top:6px; }
.dayQEEL{     background-color: var(--white);    height:208px;    display: block;    overflow: auto;    padding: 10px;  width: 270px; }

.qeelusnew{ width: 269px; }

.qeelfond{ background-image: url('https://i.servimg.com/u/f30/19/45/51/53/fondfo11.jpg');  width: 100%;    height: 65px; background-size:cover; }
.qeeluser{     background-color: var(--white);    font-size: 14px;    padding: 9px;    height: 75px;  overflow: auto; margin-top:5px; }
.dern-in2{     background-color: var(--white);    margin-top: 5px;    padding: 10px;  text-align: center; font-family: var(--font2);    font-size: 19px;
    line-height: 19px;    color: var(--main-color);}
.dern-in2 strong{ font-family:var(--font3); }