QEEL #1

aka artedelamuerte

Codes

Code compatible avec les forums PHPBB2

Template index_body :

Code:: {JAVASCRIPT}

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
</tr>


<tr>
<td class="row1" rowspan="3" align="center" valign="middle">
<div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
</td>
</tr>

</table>



<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>

   
   <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">
   
   <div class="fb-login-button"></div>
   
   
   <div class="ti-connect"></div>
   
   </div>
   </td>
   

   </tr>
   </table>
</form>


{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top">

<span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>


<br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>

</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>


<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>


</span>
</td>
</tr>
</table>


<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"/> </td>
   <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
   </tr>
   </table>
   </td>

   
   <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">
   
   <div class="fb-login-button"></div>
   
   
   <div class="ti-connect"></div>
   
   </div>
   </td>
   

   </tr>
   </table>
</form>



<link href="https://fonts.googleapis.com/css?family=EB+Garamond" rel="stylesheet"/>
<div class="content_qeel_arte">
<div class="statistics_forum">
<img src="https://zupimages.net/up/18/12/0vsh.png" alt="imagestatistics"/>
La vie est belle sur les terres d’Arqual. Les
<span id="total_user">{TOTAL_USERS}</span>
   <script type="text/javascript">
document.getElementById('total_user').innerHTML=document.getElementById('total_user').innerHTML.replace(/Nous avons /," ") .replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");
</script>
habitants vivent en harmonie avec la nature. Ils ont vécu de nombreuses aventures ici ! Plus exactement
<span id="tPOST">{TOTAL_POSTS}</span><script type="text/javascript">document.getElementById('tPOST').innerHTML=document.getElementById('tPOST').innerHTML.replace(/Nos membres ont posté un total de /," ") .replace(/messages/," ");</script>
péripéties se sont déroulées sur ces terres sacrées. Tout ça semble être merveilleux non ? Venez donc vous joindre à l’aventure !
</div>
<div class="block_lastvisit">
<h3>Ils étaient là il y a 24H</h3>
   <table>{L_CONNECTED_MEMBERS}</table>
</div>
<div class="blocks_qeel_right">
<h4>Bienvenue à <span><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ");</script></span></h4>
<div class="members_online">
   {LOGGED_IN_USER_LIST}
</div>
<span id="avatar_lastmember"></span>
<div class="block_text_q">
Ils sont actuellement là
</div>
<div class="crew_color" style="background: #1461ca;">
<div>
<h5>
Groupe 1
</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="crew_color" style="background: #ca1436;">
<div>
<h5>
Groupe 2
</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="crew_color" class="groupes" style="background: #0c7b3d;">
<div>
<h5>
Groupe 3
</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="crew_color" style="background: #ca7b14;">
<div>
<h5>
Groupe 4
</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="crew_color" style="background: #636363;">
<div>
<h5>
Groupe 5
</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="crew_color" style="background: #630460;">
<div>
<h5>
Groupe 6
</h5>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="block_description_crews"></div>
</div>
  <span id="copy_arte">artemis | <a href="https://artifices.forumactif.com/">www</a></span></div>

{CHATBOX_BOTTOM}
<br clear="all" />

<table border="0" cellspacing="3" cellpadding="0" align="center">
<tr>
<td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NEW_POSTS}</span></td>
<td></td>
<td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
<td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
<td> </td>
<td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
<td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
</tr>
</table>


{AUTO_DST}

Template viewprofile_body (afin d'afficher l'avatar du dernier inscrit) :

Code:: <table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a></span></td>
</tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<th class="thHead" colspan="2" nowrap="nowrap" height="25"><h1 class="h_member">{L_VIEWING_PROFILE}</h1></th>
</tr>
<tr>
<td class="catLeft" align="center" width="40%" height="28"><b><span class="gen">{L_USER_PRESENCE}</span></b></td>
<td class="catRight" width="60%" align="center"><b><span class="gen">{L_ABOUT_USER}</span></b></td>
</tr>
<tr>
<td class="row1" align="center" valign="top" height="120">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td valign="middle" nowrap="nowrap" align="right" width="20%"><span class="gen">{L_AVATAR_IMG} </span></td>
<td width="80%"><b><span class="gen"><span id="avatar_membre">{AVATAR_IMG}</span></span></b></td>
</tr>
<tr>
<td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_RANK}: </span></td>
<td><b><span class="gen">{POSTER_RANK}</span></b></td>
</tr>

<tr>
<td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_STATUT}: </span></td>
<td><b><span class="gen">{USER_ONLINE}</span></b></td>
</tr>


<tr>
<td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_FRIENDS_AND_FOES}: </span></td>
<td><span class="gen"><strong>{FRIENDSFOES}</strong></span></td>
</tr>


<tr>
<td valign="middle" nowrap="nowrap" align="right"><br /><span class="gen">{L_ADMINISTRATE_USER}: </span></td>
<td><br /><strong><span class="gen">{ADMINISTRATE_USER}{BAN_USER}</span></strong></td>
</tr>

</table>
</td>
<td class="row1" rowspan="3" valign="top">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td align="right" valign="top" nowrap="nowrap"><span class="gen">{L_LAST_VISITED}: </span></td>
<td><b><span class="gen">{LAST_VISIT_TIME}</span></b></td>
</tr>

<tr>
<td align="right" valign="middle" nowrap="nowrap"><span class="gen">{L_PRIVATE_MSG}: </span></td>
<td><b><span class="gen">{PRIVATE_MSG}</span></b></td>
</tr>


<tr id="field_id{profile_field.ID}">
<td width="40%" align="right" valign="top" nowrap="nowrap"><span class="gen">{profile_field.LABEL} </span></td>
<td width="60%"><div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><br /><span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br />
<span class="genmed"><a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><br />
- <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
- <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></span></td>
</tr>

</table>
</td>
</tr>
<tr>
<td class="catLeft" align="center" height="28"><b><span class="gen">{L_CONTACT} {USERNAME}</span></b></td>
</tr>
<tr>
<td class="row1" valign="top" height="{S_CONTACT_HEIGHT}">
<table width="100%" border="0" cellspacing="1" cellpadding="0">

<tr id="field_id{contact_field.ID}">
<td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">{contact_field.LABEL}  </span></td>
<td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div></td>
</tr>


<tr>
<td align="right" valign="middle" nowrap="nowrap" width="50%">
<span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span>
</td>
<td class="row1" valign="middle">
<table align="center">
<tr>
<td>
{ADMIN_USER_COMMENT}
</td>
</tr>
</table>
</td>
</tr>

</table>
</td>
</tr>

<tr>
<td colspan="2" class="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
</tr>
<tr>
<td class="row1" align="center" valign="top" height="6">
{RPG_IMAGE}<br /><br />
<table width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td align="right" valign="middle" nowrap="nowrap">
<span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span>
</td>
<td width="100%" valign="middle" nowrap="nowrap">
<b><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></b>
</td>
</tr>

</table>
</td>
<td class="row1" align="center" valign="top" height="6">
<table width="100%" border="0" cellspacing="1" cellpadding="0">

<tr>
<td align="right" valign="middle" nowrap="nowrap">
<span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span>
</td>
<td width="100%" valign="baseline">
<b><span class="gen">{switch_rpg.rpg_fields.F_VALUE_NEW}</span></b>
</td>
</tr>

</table>
</td>
</tr>
<tr>
<td colspan="2" align="center" class="row1">
{U_ADMIN_RPG}
</td>
</tr>

</table>
<br />
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('[id^=field_id]').each(function(){
if ( $(this).find('.field_editable').is('span, div') )
{
$(this).hover(function()
{
if( $(this).find('.field_editable.invisible').is('span, div') )
{
$(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
$(this).find('.ajax-profil_edit').attr({
alt: "{L_FIELD_EDIT_VALUE}",
title: "{L_FIELD_EDIT_VALUE}"
}).click(function(){
$(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
$(this).prev().find('.ajax-profil_valid').attr({
alt: "{L_VALIDATE}",
title: "{L_VALIDATE}"
}).click(function(){
var content = new Array();
$(this).parent().find('[name]').each(function(){
var type_special = $(this).is('input[type=radio],input[type=checkbox]');
if ( (type_special && $(this).is(':checked')) || !type_special )
{
content.push(new Array($(this).attr('name'), $(this).attr('value')));
}
});
var id_name = $(this).parents('[id^=field_id]').attr('id');
var id = id_name.substring(8, id_name.length);
$.post(
"{U_AJAX_PROFILE}",
{id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
function(data){
$.each(data, function(i, item){
$('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
});
},
"json"
);
});
$(this).remove();
});
}
},function()
{
if( $(this).find('.field_editable.invisible').is('span, div') )
{
$(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
$(this).find('.ajax-profil_edit').remove();
}
});
}
});
});
//]]>
</script>

CSS :

Code:: /******QEEL ARTEMIS******/

.content_qeel_arte {
  width: 790px;
  height: 380px;
  background-color: #e3dabb; /**FOND DU QEEL**/
  margin: auto;
  padding: 10px;
  font-family: 'Arial';
  font-size: 12px;
  word-spacing: 6px;
  position: relative;
}

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

.statistics_forum {
  width: 320px;
  height: 150px;
  text-align: justify;
  color: #011c31;
  line-height: 15px;
  font-size: 11px;
}

.statistics_forum img {
  width: 90px;
  height: 90px;
  border: 2px solid #011c31;
  float: left;
  margin: 0px 5px 5px 0px;
}

.statistics_forum span {
  color: #ca7b14; /**COULEUR DES STATISTIQUES**/
  font-weight: bold;
}

.block_lastvisit {
  width: 320px;
  height: 230px;
  box-sizing: border-box;
  border: 2px solid #011c31;
  padding: 45px 10px 10px 10px;
  text-align: justify;
  overflow: auto;
  position: relative;
}

.content_qeel_arte .row1 {
  background: transparent;
}

.content_qeel_arte h3 {
  width: 316px;
  height: 34px;
  text-align: center;
  font-size: 20px;
  padding-top: 5px;
}

.content_qeel_arte h3 , .content_qeel_arte h4 {
  background: #011c31; /**FOND DES TITRES**/
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  font-family: 'EB Garamond';
  color: #e3dabb;
  text-transform: uppercase;
}

.content_qeel_arte h4 {
  width: 380px;
  height: 40px;
  font-size: 30px;
  padding: 15px 30px 10px 40px;
  line-height: 20px;
}

.content_qeel_arte h4 span {
  display: block;
  width: 200px;
  text-align: center;
  font-size: 17px;
}

.blocks_qeel_right {
  width: 450px;
  height: 317px;
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 70px;
}

.members_online {
  width: 295px;
  height: 67px;
  border: 8px solid #ca7b14; /**BORDURES DU BLOCK DES MEMBRES CONNECTES**/
  text-align: justify;
  padding: 10px;
}

.blocks_qeel_right img {
  width: 95px;
  height: 155px;
  object-fit: cover;
  -o-object-fit: cover;
  position: absolute;
  top: 15px;
  right: 10px;
  z-index: 2;
  border: 2px solid #011c31; /**BORDURES AVATAR**/
}

.block_text_q {
  font-family: 'EB Garamond';
  font-size: 20px;
  color: #ca7b14;
  text-transform: uppercase;
  width: 430px;
  margin-top: -9px;
  padding-left: 15px;
}

.crew_color {
  width: 65px;
  height: 25px;
}

.crew_color div {
  width: 420px;
  height: 110px;
  position: absolute;
  bottom: 7px;
  left: 0;
  z-index: 3;
  padding: 15px;
  color: #e3dabb;
  text-align: justify;
  line-height: 11px;
  font-size: 11px;
  visibility: hidden;
  transition: all 0.3s;

}

.block_description_crews {
  width: 450px;
  height: 141px;
  background: #011c31; /**FOND DU BLOCK DES DESCRIPTIONS**/
  text-align: justify;
  color: #e3dabb;
}

.crew_color h5 {
  margin: 0;
  width: 410px;
  height: 20px;
  margin: auto;
  background: #e3dabb;
  font-family: 'EB Garamond';
  text-transform: uppercase;
  text-align: center;
  font-size: 20px;
  color: #011c31;
  margin-bottom: 7px;
  padding-top: 9px;
}

.crew_color:hover div {
  visibility: visible;
  opacity: 1;
}

#copy_arte {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
}

Code Javascript à ajouter dans Module > Gestion des codes Javascript > Créer un nouveau Javascript (placement: sur l'index)

Code:: $(function(){
$.get($("#nUSER a[href^='/u']")[0].href,function(d){
(a=$("#avatar_membre img",$(d))).length&&$("#avatar_lastmember").html(a);})
});

- Les phrases des statistiques sont modifiables via le template index_body (lignes 141 à 149.)
- Les couleurs des blocks des groupes ainsi que leurs descriptions sont également directement modifiables via le template index_body.
- Les couleurs du QEEL (fond, bordures, etc) sont modifiables via le CSS ; référez-vous aux commentaires.
- Pour que l'avatar du p'tit newbie s'affiche correctement, n'oubliez pas de désactiver le profil avancé : Utilisateurs & Groupes > Profils > Options Générales > Activer le profil avancé : non.

En cas de soucis avec ce code, laissez-moi un petit message ici ! c: