DESIGN AVEC HEADER DE FOND

Sujet: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 16:55

Design n°5 : Un souffle printanier

Réalisé par Rozen

Les saints de glace sont passés, les beaux jours arrivent et avec un nouveau design.
Pour l'occasion, quelques codes ont été revus, et ont été réalisés par Maat' (alias Juliette and co) aidé par d'autres amis généreux plus talentueux qu'elle dont SKAEM pour les profils. Le design a quant à lui été réaliser par Rozen (pour les bannières) et fini par Juliette (pour les boutons).

image de fond header

header de fond

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 16:56

CSS

Code:: /*INSTALATION DES POLICES*/
@font-face {
font-family: 'Snippet';
font-style: normal;
font-weight: 400;
src: local('Snippet'), url(http://fonts.gstatic.com/s/snippet/v6/dkdPSGwSU2IgxfExalYR0wLUuEpTyoUstqEm5AMlJo4.ttf) format('truetype');
}

@font-face {
font-family: 'Amatic SC';
font-style: normal;
font-weight: 400;
src: local('Amatic SC'), local('AmaticSC-Regular'), url(http://fonts.gstatic.com/s/amaticsc/v7/DPPfSFKxRTXvae2bKDzp5CZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}

/*-- SCROLLBAR --*/
::-webkit-scrollbar { /*Scrollbar entière height c'est pour la hateur de la scrollbar horizontale et width pour la largeur de la scrollbar verticale*/
width: 10px;
background-color: #443A43;
height: 10px;
}

::-webkit-scrollbar-track { /*Le fond de la scrollbar*/
background-color: #443A43;
}

::-webkit-scrollbar-thumb { /*Le petit ascenceur de la scrollbar, le truc qui descend*/
background-color: #0D0C0E;
}

::-webkit-scrollbar-button { /*La hauteur des boutons de la scrollbar verticaux*/
background-color: #443A43;
height: 10px;
}

::-webkit-scrollbar-button:horizontal { /*La largeur des boutons horizontaux*/
background-color: #443A43;
width: 10px;
}

/*HEADER DE FOND*/

#i_logo {
width: 500px;
}

.ban1 { background-image: url('https://cdn.discordapp.com/attachments/395541471618531330/417662013523623936/banniaruby.png'), url('https://cdn.discordapp.com/attachments/395541471618531330/417662010415644672/fond_du_fofo.png');
background-repeat: no-repeat;
width: 100%;
background-color: #e68978;
background-attachment: scroll;
background-position: center top;
}
.ban2 { background-image: url('https://cdn.discordapp.com/attachments/395541471618531330/417662529884651530/banniasnow.png'), url('https://cdn.discordapp.com/attachments/395541471618531330/417662010415644672/fond_du_fofo.png');
background-repeat: no-repeat;
width: 100%;
background-color: #e68978;
background-attachment: scroll;
background-position: center top;
}
.ban3 { background-image: url('https://media.discordapp.net/attachments/395541471618531330/417706336403587072/banniamushu.png'), url('https://cdn.discordapp.com/attachments/395541471618531330/417662010415644672/fond_du_fofo.png');
background-repeat: no-repeat;
width: 100%;
background-color: #e68978;
background-attachment: scroll;
background-position: center top;
}

.ban4 { background-image: url('https://media.discordapp.net/attachments/395541471618531330/417661945588744192/banniaabbe.png'), url('https://cdn.discordapp.com/attachments/395541471618531330/417662010415644672/fond_du_fofo.png');
background-repeat: no-repeat;
width: 100%;
background-color: #e68978;
background-attachment: scroll;
background-position: center top;
}

/*CATÉGORIES*/

.forumline {
background-color: #F2A99D;
box-shadow: 0px 0px 10px #c32e4a;
}

.gemned {
text-align: justify;
height: 90px;
overflow: auto;
padding: 1px;
width: 400px;
background-color: #F4C2BA;
border-radius: 10px;
}

.forumlink {
font-size: 20px;
padding-left: 80px;
font-family: 'Snippet';
transition: 500ms;
}

.forumlink:hover {
padding-left: 100px;
transition: 500ms;
}

.secondarytitle, .secondarytitle h2 {
color:#B94053;
font-family: 'Butler';
font-size: 30px !important;
font-weight: lighter !important;
letter-spacing: -1px;
position: relative;
text-transform:uppercase;
height: 40px;
background-color: NONE;
width: 100%;
}

.lastpost-avatar img {
border: 1px solid #894053;
padding: 2px;
border-radius: 0px;
height: 95px;
width: 59px;
}

.links {
width: 150px;
height: 90px;
padding: 5px;
background-color: #F4C2BA;
size: 17px;
font-family: 'Snipet';
text-align: center;
border-radius: 10px;
margin-left: 2px;
overflow: auto;
}

.last-post {
background-color: #F4C2BA;
border-radius: 10px;
height: 100px;
overflow: auto;
}

/* SELECTIONNER CODE */
.selectCode {
float : right ;
cursor : pointer ; }

.div.cont_code {
clear : right ; }

/*REPONSE RAPIDE*/
/*--- Partie texte area : fond ---*/

.sceditor-container iframe, .sceditor-container textarea {
background-color: #F5F5F5 !important;
text-align:justify;
margin:0 !important;
line-height: 16px;
width: 540px !important;
background-image: url(\'\') !important;
font-size:12px !important;
font-color: #E2CDD7;
}
/*--- Partie supérieur contenant les outils ---*/

div.sceditor-toolbar {
background-color: #A2A8BC !important;
width: 540px !important;
}

/*-- PAGE D'ACCEUIL --*/

#la_pa {
position: relative; }

/*PA STAFF*/
.mon_onglet{
display: inline;
padding: 0.5px;
margin: 0.5px;
color: #000;
background: transparent;
border: 1px solid transparent;}

.mon_onglet:hover{
background: transparent;}

.mon_onglet_selected{
display: inline;
padding: 0.5px;
margin: 0.5px;
color: #000;
background: transparent;
border: 1px solid transparent;}

.clear{
clear: both;}

.mon_contenu{
color: #000;
background: transparent;
border: 1px solid transparent;
padding: 0.5px;
margin: 0.5px;
line-height: normal;
font-size: 11px;}

#mes_contenus, #mes_onglets{
height: 100%;
width:100%;}

img.arrondi {
background-color: #F3DDC8;
padding:0.5px;
margin:0.5px;
border: 1px solid #4e0f3d;
border-radius: 2px;
}

img.arrondi:hover {
background-color: #F3DDC8;
padding:0.5px;
margin:0.5px;
border: 1px solid #4e0f3d;
border-radius: 2px;
}

.pix {
border: none;
opacity: 1;
background-color: transp;
padding:0.5px;
margin-top:1px;
margin-left:0.5px;
margin-right:0.5px;
border: 1px solid #4e0f3d;
-moz-border-radius: 1px;
}

/*titre*/
.titrepa{
font-family:Old English Text MT;
font-weight:none;
font-style:bold;
font-size:45px;
letter-spacing:-1px;
color: #610649;
text-shadow:0px 1px 2px #4b4043;
}

.titrepa:hover{
font-family:Old English Text MT;
font-weight:none;
font-style:bold;
font-size:45px;
letter-spacing:-1px;
color: #4b4043;
text-shadow:0px 1px 2px #610649;
}

.sloganpa{
transform:uppercase;
font-size:11px;
font-family:Segoe Ui Semilight;
letter-spacing:1pt;
margin-top:-10px;
color: #866F6E;
}

e{
font-family:times new roman;
color:#BA270D;
font-weight:normal;
font-size:10px;
margin-top:-12px;
}

c{
font-family:Old English Text MT;
color:#762F4D;
text-shadow:0px 1px 1px #8B3E31;
text-align: center;
font-size:22px;
margin-top:-18px;
}

f{
font-family:tahoma;
font-weight:bold;
font-size:11px;
text-transform:uppercase;
color:#622422;
text-shadow:1px 2px 2px #E1D4C8;
}

d{
font-family:Butler;
color:#c0d2ed;
text-shadow:0px 0.5px 2px #050013;
font-weight:normal;
font-style:bold;
text-transform:lowercase;
font-size:15px;
margin-top:-12px;
}

/*infobulle*/
a.imginfo {
position: relative;
color: #FFFFFF;
text-decoration: none;
border-bottom: 0px #321818 solid; /* on souligne le texte */
}

a.imginfo span {
display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
background: none; /* correction d'un bug IE */
z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 0px; /* on positionne notre infobulle */
left: 0px;
background: #e68978;
color: #FFFFFF;
padding: 3px;
border: 0px solid grey;
border-left: 1px solid #321818;
border-right: 1px solid #321818;
border-top: 1px solid #321818;
border-bottom: 1px solid #321818;
}

/*bloc intéractif*/

.l1 {
width: 140px;
padding: 10px;
padding-top: 3px;
background-color: #b7b7b7;
color:#010a15;
font-family: 'Open Sans Condensed';
text-transform: uppercase;
font-size: 15px;
text-align: center;
margin:2px;
border: 0.5px solid #030102;
}

.l2 {
width: 140px;
padding: 10px;
padding-top: 3px;
background-color: #b7b7b7;
color:#010a15;
font-family: 'Open Sans Condensed';
text-transform: uppercase;
font-size: 15px;
text-align: center;
margin:2px;
border: 0.5px solid #030102;
}

/* FIN PA*/

/*FICHE PRESENTATION - SCENARIO - PV*/

/*image coulissante*/
.image {
background:ta couleur de fond si besoin;
position:relative;
width:200px; /* tu détermines la largeur */
height:320px; /* tu détermines la hauteur */
overflow:hidden;
}

.texte {
position:absolute;
height:320px; /* encore la hauteur*/
width:200px; /* la largeur */
margin-bottom:-320px; /* tu décales vers le bas il faut donc la même valeur que pour ta hauteur ! */
background-color: #F2A99E; /*indique la couleur de fond de ton choix*/
text-align: justify;
bottom:0;
left:0;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.image:hover .texte {
margin:0;
}

/*Les titres*/
.titre1{
font-family:arial;
font-weight:bold;
font-style:italic;
font-size:25px;
text-transform:uppercase;
letter-spacing:-2px;
color:#7D0000;
text-shadow:0px 0px 2px #451D30;
}

.titre1:hover{
font-family:arial;
font-weight:bold;
font-style:italic;
font-size:25px;
text-transform:uppercase;
letter-spacing:-2px;
color:#9F6F1F;
text-shadow:0px 0px 2px #3F6751;
}

.titre2{
font-family:times new roman;
color:#AB5725;
font-style:italic;
text-align:center;
font-size:22px;
letter-spacing:-2px;
text-transform:lowercase;
}

.titre2:hover{
font-family:times new roman;
color:#7D0000;
font-style:italic;
font-size:20px;
letter-spacing:-2px;
text-transform:lowercase;
}

.titre3{
font-family:Segoe Ui Semilight;
font-style:italic;
text-align:center;
font-size:15px;
letter-spacing:-1px;
text-transform:lowercase;
}

.sous-titre1{
line-height: 80%;
width: 490px;
letter-spacing: 1.9px;
font-family: Butler;
font-size: 12px;
color:#660033;
text-transform: uppercase;
}

.sous-titre2{
font-family:Butler;
color:#460000;
font-weight:bold;
text-align:center;
font-size:12px;
letter-spacing:1px;
text-transform:lowercase;
}

.ID1{
overflow:auto;
height: 320px;
width: 195px;
color: #610649;
}

.ID2{
overflow:auto;
height: 320px;
width: 300px;
color: #610649;
}

.ID3{
overflow: auto;
width: 400px;
height: 90px;
color: #610649;
text-align : justify;
}

.ID4{
overflow: auto;
width: 220px;
height: 100px;
color: #610649;
text-align : justify;
}

.story{
width: 500px;
text-align : justify;
color: #610649;
}

.SL{
color: #99cc33;
}

.SR{
color: #ffcc33;
}

.SP{
color: #cc3333;
}

m{
font-family:Times New Roman;
font-weight:bold;
font-style:italic;
font-size:15px;
text-transform:lowercase;
letter-spacing:0px;
color:#EDC5CB;
}

/* Cadre messages */
.cadremessage{
width:510px;
background-color:#e68978;
border:solid 1px #c32e4a;
text-align:justify;
color: #610649;
font-size:11px;
padding:5px;
}

.cadremessage:hover{
width:510px;
background-color:#F2A99E;
border:solid 1px #c32e4a;
text-align:justify;
font-size:11px;
padding:5px;
}

/*FIN FICHE PRESENTATION - SCENARIO - PV*/

/**QEEL**/

.titreqeel {
letter-spacing: 3px;
font-size: 60px;
font-family: 'Old English Text MT';
color: #c32e4a;
text-align: center;
}

.groupes {
letter-spacing: 2px;
font-size: 35px;
font-family: 'Segoe Ui Semilight';
text-transform: uppercase;
}

.oneligne {
text-align: justify;
height: 95px;
overflow: auto;
padding: 5px;
width: 495px;
background-color: #f2a99d;
}

.histo {
text-align: justify;
height: 205px;
overflow: auto;
padding: 5px;
width: 315px;
background-color: #f2a99d;
}

.cb {
letter-spacing: 2px;
font-size: 10px;
font-family: 'Segoe Ui Semilight';
text-transform: uppercase;
}
/**FIN QEEL***/

/* NOTIFICATIONS */

/* Cacher les bouts de la toolbar que je ne veux pas */
.fa_tbMainElement#fa_left,
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink {
display:none!important;
}

/* Supprimer la couleur de fond et positionnement du bloc */
#fa_toolbar {
background-color:transparent!important;
position:fixed;
top:0px;
padding:5px;
width:100%;
z-index:999;
box-sizing:border-box;
}

/* Mise en page du bouton Notification */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications {
display:block!important;
position:absolute;
top:10px;
right:10px;
width:160px;
padding:3px;
background:#b7b7b7;
box-shadow:0 0 5px #b14b78;
color:#010a15;
font-family:Arial;
font-size:16px;
letter-spacing:2px;
text-align:center;
text-decoration:none!important;
}
#fa_toolbar #fa_right #notif_list li:first-child{
padding-top:10px;
}

/* Mise en page bouton "notification" - Au clic */
#fa_menu:hover:visited,
#fa_toolbar > #fa_right.notification > #fa_notifications {
background:#b14b78!important;
color:#ffffff!important;
text-shadow:none;
}

/* Référence pour la liste des notifications */
#fa_toolbar #fa_right.fa_tbMainElement {
position:relative;
}

/* Mise en page de la liste des notifications */
#fa_toolbar #fa_right.notification #notif_list {
top:50px!important;
right:10px;
left:auto!important;
max-width:340px;
min-width:167px;
box-shadow:0 0 5px #b14b78;
border:none!important;
}

/* Mise en page des notifications */
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li {
width:auto!important;
font-size:12px;
background-color:#none;
}

/* Taille des blocs textes des points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .contentText {
overflow:visible!important;
width:300px !important;
height:auto!important;
}

/* Bloc "notifs non lues" */
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications {
width:180px;
/* On supprime 1px à la largeur car la bordure fera 1px d'épaisseur */
border-left:1px solid black;
}

#fa_toolbar #fa_right #notif_list li.unread {
background:#f1d9ae!important;
}

/* Mise en page du bloc "voir toutes les notifications" */
#fa_toolbar #fa_right #notif_list li.see_all {
text-align:center!important;
background:#cf777e!important;
padding:5px!important;
font-size:12px!important;
}
#fa_toolbar #fa_right #notif_list li.see_all a{
color:#010a15;
}
/*FIN NOTIFICATION*/

/* AFFICHAGE LISTE DES MEMBRES */
.LSbatty_titre {
margin:15px auto;
width:100%;
}

.LSbatty_titre th {
margin-bottom:5px;
padding:5px 0;
font-family:Old English Text MT; /*police du titre*/
font-size:25px; /*taille du texte*/
background-image: url('https://img11.hostingpics.net/pics/681248fonttitre.png')
background:#e68978; /*couleur fond titre*/
color:#fff; /* Couleur du texte */
font-weight:normal; /*Retiré le gras du titre*/
}

.LSbatty_corp{
position:relative;
width:100%;
height:90px;
padding:10px 0;
font-family: arial; /*Police général*/
}

.LSbatty_image{
position:absolute;
top:10px;
left:0;
z-index:2;
width:90px; /*Largeur de l'espace pour l'avatar*/
height:90px; /*hauteur de l'espace pour l’avatar*/
background: #F2A99E; /*couleur de fond s'il n'y a pas d'image*/
overflow: hidden;
box-shadow: 0 0 5px rgba(68,74,115,0.5); /*ombre au tour de l'avatar*/
}

.LSbatty_image img{
width:90px; /*Largeur de l'image avatar*/
}

.LSbatty_pseudo{
position: absolute;
top: 0;
left: 60px;
width: calc(100% - 60px);
width: -webkit-calc(100% - 60px);
width: -moz-calc(100% - 60px);
height: 35px;
color:#010a15;
background: #B3B3B3;/*couleur de fond par défaut (membre non validé)*/
padding: 5px 65px;
font-family:Times New Roman;
text-shadow:0px 1px 1px #8B3E31;
font-size: 22px; /*Taille du texte*/
text-align: left;
margin: 10px 0;
box-sizing: border-box;
}

.LSbatty_pseudo span strong{
font-family:Times New Roman;
text-shadow:0px 1px 1px #8B3E31;
font-size:22px;
color:#010a15; /*Couleur du pseudo (membre validé)*/
}

.LSbatty_pseudo a {
font-family:Times New Roman;
text-shadow:0px 1px 1px #8B3E31;
font-size:22px;
color:#010a15; /*Couleur du pseudo (membre non validé)*/
}

.LSbatty_pseudo img{
height:14px; /*Hauteur des images MP et site web*/
}

.LSbatty_pseudo a strong{
font-weight:normal; /*Retiré le gras sur les pseudo*/
}

.LSbatty_infos{
position: absolute;
top: 40px;
left: 100px;
width: calc(100% - 120px);
width: -webkit-calc(100% - 120px);
width: -moz-calc(100% - 120px);
height: 80px;
padding: 10px 5px;
font-size: 14px; /*taille du texte*/
box-sizing: border-box;
}

.LSbatty_infos div{
display: inline-block;
vertical-align: top;
width: 23%;
height:50px;
margin: 5px;
background: #F2A99E; /*couleur de fond des infos*/
}

.LSbatty_infos div span{
display:block;
background: #e68978; /*couleur de fond des titres infos*/
margin-bottom: 5px;
padding:3px;
}

.LSbatty_pagination{
margin: auto;
padding: 10px;
width: 100%;
background: #F2A99E; /*couleur fond pagination*/
}

.LSbatty_pagination a {
color:#FFFFFF; /*Couleur texte pagination*/
}

.LSbatty_pagination span{
color:#FFFFFF; /*Couleur texte pagination*/
}

/*Mise en page du copyright (Lien)- NE PAS SUPRIMER-*/
.LSbatty_copyright {
margin:5px auto; /*marge*/
text-align: center; /*aligner le copyright*/
}

.LSbatty_copyright a{
font-size:11px;
text-decoration:none!important; /*suppression du soulignement par défaut*/
}

.LSbatty_copyright:hover a{
text-decoration:none!important; /*suppression du soulignement par défaut*/
color:#415694!important; /*deuxième couleur*/
}

/*FIN LISTE DES MEMBRES*/

/* NAVIGATION */
#navSIT {
width:900px;
height:30px;
box-shadow: 0px 0px 10px #c32e4a;
background:none; /* MODIFIABLE */
}
.navSIT {
position:absolute;
right:15px;
box-shadow: 0px 0px 10px #c32e4a;
}

.mainmenu img {
display:none;
}

a.mainmenu[href="/calendar"] {display: none !important;}
a.mainmenu[href="/faq"] {display: none !important;}
a.mainmenu[href="/groups"] {display: none !important;}

/* BARRE DE RECHERCHE - NAVIGATION */
#navSIT a{
display:inline-block;
vertical-align:middle;
text-align:center;
font-size:22px;
font-family:Old English Text MT;
color:white; /* MODIFIABLE */
transition:all .65s linear;
-webkit-transition:all .65s linear;
}
/* SURVOL LIEN NAVIGATION */
#navSIT a:hover {
color:lightgrey; /* MODIFIABLE */
}
/* DECONNEXION */
a#logout.mainmenu {
font-size:0px;
}
a#logout.mainmenu::after {
display:inline-block; vertical-align:middle;
font-size:22px !important; content:'Déconnexion'; /* MODIFIABLE */
}
/* MENU RECHERCHE */
#search_menu {
top:45px !important; left:5% !important;
}
/* COULEUR FOND MENU RECHERCHE */
#search_menu td.row2 {
background:lightgrey !important; font-family:Arial; /* MODIFIABLE */
}
/* COULEUR TEXTE MENU RECHERCHE */
#search_menu td.row2 span.genmed {
color:black !important; /* MODIFIABLE */
}
/* TITRE MENU RECHERCHE */
#search_menu th.thHead {
text-transform:uppercase; font-family:Arial; /* MODIFIABLE */
background:black; color:white; /* MODIFIABLE */
}
/* BARRE MENU RECHERCHE */
#search_menu input.post {
height:23px !important; border:none !important;
background:white; color:black; /* MODIFIABLE */
}
/* BOUTON MENU RECHERCHE */
#search_menu input.button {
height:25px; border:none !important; text-transform:uppercase;
background:black; color:white !important; /* MODIFIABLE */
}
/* RECHERCHE AVANCEE */
#search_menu a{
display:block; margin-bottom:5px; width:235px;
background:none !important; border:none !important;
text-transform:uppercase; font-weight:bold; color:#000713 !important; /* MODIFIABLE */
}

/* PROFIL & SUJET */
/* BORDURE AVATAR */
.avaSIT {
position:absolute;
z-index:10;
margin-top:-25px;
margin-left:-35px;
width:95px;
height:95px;
border-radius:95px;
overflow:hidden;
box-shadow: 0px 0px 10px #c32e4a;
}
/* IMAGE AVATAR */
.avaSIT img{
width:95px;}

.cadreavatar {
background-image: url('https://image.noelshack.com/fichiers/2018/19/5/1526053196-tentative-bis.png');
height: 385px;
padding: 5px;
position:relative;
}

/* TITRE SUJET */
#tlePOST{
margin:5px auto;
padding:1px 0;
border-radius:25px;
background-image: url('https://i62.servimg.com/u/f62/17/39/50/12/tentat10.png');
color:black;
font-family:Arial;
text-transform:uppercase;
text-align:center;
}
#tlePOST h1 {
display:block;
font-size:32px;
}
/* BLOC PSEUDONYME */
.namePOST {
margin:5px auto 0;
padding:15px 0;
text-align:left;
border-radius:15px 15px 0 0;
background:none;
font-family:Arial;
font-size:22px;
text-transform:uppercase;
}
/* ICÔNE EN LIGNE */
.onPOST {
display:inline-block;
vertical-align:middle;
margin-left:10px;
}

/* TEXTE+IMAGE RANG */
.rankPOST {
display:inline-block;
vertical-align:middle;
text-transform:uppercase;
font-size:10px;
opacity:0.8;
}

.imgrankPOST img {
margin:auto;
max-width:90%;
}

.imgrankPOST {
display: inline-block;
}

/* BLOC AVATAR & INFORMATIONS JOUEUR */
.boxPOST {
padding:10px;
background:#FFA091;
box-shadow: 0px 0px 5px #ffffff;
text-align:justify;
}

/* BLOC INFORMATIONS JOUEUR */
.abtPOST {
margin:10px auto 5px;
width:100%;
text-align:justify;
}
/* INFORMATION JOUEUR */
.abtPOST div{
margin-bottom:5px;
padding:5px;
font-size:10px;
text-align:justify;
background:#fcc0b7;
}
/* INTITULES INFORMATIONS JOUEUR */
.abtPOST span{
font-weight:bold;
}
/* REDIMENSIONNEMENT IMAGES INFORMATIONS JOUEUR */
.abtPOST div img {
margin:auto;
max-width:100%;
}

/* BLOC MESSAGE */
.msgPOST {
background:#fcc0b7;
}
/* BLOC DATE MESSAGE / OUTILS MODERATION */
.tktPOST {
margin:5px auto;
width:90%;
padding:5px;
text-align:right;
}
/* DATE MESSAGE */
.datePOST {
display:inline-block;
vertical-align:middle;
font-size:12px;
text-transform:uppercase;
color:black;
}
/* CITER / EDITER / SUPPRIMER / IP */
.toolsPOST {
display:inline-block;
vertical-align:middle;
margin-left:15px;
}
/* APPARENCE MESSAGE */
div.postbody {
padding:5px;
text-align:justify;
color:black;
}
/* IMAGES CONTACT JOUEUR */
.ktactPOST {
padding:5px 0;
text-align:center;
border-radius:0 0 15px 15px;
background:grey; /* MODIFIABLE - MESSAGES DES INVITES */
}

/*image coulissante lien*/
.imagelien {
background:ta couleur de fond si besoin;
position:relative;
width:150px; /* tu détermines la largeur */
height:150px; /* tu détermines la hauteur */
overflow:hidden;
}

.textelien {
position:absolute;
height:150px; /* encore la hauteur*/
width:150px; /* la largeur */
margin-bottom:-150px; /* tu décales vers le bas il faut donc la même valeur que pour ta hauteur ! */
background-color: #F2A99E; /*indique la couleur de fond de ton choix*/
text-align: justify;
bottom:0;
left:0;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}

.imagelien:hover .textelien {
margin:0;
}

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 17:40

index_body

Code:: {JAVASCRIPT}

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

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


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

</table>



<form action="{S_LOGIN_ACTION}" method="post" name="form_login">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td class="row1" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
</tr>
</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle" align="right">
<table class="right">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>

</form>

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

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


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

</td>
<td width="50%" align="right">
<span class="gensmall">
<a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
<a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
<a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>


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


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


<form action="{S_LOGIN_ACTION}" method="post" name="form_login">

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td class="row1" align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
</tr>
</table>



<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
<tr>
<td valign="top" width="100%" class="row1" align="center">
<table width="100%">
<tr>
<td width="55%" valign="middle">
<table class="right">
<tr>
<td><span class="genmed">{L_USERNAME}:</span> </td>
<td><input class="post" type="text" size="10" name="username"/> </td>
<td>
<input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
<span class="gensmall">{L_AUTO_LOGIN}</span>
</td>
</tr>

<tr>
<td><span class="genmed">{L_PASSWORD}:</span> </td>
<td><input class="post" type="password" size="10" name="password"/> </td>
<td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
</tr>
</table>
</td>
<td width="10%" align="center" valign="middle">
<span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
</td>
<td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
</tr>
</table>
</td>
</tr>
</table>

</form>



<center><div class="titreqeel">Qui est en ligne ?</div>
<center><div class="groupes" id="groupes">{GROUP_LEGEND}</div></center>

<table width="100%" cellspacing="0" cellpadding="2" border="0">
<tr>
<td width="60%" valign="top" align="justify" style="border-right: 2px solid #c32e4a;">
<span class="gensmall"><table><tr><td><div class="l2"><span id="messtot">{TOTAL_POSTS}<br />MESSAGES</span></div>
</td><td><div class="l2"><span id="memtot">{TOTAL_USERS}<br />MEMBRES</span></div>
</td><td><div class="l2"><span id="newus">{NEWEST_USER}<br />BIENVENUE</span></div></td></tr></table><br/>
<span class="gensmall">
<div class="cb">{TOTAL_USERS_ONLINE}</div> 
<br />
<div class="oneligne">{LOGGED_IN_USER_LIST}</div> 

</span>
</td>

<td width="40%" valign="top" align="justify;">
<div class="histo"><table>{L_WHOSBIRTHDAY_TODAY} 

{L_CONNECTED_MEMBERS}</table></div>

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



<center><div class="cb">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}<br />

<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>

</div></center><br />
<span style="opacity: 0.5; font-size: 8px;">© HEC appartient à ses administratrices. Le design a été réalisé par Rozen. Les catégories ont été réalisé par <a href="http://www.pub-rpg-design.com">ATHENA.</a>. Le reste des codes ont été créé par Maat' alias Juliette White-Queen aidé par Emma Swan.</span> 
</table>
<script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/Nos membres ont posté un total de/,"");</script>
<script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/messages/,"");</script>
<script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/message/,"");</script>
<script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/Nous avons/,"");</script>
<script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membre enregistré/,"");</script>
<script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membres enregistrés/,"");</script>
<script type="text/javascript">document.getElementById('newus').innerHTML=document.getElementById('newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
<script type="text/javascript">document.getElementById('groupes').innerHTML=document.getElementById('groupes').innerHTML.replace(/[[\]]/g,'');</script>

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

<table border="0" cellspacing="3" cellpadding="0" align="center">

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


{AUTO_DST}


<div id="fb-root"></div>
<script>
FB.init({
appId : {switch_fb_index_login.FACEBOOK_APP_ID},
cookie : true,
xfbml : true,
oauth : true,
version : 'v2.3'
});

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 17:40

index_box

Code:: <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
<td valign="bottom">

<span class="gensmall">{LAST_VISIT_DATE}<br />
{CURRENT_TIME}<br />
</span>

<div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
</td>
<td class="gensmall" align="right" valign="bottom">

<a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
<a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />

<a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</td>
</tr>
</table>
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>

</tr>


<tr>

<td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
<h{catrow.cathead.LEVEL} class="hierarchy">
<span class="cattitle">
<a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
</span>
</h{catrow.cathead.LEVEL}>
</td>
<td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
</tr>


<tr>

<td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>


<td colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">

<span class="forumlink">
<a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
</span>

<table><tr><td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
<img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
</td><td> <span class="gensmall"><div class="gemned">{catrow.forumrow.FORUM_DESC}</div></span></td><td style="border-left: 2px solid #b2cbcc;">
<div id="subforums" class="links">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
<script type="text/javascript">
document.getElementById('subforums').innerHTML=document.getElementById('subforums').innerHTML.replace(/,/,"<br />");
</script>
</td>
<td> 

<span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>

</td>
<td align="center" valign="middle" height="50">
<div class="last-post"style="width: 150px;">
<span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
</td></tr></table>
</td>
</tr>


<tr>

<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>

<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>


</table><img src="{SPACER}" alt="" height="5" width="1" />

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 17:41

memberlist_body

Code:: <form action="{S_MODE_ACTION}" method="get">
<table cellspacing="0" cellpadding="5" border="0" align="center" class="LSbatty_titre">
<tr>
<th nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" align="center" class="genmed">
<tr>
<td width="100%" style="padding:5px 0;">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />
{L_SELECT_SORT_METHOD} {S_MODE_SELECT}
{L_ORDER} {S_ORDER_SELECT}
{S_HIDDEN_SID}
<input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td class="{memberrow.ROW_CLASS}" align="center">


<div class="LSbatty_corp">

<script type="text/javascript">//<![CDATA[
$( document ).ready(function() {$('a[href*="/u"] span').each(function(){var color = $(this).css("color");
$(this).closest('.LSbatty_pseudo').css("background-color", color);});});//]]>
</script>

<div class="LSbatty_image">{memberrow.AVATAR_IMG}</div>
<div class="LSbatty_pseudo"> <a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a> <right>{memberrow.PM_IMG} {memberrow.WWW_IMG}</right></div>
<div class="LSbatty_infos">
<div>
<span>Dernière visite</span>
{memberrow.LASTVISIT}
</div>
<div>
<span>Date d'inscription</span>
{memberrow.JOINED}
</div>
<div>
<span>Messages</span>
{memberrow.POSTS}
</div>
<div>
<span>Humeur</span> 
{memberrow.INTERESTS}
</div>
</div>

</div>


</td>
</tr>

<tr>
<td class="catBottom" colspan="{switch_no_user.COLSPAN_NUMBER}" height="28" align="center"><span class="gensmall">{switch_no_user.L_NO_USER}</span></td>
</tr>

</table>

<table class="LSbatty_pagination" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="nav">{PAGE_NUMBER}</span></td>
<td align="right"><span class="nav">{PAGINATION}</span></td>
</tr>
</table>
<div class="LSbatty_copyright"><a href="http://epicode.bbactif.com/">️ Batty pour Epicode</a></div>
<br />

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 17:43

overall_footer_end

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">
<body>
<table>
<tr>
   <td>
      <div>
         <div>
            <div>

            </div>
         </div>
         
         <div align="center">
            <div class="gen">
               
                   | 
                  <a name="bottom" class="copyright" href="{switch_footer_links.footer_link.U_FOOTER_LINK_HREF}" rel="{switch_footer_links.footer_link.FOOTER_LINK_REL}" target="{switch_footer_links.footer_link.FOOTER_LINK_TARGET}" title="{switch_footer_links.footer_link.L_FOOTER_LINK_TITLE}">{switch_footer_links.footer_link.L_FOOTER_LINK_TEXT}</a>
               
            </div>
         </div>
         
      </div>
      {PROTECT_FOOTER}
   </td>
</tr>
</table>


<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready( function() {
$('div.fb-login-button, span.fb-login-button').attr({
"data-scope": "{switch_facebook_login.FB_SCOPE}",
"data-max-rows": "{switch_facebook_login.FB_MAX_ROWS}",
"data-size": "{switch_facebook_login.FB_BUTTON_SIZE}",
"data-show-faces": "{switch_facebook_login.FB_SHOW_FACES}",
"data-auto-logout-link": "{switch_facebook_login.FB_AUTO_LOGOUT}"
});
$('div.fb-login-button, span.fb-login-button').each(function() {
if(typeof $(this).attr('onlogin') == typeof undefined || $(this).attr('onlogin') === false) {
$(this).attr('onlogin', '{switch_facebook_login.FB_ONLOGIN}');
}
if($(this).html() == '') {
$(this).html('{switch_facebook_login.FB_LABEL}');
}
});

FB.init({
appId : "{switch_facebook_login.FB_APP_ID}",
cookie : {switch_facebook_login.FB_COOKIE},
xfbml : {switch_facebook_login.FB_XFBML},
oauth : {switch_facebook_login.FB_OAUTH},
version : '{switch_facebook_login.FB_VERSION}'
});

(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/{switch_facebook_login.FB_LOCAL}/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
});
function onLoginFB() {
window.location.replace('{switch_facebook_login.FB_ONLOGIN_URL}')
}
</script>


<script>
$(document).ready( function() {
$('div.ti-connect').attr({
'data-loc' : '{switch_topicit_connect.TOPICIT_URL}',
'data-login' : '{switch_topicit_connect.BOARD_LOGIN}',
'data-version' : '{switch_topicit_connect.TOPICIT_VERSION}',
'data-lang' : '{switch_topicit_connect.BOARD_LANG}'
});

(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "{switch_topicit_connect.TOPICIT_ENDPOINT}";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'topicit-connect'));
});
</script>

<script type="text/javascript">
//<![CDATA[
fa_endpage();
//]]>
</script>
</body>
</html>

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 17:46

overall_header

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=Homemade+Apple" 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" />

<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />


<link rel="canonical" href="{switch_canonical_url.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>

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

<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}


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



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



<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() {
var w_cont = $('#fa_ticker_container').width();

if (w_cont > 0) {
$('#fa_ticker_container').width(w_cont);

/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');

/* Calcul des dimensions du conteneur et des elements */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;

/* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max) {
height_max = $(this).height();
}
} );

/* Redimensionnement des elements et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).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);
}
});

/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert) {
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}

/* Initialisation du caroussel */
$('#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>


<script type="text/javascript">//<![CDATA[
$(document).ready(function(){

pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }


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(); }


$(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}
});
});

});


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
});
});
});

//]]>
</script>
{GREETING_POPUP}

<style>
.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;
}
</style>

{HOSTING_JS}

<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);


_gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
_gaq.push(['b._trackPageview']);


(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>

</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">

<div id="hitskin_preview" style="display: block;">
<h1><img src="https://2img.net/i/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>



<div id="login_popup" style="z-index: 10000 !important;">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>


<a name="top"></a>
{JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>

<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>

<td align="center" width="100%" valign="middle">

<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<br />

<div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br />  </span>
</td>

<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>

</tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}" id="navSIT">
<tr><td><div class="avaSIT"></div></td></tr>
<script type="text/javascript">$(function(){$('.avaSIT').html(_userdata.avatar);{$('.welcSIT').html( _userdata.username);}});</script>
<tr><td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td></tr>
</table>
<div style="clear: both;"></div>


<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">

<li>{switch_ticker.ticker_row.ELEMENT}</li>

</ul>
</div>
</td>
</tr>
</table>
</div>



<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">

<div>{switch_ticker.ticker_row.ELEMENT}</div>

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


<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<div id="{ID_LEFT}">

{giefmod_index1.MODVAR}

<div style="height:{SPACE_ROW}px"></div>


</div>
</td>
<td valign="top" width="100%">

</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 16 Juil - 17:48

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>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="left" valign="middle" nowrap="nowrap">
<span class="nav">

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>


<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

</span>
</td>
<td class="nav" valign="middle" width="100%">
<span class="nav">
<a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>

{NAV_CAT_DESC_SECOND}
</span>
</td>
<td align="right" valign="bottom" nowrap="nowrap" width="100%">

<span id="twitter_btn" style="margin-left: 6px; ">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</span>



<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>


<span class="gensmall bold">
<a class="addthis_button" href="#">{L_SHARE}</a>

|
<script type="text/javascript">//<![CDATA[
var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
//]]>
</script>

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

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" >
<tr align="right">
<td class="catHead" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title">
<h1 class="cattitle"> {TOPIC_TITLE}</h1>
</td>
<td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </td>
</tr>
</table>
</td>
</tr>

<tr>
<td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
</tr>

{POLL_DISPLAY}



<tr>
<td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
</tr>


<tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
<div class="boxPOST"> <div class="imgrankPOST">{postrow.displayed.RANK_IMAGE}</div><div class="rankPOST">{postrow.displayed.POSTER_RANK}</div><br>

<div class="cadreavatar">{postrow.displayed.POSTER_AVATAR}</div> <strong><c><center>{postrow.displayed.POSTER_NAME}</center></c></strong><div class="abtPOST"><div>{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</div></div></div>
{postrow.displayed.POSTER_RPG}
</span></justify><br />
<img src="https://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
</td>
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT} <img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
<td valign="top" nowrap="nowrap" class="post-options">
{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
</td>
</tr>
<tr>
<td colspan="2" class="hr">
<hr />
</td>
</tr>
<tr>
<td colspan="2">

<div class="vote gensmall">

<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>



<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">

<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>



<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>

</div>



<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>



<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>

</div>


<div class="postbody">

<div>{postrow.displayed.MESSAGE}</div>


<dl class="attachbox">
<dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
<dd>

<dl class="file">
<dt>
<img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />


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



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

</dt>


<dd>
<em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
</dd>



<dd>
<em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
</dd>


<dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
</dl>

</dd>
</dl>


<div class="clear"></div>

<div class="signature_div">
{postrow.displayed.SIGNATURE}
</div>


</div>
</td>
</tr>
</table>
</td>
</tr>
<tr class="post--{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
<td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
<a href="#top">{L_BACK_TO_TOP}</a> <a href="#bottom">{L_GOTO_DOWN}</a>
</td>
<td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle">
{postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG} {postrow.displayed.contact_field.CONTENT} {postrow.displayed.ONLINE_IMG}
</td>
</tr>
</table>
</td>
</tr>

</table>
<hr />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
<th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
</tr>




<tr align="center">
<td class="row1" colspan="3" height="28">
<span class="genmed">{no_post.L_NO_POST}</span>
</td>
</tr>

<tr align="right">
<td class="catBottom" colspan="3" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="9%" class="noprint"> </td>
<td align="center" class="t-title"><a name="bottomtitle"></a><div class="cattitle">{TOPIC_TITLE}</div></td>
<td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
<tr>
<td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>

<td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>

</tr>


<tr>
<td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
</tr>


</table>


<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
<tr>
<td class="catBottom" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="cattitle"> {PROMOT_TRAFIC_TITLE}</div></td>
<td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="row2 postbody" valign="top">

" <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />

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



<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
<tbody>
<tr>
<td class="catBottom">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top">
<div class="cattitle"> {L_FORUM_RULES}</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="row1 clearfix">
<table>
<tr>

<td class="logo">
<img src="{RULE_IMG_URL}" alt="" />
</td>

<td class="rules postbody">
{RULE_MSG}
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>


<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="row2" colspan="2" align="center" style="padding:0px">

<a name="quickreply"></a>
{QUICK_REPLY_FORM}<br />

</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
<tbody>

<tr>
<td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
<td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
</tr>

<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>

<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>

</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin:0; padding: 0;" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
<tbody>
<tr>
<td class="catBottom" colspan="2" height="28">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
<td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
<span class="nav">

<a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>


<a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>

</span>
</td>

<td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>


<td align="center">
<span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
</td>
<td align="center" width="250">
<span class="gensmall"> </span>
</td>

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


<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
<form name="action" method="get" action="{S_FORM_MOD_ACTION}">
<input type="hidden" name="t" value="{TOPIC_ID}" />


<input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

<span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
</form>
</td>
</tr>
</table>



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

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

Sujet: Re: DESIGN AVEC HEADER DE FOND Lun 23 Juil - 5:53

pour avoir une manière ajustable

Code:: #i_logo{
width:100%; /* La bannière prendra toute la place requise*/
height:auto; /*La bannière ne se déformera pas*/}

Sujet: Re: DESIGN AVEC HEADER DE FOND

" Bouton Design
" DESIGN WONDERLAND
" DESIGN DARK ONE
" DESIGN EVIL
" DESIGN OCEAN