epsilon
forum de libre service de codage,
possibilité de commander des designs,
aucune inscription
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
-34%
Le deal à ne pas rater :
[CDAV] SAMSUNG Galaxy S20FE 128Go 5G Bleu à 329€
329 € 499 €
Voir le deal

Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.
[INDEX FLORAL] 2nCanlV

La bannière (nom du forum en code)


Panneau d'administration > Affichage > Templates > Général > overall_header, juste après la balise head qui se trouve à la ligne 3 ou 4, mettez votre HTML :
Code:
<div class="citation"><span>«</span> La petite citation pour faire joli. <span>»</span></div>
<div class="souscit">JAuteur de la citation</div>
  <div class="bannierefo"><img src="IMAGE_DE_LA_BANNIERE"/><div class="nomfofo"><a href="/">Nom du forum</a></div></div>

Ensuite, Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:
@font-face {font-family: 'Inkland';src: url('https://files.jcink.net/uploads/lauzshibi/Inkland.ttf') format('truetype');font-weight: normal;font-style: normal;}
@font-face {font-family: 'watermelon_script_demoregular'; src: url('https://dl.dropboxusercontent.com/s/nikyz8w5e0aq8og/watermelon_script_demo-webfont.woff2') format('woff2'),url('https://dl.dropboxusercontent.com/s/y4yltqymuux3ptm/watermelon_script_demo-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
.citation { /*la citation*/
    text-align: center;
    font-family: watermelon_script_demoregular;
    font-size: 25px;
    margin-top: 90px;
    color: #bc4c5b;
}
.citation span { /*guillemets de la citation*/
  font-size:45px;
  font-weight:800;
}
.souscit { /*auteur de la citation*/
    font: 8px 'PT sans';
    font-weight: 100;
    margin-top: -5px;
    margin-left: 20px;
    text-align: center;
    text-transform: uppercase;
    display: block;
    color: #d2cab7;
    letter-spacing: 2px;
    margin-bottom:50px;
    text-decoration: underline;
}
.bannierefo img{ /*placement de l'image de la bannière, pour qu'elle prenne toute la largeur*/
  width:100%;
  margin:0;
  /*border-bottom:white solid 20px;*/
  border-top:white solid 20px;
}
.bannierefo { /*placement de la bannière*/
  text-align:center;
  position: relative;
}
.bannierefo::after { /*le content permet de rajouter une petite phrase sous la bannière pour décrire votre forum*/
  content: "truc pour décrire votre forum";
  font-family: 'Calibri', sans-serif;
font-style: italic;
font-size: 12px;
color: #bc4c5b;
text-transform: lowercase;
background: #fff;
text-align: center;
letter-spacing: 4px;
  height: 20px;
  display: block;
}
.nomfofo { /*Positionnement du nom du forum*/
    position: absolute;
    top: calc(50% - 114px);
    width: 100%;
}
.nomfofo a { /*Le lien du nom du forum*/
  text-decoration:none;
  font-family:inkland;
  font-size:150px;
  /*position:relative;
  top:-280px;*/
  transition:all 1.2s;
  color:white;
  text-shadow: 2px 3px 0px #bc4c5b, 0px 1px #454545, 1px 0px #bc4c5b, -1px 0px #bc4c5b, 0px -1px #bc4c5b;
 }
 .nomfofo a:hover { /*Au passage de la souris, le titre du forum change de couleur*/
  font-size:155px;
  color:#bc4c5b;
  transition:all 1.2s;
  text-shadow: 2px 3px 0px #fff, 0px 1px #bc4c5b, 1px 0px #fff, -1px 0px #fff, 0px -1px #fff;
 }

La Page d'accueil


Panneau d'administration > Affichage > Page d'accueil > Généralités, venez mettre votre HTML :
Code:
<div class="liensut">
<div class="lestruk">
<table>
<tr>
<td>
<span><em class="fas fa-chess-queen"></em></span>contexte.            
 </td>
                                            
 </tr>
 </table>
                                      
 </div>
                                      
 <div class="baseslide">
                                        
 <div class="slideshow-container">
                                          
 <div class="mySlides fade">
                          <img src="/" />                          
 <div class="insideslide">
                                  
 <h2>
                  Titre du slide.                  
 </h2>
                                              
 <div class="thecaptioninside">
                           Description ou texte.                
 </div>
                                            
 </div>
                                          
 </div>
                                          
 <div style="display:none" class="mySlides fade">
                          <img src="/" />                          
 <div class="insideslide">
                                  
 <h2>
                  Titre du slide.                
 </h2>
                                              
 <div class="thecaptioninside">
                          Description ou texte.                
 </div>
                                            
 </div>
                                          
 </div>
                                          
 <div style="display:none" class="mySlides fade">
                          <img src="/" />                          
 <div class="insideslide">
                                  
 <h2>
                  Titre du slide.                
 </h2>
                                              
 <div class="thecaptioninside">
                           Description ou texte.
 </div>
                                            
 </div>
                                          
 </div>
                         <a onclick="plusSlides(-1)" class="prev">❮</a>      <a onclick="plusSlides(1)" class="next">❯</a>                      
 </div>
                                        
 <div style="text-align:center">
                        <span onclick="currentSlide(1)" class="dot"></span>      <span onclick="currentSlide(2)" class="dot"></span>      <span onclick="currentSlide(3)" class="dot"></span>                      
 </div>
                                      
 </div>
</div>
<div class="linksut">
                                      
 <div class="linkuu">
                    <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                   <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                   <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                 <a class="hoversito link6" href="/">Lien</a>                  
 </div>
                                      
 <div class="linkuu">
                 <a class="hoversito link6" href="/">Lien</a>                
 </div>
</div>
<div class="autourblok">
                                      
 <div class="titlepredef">
                  nos beaux prédéfinis                  
 </div>
                                    
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /><a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                        
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /><a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                        
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /><a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                        
 <div style="background-image:url('VOTRE IMAGE ICI')" class="S2">
                                  
 <div class="S3">
                  <span style="font-size:18px; letter-spacing:-2px; font-family:montserrat;">Nom prénom</span><br /> <a href="/">la fiche</a>                  
 </div>
                                  
 </div>
                                      
 <center>
                
 <div class="vte1">
         <a target="_blank" href="/">V</a>        
 </div>
                
 <div class="vte1">
         <a target="_blank" href="/">O</a>        
 </div>
                
 <div class="vte">
         <img src="https://imgur.com/SXoXzr8.png" />        
 </div>
                
 <div class="vte1">
         <a target="_blank" href="/">T</a>        
 </div>
                
 <div class="vte1">
         <a target="_blank" href="/">E</a>        
 </div>
                
 </center>
</div>
                  
<center>
                                      
 <div class="bandetop">
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>              
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>        
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>            
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                 <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                  
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>                
 </div>
                                        
 <div class="topparto">
                 <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                        
 <div class="topparto">
                  <a target="_blank" href="/"><img src="/" /></a>
            
 <div class="topparto">
       <a target="_blank" href="/"><img src="/" /></a>              
 </div>
            
 <div class="topparto">
                <a target="_blank" href="/"><img src="/" /></a>
 </div>
                                      
 </div>
</center><script>
  var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
  </script>

Ensuite, Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:
 .vte {
    display:inline-block;
  }
.vte1 {
    display: inline-block;
    position: relative;
    top: -14px;
    margin: 20px;
}
.vte1 a {
    color: #bc4c5b;
    font-size: 42px;
    font-weight: 900;
    font-family: Open Sans condensed;
    font-style: italic;
    transition: all 800ms;
}
.vte1 a:hover {
  transition:all 800ms;
  color:#d2cab7;
  text-shadow: 2px 3px 0px #bc4c5b, 0px 1px #454545, 1px 0px #bc4c5b, -1px 0px #bc4c5b, 0px -1px #bc4c5b;
  font-size:45px;
}
.fondbann {
    height: 668px;
    background: white;
    margin: 0;
    padding: 20px;
}
.liensut {
  width:1000px;
  margin:auto;
  position:relative;
  height:330px;
}
.lestruk {
    width: 300px;
    position: absolute;
    top: 15px;
    left: 25px;
    line-height: 12px;
    text-align: justify;
    background: #d2cab7;
    padding: 20px;
    border-left: 3px solid #bc4c5b;
    overflow: auto;
    height: 262px;
    text-transform: lowercase;
    letter-spacing: 1px;
}
.lestruk span {
    font: 700 20px/1 calibri;
    float: left;
    margin: 5px 15px 5px -5px;
    padding: 28px;
    background: #bc4c5b;
    color: white;
}
.baseslide {
    padding: 10px;
    width: 580px;
    height: 280px;
    position: absolute;
    right: 25px;
    top: 15px;
    background: #f4f4f4;
    border: 1px solid #d2cab7;
}
.slideshow-container {
  max-width: 950px;
  position: relative;
  margin: auto;
}
.mySlides {
  display: none;
}
.prev, .next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    color: #fff!important;
}
.next {
  right: 0;
}
.prev {
left:0;
}
.prev:hover, .next:hover {
  background-color:#d2cab7;
}
.insideslide {
    font-family: Dancing Script;
    background: #f4f4f4;
    color: #212121;
    font-size: 15px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    transform: translateY(10px);
    width: 560px;
    padding: 10px;
    height: 30px;
    overflow: hidden;
    transition: 0.7s ease-in-out;
}
.thecaptioninside {
  width:500px;
  height:50px;
  padding:30px;
  overflow-y:auto;
  text-align:justify;
  font-family:Droid Serif;
  font-size:12px;
  line-height:18px;
}
.insideslide h2 {
  width:100%;
  font-family:watermelon_script_demoregular;
  font-size:20px;
  text-align:center!important;
  text-transform:lowercase;
  letter-spacing:6px;
  position:relative;
  color:#bc4c5b;
  top:-10px;
}
.mySlides:hover .insideslide {
  height:150px;
}
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 10px 2px;
  background-color: #ccc;
  border-radius:100%;
  display: inline-block;
  transition: background-color 0.6s ease-in-out;
  border:1px solid transparent;
}
.active, .dot:hover {
  background-color: #bc4c5b;
  border:1px solid #454545;
}
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
.linksut {
  width:990px;
  margin:0 auto;
  padding:5px;
  text-align:center;
}
.linkuu {
  background:#ddd;
  padding:5px;
  width:170px;
  height:20px;
  display:inline-block;
  vertical-align:top;
  margin:5px;
}
a.hoversito {
  color:#bc4c5b;
  font-family: 'Droid Sans', sans-serif;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
  display:block!important;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  top:2px;
  transition: color .3s cubic-bezier(0.11, 0.7, 0, 1);
}
.link6{
  position: relative;
  z-index:1;
}
.link6:after {
  position: absolute;
  top:0; bottom: 0;
  right: 0;left: 0;
  background-color:#bc4c5b;
  content: "";
  transform: translate3d(-101%,0,0);
  z-index:-1;
  transition: transform .3s cubic-bezier(0.11, 0.7, 0, 1);
}
.link6:hover {
  color: #fff!important;
  padding:5px;
  margin-top:-7px;
  height:20px;
  width:170px;
  margin-left:-5px;
}
.link6:hover:after {
  transform: translate3d(0,0,0);
}
.autourblok {
padding:10px;
  width:980px;
  margin:0 auto;
  position:relative;
  top:20px;
  text-align:center;
}
.titlepredef {
    background: #d2cab7;
    padding: 5px;
    color: #bc4c5b;
    font-family: watermelon_script_demoregular;
    font-size: 20px;
    font-weight: 100!important;
    letter-spacing: 2px;
}
.S2 {
    width: 230px;
    height: 60px;
    display: inline-block;
    margin: 5px;
    background-position:50%;
    border:1px solid #AAA;
    overflow: hidden;
    transition:all 800ms;
}
.S3 {
    background:rgba(198, 76, 91, 0.5);
    color: #fff;
    padding-top: 15px;
    height: 45px;
    width: 230px;
    font-size: 8px;
    font-family: calibri;
    opacity:0;
    transform: scale(2,2);
  transition:all 800ms;
}
.S3 a {
    font-size: 14px;
    font-family: calibri;
    color: white;
    text-decoration: none;
}
.S2:hover .S3 {
  opacity:1;
    transition:0.4s linear;
    transform: scale(1,1);
}
.bandetop {
  width:1000px;
  margin:0 auto;
  position:relative;
  top:-10px;
  height:80px;
}
.topparto {
margin:5px;
  display:inline-block;
}
.topparto img {
  width:40px;height:40px;
  border: solid 1px #bc4c5b;
}
.lestruk td {
    font-size: 10px;
    text-align: justify;
    color: #bc4c5b;
}

La barre de navigation


Panneau d'administration > Affichage > Templates > Général > overall_header, à la place de balise { GENERATED_NAV_BAR }, remplacez par :
Code:
<!-- DEBUT BARRE NAVIG -->
 <div id="userlinkss">
 <div class="userlinkcontrols">
 <div class="userlinkav">
 <div class="userav1">
                     <div class="userav">
                       <div id="avatar_nav">
                                                          <div class="menu-right">
                           <div class="js-avatar"><div class="js-avatar2"></div></div>
                                                            <h1><i class="fas fa-book"></i> Insomnia</h1>
                                   <div class="bonjour">
                                           Bienvenue
                           <span class="js-username"></span>
                             !
                                   </div>
                                                          </div>
                                                          
                           </div>
                       </div>
                 </div>
               </div>
            
           <div class="menuposition">
             {GENERATED_NAV_BAR}
           </div>
           </div>
          
         <div class="g-3" style="display: none;" align="center">
             <div class="username">Bonjour invité!</div>
           </div>
        </div>
      <!-- FIN BARRE NAVIG -->

Ensuite, Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:
/**********BARRE NAVII*****/
#userlinkss {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 99;
    border-bottom: 1px solid #d2cab7;
    background-color: #f1f1f1;
    height: 60px;
}
.js-avatar {
    width: 40px;
    height: 40px;
    border-radius: 100%;
    padding: 5px;
    border: 1px solid #bc4c5b;
    margin: 3px;
    float: right;
    position: relative;
    right: 15px;
  overflow:hidden;
}
.js-avatar2 {
     background-size: cover;
    width:40px;
    height: 40px;
    border-radius: 100%;
    background-image: url(http://placehold.it/200);
}
.js-avatar img {
    width: 130%;
    margin-top: -10px;
    margin-left: -6px;
}
.menu-right {
      position: absolute;
    top: 0px;
    height: 60px;
    right: 0px;
    width: 300px;
    background-color: #ededed;
    border-left: 1px solid #d2cab7;
    padding-right: 20px;
}
.menu-right h1 {
    color: #d2cab7;
    font-style: italic;
    font-weight: 100!important;
    text-shadow: 1px 0px #fff, 0px 1px #fff, 0px -1px #fff, -1px 0px #fff;
    text-align: center;
    margin: -5px 0 0 10px;
    font-family: OPen Sans Condensed;
    font-size: 40px;
}
.bonjour {
    font: 8px 'PT sans';
    margin-top: -5px;
    margin-left: 10px;
    text-align: left;
    text-transform: uppercase;
    color: #bc4c5b;
    letter-spacing: 2px;
}
.menuposition a:hover {
    color: #eaeaea !important;
    transition: 0.6s all;
  text-decoration:none !important;
}
.menuposition a {
    height: 18px;
    width: 18px;
    padding: 10px;
    text-align: center;
    transition: 0.6s all;
}
.menuposition {
    position: absolute;
    top:22px;
    left: 20px;
}
.menuposition a[href="/"]:before {
    content: "\f015";
    font-family: FontAwesome;
    font-size: 15px;
        margin: 5px;
}
.menuposition a[href="/faq"]:before {
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f128";
        margin: 5px;
}
.menuposition a[href="/search"]:before {
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f002";
        margin: 5px;
}
.menuposition a[href="/memberlist"]:before {
    font-family: FontAwesome;
    font-size: 13px;
    content: "\f0ca";
        margin: 5px;
}
.menuposition a[href="/groups"]:before {
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f080";
        margin: 5px;
}
.menuposition a[href*="/profile"]:before {
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f21b";
        margin: 5px;
}
.menuposition a[href*="/privmsg"]:before {
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f27b";
        margin: 5px;
}
.menuposition a[href*="/login"]:before {
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f084";
        margin: 5px;
}
.menuposition a[href*="/register"]:before {
    font-family: FontAwesome;
    font-size: 15px;
    content: "\f090";
        margin: 5px;
}
a.mainmenu.M14_newMp:before {
    content: "\f086";
    color: #eaeaea;
}
.M14_newMp {
    position: relative;
}
a.mainmenu.M14_newMp:after {
    content: "!";
    position: absolute;
    top: 6px;
    right: -4px;
    font-size: 15px;
    font-family: roboto;
    background: #60acb3;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
}
a.mainmenu.M14_newMp:hover:before {
    color: white !important;
    transition: 0.6s all;
}
a.mainmenu.M14_newMp{color:#454545 !important;}
/*Apparence MP sur la Toolbar*/
a.M14_alertMp {
color: white !important;
font-size: 12px !important;
text-decoration: none !important;
margin-right: 50px;
line-height: 30px;
background-color: red;
padding: 0 5px;
}
a.mainmenu {
    color:#d2cab7;
    font-family: 'Roboto Condensed';
    text-transform: uppercase;
}

Pour finir, allez ajouter un Javascript qui permettra d'afficher le nom ainsi que l'avatar de l'invité ou de la personne connectée :
Panneau d'administration > Modules > HTML & Javascript > Gestions des codes Javascript > Créer un nouveau Javascript > Cliquez sur bien "toutes les pages". Copiez collez ce code :
Code:
$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    })
});

Dernier Javascript, au même endroit, recréez en un nouveau et ajoutez ce code pour que les MP s'affichent quand un MP est reçu :
Code:
jQuery(function(){      
    $('a.mainmenu[href="/privmsg?folder=inbox"]').html('0 Message');

    $.get('/privmsg?folder=inbox' , function(data){
    var mp= $(data).find('form[action="/privmsg?folder=inbox"] img[title="Message Non-lu"]').length;
    if(mp==1)
    {
    $('a.mainmenu[href="/privmsg?folder=inbox"]').html(''+mp+' Message').addClass('M14_newMp');
$('#fa_menu').before('<a href="/privmsg?folder=inbox"class="M14_alertMp">Vous avez un message privé</a>');

    }
    else if(mp>1)
    {
    $('a.mainmenu[href="/privmsg?folder=inbox"]').html(''+mp+'').addClass('M14_newMp');
$('#fa_menu').before('<a href="/privmsg?folder=inbox"class="M14_alertMp">Vous avez '+mp+'  messages privés</a>');


    }
    });
    });

Les catégories :


Panneau d'administration > Affichage > Templates > Général > Index_box; remplacez la totalité de votre template par ce HTML :
Code:
<div class="stpentour">
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
    <div class="tleCAT">{catrow.tablehead.L_FORUM}</div>

 <!-- END tablehead -->
     <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow -->
     <div class="mdlCAT">
       <div class="blocFRM">
          <div class="newsmessages">
            <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" />
          </div>
          <div class="tleFRM">
             <a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a>
             <div class="descFRM">{catrow.forumrow.FORUM_DESC}</div>
          </div>
         <div class="separation"><img src="https://imgur.com/qBGk54Z.png"/></div>
          <div class="right">
             <div class="sjtFRM">
             {catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages
             </div>
             <div class="lastpost">{catrow.forumrow.LAST_POST}</div>
          </div>
          <div class="ava-dernier">
            <!-- BEGIN avatar -->
            {catrow.forumrow.avatar.LAST_POST_AVATAR}
            <!-- END avatar -->
          </div>
        <div class="sousforumFRM">
        {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </div>
          <script type="text/javascript">$('.sfFRM').each(function(){$(this).html($(this).html().replace(/>, /g,"><br /> "));});</script>
      </div>
   </div>
</div>
<!-- END forumrow -->
<!-- END catrow -->

Ensuite, Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:
/********CATEGORIES*********/
.stpentour {
  width:100%;
}
.tleCAT {
    height: 50px;
    width: 885px;
    padding: 30px;
    background: pink;
    outline: 1px solid #ffffff;
    outline-offset: -3px;
    background-image: url(https://imgur.com/lTgNRKb.png);
    filter: grayscale(30%);
    position: relative;
    background-attachment: fixed;
    background-size: 100%;
    top: -15px;
    left: 10px;
}
.tleCAT h2 {
    text-transform: lowercase;
    font-style: italic;
    margin-left: 470px;
    font-size: 46px;
    text-align: right;
    color: #ffffff;
    text-shadow: 0px 1px 2px #000000;
    font-family: inkland;
    position: relative;
    top: -50px;
}
.mdlCAT {
    width: 900px;
    min-height: 226px;
    margin: 0 auto;
    background-color: #fbfbfb;
    box-shadow: 0px 0px 1px 2px #e2e2e2;
    margin-bottom: 20px;
}
.newsmessages .imgFRM {
    position: absolute;
    width: 215px;
    height: 220px;
    margin-left: -56px;
}
  .tleFRM {
    position: absolute;
    height: 50px;
  text-decoration:none;
  }
.tleFRM a {
    text-decoration: none !important;
    color: #bc4c5b;
    font-family: watermelon_script_demoregular;
    font-size: 20px;
    font-style: italic;
    border-bottom: 1px solid #bc4c5b;
    margin-left: 174px;
    letter-spacing: 1px;
    position: relative;
    top: 15px;
    text-transform: lowercase;
}
.descFRM {
    position: relative;
    width: 458px;
    height: 100px;
    left: 37%;
    top: 29px;
    padding: 5px;
    font-family: calibri;
    font-size: 11px;
    text-align: justify;
    overflow: auto;
    color: #454545;
}
.separation {
    text-align: center;
    position: relative;
    left: 640px;
    top: 34px;
    width: 20px;
}
  .right {
    float:right;
    margin:5px;
  }
.sjtFRM {
    font-family: calibri;
    text-transform: uppercase;
    font-size: 10px;
    margin-top: -100px;
    text-align: center;
    margin-right: 56px;
    width: 130px;
    padding: 6px;
    border: 1px solid #d2cab7;
}
  .lastpost {
    font-family:'Roboto condensed';
    font-size:10px;
    color:#454545;
    margin-top:50px;
  }
.lastpost a {
    font-family: 'Roboto condensed';
    font-size: 12px;
    color: #454545 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    font-style: italic;
}
.ava-dernier {
    float: right;
    margin-right: -202px;
    margin-top: -156px;
    border: 5px solid #d2cab7;
    height: 70px;
    overflow: hidden;
    right: 0;
    border-radius: 100%;
    width: 70px;
}
.ava-dernier img {
    width: 178%;
    position: relative;
    left: -20px;
    top: -83px;
}
.sousforumFRM {
  width:880px;
  margin-top:60px;
  margin-left:10px;
}
.sousforumFRM a {
    text-transform: uppercase;
    border-top: 1px solid #e8c9d8;
    text-decoration: none !important;
    color: #454545 !important;
    font-size: 10px;
    font-family: calibri;
}
Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.

Le QEEL & le footer


Panneau d'administration > Affichage > Templates > Général > Index_body; entre les balises :
Code:
<!-- BEGIN disable_viewonline -->
et
Code:
<!-- END disable_viewonline -->
Copiez ce HTML :
Code:
<div class="linepng"><img src="https://imgur.com/kUhQX83.png"/></div>
<div class="textequeel">Want to see<p>MORE ?</p></div>
<!--<div style="width:100%; position:absolute;height:836px;left:0;margin-top:-290px;">
  <div class="monta"><img src="https://imgur.com/JJFRCgj.png"/></div></div>-->
<div id="qeel">
<div class="fondqeel" style="height:1280px;"></div>
<div class="titleqeel">Board statistics</div>
  <div class="lesliensutiles"><a href="/memberlist?mode=today_posters">Top 20 du jour</a><a href="/memberlist?mode=overall_posters">Top 20 du forum</a><a href="/search?search_id=activetopics">Sujets actifs du jour</a><a href="/?mode=delete_cookies">Supprimer les cookies</a><a href="/search?search_id=newposts">Voir les messages non lus</a><a href="/?mark=forums">Marquer tous les forums comme lus</a></div>
<div class="boxonline">
<div class="statsonline">{TOTAL_USERS_ONLINE}</div>
<div class="oukisson">{LOGGED_IN_USER_LIST}</div>
<div class="totalonline"><table><script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('onlineuh').innerHTML.replace(/Utilisateurs enregistrés :/," ") .replace(/test/," ");</script>{L_CONNECTED_MEMBERS}</table></div>
<div class="newmember">{NEWEST_USER}</div>
   <div id="cadre-qeel-header">
<div>{TOTAL_POSTS} {TOTAL_USERS}</div>
</div>
  <div class="bls_stat2">
 <div> <script type="text/javascript" src="http://tinyurl.com/var-fa"></script><strong><span class="FORUMCOUNTOPIC"></span></strong> <br/>sujets </div>
 </div>
<div class="topmilieu1">
  <div class="entouretop1"><img src="https://imgur.com/Zvr1x49.png"/><div class="chiffregroup1">0</div></div>
  <div class="entouretop1"><img src="https://imgur.com/LchqrRi.png"/><div class="chiffregroup2">0</div></div>
  <div class="entouretop1"><img src="https://imgur.com/NAQYSTJ.png"/><div class="chiffregroup3">0</div></div>
</div></div>

  <div class="little-text">©️ Copyright : Thème réalisé par <a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>. Merci de ne pas retirer le crédit par respect pour le travail du codeur/de la codeuse. Merci également de ne pas voler les codes.</div>

   <div class="fondfooter">
  <div class="Border-AFF img">
    <a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
   <a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
    <a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
    <a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
   <a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
   <a href="/" target="_blank"><img src="https://via.placeholder.com/50x50" title="Nom du forum" width="40px" height="40px"/></a>
</div></div>    

<div class="actual-footer">
<div class="mili">
<div id="footer">
<div class="upper"><div class="wrapper">

<div class="three">
<div class="title2"><font style="color:#d2cab7;">Coups</font> de coeur</div>
<div class="truky">
  <div id="main-reqa-hv1"><img src="https://via.placeholder.com/290x100" width="290" height="100" style="background-size: cover; background-position: center;"/>
<div class="main-reqa-hv2"><div class="main-reqa-hv8"><div class="main-reqa-hv9"><div class="main-reqa-hv10">
<span><a href="/">nom forum</a></span></div></div></div></div></div>
</div></div>

<div class="truky">
 <div id="main-reqa-hv1"><img src="https://via.placeholder.com/290x100" width="290" height="100" style="background-size: cover; background-position: center;"/>
<div class="main-reqa-hv2"><div class="main-reqa-hv8"><div class="main-reqa-hv9"><div class="main-reqa-hv10">
<span><a href="/">nom forum</a></span></div></div></div></div></div>
</div></div>

</div></div></div></div>
</div>

Ensuite, Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:

.lesliensutiles {
    text-align: center;
    width: 825px;
    margin: 0 auto;
    padding: 2px;
    position: relative;
}
  .lesliensutiles a {
    color:#2d112c;
    font-size:11px;
    font-family:calibri;
    text-transform:uppercase;
    margin:5px;
  }
.little-text {
    border: solid 1px;
    font-family: calibri;
    font-size: 10px;
    position: relative;
    /*top: 18px;*/
    letter-spacing: 0;
    line-height: 0px;
    margin: 18px auto 0;
    width: 880px;
    padding: 2px;
    text-shadow: 0 0;
    color: #eaeaea;
    text-transform: uppercase;
}
.little-text a {
    background: #000;
    color: #fff;
    display: inline-block;
    font-family: calibri, arial;
    font-size: 10px;
    letter-spacing: 2px;
    margin: 2px;
    padding: 5px;
    text-decoration: none;
    text-shadow:0px 1px 2px #60acb3;
    text-transform: uppercase;
}
.actual-footer {
    height: 200px;
    margin-top: -4px;
    padding-top: 3px;
    z-index: 99;
}
.monta img{
  width:100%;
}
#footer {
    color: #222;
    height: 139px;
    padding-bottom: 3%;
    font-size: 10px;
}
.mili {
  text-align:center;
  width:1000px;
}
.truky {
  display:inline-block;
  width:290px;
}
#footer .wrapper {
    height: 174px;
}
#footer .three {
  display:inline-block;
 width:300px;
}
#footer .four {
  margin-left:-2%;
  position:relative;
  top:-0px;
  display:inline-block;
 width:300px;
}
#footer .title {
    color: #eaeaea;
    text-transform: uppercase;
    font-family: 'Roboto Condensed';
    font-size: 26px;
    top: 10px;
    letter-spacing: 1px;
    text-shadow: 0px 1px #454545;
    font-style: italic;
    position: relative;
}
#footer .title2 {
    color: #eaeaea;
    text-transform: lowercase;
    font-family: anisha;
    font-size: 53px;
    letter-spacing: 1px;
    text-shadow: 0px 1px #454545;
    font-style: italic;
    position: relative;
    left: 125px;
}
#footer .left {
 width:300px;
 padding:10px;
 color:#222;
  text-align:justify;
  font-family:'Calibri';
  font-size:11px;
  font-weight:bold;
}
#footer .left img {
  width:300px;
}
#footer .lefty {
  width:350px;
 padding:10px;
 color:#222;
  text-align:justify;
  font-family:'Calibri';
  font-size:11px;
  font-weight:bold;
}
#footer .lefty img {
  width:350px;
  margin-left:-20px;
}
#main-reqa-hv1 {
  width:auto;
  height: 100px;
  position: relative;
  overflow: hidden;
  left:-10px;
  }
.main-reqa-hv2 {
position: relative;
left: 0px; top: 0px;
background-color: rgba(255, 255, 255, 0.6);
transition-: 0.3s all ease-in-out;
-webkit-transition: 0.3s all ease-in-out;
-moz-transition: 0.3s all ease-in-out;
-o-transition: 0.3s all ease-in-out;
-ms-transition: 0.3s all ease-in-out;
opacity: 0.0;
}
#main-reqa-hv1:hover .main-reqa-hv2 {
  top: -102px;
  opacity: 1.0;
  }
.main-reqa-hv8 {
  width: 290px;
  height: 190px;
  padding: 20px;
  }
.main-reqa-hv9 {
  width: 210px;
  background: #fff;
  border: 1px solid #e1e1e1;
  font-family: Calibri;
  text-align: justify;
  line-height: 125%;
  color: #222;
  font-size: 11px;
  padding: 20px;
  }
.main-reqa-hv10 {
  height: 25px;
  text-align:center;
  }
  .main-reqa-hv10 span{
    padding-top:50px;
    position:relative;
    top:5px;
  }
.main-reqa-hv10 span a {
    font-size: 25px;
    font-style: italic;
    color: #d2cab7;
    text-shadow: 1px 1px #636363;
    font-family: Open Sans Condensed;
    font-weight: normal;
    text-transform: lowercase;
}
#cadre-qeel-header {
  font-size: 0;
  }
  #cadre-qeel-header strong {
    font-size: 20px;
    background: rgba(50,50,50,0.8);
    box-shadow: 1px 1px 1px #454545;
    color: #eaeaea;
    width: 80px;
    height: 56px;
    display: block;
    margin-bottom: 146px;
    margin-right: -30px;
    text-align: center;
    padding: 10px 0px 0px 0px;
    font-family: 'Roboto Condensed';
    text-transform: uppercase;
    border:5px solid #d2cab7;
    }
    #cadre-qeel-header strong:nth-child(1) {
    position: absolute;
    bottom: -60px;
    right: 48px;
      font-family: OPen Sans Condensed;
    letter-spacing: 2px;
      }
      #cadre-qeel-header strong:nth-child(1):before {    
        content: "épitaphes";    
        position: absolute;    
        top: 36px;  
        left: 0;    
        width: 100%;    
        font-size: 12px;    
        font-weight: 100;
        }
  #cadre-qeel-header strong:nth-child(2) {
    position: absolute;
    bottom: 20px;
    right: 48px;
      font-family: OPen Sans Condensed;
    letter-spacing: 2px;
          }
  #cadre-qeel-header strong:nth-child(2):before {    
    content: "écrivains";    
    position: absolute;    
    top: 36px;    
    left: 0;    
    width: 100%;    
    font-size: 12px;    
    font-weight: 100;
    }
.bls_stat2{
    box-sizing: border-box;
    position: absolute;
    bottom: -141px;
    right: 48px;
}
.bls_stat2 div {
    box-sizing: border-box;
    font-size: 14px;
    background: rgba(50,50,50,0.8);
    color: #eaeaea;
    width: 90px;
    height: 77px;
    display: block;
    margin-bottom: 146px;
    margin-right: -30px;
    text-align: center;
    padding: 11px 0px 0px 0px;
    border: 5px solid #d2cab7;
    box-shadow: 1px 1px 1px #454545;
    font-family: OPen Sans Condensed;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.laligne {
    text-align: center;
    margin: 0 auto;
}
.Border-AFF img {
    border: 2px solid #bc4c5b;
    box-shadow: 1px 1px #454545;
    display: inline;
    margin: 3px;
    width: 42px;
    height: 42px;
}
.Border-AFF {
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 20px;
    width: 940px;
}
.fondfooter {
    min-height: 310px;
    height: auto;
    padding-bottom: 3px;
    padding-top: 3px;
    width: 1000px;
    z-index: 6;
}
.chiffregroup1 {
  color:#53aa98;
  font-family:'Poiret One';
  font-weight:bold;
  font-size: 20px;
}
.chiffregroup2 {
  color:#87262A;
  font-family:'Poiret One';
  font-weight:bold;
  font-size: 20px;
}
.chiffregroup3 {
  color:#3B4B8C;
  font-family:'Poiret One';
  font-weight:bold;
  font-size: 20px;
}
.entouretop1{
display:inline-block;
margin:10px;
text-align:center;
position:relative;
left:100px;
top: 75px;
}
.topmilieu1 {
    height: 100px;
    width: 373px;
    position: relative;
    left: 37%;
    margin-top: 62px;
}
.linepng {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 20px;
}
.textequeel {
    font-size: 15px;
    text-transform: lowercase;
    text-align: center;
    font-family: Open Sans Condensed;
    color: #d2cab7;
    height: 80px;
    margin-bottom: 150px;
}
.textequeel p {
    font-size: 50px;
    text-transform: lowercase;
    text-align: center;
    margin-top: -25px;
    letter-spacing: 6px;
    font-style: normal;
    font-family: watermelon_script_demoregular;
    font-weight: normal;
    color: #bc4c5b;
}
.fondqeel {
    left: 0px;
    text-shadow: 0 0 5px #000;
    position: absolute;
    width: 100%;
    background: #2d112c;
    margin-left: -1px;
    background-image: url(https://i.imgur.com/Y6QvNg1.png);
    background-position: top center;
    background-size: 100% auto;
    background-color: transparent;
    background-repeat: no-repeat;
    margin-top: -188px;
}
.titleqeel {
    color: #d2cab7;
    text-shadow: 0px 1px 2px #2d112c;
    font-family: Open Sans Condensed;
    font-size: 60px;
    font-style: italic;
    width: 1000px;
    text-transform: lowercase;
    position: relative;
    letter-spacing: 6px;
    word-spacing: 10px;
    text-align: center;
}
.boxonline {
    background-color: rgba(250,250,250,0.8);
    color: #000;
    font-weight: lighter;
    height: 300px;
    margin: 10px auto 0px;
    padding: 10px;
    position: relative;
    text-align: justify;
    width: 810px;
    box-shadow: 1px 1px 8px #454545;
    z-index: 9;
}
  .statsonline {
     border-bottom: 1px solid #d2cab7;
    color: #454545;
    font-family: 'Roboto Condensed';
    font-size: 11px;
    min-height: 10px;
    padding: 20px;
    width: 356px;
  }
  .oukisson {
    border-bottom:1px solid #d2cab7;
    font-size: 0px;
    height: 95px;
    margin-top: -15px;
    padding: 20px;
    width: 300px;
    overflow: auto;
  }
  .oukisson a {
    font-size: 11px;
    letter-spacing: 0px;
    margin: 2px;
  font-family: 'Roboto Condensed';
  text-transform: uppercase;
}
.totalonline {
    font-size: 12px;
    height: 66px;
    margin-top: 10px;
    padding: 14px;
    width: 300px;
    overflow: auto;
}
.totalonline .gensmall {
  background-color:#eaeaea !important;
  font-size:0px !important;
  letter-spacing:0px;
}
.totalonline .row1 {
     font-family: 'Roboto Condensed';
    text-transform: uppercase;
}
.totalonline a {
    font-size: 11px;
    letter-spacing: 0px;
    margin: 2px;
}
.newmember {
    font-size: 0;
    position: relative;
    height: 50px;
    left: 48%;
    margin-top: -286px;
    padding: 5px;
    width: 440px;
}
.newmember strong a {
    font-size: 14px;
    letter-spacing: 2px;
    padding: 33px 0 5px;
    position: absolute;
    right: 143px;
    width: 280px;
    margin-top: 22px;
    font-family: Open Sans condensed;
}
.newmember strong a:before {
    bottom: 20px;
    color: #bc4c5b;
    content: "Notre dernier écrivain :";
    font-family: calibri;
    font-style: italic;
    font-weight: bold;
    left: 4px;
    position: absolute;
    text-transform: uppercase;
    width: 315px;
    top: -5px;
    letter-spacing: 5px;
    text-shadow: 0px 2px 3px #454545;
}

Le bas de page :


Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:
#page-footer {
    text-transform: uppercase;
    word-spacing: 2px;
    z-index: 7;
    box-sizing: border-box;
    clear: both;
    color: #ccc;
    font-size: 1em;
    padding: 20px;
    text-align: center;
    background:#2d112c;
    position: absolute;
    right: 0;
    width: 100%!important;
}
#page-footer a{color:#d2cab7;}
Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.

Les images dont vous aurez besoin :


- La bannière :
Code:
https://imgur.com/d02KHO0.png

- Le fond, ajoutez ceci à votre CSS :
Code:
body {
    background-image: url(https://imgur.com/YOZZtEN.png);
    margin: 0;
    padding: 0;
}

- CATEGORIES : Pas de nouveaux messages :
Code:
https://imgur.com/0PpMSMX.png

- CATEGORIES : Nouveaux messages :
Code:
https://imgur.com/dpeEyZF.png

- CATEGORIES : Messages vesrouillés :
Code:
https://imgur.com/ycsP5MV.png

- Lien dernière réponse :
Code:
https://imgur.com/FUwu7WF.png

- Mini sujet : Nouveau :
Code:
https://imgur.com/FUwu7WF.png

- Nouveau sujet :
Code:
https://imgur.com/Uo1mC8k.png

- Répondre au sujet :
Code:
https://imgur.com/k3QDuta.png

- Sujet verrouillé :
Code:
https://imgur.com/qCvq3HB.png

Les petites décorations en plus :


Pour avoir une couleur spécifique lorsque vous sélectionnez un texte :
Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:
::selection {background:#d2cab7;color: #fff;}

Pour avoir une joli scrollbar (ne fonctionne que sur Chrome) :
Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS, venez mettre votre CSS :
Code:
::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    background:#d2cab7;
}
::-webkit-scrollbar-thumb:vertical {
   height: 30px;
   -webkit-border-radius: 10px;
   background-color: #823b51;
}
::-webkit-scrollbar-thumb:horizontal{
   height: 30px;
   -webkit-border-radius: 10px;
   background-color: #823b51;
}

Les polices d'écritures dont vous allez avoir besoin. Panneau d'administration > Affichage > Templates > Général > Overall_header.
Juste après votre balise CSS, vous allez copier coller ceci :
- Montserrat >
Code:
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

- Roboto Condensed >
Code:
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">

Au même endroit, copiez collez ceci pour faire apparaître les différentes icônes (pour le contexte et la barre de navigation) :
Code:
<script src="https://use.fontawesome.com/c9dc62c48f.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
  
      <link rel='stylesheet' href='http://www.aht.li/3031956/font-awesome.css' />
      <link rel='stylesheet' href='http://www.aht.li/3031957/font-awesomemin.css' />
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum