Ven 11 Aoû - 17:01

Me voici sur mon noble destrier, venue quémander un peu de votre talent gente dame. (Paraît qu'avec la courtoisie on obtient ce que l'on veut. /PAN/)

Plus sérieusement, bonjouuuuur et d'avance un GRAAAAAND merci pour cette commande énormissime qui, j'en suis certaine, te rendra allergique à ma personne pendant trèèèèès longtemps. :'c (Enfin pas trop quand même, hein ?)
J'espère que tout sera clair pour toi, auquel cas... je reste dans les parages.

Forum : (J'le mets sous hide pour qu'on puisse le voir une fois qu'il sera tout beau tout propre ! )

Version : PHPBB2

Taille du forum : 900 px

Elément(s) demandé(s) : Alors... un portail (mais ça c'est pas le plus important si jamais le schéma te semble inconcevable), une page d'accueil, des catégories, un QEEL, la liste des sujets et la mise en forme des sujets. *reprend son souffle*

Maquette :

PORTAIL : www
PAGE D'ACCUEIL : www
CATÉGORIES : www
QEEL : www
LISTE SUJETS : www
SUJETS : www

Description :

PORTAIL : Si possible, intégrer un lecteur de musique (caché, dans le meilleur des cas sinon pas grave) - enfin en vrai j'ai peur que ça saoule les gens à force donc j'avoue que j'aimerais bien ton avis. ;w; Les boutons "Entrer dans la caverne" et "Entrer en tant qu'invité" changent de couleur progressivement (d'un bleu semblable à celui des champs ID et MDP).

PAGE D'ACCUEIL : Pour les liens j'avais pensé à deux idées : soit mettre un blur progressif sur le texte au passage du curseur, soit faire en sorte que les boutons liens utiles ("règles et jeu", "contexte", etc) se foncent progressivement. Les news qui défilent via les flèches, il faudrait que le texte sur les images soit du html ("titre de la news", "en savoir +/résumé" ainsi que la date) et que seule l'image en arrière plan soit graphée. Enfin, pour les images du staff, une opacité progressive avec le pseudo qui apparaît et les liens de contact. (J'ai zappé mais y'a aussi la barre de navigation, tu n'es pas obligée de la coder sachant qu'il y en a une similaire sur le site de CCCrush., donc à toi de voir :D).

CATÉGORIES : Petite question : pour les illustrations de lieux dans les catégories, est-ce possible de les coder pour qu'elles prennent la même forme que sur la maquette ou faudra-t-il que je les rende triangulaires via mon logiciel photoshop ? Et enfin, est-il possible d'apposer un filtre sur les images descriptives pour faire en sorte qu'elles s'harmonisent davantage avec le design quelque soit leurs couleurs de base ? (Tu vois genre un filtre qui obscurcit un poil). Après j'dis ça mais osef si c'est pas possible. D: *la fille pas reloue dès le départ*

QEEL : Juste mettre une opacité déprogressive lorsqu'on place le curseur sur les boutons de partenariats. Sinon, rien à signaler chef !

LISTE SUJETS : Rien d'autre à ajouter en plus de la maquette.

SUJETS : Idem.

Polices à utiliser : Celles sur les maquettes ne se retrouvent pas sur Google fonts, mais tu as des équivalents :
https://fonts.google.com/specimen/Caveat
https://fonts.google.com/specimen/Nothing+You+Could+Do
https://fonts.google.com/specimen/Reenie+Beanie
https://fonts.google.com/specimen/Italianno
https://fonts.google.com/specimen/Satisfy
https://fonts.google.com/specimen/Calligraffitti

Après très sincèrement, je sais me dépatouiller avec le CSS, héberger une police, etc. Donc ne t'embête pas avec cet aspect-là. :)

Images à utiliser : Sygea avait eu la gentillesse de me donner un fichier avec toutes les images soigneusement classées, je te le fais donc parvenir : clique ! N'hésite pas à me dire si certaines manquent. :)

Acceptez-vous que le code finisse en LS ? Boh, ça ne me dérange pas spécialement. Après, c'est davantage vos créations à toi et Sygea donc c'est à vous deux d'en décider. xD

Mode de rendu : Via le sujet ma p'tite dame ! Je ne saurais profiter de vous davan... *regarde sa grosse commande et rougit* OUI BON. JE PROFITE. ;w;

Autre chose à ajouter ? Encore merciiiii Hallo ! Si tu as la moindre question ou remarque par rapport à un truc qui te paraît irréalisable, n'hésite pas ! \o/

Ven 11 Aoû - 17:24

Allergique à toi ? Jamais
Avec les maquettes parfaites de Sygea ce sera forcément top

Alors.

Pour le portail, il claque sa mère donc pas le choix, on y arrivera (même si j'ai jamais testé XD). En ce qui me concerne par contre, j'aime bien pouvoir choisir si je veux de la musique ou non. Même si tu peux bloquer le son de ton onglet, genre si t'as oublié de couper le son des haut-parleurs qui sont à 100% (ça sent le vécu ), bah t'as pas toujours le réflexe. Peut-être un lecteur un peu discret ? A toi de voir. Il me faudrait le lien de la chanson peut-être par contre, je vais me renseigner un peu sur le concept.

Pour la page d'accueil j'avais déjà testé le slide en HTML + image et pour être honnête ça n'avait pas marché XD Je vais fouiner plus en détail. Après pas de difficulté particulière, juste c'est quoi du "blur" ? Un mot que je connais pas ou du "bleu" qui a foiré ? XD

Pour les catégories pas de soucis pour le filtre. Pour les images de descriptions je réfléchis ... peut-être qu'en bidouillant un peu l'image "no news" y a moyen de ne pas tout te faire recadrer. Je regarde et je te dis ^^

Pas de soucis pour le reste :) On verra avec Sygea à la fin pour le LS je pense, quand tu auras changé le tout une fois que ton forum cartonnera, dans pas longtemps 8D

Profite Luciole, profite

Ven 11 Aoû - 17:47

Cool. Cooool. COOOOOOOOL. Mici !

Alors, pour le lecteur si tu veux, j'ai un code utilisé sur Thotho, ça pourrait éventuellement t'aider (par contre c'était sur l'index et non sur un portail). Le lecteur était celui du site Wikiplayer :

CSS:

Page HTLM:

overall_footer_end:

Et pas de soucis pour la page d'accueil, sinon j'me dépatouillerai avec des images graphées, ne t'embête pas. :3

Je vois ce que tu veux dire pour les catégories, tu me rediras ça. o/

En tout cas, encore merci, j'ai hâte de voir tout ça.

Sam 12 Aoû - 20:24

Pouet !

J'ai avancé sur le footer, lentement mais sûrement. Tu peux t'installer au coin du feu si tu veux surveiller l'avancée

Les Lucioles d'Ukrysis

Je trouve que ça rend pas aussi bien avec les polices, je suis déception u3u Après je me demandais : les partenaires en footer doivent être visibles sur toutes les pages ou juste l'accueil ?

EDIT :

Liste des sujets
Catégories
Footer

Dim 13 Aoû - 18:27

Re-coucou madame renarde !

Je te l'ai déjà dit sur Discord mais tu avances vraiiiiment vite ! Par contre, je t'avais dit une largeur de 900 px, mais j'ai l'impression que les images de Sygea sont plus petites c'qui fait que les éléments sont pas alignés et que certaines images se répètent... serait-il possible d'ajuster la taille aux images, du coup ? ;w;

Pour la liste des sujets, tout est bon sauf pour le "aller à la page 1,2,3" (et le futur bouton "nouveau" message) qui n'est pas sur la barre noire. (D'ailleurs la barre noire est légèrement séparée du titre de catégorie sur le schéma, ce serait possible d'avoir pareil ? :D)

Pour les catégories, il serait possible de baisser les triangles inversés pour les aligner sur le bloc où y'a la description et l'image ? Ainsi que de baisser plus vers les petits blocs le bloc où figurent le dernier message posté et le posteur ? Et du coup pour les images descriptives je devrai les couper à gauche ? D:

Pour le footer, les partenariats ne figurent que sur l'index, comme tu l'as déjà fait. Par contre ce serait possible de faire en sorte que les logos aient un filtre et quand on place le curseur dessus, les réelles couleurs apparaissent ?

Voilàààà, désolée je chipote beaucoup, j'espère que mes demandes sont pas trop reloues. Prends ton temps en tout cas, et mille mercis pour ces beaux résultats. Ne t'en fais pas pour la police, j'essaierai d'en trouver une qui rende bien et je m'occuperai des modifications du css. :D

Orevoooooooar !

Lun 14 Aoû - 2:09

Pouet !

Tout est corrigé (sauf les descriptions comme on en a discuté).

J'ai avancé la mise en forme de sujet, j'essaie de voir comment agencer le bas de page pour la modération et je t'envoie une capture d'écran.

EDIT : Vuala.

Dim 20 Aoû - 18:59

A l'attaque

CSS (j'ai essayé de te l'annoter)

Code:

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none !important;
}

body {
  background: url('https://img4.hostingpics.net/pics/182485Fond.png') no-repeat fixed;
  background-size: cover;
  color: #e4dea1;
  font-family: cambria;
  font-size: 18px;
}

.bodylinewidth {
  width: 50.5%;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
}



/*********************************************** NAVIGATION ***********************************************/

/* Position et mise en forme générale */
#navigation {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  z-index: 99;
  padding: 1% 0;
  background: #090302;
  color: #5e3a16;
  font-family: Times New Roman;
  text-transform: uppercase;
}

/* Liens navigation & effet boutons bas categories */
#navigation a {
  color: #5e3a16 !important;
  font-size: 15px;
  text-align: right !important;
}

#navigation a:hover, #liens_bas_categories a:hover, #liens_haut_categories a:hover {
  color: #e4dea1 !important;
  transform: all;
  transition: 1s;
}

/* Position de l'avatar */
#avatar_navigation {
  width: 100px;
  margin-left: 8%;
  margin-top: 0.2%; 
  position: absolute;
  height: 100px;
}

/* Mise en forme de l'avatar */
#avatar_navigation img {
  object-fit: cover;
  width: 100px;
  border-radius: 50%;
  height: 100px;
}

/* Position des liens de navigation */
#text_navigation {
  margin-left: 15%;
  text-align: right;
}

/* Position du "Bienvenue" */
#bienvenue_navigation {
  text-align: left;
  position: absolute;
}



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

#page_daccueil {
  width: 900px;
  margin-top: -10%;
}

/* Mise en forme du bloc contexte de la page d'accueil */
#contexte_pa {
  background: rgba(0,0,0,0.3);
  text-align: justify;
  font-family: 'Caveat', cursive;
  font-size: 18px;
  padding: 10px;
  width: 880px;
}

/*Mise en forme du lien "lire la suite" et des boutons de liens rapides */
#contexte_pa a, .boutons_pa {
  text-transform: uppercase;
  text-align: center;
  color: #e4dea1 !important;
  display: block;
  font-family: cambria;
  font-size: 12px;
}

/* Mise en forme des boutons de liens rapides */
.boutons_pa {
  background: rgba(19,10,5,0.5);
  font-size: 14px;
  display: inline-block;
  margin: 1% .3% 1% 0;
  padding: 1% 0;
  width: 16.1%;
  transform: all;
  transition: 1s;
}

.boutons_pa:hover {
  background: #e4dea1;
  color: #090302 !important;
  transform: all;
  transition: 1s;
}

/* Blocs en quatre colonnes */
#staff, #new, #partenaires_pa, #defis, #contenu_slide_pa {
  float: left;
}

/* Largeur du bloc staff */
#staff {
  width: 20%;
}

/* Infobulles du staff */
.staff_pa {
  width: 70px;
  height: 90px;
  float: left;
  margin: 0% 4% 6% 5%;
}

.staff_pa_image {
  position: relative;
  z-index: 2;
  margin: 0;
}

.staff_pa:hover .staff_pa_image {
  z-index: 1;
  opacity: .5;
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(1);
  -o-filter: grayscale(1);
  -ms-filter: grayscale(1);
}

.contenu_staff_pa {
  position: relative;
  display: block;
  width: 70px;
  top: -100%;
  height: 70px;
  padding-top: 20%;
  z-index: 1;
  text-transform: uppercase;
  overflow: auto;
}

.contenu_staff_pa a {
  text-transform: lowercase;
  color: #e4dea1 !important;
}

.pseudo_staff {
  font-family: 'Satisfy', cursive;
  font-size: 20px;
  text-transform: capitalize;
}

/* Bloc des partenaires et des top sites */
#partenaires_pa {
  width: 25%;
}

.top_sites_pa {
  margin: 2% 7%;
}

.bouton_partenaires_pa {
  margin: 1%;
}

#defis {
  margin: auto;
  background: url('https://img4.hostingpics.net/pics/196654FondDefiduroi.png');
  text-transform: uppercase;
  color: #e4dea1;
  width: 15%;
  padding: 1%;

}

#contenu_defis_pa {
  text-align: center;
  font-family: cambria;
  background: rgba(0,0,0,0.5);
  padding: 25% 0;
}

#contenu_defis_pa h2 {
  font-family: 'Satisfy', cursive;
  text-transform: capitalize;
  font-size: 24px;
}

#defis h3 {
  font-size: 18px;
  text-align: left;
  margin-top: 2%;
  font-weight: normal;
}

#defis h4 {
  font-size: 12px;
  text-align: left;
  font-weight: normal;
}

#contenu_defis_pa a {
  font-size: 14px;
  color: #e4dea1 !important;
}


/* Slider */

.slideshow, .slide {
  width: 310px;
  height: 140px;
}

.slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.slideshow h2, .slideshow h3, .slideshow a{
  position: relative;
  z-index: 2;
  text-align: center;
  color: #e4dea1;
  text-transform: capitalize;
}

.slideshow h2 {
  font-family: 'Satisfy', cursive;
  font-size: 24px;
  margin-top: 8%;
}

.slideshow h3 {
  font-size: 12px;
  color: #4a371f;
}

.slideshow a {
  font-family: cambria;
  font-size: 14px;
  text-transform: uppercase;
}

.slideshow {
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  position: relative;
}

.slideshow div {
  position: relative;
  top: 0;
  left: 0;
}
 
.slide {
  margin: auto;
  overflow: auto;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  color: white;
}

.slide p {
  margin: 10px;
  text-align: justify;
}

#contenu_slide_pa {
  background: url('https://img4.hostingpics.net/pics/853136FondNews.png');
  width: 310px;
  padding: 10px;
  text-transform: uppercase;
  text-align: center;
  color: #e4dea1;
  font-family: cambria;
  font-size: 15px;
}


/*********************************************** CATEGORIES ***********************************************/

/* Bloc général des catégories */
#categories {
  width: 900px;
  margin: auto;
}

/* Mise en forme nom de catégorie */
#entete_categories {
  background: url('https://img4.hostingpics.net/pics/977948EnteteCategorie.png');
  padding: 1.7% 0;
  margin-top: 2%;
  width: 900px;
}

.cate_titre h2 {
  background: rgba(0,0,0,0.5);
  text-align: center;
  font-family: 'Satisfy', cursive;
  width: 90%;
  padding: 0.1%;
  margin: auto; 
  font-size: 30px;
}

.cate_titre h2 a {
  opacity: 1;
  color: #e4dea1 !important;
}

/* Mise en forme du bloc forum */
#forum {
  background: rgba(0,0,0,0.5);
  width: 900px;
  margin: auto;
  margin: -1.3% 0 1% 0;
  height: 160px;
  position: relative;
}

/* Mise en forme du titre de forum */
a.forumlink {
  text-align: center;
  font-family: 'Satisfy', cursive;
  font-size: 24px;
  text-align: center;
  color: #e4dea1 !important;
  display: block;
  margin-top: 2%;
  z-index: 3;
  position: relative;
}

a.forumlink:hover {
  color: #5e3a16 !important;
  transform: all;
  transition: 1s;
}

/* Mise en forme des descriptions de forum */
#description_categories {
  width: 35%;
  text-align: justify;
  font-size: 12px;
  font-family: cambria;
  margin: 3%;
  height: 120px;
  overflow: auto;
  float: left;
}

/* Positionnement de l'illustration de forum */
.img_description {
  float: right;
  width: 450px;
}

/* Positionnement images "New", "No new", "Lock" */
#statut_message_categories {
  float: right;
  margin-right: 360px;
  margin-top: -174px;

}

/* Mise en forme dernier message */
#dernier_categories {
  float: right;
  background: rgba(0,0,0,0.5);
  width: 35%;
  margin-top: -18%;
  margin-right: 4%;
  font-size: 14px;
  text-align: center;
  padding: 2% 0;
  color: #7b7b7d;
}

#dernier_categories a {
  color: #7b7b7d !important;
  font-style: italic;
}

#dernier_categories a:hover {
  color: #e4dea1 !important;
  transform: all;
  transition: 1s;
}

/* Mise en forme des stats de forum */
#stats_messages, #stats_sujets {
  width: 15%;
  float: right;
  background: rgba(0,0,0,0.5);
  margin-top: -6%;
  font-size: 14px;
  text-align: center;
  color: #7b7b7d;
  padding: 0.3% 0;
}

#stats_messages {
  margin-right: 24%;
}

#stats_sujets {
  margin-right: 4%;
}

/* Mise en forme des sous-forum */
.sous-forum {
  background: rgba(0,0,0,0.5);
  width: 900px;
  text-align: center;
  text-transform: uppercase;
  font-size: 16px;
  padding: 1% 0;
  margin-bottom: 0.5%;
}

.sous-forum a {
  color: #e4dea1 !important;
  margin: 0 1%;
  transform: all;
  transition: 1s;
}

.sous-forum a:hover {
  letter-spacing: 2px;
}

/* Image de fin de catégories */

#footer_categories {
  background: url('https://img4.hostingpics.net/pics/977948EnteteCategorie.png');
  margin-top: 1%;
  width: 900px;
  height: 40px;
  content: "";
}


/*********************************************** QUI EST EN LIGNE ? ***********************************************/

/* Mise en forme des liens "Cookies" et liens des derniers posteurs + liens haut catégories*/
#liens_bas_categories, #liens_haut_categories {
  width: 890px;
  text-align: center;
  margin: auto;
  background: rgba(0,0,0,0.5);
  padding: 5px;
  font-size: 14px;
  color: #4a371f;
}

#liens_bas_categories a, #liens_haut_categories a {
  color: #4a371f !important;
  margin: 0 1%;
}

/* Mise en forme contenant du qeel */
#qeel {
  width: 890px;
  background: url('https://img4.hostingpics.net/pics/309421Fond.png');
  margin: auto;
  padding-top: 1%;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 1%;
}

/* Mise en forme titre qeel */
#qeel h2 {
  font-family: 'Satisfy', cursive;
  font-size: 35px;
  color: #e4dea1;
  text-align: center;
}

/* Colonnes de gauche (stats, connectés et les dernières 24h) et de droite (dernier inscrit) */
#gauche_qeel, #droite_qeel {
  float: left;
  margin: auto;
}

#gauche_qeel {
  width: 75%;
  margin-right: 2%;
}

#droite_qeel {
  width: 22%;
}

/* Mise en forme générale de chaque bloc noir */
.bloc_qeel {
  margin: auto;
  background: rgba(0,0,0,0.7);
  color: #e4dea1;
  font-family: 'Satisfy', cursive;
  font-size: 16px;
  text-align: justify;
  padding: 2%;
}

/* Mise en forme des blocs "Connectés" et "Dernières 24h" */
.colonnes_qeel {
  float: left;
  height: 90px;
  margin: 1.3% 1%;
  width: 44%;
  font-size: 12px;
  overflow: auto;
  font-family: cambria;
}

.colonnes_qeel a {
  font-family: 'Satisfy', cursive;
  font-size: 16px;
}

/* Mise en forme "Dernières 24h" */
#kaboum {
  font-size: 12px;
}

/* Mise en forme bloc dernier inscrit */
.qeel_dernier {
  margin-top: 19.3%;
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  font-family: cambria;
}

/* Mise en forme du pseudo */
.qeel_dernier a {
  font-family: 'Caveat', cursive;
  font-size: 30px;
  text-transform: capitalize;
}

/* Positionnement de l'avatar du dernier inscrit */
#ava_dernier_membre {
  text-align: center;
}

/* Mise en forme de l'avatar du dernier inscrit */
#ava_dernier_membre img{
  width: 150px;
  height: 150px;
  text-align: center;
  border-radius: 50%;
  border: 4px solid #1a0f09;
  object-fit: cover;
  margin-top: -25%;
  margin-bottom: 5%;
}

/* Mise en forme du texte "Bienvenue camarade !"*/
#bienvenue_new_qeel {
  color: #bc8a39;
}

/* Mise en forme des groupes */
#groupe1, #groupe2, #groupe3, #groupe4 {
  width: 22%;
  display: block;
  margin: 0 0.5%;
  background: rgba(0,0,0,0.7);
  text-transform: uppercase;
  text-align: center;
  float: left;
  padding: 1%;
  font-size: 12px;
}

#groupe1 {color: #9e4702 !important;}
#groupe2 {color: #826012 !important;}
#groupe3 {color: #5e6a8b !important;}
#groupe4 {color: #986270 !important;}



/*********************************************** FOOTER ***********************************************/

/* Mise en forme des partenaires */
#partenaires_footer img {
  margin: 0.2%;
  opacity: 0.5;
  transform: all;
  transition: 1s;
}

#partenaires_footer img:hover {
  opacity: 1;
  transform: all;
  transition: 1s;
}

/* Mise en forme du texte du footer */
#footer {
  color: #332c20;
  font-size: 12px;
  text-align: center;
  margin-bottom: 2%;
}

/* Mise en forme du bouton "Panneau d'administration" */
#page-footer a[href^="/admin"], #sujets_lus {
    background: rgba(0,0,0,0.7);
    color: #e4dea1!important;
    display: block;
    text-align: center;
    text-transform: uppercase;
    width: 30%;
    line-height: 2;
    font-size: 12px;
    margin: auto;
    margin-bottom: 10px;
}

#page-footer a[href^="/admin"]:hover {
  background: #e4dea1;
  color: #090302 !important;
  transform: all;
  transition: 1s;
}




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

/* Mise en forme bouton "nouveau" et pagination" */
#navigation_liste_sujets {
  background: rgba(0,0,0,0.7);
  width: 98%;
  padding: 1%;
  margin: 1% 0 1% 0;
}

#pagination_sujets {
  float: right;
  font-size: 12px;
}

#pagination_sujets a {
  color: #e4dea1 !important;
}

/* Mise en forme des boutons "modérer" et "Marquer comme lus" */
#moderer_sujets {
  font-size: 0 !important;
}

#boutons_moderation_sujets {
  width: 100%;
  margin: 1% 0;
  text-align: center;
}

#moderer {
  color: #e4dea1 !important;
  width: 30%;
  background: rgba(0,0,0,0.7);
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  font-size: 12px;
  margin: auto;
  line-height: 2;
}

#sujets_lus:hover, #moderer:hover, #moderer a:hover {
  background: #e4dea1;
  color: #090302 !important;
  transform: all;
  transition: 1s;
}

#moderer_sujets a {
  font-size: 12px !important;
  color: #e4dea1 !important;
}

/* Fond de chaque sujet */
#liste_sujets {
  width: 100%;
  background: rgba(0,0,0,0.5);
  color: #e4dea1;
  margin: 1% 0;
}

/* Bouton "no new", "new", "lock", "annonce" et "note" */
#statut_liste_sujets, #titre_desc_liste_sujets {
  float: left;
}

/* Positionnement du dernier message, de l'auteur et des stats */
#dernier_liste_sujets, #auteur_liste_sujets, #rep_vues_liste_sujets {
  float: right;
}

/* Positionnement des descriptions */
#titre_desc_liste_sujets {
  margin-left: 1%;
}

/* Mise en forme des titres de sujets */
#topictitle {
  font-family: 'Caveat', cursive;
  font-size: 25px;
  color: #e4dea1;
}

#topictitle:hover {
  color: #5e3a16 !important;
  transform: all;
  transition: 1s;
}

/* Mise en forme des descriptions de sujets */
#description_liste_sujets {
  text-transform: uppercase;
  font-size: 12px;
}

/* Mise en forme dernier message */
#dernier_liste_sujets {
  background: rgba(0,0,0,1);
  width: 30%;
  text-align: center;
  font-size: 12px;
  margin-top: 1.3%;
  margin-right: 1%;
  padding: 1%;
}

/* Mise en forme de l'auteur et des stats */
#auteur_liste_sujets, #rep_vues_liste_sujets {
  width: 20%;
  padding: 0.5%;
  text-align: center;
  background: rgba(0,0,0,0.5);
  font-size: 12px;
}

/* Position de l'auteur du sujet */
#auteur_liste_sujets {
  margin: 0 1%;
}




/*********************************************** MISE EN FORME DU SUJET / PROFIL ***********************************************/

/* Mise en forme titre sujet */
.titre_sujet {
  background: rgba(0,0,0,0.5);
  text-align: center;
  font-family: 'Satisfy', cursive;
  width: 90%;
  padding: 0.1%;
  margin: auto; 
  font-size: 30px;
}

/* Positionnement boutons "Nouveau" et "Répondre" */
.img_rep_new_sujet {
  float: left;
  margin: 1%;
}

/* Fond transparent qui englobe le profil + le message */
#contenu_message_profil {
  background: rgba(0,0,0,0.5);
  margin-top: -5%;
}

/* Mise en forme profil */
#profil_message {
  margin: auto;
  padding: 1%;
  background: #0d0504;
  width: 30%;
}

/* Position avatar */
#avatar_profil {
  margin-bottom: 5%;
}

/* Mise en forme bloc info profil */
#contenu_profil {
  background: url('https://img4.hostingpics.net/pics/715367fondStatprofil2.jpg') no-repeat #000;
  margin: 1% 0;
  width: 92%;
  padding: 4%;
}

/* Mise en forme pseudo et rang du profil */
#pseudo_rang_profil {
  background: rgba(24,14,8,0.8);
  text-align: center;
  width: 100%;
  margin: auto;
  text-transform: uppercase;
  font-size: 12px;
  padding: 3% 0;
}

#pseudo_rang_profil a {
  font-size: 30px;
  font-family: 'Caveat', cursive;
  text-transform: capitalize;
}

/* Mise en forme contenu bloc d'informations */
#bloc_infos_profil {
  background: rgba(24,14,8,0.8);
  width: 90%;
  margin: auto;
  font-size: 12px;
  padding: 5%;
  color: #472d2d;
}

#bloc_infos_profil a {
  display: none;
}

/* Position boutons MP et Profil */
#img_profil_mp {
  text-align: center;
}

/* Position "En ligne" */
#en_ligne_message {
  text-align: center;
  margin: 10% 0;
}

/* Mise en forme "Editer", "Citer", "Supprimer", "IP", date */
#informations_post {
  background: rgba(0,0,0,0.7);
  color: #472d2d;
  font-size: 11px;
  margin: % 0;
  padding: 2%;
  width: 96.8%;
}

#informations_post img {
  float: right;
  margin: 0.7% 1%;
}

/* Mise en forme du contenu de message */
#contenu_message {
  background: url('http://zupimages.net/up/17/33/j0v8.png') no-repeat bottom #0f0704;
  color: #472d2d;
  font-size: 11px;
  margin: % 0;
  padding: 2%;
  width: 96.8%;
  color: #d3c0a5;
}

/* Mise en forme du fond de signature */
#contenu_signature {
  margin-top: -6%;
}

/* Bouton "surveiller le sujet" */
#surveiller_sujets a {
  color: #e4dea1 !important;
  width: 30%;
  padding: 1%;
  background: rgba(0,0,0,0.7);
  text-transform: uppercase;
  text-align: center;
  font-size: 12px;
  margin: auto;
  display: block;
  margin-top: 2%;
}

#surveiller_sujets a:hover {
  background: #e4dea1;
  color: #090302 !important;
  transform: all;
  transition: 1s;
  margin-top: 2%;
}



#lucioles {
  background: url('https://img4.hostingpics.net/pics/696540PortailFond.png') no-repeat; margin: 0;background-attachment: fixed; padding: 0; width: 100%; background-size: cover;
}

Dim 20 Aoû - 19:00

PA

Code:

<div id="page_daccueil">
   <div id="contexte_pa">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque accumsan ante eu pharetra. Duis at leo sapien. Ut egestas aliquam cursus. Maecenas vehicula urna euismod lacus finibus finibus. Mauris auctor urna ut erat pellentesque consequat. Suspendisse at velit vehicula, vestibulum odio quis, porttitor purus. Proin neque mi, dapibus at facilisis vel, malesuada eu lectus. Mauris sodales ullamcorper ante nec ultrices. Nunc purus nulla, semper eu cursus quis, dapibus quis eros. Proin cursus ligula non enim vestibulum, non vestibulum massa auctor. Praesent non euismod nisl, non eleifend orci. Etiam ultrices pharetra faucibus. Nam mollis dolor est, in tincidunt tortor elementum.<br /><br />Nunc lobortis nulla id porttitor bibendum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus eget congue urna, id sollicitudin odio. In facilisis, lectus in elementum aliquam, ante eros gravida nunc, eu fringilla enim felis quis turpis. Mauris felis nisi, consequat sed posuere a, sodales faucibus lacus. Pellentesque ut mauris eu dolor luctus dignissim a nec leo. Sed vel vulputate mauris. Proin a lectus pharetra, varius ex ut, auctor lacus. Donec sollicitudin ante ut dui aliquam fringilla. Quisque gravida tellus dapibus, sagittis diam ac, aliquam justo. Donec consectetur odio ac nisl tincidunt malesuada. Pellentesque at risus accumsan, pellentesque ipsum vestibulum, sodales ex. <br /><a href="#">Lire la suite</a>
   </div>
    <a class="boutons_pa" href="#">Règles & jeu</a> <a class="boutons_pa" href="#">Contexte</a> <a class="boutons_pa" href="#">Postes & Bottin</a> <a class="boutons_pa" href="#">Annexes</a> <a class="boutons_pa" href="#">Predef & Scénario</a> <a class="boutons_pa" href="#">Crédits & Staff</a>
   <div id="staff">
                                     
      <div class="staff_pa">
                                   <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/460292Staff1.png" />                         
         <div class="contenu_staff_pa">
                                      <span class="pseudo_staff">Pseudo</span><br />Présent<br /><a href="#">Contact</a>                         
         </div>
                                                          
      </div>
                                 
      <div class="staff_pa">
                                   <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/231601staff2.png" />                         
         <div class="contenu_staff_pa">
                                    <span class="pseudo_staff">Pseudo</span><br />Présent<br /><a href="#">Contact</a>             
         </div>
                                                          
      </div><br />             
      <div class="staff_pa">
                                   <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/889158staff3.png" />                         
         <div class="contenu_staff_pa">
                                    <span class="pseudo_staff">Pseudo</span><br />Présent<br /><a href="#">Contact</a>                     
         </div>
                                                          
      </div>
                                 
      <div class="staff_pa">
                                   <img class="staff_pa_image" src="https://img4.hostingpics.net/pics/460292Staff1.png" />                         
         <div class="contenu_staff_pa">
                                      <span class="pseudo_staff">Pseudo</span><br />Présent<br /><a href="#">Contact</a>                       
         </div>
                                                          
      </div>
   </div>
   <div id="contenu_slide_pa">
                   
      <!--          Slideshow infini horizontal          -->       
      <div id="slideshow" class="slideshow">
                              
         <div id="slideshow-container">
                                     
            <div class="slide">
                                            
               <h2>
                          Titre de la New       
               </h2>
                    
               <h3>
                      12.05.2017   
               </h3><a target="_blank" href="#">En savoir + / Résumé</a>                <img src="https://img4.hostingpics.net/pics/531878imgnew.png" alt="new1" />               
            </div>
                                         
            <div class="slide">
                                            
               <h2>
                          Titre de la New 2   
               </h2>
                    
               <h3>
                      12.05.2017   
               </h3><a target="_blank" href="#">En savoir + / Résumé</a>                <img src="https://img4.hostingpics.net/pics/758500imgnew2.png" alt="new2" />                     
            </div>
                                             
            <div class="slide">
                                            
               <h2>
                          Titre de la New 3     
               </h2>
                    
               <h3>
                      12.05.2017   
               </h3><a target="_blank" href="#">En savoir + / Résumé</a>                <img src="https://img4.hostingpics.net/pics/531878imgnew.png" alt="new1" />       
            </div>
                                                                       
            <!--         
            Vous pouvez ajouter autant de slides que possible avec le template suivant :
         
            <div class="slide">
                --- votre contenu ici ---
            </div>
                  -->           
         </div>
                      
      </div>
            Bienvenue dans la caverne aux lucioles       
   </div>
   <div id="partenaires_pa">
                  <a href="#" target="_blank"><img class="bouton_partenaires_pa" src="https://img4.hostingpics.net/pics/654625PartenairePA.png" /></a> <a href="#" target="_blank"><img class="bouton_partenaires_pa" src="https://img4.hostingpics.net/pics/654625PartenairePA.png" /></a> <a href="#" target="_blank"><img class="bouton_partenaires_pa" src="https://img4.hostingpics.net/pics/654625PartenairePA.png" /></a> <a href="#" target="_blank"><img class="bouton_partenaires_pa" src="https://img4.hostingpics.net/pics/654625PartenairePA.png" /></a> <a href="#" target="_blank"><img class="bouton_partenaires_pa" src="https://img4.hostingpics.net/pics/654625PartenairePA.png" /></a> <a href="#" target="_blank"><img class="bouton_partenaires_pa" src="https://img4.hostingpics.net/pics/654625PartenairePA.png" /></a><br /><a href="#" target="_blank"><img class="top_sites_pa" src="https://img4.hostingpics.net/pics/507457TopSite1.png" /></a> <a href="#" target="_blank"><img class="top_sites_pa" src="https://img4.hostingpics.net/pics/873212TopSite2.png" /></a> <a href="#" target="_blank"><img class="top_sites_pa" src="https://img4.hostingpics.net/pics/949703TopSite3.png" /></a>
   </div>
   
   <div id="defis">
      
      <div id="contenu_defis_pa">
         
         <h2>
             Titre
         </h2><a href="#" target="_blank">En savoir +</a>
      </div>
      
      <h3>
          Defi du roi
      </h3>
      
      <h4>
          Semaine/Mois du ...
      </h4>
   </div>
</div>

Contenu d'une description de forum (image en 460*160px)

Code:

<div id="description_categories">
         Nemo quaeso miretur si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti. Demo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti. Remo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.     
</div><img src="https://img15.hostingpics.net/pics/543957485305ryosiosfull.jpg" class="img_description" />

Dim 20 Aoû - 19:00

Template Index_body

Code:

{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="{switch_user_login_form_header.V_ALIGN}" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

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

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_header.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}

<div id="liens_bas_categories"><a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a> |
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a> |
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a> | <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index --></div>


<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
        <tr>
            <td width="50%" valign="top" align="right" class="row1">

                <table>
                    <tr>
                        <td><span class="genmed">{L_USERNAME}:</span> </td>
                        <td><input class="post" type="text" size="10" name="username"/> </td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span> 
                        </td>
                    </tr>

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

            <!-- BEGIN switch_social_login -->
            <td width="10%" align="center" valign="middle" class="row1">
                <span class="genmed fb_or">{switch_user_login_form_footer.switch_social_login.L_OR}</span>
            </td>
            <td width="40%" class="align_gauche row1">
                <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

        </tr>
    </table>
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->

<div id="qeel">
     <div id="gauche_qeel">
             <h2>Les lueurs mouvantes</h2>
             <div class="bloc_qeel" style="width: 94%; margin-top: -2.5%;">
                     <span id="bert">{TOTAL_POSTS}</span>
                     <span id="matt">{TOTAL_USERS}</span>
           </div>
             <div class="bloc_qeel colonnes_qeel">
                     <span id="alpha">{LOGGED_IN_USER_LIST}</span>
             </div>
             <div class="bloc_qeel colonnes_qeel">
                     <table id="kaboum" style="font-size: 12px;">{L_CONNECTED_MEMBERS}</table>
             </div>
     </div>
     <div id="droite_qeel">
          <div class="bloc_qeel qeel_dernier">
                     <div id="ava_dernier_membre"><span id="avatar_dernier_membre"></span></div>
                         <span id="dernier_membre">{NEWEST_USER}</span>
                     <div id="bienvenue_new_qeel">Bienvenue camarade !</div>
             </div>
     </div>
     <div class="clear"></div>
     <a href="#" id="groupe1">6 PNJs</a> <a href="#" id="groupe2">101 villageois</a> <a href="#" id="groupe3">50 détrousseurs</a> <a href="#" id="groupe4">35 explorateurs</a>
     <div class="clear"></div>
</div>

<script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Zalibaba, la sorcière du village, pourra vous comter ").replace(/messages/,"récits.");</script>
<script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"De quoi égayer vos soirées autour du feu ... ").replace(/membre enregistré/,"villageois l'écouteront peut-être, profitant des victuailles et du chant des lyres !");</script>
<script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés :/,"Paires de pied parcourrant actuellement la caverne :<br />");</script>
<script type="text/javascript">document.getElementById('kaboum').innerHTML= document.getElementById('kaboum').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/,"Mais d'autres se trouvaient là il y a 24 heures :<br />");</script>
<script type="text/javascript">document.getElementById('dernier_membre').innerHTML=document.getElementById('dernier_membre').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier arrivant est");</script>
<br /><br />
<div class="bloc_qeel" id="partenaires_footer">
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <br />
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <br />
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
     <a href="#" target="_blank"><img src="https://img4.hostingpics.net/pics/180753PartenairePA.png" /></a>
</div>

<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}

<br clear="all" />

{AUTO_DST}

Template Index_box

Code:

<div id="liens_haut_categories">
        <!-- BEGIN switch_user_logged_in --><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a><!-- END switch_user_logged_in -->
      |
        <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
           |
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
           |
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>

     <!-- BEGIN catrow -->
<div id="categories"><!-- BEGIN tablehead --><div id="entete_categories"><div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div></div><!-- END tablehead -->   
     
     <!-- BEGIN forumrow -->
     <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
     <div id="forum">
             
                  {catrow.forumrow.FORUM_DESC}
             
             <img id="statut_message_categories" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" />
             <div id="dernier_categories">
                  {catrow.forumrow.LAST_POST}
             </div>
                <div id="stats_messages">
                  {catrow.forumrow.POSTS} M.
           </div>
             <div id="stats_sujets">
                  {catrow.forumrow.TOPICS} S.
             </div>
             <div class="clear">
        </div>
     </div>
     <div class="sous-forum"><div id="sous_forum">
             {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
          </div></div>

<script type="text/javascript">jQuery('#sous_forum').html(jQuery('#sous_forum').html().replace(/, /g,' ')).removeAttr('id');</script>

   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <!-- END catfoot -->
  <!-- BEGIN tablefoot --><div id="footer_categories"></div></div>
<!-- END tablefoot -->
<!-- END catrow --><br /><br /><div class="clear"></div>

Dim 20 Aoû - 19:02

Template overall_footer_begin

Code:

<!-- BEGIN html_validation -->
<div>
   <div>
      <table>
         <tbody>
            <tr>
               <td>
<!-- END html_validation -->
               </td>
               <td valign="top" width="{C3SIZE}">
               <div id="{ID_RIGHT}">
                  <!-- BEGIN giefmod_index2 -->
                  {giefmod_index2.MODVAR}
                  <!-- BEGIN saut -->
                  <div style="height: {SPACE_ROW}px"></div>
                  <!-- END saut -->
                  <!-- END giefmod_index2 -->
               </div>
               </td>
            </tr>
         </tbody>
      </table>
   </div>
</div>
<!-- close div id="page-body" -->
<div id="page-footer">
   <div align="center">
      <div class="gen">
                  <div id="footer">Toute reproduction totale ou partielle est strictement interdite.<br /><br />
  Forum fondé et administré par Ukrysis.<br />
  Thème par Sygea de NMD & Codage par Pseudo.</div>
<!-- BEGIN html_validation -->
      </div>
   </div>
</div>
<!-- END html_validation -->

Template overall_footer_end

Code:

<!-- BEGIN html_validation -->
<!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>
<!-- END html_validation -->
               </div>
            </div>
            <!-- BEGIN switch_footer_links -->
                         
                                  <div align="center">
               <div class="gen" id="footer">
                  <!-- BEGIN footer_link -->
                     <!-- BEGIN switch_separator --> |&nbsp;<!-- END switch_separator -->
                     <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>
                  <!-- END footer_link -->
               </div>
            </div>
            <!-- END switch_footer_links -->
                          </div>
         {PROTECT_FOOTER}
      </td>
   </tr>
</table>

<!-- BEGIN switch_facebook_login -->
<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>
<!-- END switch_facebook_login -->
<script type="text/javascript">
//<![CDATA[
   fa_endpage();
//]]>
</script>
</body>
</html>

Template 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>
    <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
    <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
    <meta http-equiv="content-script-type" content="text/javascript" />
    <meta http-equiv="content-style-type" content="text/css" />
    <!-- BEGIN switch_compat_meta -->
    <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
    <!-- END switch_compat_meta -->
    <!-- BEGIN switch_canonical_url -->
    <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
    <!-- END switch_canonical_url -->
    {META_FAVICO}
    {META}
    {META_FB_LIKE}
    <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
  <link href="https://fonts.googleapis.com/css?family=Satisfy|Italianno|Caveat" rel="stylesheet">
    {T_HEAD_STYLESHEET}
    {CSS}
    <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
    <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
    <script src="{JQUERY_PATH}" type="text/javascript"></script>
    <!-- BEGIN switch_recent_jquery -->
    <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
    <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
    <!-- END switch_recent_jquery -->
    <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script> 
    {RICH_SNIPPET_GOOGLE}

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

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

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

        switch( tickerDirParam ) {
            case 'top' :
                slid_vert = true;
                break;
            case 'left':
                break;
            case 'bottom':
                slid_vert = true;
                auto_dir = 'prev';
                break;
            case 'right':
                auto_dir = 'prev';
                break;
            default:
                slid_vert = true;
        }

        $(document).ready(function() {
            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>
    <!-- END switch_ticker_new -->

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

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

    <!-- BEGIN switch_login_popup -->
    $(document).ready( function() {
        $(window).resize(function() {
            var windowWidth = document.documentElement.clientWidth;
            var popupWidth = $("#login_popup").width();
            var mypopup = $("#login_popup");

            $("#login_popup").css({
            "left": windowWidth/2 - popupWidth/2
                });
        });
    });
    <!-- END switch_login_popup -->
    //]]>
    </script>
    {GREETING_POPUP}
    <!-- BEGIN switch_ticker_new -->
    <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>
    <!-- END switch_ticker_new -->
    {HOSTING_JS}
    <!-- BEGIN google_analytics_code -->
    <script type="text/javascript">
    //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);

    <!-- BEGIN google_analytics_code_bis -->
    _gaq.push(['b._setAccount', '{G_ANALYTICS_ID_BIS}']);
    _gaq.push(['b._trackPageview']);
    <!-- END google_analytics_code_bis -->

    (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>
    <!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
    <!-- BEGIN hitskin_preview -->
    <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>
    <!-- END hitskin_preview -->

    <!-- BEGIN switch_login_popup -->
    <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>
    <!-- END switch_login_popup -->

    <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>
                        <!-- BEGIN switch_logo_left -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_left -->
                        <td align="center" width="100%" valign="middle">
                            <!-- BEGIN switch_logo_center -->
                            <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                            <br />
                            <!-- END switch_logo_center -->
                            <div class="maintitle">{MAIN_SITENAME}</div>
                            <br />
                           
                        </td>
                        <!-- BEGIN switch_logo_right -->
                        <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                        <!-- END switch_logo_right -->
                    </tr>
                </table>

               
              <div id="navigation"> <div class="js-useravatar" id="avatar_navigation"></div><div id="text_navigation"><div id="bienvenue_navigation">Bienvenue  <span class="js-username"></span> !</div> {GENERATED_NAV_BAR}</div></div>

                <div style="clear: both;"></div>

                <!-- BEGIN switch_ticker_new -->
                <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;">
                                        <!-- BEGIN ticker_row -->
                                        <li>{switch_ticker.ticker_row.ELEMENT}</li>
                                        <!-- END ticker_row -->
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker_new -->

                <!-- BEGIN switch_ticker -->
                <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">
                                            <!-- BEGIN ticker_row -->
                                            <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                            <!-- END ticker_row -->
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
                <!-- END switch_ticker -->

                <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}">
                                            <!-- BEGIN giefmod_index1 -->
                                            {giefmod_index1.MODVAR}
                                                <!-- BEGIN saut -->
                                                <div style="height:{SPACE_ROW}px"></div>
                                                <!-- END saut -->
                                            <!-- END giefmod_index1 -->
                                        </div>
                                    </td>
                                    <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>
<!-- END html_validation -->

Dim 20 Aoû - 19:03

Template topics_list_box

Code:

<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
   var all_checked = true;
   for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
   }
   document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
   for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
         document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
   }
}
</script>
<!-- END multi_selection --><!-- END header_table --><!-- BEGIN header_row --><!-- END header_row -->
 
<!-- BEGIN topic -->
<div id="liste_sujets">
     <img id="statut_liste_sujets" title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
     
     <div id="titre_desc_liste_sujets">
             <a id="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">
                {topics_list_box.row.TOPIC_TITLE}
       </a>
     
        <!-- BEGIN switch_description -->
           <div id="description_liste_sujets">{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}</div>
      <!-- END switch_description -->
     </div>
     <div id="dernier_liste_sujets">
             {topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}
     </div>
     <div class="clear"></div>
</div>
     <div id="rep_vues_liste_sujets">
             {topics_list_box.row.REPLIES} R. | {topics_list_box.row.VIEWS} V.
     </div>
     <div id="auteur_liste_sujets">
             Posté par {topics_list_box.row.TOPIC_AUTHOR}
     </div>
  <div class="clear"></div>
     
<!-- END topic -->
  <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
 
  <!-- BEGIN footer_table --><div id="footer_categories"></div>
<!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Template viewforum_body

Code:

{BOARD_INDEX}

<!-- BEGIN catrow --><!-- BEGIN tablehead --><div id="entete_categories"><div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div></div><!-- END tablehead -->   <!-- END catrow -->

<div id="navigation_liste_sujets">
     <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
   <!-- END switch_user_authpost -->
 
     <div id="pagination_sujets">
             {PAGINATION}
        </div>
     <div class="clear"></div>
</div>


{TOPICS_LIST_BOX}

<div id="boutons_moderation_sujets">
     <a id="sujets_lus" href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>
     <div id="moderer">
             <div id="moderer_sujets">{S_AUTH_LIST}</div>
    </div>
</div>

Template viewtopic_body

Code:

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

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
     <tr>
             <div id="entete_categories">
                     <h2 class="titre_sujet">{TOPIC_TITLE}</h2>
             </div>
     </tr>
     <tr>
             <div valign="middle" id="navigation_liste_sujets">
           <!-- BEGIN switch_user_authpost --><a href="{U_POST_NEW_TOPIC}" class="img_rep_new_sujet" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" border="0" /></a><!-- END switch_user_authpost -->
                     <!-- BEGIN switch_user_authreply --><a href="{U_POST_REPLY_TOPIC}" class="img_rep_new_sujet"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a><!-- END switch_user_authreply -->
 
           <div id="pagination_sujets">
                   {PAGINATION}
              </div>
           <div class="clear"></div>
          </div>
     </tr>
</table>

<table width="100%" id="contenu_message_profil" border="0" cellspacing="2" cellpadding="0" >
   
<!-- BEGIN postrow --> 
   <!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
         
             <td id="profil_message" class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <div id="avatar_profil">
                             {postrow.displayed.POSTER_AVATAR}
                     </div>
                     <div id="contenu_profil">
                             <div id="pseudo_rang_profil">
                                  <a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>{postrow.displayed.POSTER_NAME}<br />
                                « {postrow.displayed.POSTER_RANK} »
                             </div>
                             <br />
                             <div id="bloc_infos_profil">
                                     <!-- BEGIN profile_field -->{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field -->
                                     {postrow.displayed.POSTER_RPG}
                             </div>
                             <div id="img_profil_mp">
                                     {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG}
                             </div>
                             <div id="en_ligne_message">
                                     {postrow.displayed.ONLINE_IMG}
                             </div>
                     </div>
      </td>
         
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                                     <div id="informations_post">
                  {postrow.displayed.POST_DATE}
                  {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.REPORT_IMG}
                                     </div>
                             </tr>
                             <br />
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

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

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

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

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

                  <div class="postbody">

                     <div id="contenu_message">{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <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}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {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}
                                 <!-- END switch_no_dl_att -->
                              </dt>

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

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

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

                     <div class="clear"></div>
                                                     <!-- BEGIN switch_signature --><br />
                     <div id="contenu_message"><div id="contenu_signature">
                                                          {postrow.displayed.SIGNATURE}</div>
                     </div>
                     <!-- END switch_signature -->

                  </div>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   
   <!-- BEGIN first_post_br -->
</table>
<div class="clear"></div>
<hr />
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <!-- END no_post -->
   <!-- BEGIN topicpagination -->
   <!-- END topicpagination -->
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->

<!-- BEGIN promot_trafic --><!-- END promot_trafic -->
<br /><br />
             
<table>
     <div id="surveiller_sujets">
             {S_WATCH_TOPIC}
     </div>
<br />
   <center>
             {S_TOPIC_ADMIN}
     </center>
<br />
</table>


<!-- BEGIN switch_image_resize -->
<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>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

Dim 20 Aoû - 19:07

Template profile_view_body (dans "Profil" et plus "Général")

Code:

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

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <th class="thHead" colspan="2" nowrap="nowrap" height="25"><h1 class="h_member">{L_VIEWING_PROFILE}</h1></th>
   </tr>
   <tr>
      <td class="catLeft" align="center" width="40%" height="28"><b><span class="gen">{L_USER_PRESENCE}</span></b></td>
      <td class="catRight" width="60%" align="center"><b><span class="gen">{L_ABOUT_USER}</span></b></td>
   </tr>
   <tr>
      <td class="row1" align="center" valign="top" height="120">
         <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <tr>
               <td valign="middle" nowrap="nowrap" align="right" width="20%"><span class="gen">{L_AVATAR_IMG} </span></td>
               <td width="80%"><b><span class="gen">    <span id="avatar_membre">{AVATAR_IMG}</span></span></b></td>
            </tr>
            <tr>
               <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_RANK}: </span></td>
               <td><b><span class="gen">{POSTER_RANK}</span></b></td>
            </tr>
            <!-- BEGIN switch_show_status -->
            <tr>
               <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_STATUT}: </span></td>
               <td><b><span class="gen">{USER_ONLINE}</span></b></td>
            </tr>
            <!-- END switch_show_status -->
            <!-- BEGIN switch_allow_friendsfoes -->
            <tr>
               <td valign="middle" nowrap="nowrap" align="right"><span class="gen">{L_FRIENDS_AND_FOES}: </span></td>
               <td><span class="gen"><strong>{FRIENDSFOES}</strong></span></td>
            </tr>
            <!-- END switch_allow_friendsfoes -->
            <!-- BEGIN switch_auth_user -->
            <tr>
               <td valign="middle" nowrap="nowrap" align="right"><br /><span class="gen">{L_ADMINISTRATE_USER}: </span></td>
               <td><br /><strong><span class="gen">{ADMINISTRATE_USER}{BAN_USER}</span></strong></td>
            </tr>
            <!-- END switch_auth_user -->
         </table>
      </td>
      <td class="row1" rowspan="3" valign="top">
         <table width="100%" border="0" cellspacing="1" cellpadding="0">
         <tr>
            <td align="right" valign="top" nowrap="nowrap"><span class="gen">{L_LAST_VISITED}:  </span></td>
            <td><b><span class="gen">{LAST_VISIT_TIME}</span></b></td>
         </tr>
         <!-- BEGIN switch_dhow_mp -->
         <tr>
            <td align="right" valign="middle" nowrap="nowrap"><span class="gen">{L_PRIVATE_MSG}:  </span></td>
            <td><b><span class="gen">{PRIVATE_MSG}</span></b></td>
         </tr>
         <!-- END switch_dhow_mp -->
         <!-- BEGIN profile_field -->
         <tr id="field_id{profile_field.ID}">
            <td width="40%" align="right" valign="top" nowrap="nowrap"><span class="gen">{profile_field.LABEL}  </span></td>
            <td width="60%"><div class="gen" style="font-weight:bold;">{profile_field.CONTENT}</div><br /><!-- BEGIN profil_type_user_posts --><span class="genmed">[{POST_PERCENT_STATS} / {POST_DAY_STATS}]</span> <br />
            <span class="genmed"><a rel="nofollow" class="genmed" href="/st/{PUSERNAME}">{L_SEARCH_USER_POSTS} :</a><br />
                 - <a rel="nofollow" class="genmed" href="/sta/{PUSERNAME}">{L_TOPICS}</a><br />
                 - <a rel="nofollow" class="genmed" href="/spa/{PUSERNAME}">{L_POSTS}</a></span><!-- END profil_type_user_posts --></td>
         </tr>
         <!-- END profile_field -->
         </table>
      </td>
   </tr>
   <tr>
      <td class="catLeft" align="center" height="28"><b><span class="gen">{L_CONTACT} {USERNAME}</span></b></td>
   </tr>
   <tr>
      <td class="row1" valign="top" height="{S_CONTACT_HEIGHT}">
         <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN contact_field -->
            <tr id="field_id{contact_field.ID}">
               <td width="40%" align="right" valign="middle" nowrap="nowrap"><span class="gen">{contact_field.LABEL} &nbsp;</span></td>
               <td width="60%" valign="middle"><div class="gen" style="font-weight:bold;">{contact_field.CONTENT}</div></td>
            </tr>
            <!-- END contact_field -->
            <!-- BEGIN switch_admin_user_comment_active -->
            <tr>
               <td align="right" valign="middle" nowrap="nowrap" width="50%">
                  <span class="gen">{L_COMMENTS} :</span><br /><span class="gensmall">{L_MODS_AND_ADMINS}</span>
               </td>
               <td class="row1" valign="middle">
                  <table align="center">
                     <tr>
                        <td>
                           {ADMIN_USER_COMMENT}
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
            <!-- END switch_admin_user_comment_active -->
         </table>
      </td>
   </tr>
   <!-- BEGIN switch_rpg -->
   <tr>
      <td colspan="2" class="catLeft" align="center"><b><span class="gen">{L_VIEWING_RPG}</span></b></td>
   </tr>
   <tr>
      <td class="row1" align="center" valign="top" height="6">
         {RPG_IMAGE}<br /><br />
         <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN rpg_fields_left -->
            <tr>
               <td align="right" valign="middle" nowrap="nowrap">
               <span class="gen">{switch_rpg.rpg_fields_left.F_NAME} : </span>
               </td>
               <td width="100%" valign="middle" nowrap="nowrap">
               <b><span class="gen">{switch_rpg.rpg_fields_left.F_VALUE_NEW}</span></b>
               </td>
            </tr>
            <!-- END rpg_fields_left -->
         </table>
      </td>
      <td class="row1" align="center" valign="top" height="6">
         <table width="100%" border="0" cellspacing="1" cellpadding="0">
            <!-- BEGIN rpg_fields -->
            <tr>
               <td align="right" valign="middle" nowrap="nowrap">
                  <span class="gen">{switch_rpg.rpg_fields.F_NAME} : </span>
               </td>
               <td width="100%" valign="baseline">
                  <b><span class="gen">{switch_rpg.rpg_fields.F_VALUE_NEW}</span></b>
               </td>
            </tr>
            <!-- END rpg_fields -->
         </table>
      </td>
   </tr>
   <tr>
      <td colspan="2" align="center" class="row1">
         {U_ADMIN_RPG}
      </td>
   </tr>
   <!-- END switch_rpg -->
</table>
<br />
<script src="{JS_DIR}jquery/json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
   $(document).ready(function(){
      $('[id^=field_id]').each(function(){
         if ( $(this).find('.field_editable').is('span, div') )
         {
            $(this).hover(function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                  $(this).find('.ajax-profil_edit').attr({
                        alt: "{L_FIELD_EDIT_VALUE}",
                        title: "{L_FIELD_EDIT_VALUE}"
                     }).click(function(){
                     $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                     $(this).prev().find('.ajax-profil_valid').attr({
                        alt: "{L_VALIDATE}",
                        title: "{L_VALIDATE}"
                     }).click(function(){
                        var content = new Array();
                        $(this).parent().find('[name]').each(function(){
                           var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                           if ( (type_special && $(this).is(':checked')) || !type_special )
                           {
                              content.push(new Array($(this).attr('name'), $(this).attr('value')));
                           }
                        });
                        var id_name = $(this).parents('[id^=field_id]').attr('id');
                        var id = id_name.substring(8, id_name.length);
                        $.post(
                           "{U_AJAX_PROFILE}",
                           {id:id,user:"{CUR_USER_ID}",active:"{CUR_USER_ACTIVE}",content:$.toJSON(content),tid:"{TID}"},
                           function(data){
                              $.each(data, function(i, item){
                                 $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                              });
                           },
                           "json"
                        );
                     });
                     $(this).remove();
                  });
               }
            },function()
            {
               if( $(this).find('.field_editable.invisible').is('span, div') )
               {
                  $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                  $(this).find('.ajax-profil_edit').remove();
               }
            });
         }
      });
   });
//]]>
</script>

A ajouter dans les pages Javascript, tu peux les nommer comme tu le souhaites, je précise comment je les ai nommées pour que tu identifies à quoi chaque code correspond.

Affichage de l'avatar dans la navigation | A afficher sur toutes les pages

Code:

/* On attend le chargement */
$(function(){
    /* on récupère les endroits où on doit ajouter l'avatar */
    var $loadAvatar = $('.js-useravatar');
   
    /* s'il y a des endroits où on doit ajouter l'avatar */
    if ($loadAvatar.length > 0) {
       
        /* on remplace le contenu de .js-useravatar en mettant l'avatar */
        $loadAvatar.html(_userdata.avatar);
       
    }
});

Affichage du pseudo dans la navigation | A afficher sur toutes les pages

Code:

$(function(){
    $.each(_userdata, function(key, value){
        $(".js-" + key).html(value);
    });
});

Affichage de l'avatar dans le qeel | A afficher sur l'index

Code:

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

Slider de l'accueil | A afficher sur l'index

Code:

$(function () {
    //VARIABLES MODIFIABLES
    var delaiSwitch    = 5000;                    // Délai (en ms) d'affichage d'un slide
    var delaiTransition = 1000;                    // Délai (en ms) de l'animation de transition
    var direction      = 'left';                  // Sens (left ou right) du défilement
    var idSlideshow    = '#slideshow';            // ID du slideshow
    var idContainer    = '#slideshow-container';  // ID du container
 
    //VARIABLES SYSTEME
    var slideshowWidth  = parseInt($(idSlideshow).css('width'));
    var slideshowHeight  = parseInt($(idSlideshow).css('height'));
    var nbSlides        = $(idContainer+' > .slide').length;
 
    //ADAPTE LA TAILLE DU CONTENEUR AU NOMBRE DE BLOCS QU'IL CONTIENT
    $(idContainer).css('width', slideshowWidth*nbSlides+'px');

     
    //REDEFINIT LE CONTENU POUR SUPPRIMER LES EVENTUELS ECARTS DUS AUX BORDERS
    if(direction==='right') {
        var decalageLeft = -slideshowWidth*(nbSlides-1);
        $(idContainer).css('left', decalageLeft+'px');
     
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).prepend(el);
        }, this);
    } else {
        $(idContainer+' > .slide').each(function() {
            var el = $(this).remove();
            $(idContainer).append(el);
        }, this);
    }
 
    //ADAPTE LA TAILLE DES IMAGES AUX DIMENSIONS DU SLIDESHOW
    $(idSlideshow+' img').css('max-width', slideshowWidth);
    $(idSlideshow+' img').css('max-height', slideshowHeight);
 
    //LANCEMENT DE L'ANIMATION
    setInterval(function() {
        slideshow()
    }, delaiSwitch);
 
    //FONCTION DE DEFILEMENT
    function slideshow() {
        var compteur = 0;      // Compte les slides ayant bougé
     
        if(direction==='right') {
            $(idContainer+' > .slide').animate({left: '+='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:last').remove();
                    $(idContainer).prepend(el);
                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        } else {
            $(idContainer+' > .slide').animate({left: '-='+slideshowWidth}, delaiTransition, function() {
                compteur++;
             
                // Lorsque le dernier slide à bougé, on crée la boucle
                if(compteur===nbSlides) {
                    var el = $(idContainer+' > .slide:first').remove();
                    $(idContainer).append(el);

                    $(idContainer+' > .slide').css('left', '0');
                 
                    compteur = 0;
                }
            });
        }     
    }
});

Normalement c'est fini et j'attends le listing des beugs \o/

Dim 20 Aoû - 20:29

Re ! o/

Tout d'abord, un grand merci pour ton boulot, c'était pas facile (et je suis pas facile u.u). Côté bugs, voici ce que j'ai pu trouver :

NAVIGATION :

• L'avatar du membre connecté ne s'affiche pas du tout sur la barre.

PA :

• Sur l'index, la PA a un fond blanc que je n'arrive pas à enlever.

• La PA est trop haute, du coup le logo est totalement invisible.

• Les liens utiles de la PA ne sont pas sur la même ligne, ce qui fait descendre le lien "crédits et staff" et le bloc "défis du roi".

• Il y a un scrollbar sur le bloc des actualités.

CATEGORIE :

• Les titres sont noirs.

SUJET :

• Tout le fond du message est blanc.

• L'image dégradé à la fin du bloc du message posté n'apparaît jamais.

• Le sujet est plus large que le titre de catégorie au-dessus.

• Ce serait possible d'avoir la répétition du bouton répondre à la fin du corps de sujet pour éviter de scroll tout en haut à chaque fois que l'on souhaite répondre stp ?

QEEL :

• Il y a un fond blanc derrière la liste des 24h.

• L'avatar du dernier inscrit n'apparaît pas.


Je pense avoir fait le tour, si tu désires les identifiants pour corriger avec plus de facilité les bugs, n'hésite pas à me le dire. Merci encore pour ta patience et ton travail. :)

Dim 20 Aoû - 21:44

Sauf erreur de ma part, c'est tout bon.

Dim 20 Aoû - 21:59

Il reste juste deux petits bugs *s'éloigne du fouet* :

https://2img.net/image.noelshack.com/fichiers/2017/33/7/1503258984-bug-sujet.png

Le sujet est toujours plus large que le titre de sujet au-dessus et chose que j'avais pas vu, le bloc du message dépasse et le bloc avec la date et les boutons éditer et cie est mal placé et dépasse également. (Il manque aussi l'image en dégradé sur le bloc message mais ça met juste le code avec une image au pif, je grapherai une image plus adaptée aux dimensions par la suite). Et pis après bah, je pense que tu pourras ENFIN archiver la commande. Vualà, encore désolée. ;;