![[INDEX FLORAL] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX FLORAL] - Lun 17 Déc - 15:38
![[INDEX FLORAL] 2nCanlV](https://imgur.com/2nCanlV.png)
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
# Re: [INDEX FLORAL] - Lun 17 Déc - 15:39
Le QEEL & le footer
Panneau d'administration > Affichage > Templates > Général > Index_body; entre les balises :
- Code:
<!-- BEGIN disable_viewonline -->
- Code:
<!-- END disable_viewonline -->
- 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
# Re: [INDEX FLORAL] - Lun 17 Déc - 15:40
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|
|
|