LOST - V1.0

Version : ModernBB
Largeur du forum : 1400
Effets :

• En passant la souris sur les liens de la Page d'Accueil
  
• En passant la souris sur le titre du forum
  
• En passant la souris sur les liens, dans les catégories, menant aux sous-forums.
  

Notes : Pour le codage des templates, remplacez en entier le template de base par le codage donné ci-dessous.

Aperçu :

Aperçu du forum dans son intégralité : https://survive.forumsrpg.com/


Codage de base (CSS) :

Code:

.conteneur_minwidth_IE {background-color:#FDC1B0!important;}
#page-body {border: 1px solid #FB9C80;padding: 50px;border-top:none;border-bottom:none;margin: -24px auto;}
#wrap {background-color:white;}

.headerbar {background-color:transparent;background-image:none;height:auto;}
.headerbar .wrap {width:100%;padding:0!important;max-width:100%;}

.wrap #site-desc{top:90%!important;}
.wrap #logo {display:none;}

a,a:hover {text-decoration:none;}

.panel {background-color:transparent;box-shadow:none;}

body {overflow-x:hidden;}

/* Boutons */

.button, .button1, .button2, input[type="submit"],.button-round {box-shadow:none;border-radius:0px;
  background:#FB9C80!important;font-family:'Abril Fatface',serif;text-transform:uppercase;transition:background 0s ease;}
.button:hover, .button1:hover, .button2:hover, input[type="submit"]:hover,.button-round:hover {background:#65C5A7!important;box-shadow:none;}
.button-round {border-radius:50%;}

.h3 {border-color:#65C5A7!important;}

ul.topiclist {background:#CCC;}

/* Messagerie */

.postprofile-avatar img {width:200px;height:auto;}
.postprofile-contact {text-align:center;}
.postprofile-contact img {height:20px;}

/* ---------- BARRE DE NAVIGATION ---------- */

.baseNAV {background:#537759;width:100%;padding:7px;}
.borNAV {border:1px solid white;padding:20px;margin:0px -8px;text-align:center;}
.borNAV ul li {display:inline-block;}
.borNAV ul li a {color:white!important;margin:0px 10px;padding:5px 10px;}
.borNAV img {display:none;}


/* ---------- FIN BARRE DE NAVIGATION ---------- */

/* ---------- BANNIERE, LOGO, TITRE DU FORUM ---------- */

/* La base */

 #banniere,#qeel {width:100%;height:490px;background:#65C5A7;margin:0;overflow:hidden;text-align:center;}
#logoqeel{height:490px;}
 
 /* Image */
 
 #logoBAN {width:530px;margin:auto;}
 #logoBAN .imgBAN {margin:auto;height:auto;width:auto;filter: blur(5px);z-index:5;position:relative;margin-left:50px;
 opacity:1;transition:filter 1s ease;}
 
 #logoBAN:hover .imgBAN {filter:blur(0px);}
 
 /* Titre + sous-titre */
 
 .titBAN {width:inherit;margin:-300px auto;z-index:10;position:absolute;font-family:'Abril FatFace',serif;text-align:center;
 opacity:1;transition:opacity 1.5s ease,z-index 1s ease;}
  #logoBAN:hover .titBAN {opacity:0;z-index:1;}
 
 /* Titre */
 
 .titBAN a {font-size:120px;color:#FB9C80;text-shadow:1px 1px #fff,-1px -1px #fff;}
 
 /* Sous-titre */
 
 .titBAN span {display:block;margin-top:-30px;color:white;font-size:16px;}

/* ---------- FIN BANNIERE, LOGO, TITRE DU FORUM ---------- */

/* ---------- FOOTER ---------- */

#page-footer {background-color:#C4ABAE;}
#page-footer .wrap {display:none;}
#page-footer .copyright .wrap {display:block;}
#page-footer .copyright .copyright-body{border-top:none;}

/* ---------- FIN FOOTER ---------- */

Codage Catégories (CSS) :

Code:

/* ---------- CATÉGORIES ---------- */

/* Sous forum */

.sfFO {overflow:auto;font-family:'Abril Fatface',serif;padding-top: 50px;width: 190px;height: 200px;font-size:14px;text-transform:lowercase;}
.sfFO a {display:block;border-left: 4px solid #FDB49E;padding: 5px;color:black;transition:all 0.5s ease;}
.sfFO a:hover {border-left:4px solid #82CAA9;color:#626262;}

    /* Statistiques */
    
    .statFO {width:110px;padding-top:88px;font-family:'Abril Fatface',serif;}
    
    div.rondstatFO {background: #fff;border-radius: 50%;height: 40px;margin: 1px 0 1px -15px !important;
padding: 3px;text-align: center;width: 40px;}
    div.rondstatFO div {border:1px solid #FDB49E;border-radius:50%;padding:4px;color:#8CCEAE;font-size:15px;}
    
    .sujFO {padding-top:10px;padding-left:5px;color:#FDB49E;font-size:15px;}

  /* Milieu du forum (titre + description + lastpost) */
  
    .milFO {width:500px;padding:10px;}

/* Dernier Message */
    
    .lastpostFO {width:100%;margin-top:10px;font-family:'Encode Sans Condensed',sans-serif;font-size:13px;}
.lastpostFO br {display:none;}  
.lastpostFO strong {padding-left:5px;font-family:'Encode Sans Condensed',sans-serif!important;}
.lastpostFO a {font-family: 'Abril Fatface',serif!important;}

  /* Description du forum */
  
  .descFO {font-family:'Encode Sans Condensed',sans-serif;font-size:13px;background-color:rgb(245,245,245);
  padding-left:70px!important;margin-left:-70px;margin-top:10px;height:95px;padding:10px;text-align:justify;color:black;
  line-height:15px;overflow:auto;width: 565px;padding-right: 40px !important;}
  
  /* Titre du forum */

.milFO h3 a {color:#8CCEAE!important;}
  
  a.titFO{ font-family: 'Abril Fatface',serif;font-size: 25px;width: 570px;display: block;
    float: left;padding-top: 12px;overflow: hidden;text-overflow: ellipsis;margin-right: 0!important;
    height: 50px;white-space: nowrap;margin-top: -60px!important;margin-left: 20px!important;color:#8CCEAE;}
  .avtitFO {color: #FB9C80;font-family: 'Abril Fatface',serif;font-size: 40px;
    padding-right: 20px;display: block;float: left;width: 20px;}
.milFO .hierarchy {clear:both;}
  
  /* Icone du forum */
  
  .iconFO {position:relative;z-index:5;width:210px;}
  
  /* Corps du forum */
  
  .corFO {width:1015px;margin:auto;display:flex;height:230px;}
  
  
  /* Titre de la catégorie */
  
   .cortitCAT {width:1015px;margin:auto;padding:5px;background-position:0% 50%!important;
   background:url('https://zupimages.net/up/18/34/vyiy.png') no-repeat;background-size:100% auto;}
  
  .titCAT h2{background-color:white;display:inline-block;font-family:'Abril Fatface',serif;
  font-size:30px;background:white;padding:5px;color:#AB5D52;}
  
  /* ---------- FIN CATÉGORIES ---------- */

Codage Catégorie (template : index_box) :

IMPORTANT Pour que les catégories s'affichent correctement, allez dans Panneau d'administration > Affichage > Page d'accueil > Structures et Hiérarchie et faites comme ci-dessous :



N'oubliez pas de cliquer sur "enregistrer".

Code:

<ul class="linklist top">
 <!-- BEGIN switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
 </li>
 <li>
 <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
 </li>
 <!-- END switch_user_logged_in -->
 <li>
 <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
 </li>
 <!-- BEGIN switch_user_logged_in -->
 <li class="rightside">
 <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
 </li>
 <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 
 <div class="cortitCAT"><div class="titCAT">{catrow.tablehead.L_FORUM}</div></div>

 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
<div class="corFO">
<img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="iconFO"/>
<div class="milFO"><h{catrow.forumrow.LEVEL} class="hierarchy">
  <span class="avtitFO">{</span> <a href="{catrow.forumrow.U_VIEWFORUM}" class="titFO">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}>
  <div class="descFO">{catrow.forumrow.FORUM_DESC}</div>
    <div class="lastpostFO"><span>
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
      <!-- END switch_topic_title --> / {catrow.forumrow.USER_LAST_POST}
 </span></div>
</div>
  <div class="statFO">
  <div style="display:flex;"><div class="rondstatFO"><div>{catrow.forumrow.TOPICS}</div></div><div class="sujFO">sujets</div></div>
  <div style="display:flex;"><div class="rondstatFO"><div>{catrow.forumrow.POSTS}</div></div><div class="sujFO">messages</div></div>
</div>
  <div class="sfFO" id="virgule">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <script type="text/javascript">jQuery('#virgule').html(jQuery('#virgule').html().replace(/, /g,'')).removeAttr('id');</script>
</div>

                
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 
 <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
 <li>
 <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
 </li>
 <li>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 </li>
 <li class="last">
 <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
 </li>
 <!-- BEGIN switch_delete_cookies -->
 <li class="rightside">
 <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </li>
 <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
 var btn_collapse = $('<div></div>', {
 class: 'btn-collapse'
 });

 var btn_collapse_show = $('<i></i>', {
 class: 'ion-android-add-circle hidden',
 'data-tooltip': '{L_EXPEND_CAT}'
 }).appendTo(btn_collapse);

 var btn_collapse_hide = $('<i></i>', {
 class: 'ion-android-remove-circle',
 'data-tooltip': '{L_HIDE_CAT}'
 }).appendTo(btn_collapse);

 var collapsed = [];

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 $(document).on('click', '.btn-collapse', function() {
 $(this).children('.ion-android-add-circle').toggleClass('hidden');
 $(this).children('.ion-android-remove-circle').toggleClass('hidden');
 $(this).parents('.forabg').toggleClass('hidden');

 if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
 collapsed = readCookie('collapsed').split(',');
 }

 if (!$(this).parents('.forabg').hasClass('hidden')) {
 removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

 createCookie('collapsed', collapsed);
 } else {
 collapsed.push('' + $(this).parents('.forabg').data('cindex'));

 createCookie('collapsed', collapsed);
 }
 });

 $('.forabg').each(function(i) {
 $(this).data('cindex', '' + i);

 $(btn_collapse)
 .clone()
 .attr('id', 'forabg' + i)
 .appendTo($(this).find('.header'));

 if ($.inArray('' + i, collapsed) > -1) {
 $(this).toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
 $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
 }
 });
});

function removeFromArray(item, array) {
 var i = array.indexOf(item);

 if (i > -1) {
 array = array.splice(i, 1);
 }
}

function createCookie(name, value, days) {
 var expires;

 if (days) {
 var date = new Date();
 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
 expires = "; expires=" + date.toGMTString();
 } else {
 expires = "";
 }
 document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
 var nameEQ = encodeURIComponent(name) + "=";
 var ca = document.cookie.split(';');
 for (var i = 0; i < ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) === ' ') c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
 }
 return null;
}
//]]>
</script>


Suppression du QEEL (template 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 -->

<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<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_footer -->

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
 <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
 <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
 <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

Page d'Accueil (Panneau d'administration > Affichage > Page d'Accueil > Généralités) :

Faîtes les modifications pour qu'elles correspondent à votre forum.

Code:

<script src="http://tinyurl.com/var-fa" type="text/javascript"></script>
<center>
                      <span class="wantPA">do you want to be welcomed</span><br /><span class="anoPA">{USERNAME} ?</span>
</center>
<div class="blPA">
                                  
 <!--                    Lien 1                    -->                    
 <div class="lienPA">
                  <a class="liePA" href="url du lien 1">lien 1</a>    1a class="liePA" href="url du lien 1">lien 1</a>                    
 </div>
                                      
 <!--                    Lien 2                    -->                    
 <div class="lienPA">
                      <a class="liesPA" href="url du lien 2">lien 2</a>    <a class="liesPA" href="url du lien 2">lien 2</a>                    
 </div>
                                      
 <!--                    Lien 3                    -->                      
 <div class="lienPA">
                  <a class="liePA" href="url du lien 3">lien 3</a>    <a class="liePA" href="url du lien 3">lien 3</a>                  
 </div>
                                        
 <!--                    Lien 4                    -->                    
 <div class="lienPA">
                  <a class="liesPA" href="url du lien 4">lien 4</a>    <a class="liesPA" href="url du lien 4">lien 4</a>                  
 </div>
                                      
 <!--                    Lien 5                    -->                      
 <div class="lienPA">
                  <a class="liePA" href="url du lien 5">lien 5</a>    <a class="liePA" href="url du lien 5">lien 5</a>                  
 </div>
</div>
<div class="bloPA">
                                
 <!--                   CONTEXTE                   -->                
 <div class="contPA">
                 <span class="titCONT">Titre du contexte</span> Contenu du contexte          
 </div>
                                
 <!--                   IMAGE CENTRALE                   --><img src="https://zupimages.net/up/18/34/0xwj.png" class="imgPA" />                
 <!--                   NOUVEAUTÉS                   -->                
 <div class="contPA">
                 <span class="titCONT">nouveautés</span>  <br /><br /><span class="roseCONT">xx/xx/xxxx :</span> xxx  
 </div>
</div>
<!--                  LES STATISTIQUES                  --><br />
<center>
                <span class="statPA"><span class="FORUMCOUNTPOST"></span> messages & <span class="FORUMCOUNTUSER"></span> survivants   <br /><span class="newmemPA">The new one is <span class="FORUMLASTUSER underPA"></span>.</span>
</center>

Page d'Accueil (CSS) :

Code:

/* ---------- PAGE D'ACCUEIL ---------- */

 /* Nouveau membre */
 
 .underPA {text-decoration:underline #65C5A7!important;}
.underPA a{color:#FDC1B0!important;text-decoration:underline #65C5A7!important;}
 .newmemPA {font-family:'Abril Fatface',serif;font-size:20px;
 text-transform:uppercase;color:#FDC1B0;}
 
 /* Statistiques */
 
 .statPA {color:#A8C9B5;font-family:'Abril Fatface',serif;font-size:20px;}
 

/* Bloc Contexte + News + image */
 
 /* Image */
 
 .imgPA{margin-top:-12px;margin-left:10px;margin-right:10px;}
 
 /* Contexte + news */
 
 .roseCONT {color:#FBC4BB;}
 
 .titCONT,.roseCONT {font-family:'Abril Fatface',serif;font-size:15px;}
 
 .contPA {width:409px;background-color:white;padding:20px;color:black;text-align:justify;
 font-family:'Encode Sans Condensed',sans-serif;overflow:auto;line-height:15px;font-size:13px;}
 
 
 /* Bloc */
 
 .bloPA{margin:auto;width:1013px;padding:10px;height:250px;
 background-color:#FDC1B0;display:flex;}
 
 /* Les liens */
 
 .lienPA {background-color:#9BEAD4;margin:5px;width:100%;overflow:hidden;
 font-family:'Abril Fatface';text-align:center;height:32px;}
 .lienPA:nth-child(2n) {background-color:#65C5A7;}
 
 .liePA,.liesPA {display:block;padding:5px;width:100%;font-size:15px;}
a.liePA,a.liesPA{color:white!important;}
 
 .lienPA .liePA:nth-child(1),.lienPA .liesPA:nth-child(1){background-color:#65C5A7;margin-left:-100%;transition:all 0.5s ease;position:relative;}
 .lienPA .liePA:nth-child(2),.lienPA .liesPA:nth-child(2){background-color:#9BEAD4;margin-top:-17.5%;transition:all 0.5s ease;position:relative;}
 
 .lienPA .liesPA:nth-child(1){background-color:#9BEAD4!important;}
 .lienPA .liesPA:nth-child(2){background-color:#65C5A7!important;}
 
 .lienPA:hover .liePA:nth-child(1),.lienPA:hover .liesPA:nth-child(1){margin-left:0%;}
 .lienPA:hover .liePA:nth-child(2),.lienPA:hover .liesPA:nth-child(2){margin-left:100%;}
 
 /* Bloc */
 
 .blPA {width:1013px;;border:2px solid #FDC1B0;margin:auto;padding:10px;display:flex;}

 /* Welcome to Anonymous */
 
 .wantPA {font-family:'Abril Fatface';color:#FB9C80;font-style:italic;font-size:18px;}
 .anoPA {font-family:'Abril Fatface';color:#65C5A7;text-transform:uppercase;font-size:25px;}
 
  /* ---------- FIN PAGE D'ACCUEIL ---------- */

Barre de navigation + bannière + nouvelles polices (template overall_header) :

Trouvez cette partie-là et modifiez ce qu'il y a à modifier :

Code:

<div id="logoBAN">
  <a href="http://survive.forumactif.com/"><img src="https://zupimages.net/up/18/34/7b7g.png" class="imgBAN"/></a>
  <div class="titBAN"><a href="http://survive.forumactif.com/">LOST</a>
  <span>you just thought you could survive here ?</span>
  </div>
  </div>
</div>

Le code en entier :

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
  <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet"/>
  <link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed" rel="stylesheet"/>
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
 <meta http-equiv="content-script-type" content="text/javascript" />
 <meta http-equiv="content-style-type" content="text/css" />
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
    {RICH_SNIPPET_GOOGLE}

 <!-- BEGIN switch_fb_login -->
 <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
 <script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch( tickerDirParam )
 {
 case 'top' :
 slid_vert = true;
 break;

 case 'left':
 break;

 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;

 case 'right':
 auto_dir = 'prev';
 break;

 default:
 slid_vert = true;
 }

 $(document).ready(function() {

 $('#fa_ticker_content').css('display','block');

 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});

 if (width_max > 0)
 {
 $('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
 if ($(this).width() > width_item)
 {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 if (slid_vert)
 {
 var height_max = h_perso;

 $('ul#fa_ticker_content li').each( function () {
 if ($(this).height() > height_max)
 {
 height_max = $(this).height();
 }
 } );

 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
 $('ul#fa_ticker_content li').height(height_max);
 }


 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 }
 else
 {
 $('ul#fa_ticker_content li:not(:first)').css('display','none');
 $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function(){
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if(pm != null) { pm.focus(); }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if(report != null) { report.focus(); }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(document).ready(function() {
 Ticker.start({
 height : {switch_ticker.HEIGHT},
 spacing : {switch_ticker.SPACING},
 speed : {switch_ticker.SPEED},
 direction : '{switch_ticker.DIRECTION}',
 pause : {switch_ticker.STOP_TIME}
 });
 });
 <!-- END switch_ticker -->
 });

 <!-- BEGIN switch_login_popup -->
            var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

            $(document).ready( function() {
                $(window).resize(function() {
                    var windowWidth = document.documentElement.clientWidth;
                    var popupWidth = $("#login_popup").width();
                    var mypopup = $("#login_popup");

                    $("#login_popup").css({
                        "left": windowWidth/2 - popupWidth/2
                    });
                });
            });
 <!-- END switch_login_popup -->
 //]]>
 </script>

 {GREETING_POPUP}

 <style type="text/css">
 #page-footer, div.navbar, div.navbar ul.linklist {
 display: block !important;
 }

 ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
 display: inline !important;
 }

 <!-- BEGIN switch_ticker_new -->
 .jcarousel-skin-tango .jcarousel-item {
 text-align:center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }
 <!-- END switch_ticker_new -->
 </style>

 {HOSTING_JS}

 <!-- BEGIN google_analytics_code -->
 <script type="text/javascript">
 //<![CDATA[
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

                ga('create', '{G_ANALYTICS_ID}', 'auto');
                <!-- BEGIN google_analytics_code_bis -->
                ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
                <!-- END google_analytics_code_bis -->
                ga('send', 'pageview');
                <!-- BEGIN google_analytics_code_bis -->
                ga('bis.send', 'pageview');
                <!-- END google_analytics_code_bis -->
            ga('set', 'anonymizeIp', true);
 <!-- BEGIN google_analytics_code_bis -->
 ga('bis.set', 'anonymizeIp', true);
 <!-- END google_analytics_code_bis -->
            //]]>
 </script>
 <!-- END google_analytics_code -->

 <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
 <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
  <style type="text/css">
    @font-face {
    font-family: "Raleway";
    src: local("Raleway Black"), local("Raleway-Black"), url("https://fonts.gstatic.com/s/raleway/v12/1Ptrg8zYS_SKggPNwK4vWqZPAA.woff2") format("woff2");
    font-style: normal;
    font-weight: 900;
    unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
  </style>
  <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"/>
</head>

<body id="modernbb">
 <!-- BEGIN hitskin_preview -->
 <div id="hitskin_preview" style="display: block;">
 <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br />
 <span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>

 </div>
 </div>
 <!-- END hitskin_preview -->

 <!-- BEGIN switch_login_popup -->
 <div id="login_popup" style="z-index: 10000 !important;">
 <div class="h3">{SITENAME}</div>
            <div id="login_popup_message">
                {LOGIN_POPUP_MSG}
            </div>
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="button1" value="{L_LOGIN}" />
 <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
 <input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
 </form>
 </div>
 </div>
 <!-- END switch_login_popup -->

 <a id="top" name="top" accesskey="t"></a>
 {JAVASCRIPT}

 <div id="page-header">
 <div class="headerbar">
 
 <div class="wrap">
                          <div id="banniere">
<div id="logoBAN">
  <a href="http://survive.forumactif.com/"><img src="https://zupimages.net/up/18/34/7b7g.png" class="imgBAN"/></a>
  <div class="titBAN"><a href="http://survive.forumactif.com/">LOST</a>
  <span>you just thought you could survive here ?</span>
  </div>
  </div>
</div>
                  <div class="baseNAV">
  <div class="borNAV"><ul>
    <li>{GENERATED_NAV_BAR}</li>
 </ul></div>
</div>
 </div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_blockD" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker_new -->
 </div>

 <div class="conteneur_minwidth_IE">
 <div class="conteneur_layout_IE">
 <div class="conteneur_container_IE">
 <div id="wrap">
 <div id="page-body">

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;">
 <div class="module">
 <div class="inner">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 <!-- END switch_ticker -->

 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <div id="outer-wrapper">
 <div id="wrapper">
 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>

 <div id="container">
 <div id="content-main">
 <div id="main">
 <div id="main-content">

Bas de page (image + crédits) template overall_footer_begin :

Trouvez cette partie-là et modifier l'image :

Code:

<div id="qeel"><img src="https://zupimages.net/up/18/34/o3zn.png" id="logoqeel"/></div>

Code en entier :

Code:

<!-- BEGIN html_validation -->
<div>
 <div>
 <div>
 <div>

<div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <div>
 <div>
<!-- END html_validation -->
 </div>
 </div>
 </div>
 </div>

 <div id="{ID_RIGHT}">
 <!-- BEGIN giefmod_index2 -->
 {giefmod_index2.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index2 -->
 </div>
 </div>
 </div>
 </div>
</div>
 </div>
 </div>
 </div>
</div>


           <div class="baseNAV" style="width:99.99%;">
            <div class="borNAV" style="text-align:justify;font-size:15px;font-family:'Abril Fatface',serif;color:white;">
              <div style="float:left;font-size:70px;margin:-50px 0;">«</div> Forum entièrement graphé et codé par ADÈLYS. Toute reproduction, même partielle, est interdite.
              <div class="clear"></div>
            </div>
          </div>
<div id="qeel"><img src="https://zupimages.net/up/18/34/o3zn.png" id="logoqeel"/></div>


<div id="page-footer">
 <div class="wrap">
 <ul class="footerbar-system">
 <li class="footer-home">
 <a class="icon-home" href="{U_INDEX}" accesskey="h"><i class="ion-ios-home"></i>{L_HOME}</a>
 </li>
 <li class="rightside">
<!-- BEGIN html_validation -->
 </li>
 </ul>
 </div>
</div>
<!-- END html_validation -->

Aperçu :


LE CSS :

Code:

/* ---------- LISTE DES SUJETS ---------- */

/* BLOC de droite */

.droLISUJ {float:left;text-align:center;width:250px;margin-left:10px;
height:90px;color:black;font-size:13px;font-family:'Encode Sans Condensed';}

/* Description du sujet */

.descLISUJ {font-family:'Encode Sans Condensed';font-size:13px;background:#FBFBFB;margin-top:5px;padding:5px;
height:30px;overflow:auto;}

/* Statistiques du sujet */

.statLISUJ {color:#6378A2!important;font-size:14px;}
.statLISUJ a,.statLISUJ a span {color:#6378A2!important;}

/* Titre du sujet */

.titLISUJ {font-size:18px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.titLISUJ a {color:black!important;}

/* Bloc du milieu */

.milLISUJ {float:left;width:500px;margin-left:50px;height:90px;
text-align:center;font-family:'Abril Fatface';}

/* Icône statut du sujet */

.icLISUJ {float:left;margin-top:-30px;}


/* Corps */

.corLISUJ {margin:20px 10px;border:1px solid #74CAAF;padding:10px;height:110px;}
.corLISUJ:nth-child(2n) {border:1px solid #FBA58C;}

/* ---------- FIN LISTE DES SUJETS ---------- */

Template topic_list_box :

Code:

<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
 <!-- BEGIN multi_selection -->
 <script type="text/javascript">

 function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
 {
 alert('MAIN');

 var all_checked = true;

 for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++)
 {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
 {
 all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
 }
 }

 document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
 }

 function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}()
 {
 alert('ALL');

 for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++)
 {
 if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}')
 {
 document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
 }
 }
 }

 </script>
 <!-- END multi_selection -->

 
<!-- END header_table -->

<!-- BEGIN header_row -->
<!-- END header_row -->

<!-- BEGIN topic -->
<div class="corLISUJ">

<img src="{topics_list_box.row.TOPIC_FOLDER_IMG}" class="icLISUJ"/>
    <div class="milLISUJ">
      <span class="titLISUJ">
<a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
</span>
      <span class="statLISUJ">par {topics_list_box.row.TOPIC_AUTHOR} - {topics_list_box.row.REPLIES} réponses et {topics_list_box.row.VIEWS} vues</span>
      <div class="descLISUJ"><!-- BEGIN switch_description -->
 {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
 <!-- END switch_description --></div>
    </div>
<div class="droLISUJ">{L_LASTPOST} {topics_list_box.row.LAST_POST_IMG}
      <br/>par {topics_list_box.row.LAST_POST_AUTHOR}
      <br/>{topics_list_box.row.LAST_POST_TIME}
      <br/><br/>{topics_list_box.row.GOTO_PAGE_NEW}
 <!-- BEGIN nav_tree -->
 {topics_list_box.row.TOPIC_NAV_TREE_NEW}
 <!-- END nav_tree -->
    </div>
    <div class="clear"></div>

</div>
<!-- END topic -->
<!-- BEGIN no_topics -->
<div class="row row1">
 
 <strong>{topics_list_box.row.L_NO_TOPICS}</strong>
 
</div>
<!-- END no_topics -->

<!-- BEGIN bottom -->

<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Photo de profil : 250 x 110 px
Effets :

• Sur la photo de profil (affichage du rang du membre)
  
• Sur les boutons "nouveau" et "répondre"
  
• Sur les boutons "prévisualiser" et "envoyer"
  

IMPORTANT Pour que l'affichage du profil dans le message fonctionne, il faut que dans Panneau d'Administration > Utilisateurs & Groupes > Profils ce soit exactement comme ça (essentiellement l'ordre et l'affichage dans les messages et le profil en oui) :



Il peut y avoir moins d'informations, mais pas plus !

Aperçu :



Le CSS :

Code:

/* ---------- SUJET ---------- */

/* Barre séparatrice */

.barSUJ {margin:20px auto;height:5px;background:#65C5A7;width:50%;}

/* Message dans le message (tu te comprendras) */

.messageSUJ {font-size:13px;color:black;padding:40px;font-family: 'Encode Sans Condensed', sans-serif;}
.messageSUJ img {max-width:100%;}

/* Boutons */

.boutonSUJ {float:left;}
.pseuSUJ {float:right;text-transform:uppercase;font-size:19px;font-family:'Abril Fatface';}

/* Message */

.mesSUJ {margin:10px;padding:20px;border:1px solid #FDC1B0;}

/* Image du rang */

.rankSUJ {position:absolute;    margin-left: 650px;
    margin-top: -25px;}

/* Champs du profil RPG */

.infosvgSUJ span.label span,.infosvdSUJ span.label span {font-weight:bold;color:#65C5A7!important;text-shadow: -1px 0 white, 0 1px white,
      1px 0 white, 0 -1px white;}

.infosvdSUJ {float:left;border-left:5px solid #FB9C80;margin-left:30px;
padding-left:10px;text-align:justify;font-size:13px;overflow:auto;width:300px;
height:80px;font-family: 'Encode Sans Condensed', sans-serif;line-height:15px;}


.infosvgSUJ .infossSUJ:nth-of-type(5) {margin-left:365px!important;margin-top:-60px;position:absolute!important;}
.infosvgSUJ .infossSUJ:nth-of-type(6) {margin-left:365px!important;margin-top:-60px;position:absolute!important;}
.infosvgSUJ .infossSUJ:nth-of-type(7) {margin-left:365px!important;margin-top:-60px;position:absolute!important;}


/* Champs du profil */

.infosvgSUJ {float:left;font-size:13px;height:80px;overflow:hidden;line-height:15px;
width:320;text-align:justify;font-family: 'Encode Sans Condensed', sans-serif;}

/* Infos en vrac - Titre */

.titinfosvSUJ {color: #FB9C80;
    font-family: 'Abril Fatface';
    font-size: 25px;
    margin-left: -10px;
    margin-top: -47px;
    text-shadow: 2px 2px white, -2px -2px #fff;
    height: 60px;
    overflow: hidden;
    padding: 0px;}
.titinfosvSUJ span {font-size: 50px;
    vertical-align: -6px;
    display: inline-block;
    transform: scaleY(1)!important;
    -moz-transform: scaleY(2);
    -o-transform: scaleY(2);}

/* Info Membre */

.corinfomemSUJ {background:#F4F4F4;padding:10px;margin-right:10px;
margin-left:5px;float:left;width:725px;height:110px;margin-top:10px;margin-bottom:10px;}

/* Avatar */

.corvavaSUJ {overflow:hidden;margin-left:10px;width:250px;height:110px;
border:1px solid #FDC1B0;float:left;display:flex;margin-top:10px;margin-bottom:10px;}

.corvavaSUJ img {width:250px;height:110px;margin:auto;max-width:250px!important;}

.infovaSUJ {width:250px;margin-left:-250px;height:111px;padding:15px;background:rgba(255,255,255,0.9);
margin-top:50px;text-align:center;opacity:0;transition:all 0.5s ease-in-out;
font-family: 'Encode Sans Condensed', sans-serif;}

/* Enlever espaces du rang */
.infovaSUJ > br:nth-of-type(-n+1) {
  display: none;
}

.infovaSUJ img {width:auto;height:20px;}
.corvavaSUJ:hover .infovaSUJ {opacity:1;margin-top:0px;}

/* Nouveau & Répondre & Verrouillé */

.cornewrepSUJ {background:#F4F4F4;padding:10px;margin:10px;}

.newSUJ {float:left;transition:border-left 0.5s ease-in-out;border-left:0px solid transparent;}
.newSUJ:hover {border-left:20px solid #FB9C80;}
.repSUJ {float:right;transition:border-right 0.5s ease-in-out;border-right:0px solid transparent;}
.repSUJ:hover {border-right:20px solid #FB9C80;}

/* Titre du sujet */

.accoladetitSUJ {color:#FB9C80;float:left;font-family:'Abril Fatface';
font-size:70px;}
.titSUJ {color:#65C5A7;float:left;font-family:'Abril Fatface';
font-size:25px;margin-top:40px;margin-left:10px;border-bottom:1px solid #FB9C80;
padding-bottom:11px;width:950px;overflow:hidden;text-overflow:ellipsis; white-space: nowrap;}
.titSUJ a {color:#65C5A7!important;}

.corSUJ {width:1000px;margin:auto;}
.clear {clear:both;}

/* ---------- FIN SUJET ---------- */

Le template viewtopic_body :

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };

$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id) {
    try {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0) {
            $('.post--' + id).toggle(0, function() {
 if( $(this).is(":visible") ) {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 } else {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    } catch(e) { }

 return false;
};

//]]>
</script>
<div class="corSUJ">
  <div class="accoladetitSUJ">{</div>
  <div class="titSUJ"><a href="{TOPIC_URL}">{TOPIC_TITLE}</a></div>
  <div class="clear"></div>
  <div class="sub-header-path">
 <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
 {NAV_CAT_DESC}
  </div><br/>
  <div class="cornewrepSUJ">
    <!-- BEGIN switch_user_authpost -->
    <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="newSUJ"/></a>
 <!-- END switch_user_authpost -->
     <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="repSUJ"/></a>
 <!-- END switch_user_authreply -->
    <div class="clear"></div>
  </div>


<div class="topic-actions">
 <!-- BEGIN topicpagination -->
 <div class="pagination">
 {PAGINATION}
 </div>
 <!-- END topicpagination -->
</div>

{POLL_DISPLAY}

<!-- BEGIN postrow -->
  
   <!-- BEGIN hidden -->
 <div class="post {postrow.hidden.ROW_COUNT}">
 <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
 </div>
 <!-- END hidden -->
  
  <!-- BEGIN displayed -->
    <div class="corvavaSUJ">
    {postrow.displayed.POSTER_AVATAR}
    <div class="infovaSUJ">« {postrow.displayed.POSTER_RANK_NEW} »
      <br/><br/>{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
    </div>
    </div>
    <div class="corinfomemSUJ">
    <div class="titinfosvSUJ"><span>«</span> Infos en vrac</div>
    <div class="infosvgSUJ"><!-- BEGIN profile_field -->
 <span class="infossSUJ">{postrow.displayed.profile_field.LABEL}
                                                          {postrow.displayed.profile_field.CONTENT}</span>
 {postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field --></div>
    <div class="infosvdSUJ">{postrow.displayed.POSTER_RPG}</div>
      <div class="rankSUJ">{postrow.displayed.RANK_IMAGE}</div>
    <div class="clear"></div>
    </div>
    <div class="clear"></div>
  
  <div class="mesSUJ">
    <div class="boutonSUJ">
      {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} - {postrow.displayed.POST_DATE_NEW}
    </div>
      <div class="pseuSUJ">{postrow.displayed.POSTER_NAME}</div>
      <div class="clear"></div>
      
      <div class="messageSUJ">{postrow.displayed.MESSAGE}</div>
    
    <!-- BEGIN switch_attachments -->
 <dl class="attachbox">
 <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
 <dd class="attachments">
 <!-- BEGIN switch_post_attachments -->
 <dl class="file">
 <dt>
 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
 </dt>
 <dd>
 <!-- BEGIN switch_dl_att -->
 <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_dl_att -->

 <!-- BEGIN switch_no_dl_att -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}</span>
 <!-- END switch_no_dl_att -->

 <!-- BEGIN switch_no_comment -->
 <span>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</span>
 <!-- END switch_no_comment -->

 <!-- BEGIN switch_no_dl_att -->
 <span><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></span>
 <!-- END switch_no_dl_att -->

 <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
 </dd>
 </dl>
 <!-- END switch_post_attachments -->
 </dd>
 </dl>
 <!-- END switch_attachments -->
    <div class="edited-message">
 {postrow.displayed.EDITED_MESSAGE}
 </div>
    <!-- BEGIN switch_signature -->
 <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
 <!-- END switch_signature -->
    
    </div>
  <div class="barSUJ"></div>
 
 
 <!-- BEGIN first_post_br -->
 <hr id="first-post-br" />
 <!-- END first_post_br -->
 <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>



<div class="topic-actions bottom">
 <!-- BEGIN topicpagination -->
 <div class="pagination">
 {PAGINATION}
 </div>
 <!-- END topicpagination -->

</div>

<!-- BEGIN promot_trafic -->
 <div class="block" id="ptrafic_close" style="display: none;">
 <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-plus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
 </div>
 <div class="block" id="ptrafic_open" style="display:'';">
 <div class="h3"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><i class="ion-ios-minus-outline"></i></a>{PROMOT_TRAFIC_TITLE}</div>
 <ul class="ptrafic">
 <!-- BEGIN link -->
 <li>
 <a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">
 <i class="ion-ios-chatbubble-outline"></i>{promot_trafic.link.TITLE}
 </a>
 </li>
 <!-- END link -->
 </ul>
 </div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
 <div class="h3">{L_FORUM_RULES}</div>
 <div class="clear"></div>
 <table class="postbody">
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules content">
 {RULE_MSG}
 </td>
 </tr>
 </table>
</div>
<!-- END switch_forum_rules -->

<div class="cornewrepSUJ">
    <!-- BEGIN switch_user_authpost -->
    <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="newSUJ"/></a>
 <!-- END switch_user_authpost -->
     <!-- BEGIN switch_user_authreply -->
    <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="repSUJ"/></a>
 <!-- END switch_user_authreply -->
    <div class="clear"></div>
  </div>

<!-- BEGIN switch_user_logged_in -->
 <a name="quickreply"></a>
 {QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
 <fieldset class="jumpbox">
 <label>{L_JUMP_TO}:</label>
 {S_JUMPBOX_SELECT}
 <input class="button2" type="submit" value="{L_GO}" />
 </fieldset>
</form>

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
 <fieldset class="quickmod">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
 <label>{L_MOD_TOOLS}:</label>
 {S_SELECT_MOD}
 <input class="button2" type="submit" value="{L_GO}" />
 </fieldset>
</form>

<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
 <div class="block">
 <div class="h3">{L_TABS_PERMISSIONS}</div>
 {S_AUTH_LIST}
 </div>
<!-- END show_permissions -->
  </div>

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>
<script>
$(document).ready(function() {
 $('pre, code').each(function(i, block) {
 hljs.highlightBlock(block);
 });

 $('.post').each(function() {
 if (!$(this).find('.postprofile-avatar').html().length) {
 $(this).find('.postprofile-rank').css('border-bottom', 'none');
 $(this).find('.postprofile > dl > dt').css('min-height', $(this).find('.post-head').innerHeight());
 }
 });
});
</script>

Aperçu :



Le CSS :

Code:

/* ---------- LISTE DES MEMBRES ---------- */

.corLISMEM {width:1000px;margin:auto;}

/* Gauche « + Droite » */

.guilLISMEM {font-family:'Abril Fatface',serif;color:#FB9C80;font-size:150px;
float:left;margin-top:-35px;}

/* Titre "Liste des membres" */

.titLISMEM {float:left;font-family:'Abril Fatface',serif;color:#65C5A7;border-bottom:1px solid #FB9C80;
text-transform:uppercase;font-size:50px;width:85%;text-align:center;
padding-top:50px;padding-bottom:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* Bloc du membre */

.bLISMEM {border:2px solid #FDC1B0;display:inline-block;padding:10px;width:275px;
margin:10px 10px;height:270px;}

/* Avatar */

.bLISMEM img {width:250px;max-width:250px!important;height:110px;}

/* Pseudo */

.pseLISMEM {font-family:'Abril Fatface',serif;text-transform:uppercase;font-size:18px;
display:block;text-align:left;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.pseLISMEM a span {color:black!important;}

/* Infos du joueur */

.infoLISMEM {height:90px;margin-top:10px;overflow:auto;text-align:justify;font-family:'Encode Sans Condensed',sans-serif;font-size:13px;}
.infoLISMEM span {color:#65C5A7;font-weight:bold;}

/* Image MP */

.mpLISMEM {border:2px solid #FDC1B0;width:50px;height:50px;border-radius:50%;background:white;
position:absolute;margin-top:-15px;text-align:center;overflow:hidden;
margin-left:40px;}
.mpLISMEM img {    margin-top: 10px;
    width: auto;
    height: 25px;}

/* Image Profil */

.prfLISMEM {border:2px solid #FDC1B0;width:50px;height:50px;border-radius:50%;background:white;
position:absolute;margin-top:-15px;text-align:center;overflow:hidden;
margin-left:150px;}
.prfLISMEM img {    margin-top: 12px;
    width: auto;
    height: 20px;}

/* ---------- FIN LISTE DES MEMBRES ---------- */

Template memberlist_body :

Code:

<div class="corLISMEM">
  <div class="guilLISMEM">«
  </div>
  <div class="titLISMEM">{PAGE_TITLE}</div>
  <div class="guilLISMEM">»
  </div>
  <div class="clear"></div>
  <form action="{S_MODE_ACTION}" method="get">
<div class="panel">
   <h2 class="h3">{L_ORDER_OR_SELECT}</h2>
   <p style="text-align:right; margin: 0; padding: 0;">
      {L_USER_SELECT} <input type="text" class="inputbox tiny" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />      
      {L_SELECT_SORT_METHOD} {S_MODE_SELECT}      
      {L_ORDER} {S_ORDER_SELECT}     &nbsp;
      {S_HIDDEN_SID}
      <input class="button2" type="submit" name="submit" value="{L_SUBMIT}" />
   </p>
</div>
</form>
  <div style="text-align:center;">
    <!-- BEGIN memberrow -->
    <div class="bLISMEM">
    <span class="pseLISMEM">
    <span style="color:#FB9C80;font-size:25px;">{</span> <a href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></span>
    <a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a>
      <div class="infoLISMEM"><span>Humeur :</span> {memberrow.INTERESTS}
        <br/><span>Date d'inscription :</span> {memberrow.JOINED}
        <br/><span>Dernière visite :</span> {memberrow.LASTVISIT}
        <br/><span>Nombre de messages :</span> {memberrow.POSTS}</div>
    <div class="mpLISMEM">{memberrow.PM_IMG}</div>
    <div class="prfLISMEM">{memberrow.WWW_IMG}</div>
    </div>
    <!-- END memberrow -->

   
  </div>

<div class="pagination" style="float:none;">
   <!-- BEGIN switch_pagination -->
   {PAGINATION}<br /><br />
   <!-- END switch_pagination -->
</div>
</div>

Aperçu :


Le CSS :

Code:

/* ---------- AFFICHAGE DU PROFIL ---------- */

.corPRF {width:1000px;margin:auto;}

/* Gauche « + Droite » */

.guilPRF {font-family:'Abril Fatface',serif;color:#FB9C80;font-size:150px;
float:left;margin-top:-45px;}

/* Pseudo / Nom Prénom */

.npPRF {float:left;font-family:'Abril Fatface',serif;color:black;border-bottom:1px solid #FB9C80;
text-transform:uppercase;font-size:30px;width:85%;text-align:center;
padding-top:50px;padding-bottom:15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

/* Corps du haut avec avatar + rang */

.blPRF {background:#F9F9F9;width:100%;height:110px;margin-top:-20px;}

/* Avatar */

.avaPRF {width:250px;height:110px;float:left;margin-top:-20px;}
.avaPRF img {max-width:250px!important;width:250px;height:110px;}

/* Rang (texte + image) */

.rankPRF {float:left;font-family:'Abril Fatface',serif;color:#FB9C80;text-transform:uppercase;
font-size:25px;margin-left:50px;margin-top:15px;}
.rankPRF img {position:absolute;margin-left:620px;margin-top:-35px;}

/* Infos profil */

div.infoPRF {border:2px solid #FDC1B0;padding:10px;margin-top:10px;width:90%;height:100px;font-family:'Encode Sans Condensed',sans-serif;
font-size:13px;color:black;}
div.infoPRF div {width:50%;}
.infoPRF .depPRF:nth-of-type(5) {position: absolute;margin-top: -75px;margin-left: 450px;}
.infoPRF .depPRF:nth-of-type(6) {position: absolute;margin-top: -57px;margin-left: 450px;}
.infoPRF .depPRF:nth-of-type(7) {position: absolute;margin-top: -37px;margin-left: 450px;}
.infoPRF .depPRF:nth-of-type(8),.infoPRF .depPRF:nth-of-type(9),.infoPRF .depPRF:nth-of-type(10) {display:none;}

.infoPRF .depPRF {display:block;}
.infoPRF .depPRF .field_uneditable {display:inline;}

.infoPRF span.depPRF span {color:#65C5A7!important;font-weight:bold;}

/* Contact */

.contactPRF {float:left;width:50%;margin-top:20px;}
.contactPRF img {display:inline;height:20px;}
.contactPRF .field_uneditable {display:inline;}

/* Administrer l'utilisateur */

.admPRF {margin-top:20px;float:left;font-size:15px;color:black;font-family:'Abril Fatface',serif;width:40%;text-align:right;}


/* ---------- FIN AFFICHAGE DU PROFIL ---------- */

Le template profile_view_body :

Code:

<div class="corPRF">
  <div class="guilPRF">«
  </div>
  <div class="npPRF">{USERNAME}</div>
  <div class="guilPRF">»
  </div>
  <div class="clear"></div>
  <div class="blPRF">
  <div class="avaPRF">
  {AVATAR_IMG}
  </div>
  <div class="rankPRF">{POSTER_RANK}</div>
    <div class="clear"></div>
  </div>
  <div class="infoPRF"><div><!-- BEGIN profile_field --><span class="depPRF">{profile_field.LABEL} {profile_field.CONTENT}</span><!-- END profile_field -->
  </div></div>
 
    <div class="contactPRF"><!-- BEGIN contact_field -->
      {contact_field.CONTENT}
      <!-- END contact_field --></div>
  <div class="admPRF"><!-- BEGIN switch_auth_user -->{ADMINISTRATE_USER} {BAN_USER}<!-- END switch_auth_user --></div>
  <div class="clear"></div>
</div>


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

Pour les forums :

&

Code:

https://zupimages.net/up/18/34/leiz.png & https://zupimages.net/up/18/34/se8h.png

Pour les sujets :

& & & & &

Code:

https://zupimages.net/up/18/37/43v4.png & https://zupimages.net/up/18/37/6tx1.png & https://zupimages.net/up/18/37/t6on.png & https://zupimages.net/up/18/43/gt7n.png & https://zupimages.net/up/18/43/hhkk.png & https://zupimages.net/up/18/43/xg6z.png

Boutons :

& & & & & & & &

Code:

https://zupimages.net/up/18/37/17dk.png & https://zupimages.net/up/18/37/l68x.png & https://zupimages.net/up/18/37/yark.png & https://zupimages.net/up/18/37/9yzd.png & https://zupimages.net/up/18/37/8ci4.png & https://zupimages.net/up/18/43/jyrb.png & https://zupimages.net/up/18/43/ch50.png & https://zupimages.net/up/18/43/aasl.png & https://zupimages.net/up/18/43/wiqm.png