Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par SweetGumiho Mar 7 Avr 2015 - 22:19

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://sorceleur.jdrforum.com/

Description du problème

Bonjour (ou bonsoir),

Tout d'abord j'aimerais que le "Plus !" dans la liste des sujets s'affiche sous le nom de "Options du forum" et qu'il soit en petites majuscules comme celui dans les sujets.

Enfin, voici l'apparence du haut de mes sujets à l'heure actuelle :

Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3) VkCf7wY

J'aimerais que les éléments dans les sujets soient replacés à la manière de :

Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3) RF0vqA6

Soit tout en haut à gauche la possibilité d'aller de page en page, sur la même ligne tout en haut à droite les boutons de sujet (mais garder l'ordre "nouveau" et "répondre" que nous avons actuellement), en dessous de tout ça centré le titre du sujet, en bas à droit le "Plus !" et encore en bas les boutons d'édition de sujet. Wink

Merci d'avance pour votre aide ! ♥ ^_^


Dernière édition par SweetGumiho le Ven 10 Avr 2015 - 20:39, édité 1 fois
SweetGumiho

SweetGumiho
****

Féminin
Messages : 410
Inscrit(e) le : 11/10/2014

http://theworldafter.forumactif.com/
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par MlleAlys Mar 7 Avr 2015 - 23:04

Re-bonsoir,
si vous ne fournissez pas les codes des templates voire aussi du css déjà installés, ça risque d'être un peu compliqué de les modifier Razz
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par SweetGumiho Mer 8 Avr 2015 - 11:44

Le problème c'est que je ne sais pas. Le codage avait été fait par quelqu'un d'autre et si je dois fournir tous les templates qui ont été modifiés cela va être un paquet. Il faudrait mieux que je sache précisément lesquels vous voulez. :/ J'ai aussi deux JS pour l'optimisation de l'onglet plus dans les sujets et dans les sous-forums.

Ma feuille de style CSS (la partie sur l'onglet "Plus !" est à la fin) :
Code:
/****** GENERAL ******/

.cheminmsg {
  position: relative;
  top: -15px;
  left: -15px;
  font-size: 12px;
  font-variant: small-caps;
}

/*Titre des messages*/

.titlemsg {
  font-variant: small-caps !important;
}

.paginationmsgtop {
  float: right;
  position: relative;
  top: -43px;
  right: 3px;
  font-size: 11px;
  font-variant: small-caps;
}

.paginationmsgbottom {
  font-size: 11px;
  font-variant: small-caps;
}

#wrap {
  border: 0;
}

body {
  background-attachment: scroll;
  background-position: top center;
  background-repeat: no-repeat;
  cursor:
    url(http://i.imgur.com/0arzXM8.png) ,
    auto;
}

a,
.buttons img,
.postbody ul.profile-icons img,
p.right a img,
fieldset.jumpbox select,
fieldset.jumpbox input,
fieldset.quickmod select,
fieldset.quickmod input,
span.selectCode {
  cursor:
    url(http://i.imgur.com/8CK6Zi2.png) ,
    pointer;
}

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

.inputbox {
  padding: 2px;
  border: 1px solid #BCBCBC;
  border-radius: 10px;
  color: #ffffff;
  background: #3c3c3c;
  cursor: text;
}

.forabg {
  clear: both;
  margin-bottom: 4px;
  padding: 0 5px;
  border: 1px solid #101010;
  border-radius: 10px;
  background: none;
  box-shadow: 0 0 9px #000000;
}

.forabg .lastpost {
  width: 175px;
  height: 145px;
}

div.forabg ul.topiclist dd.dterm {
  width: 690px;
}

.panel {
  margin-bottom: 4px;
  padding: 0 10px;
  border: 1px solid #101010;
  border-radius: 10px;
  background: #000000;
  box-shadow: 0 0 9px #000000;
}

.panel p {
  margin-bottom: 1em;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.4em;
}

#search-box input,
#search-box input.button1,
input.search,
#smiley-box {
  display: none;
}

.slidesmile {
  z-index: 4;
  position: relative;
  top: 39px;
  left: 705px;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #2c444f;
}

.content h2,
.panel h2,
.content h1,
.h3,
.panel h1,
h3 {
  border-bottom: none;
  text-transform: uppercase;
}

#M14_menu.pagination {
  float: none !important;
  position: absolute !important;
  right: 200px;
  width: 200px;
  font-variant: small-caps;
}

#plus_menu {
  position: absolute;
  left: -350px !important;
}

/****** CHATBOX ******/

#chatbox .date-and-time,
#chatbox .user-msg {
  white-space: nowrap;
}

#chatbox .msg {
  white-space: normal;
  word-wrap: break-word;
}

h2.chatbox-title:after {
  content: "Le Foyer";
}

/*titre de la chatbox*/

a.chat-title {
  display: none;
}

body.chatbox #chatbox_header .chatbox-title,
body.chatbox #chatbox_header .chatbox-title a.chat-title {
  font-size: 14px !important;
}

#chatbox.recently-connected:after {
  content: "Bienvenue dans le Foyer. Si vous êtes seul(e) , n'oubliez pas de remettre une bûche dans le feu.";
  display: block;
  width: 80%;
  margin: auto;
  margin: 1.5% auto;
  padding: 1%;
  font-family:
    "trebuchet ms",
    serif;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5em;
  white-space: pre;
  color: #8BC34A;
  background: #000000;
  box-shadow: 0 0 5px #AED581;
}

.cb_bloc {
  height: 0;
  overflow: hidden;
  transition: 1s all;
}

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

.navig {
  z-index: 99;
  position: fixed;
  top: 0;
  width: 100%; /*couleur de fond de la barre de navigation*/
  background: #000;
  box-shadow: 0 2px 10px #000; /*effet d'ombre sous la barre de navigation*/
}

.navig a {
  font-family: 'Alegreya SC'; /*police des liens*/
  font-size: 15px; /*taille police des liens*/
  color: #6F7D7D; /*couleur des liens*/
}

.navig a:hover {
  letter-spacing: 1px;/*espacement des lettres au survol (0=normal)*/
  color: #4D7999; /*couleur des liens au survol*/
}

.navig li {
  display: inline-block;
  padding: 14px; /*marge autour des liens*/
}

a.mainmenu span.new-message {
  color: #EAC117;
}

a.mainmenu span.new-message:hover {
  color: #A#FDD017;
}

/****** PAGE DES SUJETS ******/

form[method="post"] .left-box {
  text-align: center;
}

fieldset.polls {
  width: 50%;
  margin-left: 25%;
}

fieldset.polls dd.resultbar,
fieldset.polls dd:last-child {
  width: 30%!important;
}

fieldset.polls dl dt {
  margin-right: 10px;
  text-align: right;
}

fieldset.polls dd input[name="vote_id[]"] {
  float: left;
}

fieldset.polls dl {
  border: none;
}

fieldset.polls dd input[name="vote_id[]"] {
  float: left;
  margin-left: 10px;
}

.post {
  margin-bottom: 4px;
  padding: 0 10px;
  border-radius: 10px;
  background: #262627;
  box-shadow: 0 0 9px #000000;
}

.postbody {
  display: block;
  width: 70%;
  padding: 10px;
  text-align: justify; /*justification automatique des posts*/
}

.postprofile {
  position: relative;
  width: 210px;
  margin: 5px 0 0;
  padding: 5px;
  min-height: 80px;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 5px;
  text-align: center;
  color: #999;
  background: rgba(0,0,0,0.4);
  box-shadow:
    0 1px 3px rgba(0,0,0,0.6) inset,
    0 0 0 1px rgba(255,255,255,0.05) ,
    0 1px 0 rgba(255,255,255,0.1);
  word-wrap: break-word;
}

ul.profile-icons {
  margin-top: 10px;
  border-radius: 10px;
  list-style: none;
}

.buttonsmsgtop {
  float: right;
  position: relative;
  top: -45px;
}

.buttonsmsgbottom {
  text-align: right;
}

.positiondatemsg {
  float: right;
  position: relative;
  top: -20px;
  right: -220px;
  font-size: 12px;
  font-variant: small-caps;
}

.profile-icons {
  float: right;
  position: relative;
  top: -48px;
  right: -90px;
}

.profil_mess {
  margin-left: -1px;
  border: 1px solid #121218;
  border-top: 0;
  border-bottom: 6px solid #121218;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #313038;
}

.profil_onglet {
  position: relative;
  height: 20px;
}

.profil_onglet a,
.profil_onglet a:hover,
.profil_onglet a:active,
.profil_onglet a:focus,
.profil_onglet a:visited {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: normal;
  color: #BFBFCA;
}

.profil_onglet .selected {
  color: #BFBDE8;
  background: #1D1D25;
}

.onglet_profil,
.onglet_rpg {
  display: inline-block;
  position: absolute;
  width: 50%;
  height: 10px;
  padding: 5px 0;
  background: #121218;
}

.onglet_rpg {
  left: 50%;
  border-top-right-radius: 5px;
}

.onglet_profil {
  left: 0;
  border-top-left-radius: 5px;
}

.profil_mess .rpg,
.profil_mess .rpg br:first-child {
  display: none;
}

.profil_mess .profil,
.profil_mess .rpg {
  padding: 4px;
  overflow: hidden;
  text-align: left;
}

.profil_mess .rpg {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
}

.profil_mess .rpg textarea {
  width: 185px;
  max-width: 185px;
  background: #000;
}

.profil_mess img {
  max-width: 200px;
}

div#profile-tab-field-profil dl dt {
  width: auto;
  margin-right: 2px;
}

#profile-tab-field-profil dl dd {
  margin-left: 0;
  padding-left: 0;
}

.rpg a[href*="rpgsheet"],
.rpg a[href*="rpgsheet"] + br {
  display: none;
}

.profil_pseudo strong {
  font-family:
    'Alegreya SC',
    serif;
  font-size: 16px;
  font-variant: uppercase;
}

.profileCache {
  max-height: 66px;
  transition-duration: 2s;
  -webkit-transition-duration: 2s;
}

.profileCache:hover {
  max-height: 1000px;
  transition-duration: 3s;
  -webkit-transition-duration: 3s;
}

.profileCache img:first-child {
  display: block;
  width: 80px;
  margin: auto;
}

/*** fin profil des messages ***/

/****** PROFIL FENETRE ******/

.module {
  border: 1px solid #101010;
  border-radius: 10px;
  background: url(http://i60.servimg.com/u/f60/14/70/09/25/gradie22.png) repeat-x #262627;
  box-shadow: 0 0 9px #000000;
}

.signature {
  border-radius: 10px;
}

div.separator {
  display: none;
}

#profile-advanced-right .module .h3 {
  border: none;
  text-align: center;
}

h1.page-title {
  margin-bottom: 35px !important;
  text-align: center;
  font-size: 18px;
}

#profile-tab-field-profil dl {
  margin: 0;
  padding: 5px 0; /* Ypx Xpx */
}

/* onglets */

#tabs a span {
  padding: 6px 10px;
  color: #666;
}

#tabs a {
  padding: 0;
  border: 1px solid #666;
  border-radius: 3px 3px 0 0;
  border-bottom: none;
  background: #333;
  box-shadow: 0 6px 4px rgba(255,255,255,0.15) inset;
}

#tabs a:hover {
  top: 1px;
  background: #222;
}

#tabs .activetab a span {
  color: #666;
}

#tabs .activetab a {
  margin-bottom: 0;
  border-bottom: none;
  background: #222;
}

#new-message-link a {
  border: none;
}

.mess-feuille-rp {
  text-align: center;
  font-size: 14px;
}

/****** BOITE DE REPONSE DES MESSAGES ******/

::-webkit-input-placeholder {
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.5;
}

:-ms-input-placeholder {
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.5;
}

:-moz-placeholder {
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.5;
}

::-moz-placeholder {
  text-transform: uppercase;
  font-size: 10px;
  opacity: 0.5;
}

#postingbox .inputbox[name="subject"] { font-variant:small-caps }

/****** CASE DES TABLEAUX DE FORUMACTIF ******/

.row2,
.row1 {
  background: url(http://imageshack.com/a/img690/452/q962.png) center top repeat-x #0D0C0B;
}

/****** BALISE CODE ******/

dl.codebox {
  padding: 3px;
  border: 1px solid #878787;
  border-radius: 10px;
  font-size: 1em;
  background: #1E1D1B;
}

/***** BALISE BLOCKQUOTE ******/

.postbody blockquote {
  margin: auto;
  padding: 10px;
  border: 1px solid #878787;
  border-radius: 10px;
  text-align: justify;
  color: #878787;
  background: #1E1D1B;
}

.postbody blockquote div {
  margin-left: 5px;
  font-size: 10px;
  font-style: italic;
}

/****** SPOILER ******/

.spoiler_closed,
.spoiler_closed.hidden,
.spoiler_content,
.spoiler_content.hidden {
  padding: 10px; /* espacement entre le bord de votre cadre et votre texte */
  text-align: justify; /* alignement standart d'un spoiler */
  background: #000;
}

/***** SELECTION CODE ******/

.selectCode {
  float: right;
  text-transform: uppercase;
  cursor: pointer;
}

/****** BUTTON ET INPUT *******/

a.button1,
a.button2,
button.button2,
input.button1,
input.button2 {
  border: 0;
  color: #B89E7D;
  background: url(http://imageshack.com/a/img849/7503/zow4.png) #1E1D1B;
}

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

/*Description Catégorie*/

.descricateg {
  position: relative;
  top: -10px text-align;
  left: 55px;
  width: 410px;
  height: 108px;
  padding-right: 10px;
  overflow-x: auto;
}

/*Gif dans les catégories*/

.gifscateg {
  position: relative;
  top: -10px;
  left: 28px;
  width: 195px;
  height: 97px;
  border-radius: 10px;
  opacity: 0.8;
  transition-duration: 2s;
}

/*Gif dans les catégories survol*/

.gifscateg:hover {
  position: relative;
  top: -10px;
  left: 28px;
  width: 195px;
  height: 97px;
  border-radius: 10px;
  opacity: 1.2;
  transition-duration: 2s;
}

/*Image de fond des catégories */

.fondimgcategorie {
  height: 200px;
  background-image: url("http://i.imgur.com/fWz6sLQ.png");
  background-repeat: no-repeat;
}

/* Derniers messages postés */

.categderniersmessages {
  position: relative;
  left: -25px;
  width: 170px;
  height: 150px;
  margin-top: -10px;
  font-family: 'Alegreya SC';
  font-size: 14px;
  font-variant: small-caps;
  letter-spacing: -1px;
}

.detailsposteur {
  margin-top: 5px;
  line-height: 13px;
}

/*Image New/No New */

.imgcateg {
  width: 130px;
  height: 25px;
  margin-top: -5px;
  margin-bottom: 4px;
  border-radius: 10px;
}

/*Nombre de message et de sujets */

.categsujetsetmessages {
  float: center;
  font-family:
    'Alegreya SC',
    serif;
  font-size: 11px;
  font-variant: small-caps;
  font-weight: light;
  letter-spacing: 0 !important;
  color: #7a5e48;
}

/*Titre de la catégorie */

a.forumlink:link,
a.forumlink:visited {
  position: relative;
  top: 10px;
  text-decoration: none;
  font-family:
    'Tangerine',
    serif;
  font-size: 32px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #35343A !important;
  opacity: 0.9;
  -webkit-transition: all 1.5s ease;
  -moz-transition: all 1.5s ease;
  -o-transition: all 1.5s ease;
}

/*Titre de la catégorie survol*/

a.forumlink:hover,
a.forumlink:hover:visited {
  text-decoration: none !important;
  font-size: 40px;
  letter-spacing: 3px;
  color: #591616;
  color: #3D3F3E !important;
  opacity: 1.4;
}

/*Sous Forum*/

.sforum {
  display: block;
  z-index: 3;
  position: relative;
  top: -28px;
  left: 10px;
  width: 395px;
  height: 0;
  overflow: hidden;
  color: #b5b5b5;
  background: #191817;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  -moz-transform: all;
  -o-transform: all;
  transform: all;
  -htm-transform: all;
  -htm-transition: 1s;
}

.ouverture_sousforum {
  display: block;
  z-index: 3;
  position: relative;
  top: -28px;
  width: 120px;
  margin-right: 20px;
  padding: 4px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  text-align: center;
  font-size: 11px;
  color: #b5b5b5;
  background: #191817;
}

.sous_forum:hover .sforum {
  height: auto;
  padding: 4px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: auto;
  color: #b5b5b5;
  background: #191817;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s;
  -webkit-transform: all;
  -moz-transform: all;
  -o-transform: all;
  transform: all;
  -htm-transform: all;
  -htm-transition: 1s;
}

.sous_forum a {
  text-shadow: 1px 1px 0 #000000;
  color: #b5b5b5 !important;
}

.sous_forum a:hover {
  color: #ffffff !important;
}

.table-title h2 .timg {
  display: none;
}

/*Enlever l'image du titre de catégorie dans les messages*/

.table-title h2 img {
  display: inline !important;
}

.gauche {
  float: left;
}

.linklist {
  text-align: center; /*pour centrer les liens au dessus des catégories*/
  color: #463F23;
}

.linklist a {
  color: #463F23; /*couleur des liens en-tête et pied de page*/
}

.titre_cat {
  margin-bottom: 15px;
}

ul.topiclist dd.dterm {
  display: block; /*description des sujet, index ,positionnement*/
  width: 775px;
}

/*fin*/

dd.lastpost {
  margin-left: 20px;
}

dd.lastpost span {
  margin-left: 25px;
}

.forabg .header dd.dterm {
  text-align: center;
}

ul.topiclist dd {
  display: block;
  float: right;
  padding: 4px 0;
  border-left: 1px solid #1a1a1a;
}

ul.topiclist.topics dd.dterm {
  width: auto;
}

.topic-actions .search-box {
  display: none;
}

/*Image des sondages*/

#M14_Songage.icon {
  background-image: url(http://i.imgur.com/5txet0l.png) !important;
}

/*Image des sondages nouveau message*/

#M14_Songage_New.icon {
  background-image: url(http://i.imgur.com/YB88iuY.png) !important;
}

/****** SIGNATURES ******/

.signature_div img {
  max-height: 100px !important;
  max-width: 400px !important; /*pour redimensionner les signaturess*/
}

/****** QEEL ******/

#i_whosonline + p a.gensmall {
  text-transform: uppercase;
  font-family:
    'Alegreya SC',
    serif;
}

/****** PIED DE PAGE ******/

ul.linklist.clearfix li {
  float: none;
}

/* Enlève le flottement */

ul.linklist.clearfix {
  text-align: center;
  color: #222325;
}

/* Centre le texte */

ul.linklist.clearfix li.rightside strong:first-child:before {
  content: " ▴ ";
}

/* Ajoute une séparation avant "Créer un forum", à remplacer par ce que tu veux */

/****** SELECTEURS ******/

select {
  color: #C0A171;
  Background: #000;
}

/****** SCROLLBAR ******/

-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

-webkit-scrollbar-thumb {
  border-radius: 15px;
  background: #2c444f;
}

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

td.avatar-mini img {
  width: 25px;
  height: 40px;
}

/* ***** ONGLET PLUS! ***** */

/*L apparence des liens sur le forum */

p#M14_Notif_Plus strong a {
  font-size: 11px;
}

/*L apparence des liens sur le sujet*/

p#M14_Notif_Plus-bis strong a {
  font-size: 11px;
}

/*Ajout du symbole*/

.pagination a[href^="javascript:showhide"] {
  padding: 0 10px 0 25px;
  background-image: url("http://2img.net/i/fa/invision/menu_action_down.gif");
  background-position: 100% 50%;
  background-repeat: no-repeat;
}

Optimisation onglet "Plus !" (sujets)
Code:
$(function(){
$('div#plus_menu ').find('hr.dashed').after('<p id="M14_menu"class="left-overview"></p>');
$('p#M14_Notif_Plus-bis').appendTo('p#M14_menu.left-overview');
});

Optimisation onglet "Plus !" (sous-forums)
Code:
$(function(){
$('div#plus_menu ').find('hr.dashed').after('<p id="M14_menu"class="left-overview"></p>');
$('p#M14_Notif_Plus').appendTo('p#M14_menu.left-overview');
});

Template viewforum_body :
Code:
<!-- BEGIN switch_user_logged_in --><p class="right rightside">{LAST_VISIT_DATE}</p><!-- END switch_user_logged_in -->
<p>{CURRENT_TIME}</p>

<h1 class="page-title"><a href="{U_VIEW_FORUM}">{FORUM_NAME}</a></h1>

{BOARD_INDEX}

<div class="pagination">
   <br />
   <script type="text/javascript">//<![CDATA[
      var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
      var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
      var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
      var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
      var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
      insert_plus_menu_new('f{FORUM_ID}&amp;f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
   //]]>
   </script>
   {PAGINATION}
   <br /><br />
</div>

<div class="topic-actions">
<!-- BEGIN switch_user_authpost -->
   <div class="buttons">
      <div class="post-icon"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></div>
   </div>
<!-- END switch_user_authpost -->
   <div class="search-box">
      <form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
      <fieldset>
         <input class="inputbox search tiny" type="text" name="search_keywords" id="search_keywords" size="20" value="{L_SEARCH}" onclick="if (this.value == '{L_SEARCH}') this.value = '';" onblur="if (this.value == '') this.value = '{L_SEARCH}';" />
         &nbsp;<input class="button2" type="submit" value="{L_SEARCH}" />
         <input type="hidden" value="{SEARCH_WHERE}" name="search_where" />
      </fieldset>
      </form>
   </div>
   <p class="nomargin path" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
      {NAV_CAT_DESC}
   </p>
</div>

{TOPICS_LIST_BOX}

<div class="topic-actions">
   <!-- BEGIN switch_user_authpost -->
   <div class="buttons">
      <div class="post-icon"><a href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_ID}" alt="{L_POST_NEW_TOPIC}" /></a></div>
   </div>
   <!-- END switch_user_authpost -->

 
 
<div class="pagination">
      {PAGINATION}<br />
          <p id="M14_Notif_Plus">
            <strong><a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a></strong><br /><strong>{S_WATCH_FORUM}</strong>
          </p>
            <a href="#top">{L_BACK_TO_TOP}</a><br /><br />
  </div>
 </div>
<div class="clear"></div>

{LOGGED_IN_USER_LIST}

<div id="info_open" style="display:block;clear:both">
<div class="h3">Gardiens</div>
<p>{MODERATORS}</p>

<div class="h3">Permissions de ce forum</div>
<p>{S_AUTH_LIST}</p>

</div>
<!-- BEGIN switch_legend -->
<div class="h3">{L_LEGEND}</div>
   <div class="clearfix">
      <ul class="ul-icons">
         <li><img src="{FOLDER_NEW_IMG}" alt="{L_FOLDER_NEW_IMG}" />&nbsp;{L_FOLDER_NEW_IMG}</li>
         <li><img src="{FOLDER_HOT_NEW_IMG}" alt="{L_FOLDER_HOT_NEW_IMG}" />&nbsp;{L_FOLDER_HOT_NEW_IMG}</li>
         <li><img src="{FOLDER_LOCKED_NEW_IMG}" alt="{L_FOLDER_LOCKED_NEW_IMG}" />&nbsp;{L_FOLDER_LOCKED_NEW_IMG}</li>
      </ul>
      <ul class="ul-icons">
         <li><img src="{FOLDER_IMG}" alt="{L_FOLDER_IMG}" />&nbsp;{L_FOLDER_IMG}</li>
         <li><img src="{FOLDER_HOT_IMG}" alt="{L_FOLDER_HOT_IMG}" />&nbsp;{L_FOLDER_HOT_IMG}</li>
         <li><img src="{FOLDER_LOCKED_IMG}" alt="{L_FOLDER_LOCKED_IMG}" />&nbsp;{L_FOLDER_LOCKED_IMG}</li>
      </ul>
      <ul class="ul-icons">
         <li><img src="{FOLDER_ANNOUNCE_IMG}" alt="{L_FOLDER_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_ANNOUNCE_IMG}</li>
         <li><img src="{FOLDER_STICKY_IMG}" alt="{L_FOLDER_STICKY_IMG}" />&nbsp;{L_FOLDER_STICKY_IMG}</li>
         <li><img src="{FOLDER_GLOBAL_ANNOUNCE_IMG}" alt="{L_FOLDER_GLOBAL_ANNOUNCE_IMG}" />&nbsp;{L_FOLDER_GLOBAL_ANNOUNCE_IMG}</li>
      </ul>
   </div>
<!-- END switch_legend -->

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

        _atc.cwait = 0;
        $('.addthis_button').mouseup(function(){
            if ($('#at15s').css('display') == 'block') {
                addthis_close();
            }
        });
    });

    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>

    <h1 class="page-title">
      <a href="{TOPIC_URL}"><div class="titlemsg">{TOPIC_TITLE}</div></a>
    </h1>
    <div class="topicposition"><div class="topic-actions">
      <div class="buttonsmsgtop">

          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
          <!-- END switch_user_authpost -->

          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
          <!-- END switch_user_authreply -->
      </div>

      <div class="cheminmsg"><div class="pathname-box">
          <p itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC}
            </p>
        </div></div>

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

    <div id="M14_menu"class="pagination">
      {PAGE_NUMBER}
      &nbsp;
      <!-- BEGIN switch_plus_menu -->
      &nbsp;•&nbsp;
      <script type="text/javascript">//<![CDATA[
        var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
        var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
        var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
        var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
        var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
        var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
        insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
  </div>
      <div class="clear"></div>
    </div>

    <!-- BEGIN topicpagination -->
      <p class="pagination"><div class="paginationmsgtop">AAAA{PAGINATION}BBBB</div></p>
    <!-- END topicpagination -->
    <p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
    <div class="clear"></div>
    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
      <!-- BEGIN hidden -->
    <div class="post {postrow.hidden.ROW_COUNT}">
            <div class="inner">
                <span class="corners-top"><span></span></span>
                <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
                <div class="clear"></div>
                <span class="corners-bottom"><span></span></span>
            </div>
          </div>
      <!-- END hidden -->
      <!-- BEGIN displayed -->
          <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
            <div class="inner"><span class="corners-top"><span></span></span>
                <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
            <div class="postbody">

                <ul class="profile-icons">
                  <li>{postrow.displayed.THANK_IMG}</li>
                  <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
                  <li>{postrow.displayed.QUOTE_IMG}</li>
                  <li>{postrow.displayed.EDIT_IMG}</li>
                  <li>{postrow.displayed.DELETE_IMG}</li>
                  <li>{postrow.displayed.IP_IMG}</li>
                  <li>{postrow.displayed.REPORT_IMG_NEW}</li>
                </ul>

                <h2 class="topic-title">{postrow.displayed.ICON}</h2>
              <p class="author">&nbsp;<div class="positiondatemsg">{postrow.displayed.POST_DATE_NEW}</div></p>
                <div class="clearfix"></div>
                <!-- 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 style="display:none"></div>
                <div class="content clearfix">
                  <div>{postrow.displayed.MESSAGE}</div>
                      <!-- BEGIN switch_attachments -->
                      <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd class="attachments">
                            <!-- BEGIN switch_post_attachments -->
                            <dl class="file clearfix">
                              <dt>
                                  <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                              </dt>
                              <dd>
                                  <!-- BEGIN switch_dl_att -->
                                  <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
                                  <!-- END switch_dl_att -->

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

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

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

                                  <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                              </dd>
                            </dl>
                            <!-- END switch_post_attachments -->
                        </dd>
                      </dl>
                      <!-- END switch_attachments -->
                </div>
                <!-- BEGIN switch_signature -->
                <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                <!-- END switch_signature -->
            </div>

            <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
                <!-- div class="online2"></div-->
                <dl>
                  <dt>
                      {postrow.displayed.POSTER_AVATAR}
                      <br /><strong style="font-size:1.2em" class="profil_pseudo">{postrow.displayed.POSTER_NAME}</strong>
                  </dt>
                  <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                  <dd><br /></dd>
                  <dd>
                    <div class="profil_onglet">
                      <a class="onglet_profil selected">Personnage</a><a class="onglet_rpg">Autres Infos</a>
                    </div>
                    <div class="profil_mess">
                      <div class="profil">
                        <!-- BEGIN profile_field -->
                        <div class="fieldProfile">
                          {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        </div>
                        <!-- END profile_field -->
                        <div class="profileCache">
                          <img src="http://i.imgur.com/kLYHIUc.png" />
                        </div>
                      </div>
                      <div class="rpg">{postrow.displayed.POSTER_RPG}</div>
                    </div>
                  </dd>
                  <dd>
                    <br />
                  </dd>
                  <dd>
                    {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                    <!-- BEGIN contact_field -->
                    {postrow.displayed.contact_field.CONTENT}
                    <!-- END contact_field -->
                  </dd>
                </dl>
              </div>
             
              <div class="clear"></div>
             
              <p class="right">
                <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
              </p>
            <span class="corners-bottom"><span></span></span></div>
          </div>
     
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
     
      <!-- END displayed -->
      <!-- END postrow -->
     
      <!-- BEGIN topicpagination -->
      <div class="pagination paginationmsgbottom">{PAGINATION}</div>
      <!-- END topicpagination -->
     
      <div class="sautmsg">
        <p class="left-box">
          <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;
          <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
          <a href="#top">{L_BACK_TO_TOP}</a>
        </p>
      </div>
     
      <div class="clear"></div>
   
    <!-- BEGIN switch_user_logged_in -->
    <!-- BEGIN watchtopic -->
      <p id="M14_Notif_Plus-bis"><strong>{S_WATCH_TOPIC}</strong></p>
    <!-- END watchtopic -->
    <!-- END switch_user_logged_in -->

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

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

    <div class="topic-actions buttonsmsgbottom">
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
          <!-- END switch_user_authpost -->

          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
          <!-- END switch_user_authreply -->
      </div>
    <div class="clear"></div>
     
    <!-- BEGIN viewtopic_bottom -->
    <p class="right">{S_TOPIC_ADMIN}</p>
    <!-- END viewtopic_bottom -->
     
    <!-- BEGIN show_permissions -->
      <div class="h3">Permissions de ce forum</div>
      {S_AUTH_LIST}
    <!-- END show_permissions -->

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

    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>
   
    </div>

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

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

         var all_checked = true;

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

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

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

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

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

   <div class="forumbg announcement">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <dt>
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  {topics_list_box.row.L_TITLE}
               </dt>
               <dd class="posts">{topics_list_box.row.L_REPLIES}</dd>
               <dd class="views">{topics_list_box.row.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
<!-- END header_table -->

<!-- BEGIN header_row -->
      <strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->

   <!-- BEGIN table_sticky -->
         </ul>
         <span class="corners-bottom"><span></span></span></div>
      </div>
      <div class="forumbg">
      <div class="inner"><span class="corners-top"><span></span></span>
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm" style="padding-left:0;">
                  <!-- BEGIN multi_selection -->
                  <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
                  <!-- END multi_selection -->
                  {topics_list_box.row.topic.table_sticky.L_TITLE}
               </dd>
               <dd class="posts" style="padding-left:45px;">{topics_list_box.row.topic.table_sticky.L_REPLIES}</dd>
               <!-- <dd class="authors">{topics_list_box.row.L_AUTHOR}</dd> -->
               <dd class="views">{topics_list_box.row.topic.table_sticky.L_VIEWS}</dd>
               <dd class="lastpost"><span>{topics_list_box.row.topic.table_sticky.L_LASTPOST}</span></dd>
            </dl>
         </li>
      </ul>
      <ul class="topiclist topics bg_none">
   <!-- END table_sticky -->

      <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
         <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
            <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
               <!-- BEGIN single_selection -->
                  <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
               <!-- END single_selection -->
               {topics_list_box.row.NEWEST_POST_IMG}
               {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
               <div class="topic-title-container"><h2 class="topic-title hierarchy"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2></div>
               <!-- BEGIN switch_description -->
               <br />
               {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
               <!-- END switch_description -->
               <br />
               {topics_list_box.row.GOTO_PAGE_NEW}
               <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span>
               <!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree -->
            </dd>
            <dd class="posts">{topics_list_box.row.REPLIES} <dfn>{L_REPLIES}</dfn></dd>
            <dd class="views">{topics_list_box.row.VIEWS} <dfn>{L_VIEWS}</dfn></dd>
            <dd class="lastpost">

                    <!-- BEGIN avatar -->
                    <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
                    <div style="float:left;">
                    <!-- END avatar -->

               <span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
               {topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span>

                    <!-- BEGIN avatar -->
                    </div>
                    <!-- END avatar -->
            </dd>
            <!-- BEGIN multi_selection -->
               <input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />
            <!-- END multi_selection -->
         </dl>
      </li>
<!-- END topic -->
<!-- BEGIN no_topics -->
<li class="row row1">
   <dl>
      <dt><strong>{topics_list_box.row.L_NO_TOPICS}</strong></dt>
   </dl>
</li>
<!-- END no_topics -->

<!-- BEGIN bottom -->
</ul>
   <span class="corners-bottom"><span></span></span></div>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Aussi est-il possible de n'avoir que les parties modifiées, pas tout le template ? Parce que ce serait plus pratique si je fais des modifications entre temps... Merci. Smile
SweetGumiho

SweetGumiho
****

Féminin
Messages : 410
Inscrit(e) le : 11/10/2014

http://theworldafter.forumactif.com/
SweetGumiho a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par MlleAlys Mer 8 Avr 2015 - 23:28

viewforum_body (Affichage d'un forum) et topicslist_box (Affichage des sujets d'un forum) sont les templates qui se retrouvent dans les forums, c'est à dire ces pages là : http://sorceleur.jdrforum.com/f6-le-codex

viewtopic_body (Affichage d'un sujet) concerne ces pages là :
http://sorceleur.jdrforum.com/t15-le-guide-de-l-aventurier

Dans ce template, l'affichage du bloc d'un message est encadré par :
Code:
<!-- BEGIN postrow -->
    le bloc avec profil, message, boutons, etc, ici
<!-- END postrow -->
cette partie est répétée autant de fois qu'il y a de messages dans le sujet ^^

{POLL_DISPLAY} Juste au dessus est remplacé à l'affichage par le bloc du sondage s'il y en a un, en tête de sujet.

La partie que vous souhaitez modifier est donc, encore au dessus :
Code:
<h1 class="page-title">
      <a href="{TOPIC_URL}"><div class="titlemsg">{TOPIC_TITLE}</div></a>
    </h1>
    <div class="topicposition"><div class="topic-actions">
      <div class="buttonsmsgtop">

          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
          <!-- END switch_user_authpost -->

          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
          <!-- END switch_user_authreply -->
      </div>

      <div class="cheminmsg"><div class="pathname-box">
          <p itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC}
            </p>
        </div></div>

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

    <div id="M14_menu"class="pagination">
      {PAGE_NUMBER}
      &nbsp;
      <!-- BEGIN switch_plus_menu -->
      &nbsp;•&nbsp;
      <script type="text/javascript">//<![CDATA[
        var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
        var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
        var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
        var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
        var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
        var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
        insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
  </div>
      <div class="clear"></div>
    </div>

    <!-- BEGIN topicpagination -->
      <p class="pagination"><div class="paginationmsgtop">AAAA{PAGINATION}BBBB</div></p>
    <!-- END topicpagination -->
    <p class="left-box"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
    <div class="clear"></div>

description des éléments :


Il faut donc mettre ces éléments dans l'ordre voulu.
Sur NU comme vous avez pris pour exemple, nous avons d'abord (toujours de haut en bas et de gauche à droite) :
- le fil d’Ariane
- les boutons nouveau et répondre
- le titre du sujet
- les boutons partager et "plus"
puis ensuite le sujet lui même.

Il faut donc commencer par mettre ces éléments dans cet ordre dans le template avant de vouloir faire quoi que ce soit en css !

Pour nettoyer un peu le css de ce côté :

Puis on remet les éléments souhaitez dans le template dans l'ordre voulu, ce qui donne :
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 = {  };
        }

        _atc.cwait = 0;
        $('.addthis_button').mouseup(function(){
            if ($('#at15s').css('display') == 'block') {
                addthis_close();
            }
        });
    });

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

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

      return false;
    };

    //]]>
    </script>

<div class="topicposition">

   <div class="topic-actions">
 
      <div class="cheminmsg">
         <div class="pathname-box">
            <p itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
               <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
               <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
               {NAV_CAT_DESC}
            </p>
         </div>
      </div>
 
      <!-- BEGIN topicpagination -->
      <p class="pagination paginationmsgtop">
                  {PAGINATION}
      </p>
      <!-- END topicpagination -->

      <div class="buttonsmsgtop">

         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
         <!-- END switch_user_authpost -->
 
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
         <!-- END switch_user_authreply -->
      </div>

      <h1 class="page-title">
         <a href="{TOPIC_URL}"><div class="titlemsg">{TOPIC_TITLE}</div></a>
      </h1>
 
      <p class="right">
         <!-- BEGIN switch_fb_likebtn -->
         <script>(function(d, s, id) {
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) return;
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
         fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));</script>
         <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
         <!-- END switch_fb_likebtn -->
      </p>

      <div id="M14_menu" class="pagination">
         <!-- BEGIN switch_plus_menu -->
         <script type="text/javascript">//<![CDATA[
         var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
         var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
         var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
         var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
         var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
         var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
         insert_plus_menu_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
         //]]>
         </script>
         <!-- END switch_plus_menu -->
      </div>
      <div class="clear"></div>
   </div>

   <p class="left-box">
      <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;
      <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
      <a href="#bottom">{L_GOTO_DOWN}</a>
   </p>
   <div class="clear"></div>
 
    {POLL_DISPLAY}

    <!-- BEGIN postrow -->
      <!-- BEGIN hidden -->
    <div class="post {postrow.hidden.ROW_COUNT}">
            <div class="inner">
                <span class="corners-top"><span></span></span>
                <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
                <div class="clear"></div>
                <span class="corners-bottom"><span></span></span>
            </div>
          </div>
      <!-- END hidden -->
      <!-- BEGIN displayed -->
          <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
            <div class="inner"><span class="corners-top"><span></span></span>
                <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
            <div class="postbody">

                <ul class="profile-icons">
                  <li>{postrow.displayed.THANK_IMG}</li>
                  <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
                  <li>{postrow.displayed.QUOTE_IMG}</li>
                  <li>{postrow.displayed.EDIT_IMG}</li>
                  <li>{postrow.displayed.DELETE_IMG}</li>
                  <li>{postrow.displayed.IP_IMG}</li>
                  <li>{postrow.displayed.REPORT_IMG_NEW}</li>
                </ul>

                <h2 class="topic-title">{postrow.displayed.ICON}</h2>
              <p class="author">&nbsp;<div class="positiondatemsg">{postrow.displayed.POST_DATE_NEW}</div></p>
                <div class="clearfix"></div>
                <!-- 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 style="display:none"></div>
                <div class="content clearfix">
                  <div>{postrow.displayed.MESSAGE}</div>
                      <!-- BEGIN switch_attachments -->
                      <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd class="attachments">
                            <!-- BEGIN switch_post_attachments -->
                            <dl class="file clearfix">
                              <dt>
                                  <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                              </dt>
                              <dd>
                                  <!-- BEGIN switch_dl_att -->
                                  <span><a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}</span>
                                  <!-- END switch_dl_att -->

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

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

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

                                  <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                              </dd>
                            </dl>
                            <!-- END switch_post_attachments -->
                        </dd>
                      </dl>
                      <!-- END switch_attachments -->
                </div>
                <!-- BEGIN switch_signature -->
                <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
                <!-- END switch_signature -->
            </div>

            <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
                <!-- div class="online2"></div-->
                <dl>
                  <dt>
                      {postrow.displayed.POSTER_AVATAR}
                      <br /><strong style="font-size:1.2em" class="profil_pseudo">{postrow.displayed.POSTER_NAME}</strong>
                  </dt>
                  <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
                  <dd><br /></dd>
                  <dd>
                    <div class="profil_onglet">
                      <a class="onglet_profil selected">Personnage</a><a class="onglet_rpg">Autres Infos</a>
                    </div>
                    <div class="profil_mess">
                      <div class="profil">
                        <!-- BEGIN profile_field -->
                        <div class="fieldProfile">
                          {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        </div>
                        <!-- END profile_field -->
                        <div class="profileCache">
                          <img src="http://i.imgur.com/kLYHIUc.png" />
                        </div>
                      </div>
                      <div class="rpg">{postrow.displayed.POSTER_RPG}</div>
                    </div>
                  </dd>
                  <dd>
                    <br />
                  </dd>
                  <dd>
                    {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                    <!-- BEGIN contact_field -->
                    {postrow.displayed.contact_field.CONTENT}
                    <!-- END contact_field -->
                  </dd>
                </dl>
              </div>
             
              <div class="clear"></div>
             
              <p class="right">
                <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
              </p>
            <span class="corners-bottom"><span></span></span></div>
          </div>
     
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
     
      <!-- END displayed -->
      <!-- END postrow -->
     
      <!-- BEGIN topicpagination -->
      <div class="pagination paginationmsgbottom">{PAGINATION}</div>
      <!-- END topicpagination -->
     
      <div class="sautmsg">
        <p class="left-box">
          <a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;
          <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;
          <a href="#top">{L_BACK_TO_TOP}</a>
        </p>
      </div>
     
      <div class="clear"></div>
   
    <!-- BEGIN switch_user_logged_in -->
    <!-- BEGIN watchtopic -->
      <p id="M14_Notif_Plus-bis"><strong>{S_WATCH_TOPIC}</strong></p>
    <!-- END watchtopic -->
    <!-- END switch_user_logged_in -->

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

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

    <div class="topic-actions buttonsmsgbottom">
          <!-- BEGIN switch_user_authpost -->
          <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
          <!-- END switch_user_authpost -->

          <!-- BEGIN switch_user_authreply -->
          <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
          <!-- END switch_user_authreply -->
      </div>
    <div class="clear"></div>
     
    <!-- BEGIN viewtopic_bottom -->
    <p class="right">{S_TOPIC_ADMIN}</p>
    <!-- END viewtopic_bottom -->
     
    <!-- BEGIN show_permissions -->
      <div class="h3">Permissions de ce forum</div>
      {S_AUTH_LIST}
    <!-- END show_permissions -->

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

    <script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>
   
    </div>

Et pour les détails (normalement =P) restant on passe par le css :

  • pour les boutons répondre et nouveau à droite on ajoute finalement dans la feuille de style :
    Code:
    .buttonsmsgtop {
      float: right;
    }

  • pour supprimer les règles d'affichage par défaut du fil d'Ariane (remodifiables après si besoin ^^) ajoutez
    Code:
    .pathname-box {
      float: none;
      margin: 0;
    }





à partir de là, que souhaitez vous modifier ? ^^
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par SweetGumiho Jeu 9 Avr 2015 - 10:34

Cela m'a l'air déjà d'être un bonne avancée, mais il me reste la première chose que j'avais demandé :
SweetGumiho a écrit:Tout d'abord j'aimerais que le "Plus !" dans la liste des sujets s'affiche sous le nom de "Options du forum" et qu'il soit en petites majuscules comme celui dans les sujets.
Modification qui se fait dans le template viewforum_body il me semble.

Ensuite j'aimerais que l'espace entre le "Plus !" et le symbole soit un peu plus important et pas collé.

Aussi contrairement à l'exemple donné le titre du sujet est maintenant sur la même ligne que les boutons de "Répondre"/"Nouveau" alors qu'il devrait être en dessous et centré. Wink

Ensuite j'ai constaté que les mini-icônes pour aller en haut/en bas de la page au-dessus de chaque message se retrouvait sous les boutons d'édition de celui-ci, ce qui est un peu problématique.
Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3) WWyVfAr

J'ai aussi constaté que la date et heure du sujet n'était plus alignée à droite et était collée au texte du message, sans espace vertical :

Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3) EgPWrGc

Enfin ce serait bien que comme sur l'exemple il y ait de réels espaces entre les éléments, que cela fasse aéré et non tout collé.

Merci encore pour votre aide précieuse. Smile
SweetGumiho

SweetGumiho
****

Féminin
Messages : 410
Inscrit(e) le : 11/10/2014

http://theworldafter.forumactif.com/
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par MlleAlys Ven 10 Avr 2015 - 18:36

oui c'est normal que tout ne soit pas fait d'un coup (et pour rappel le forum n'a pas pour but d'être un forum de commande où on vous fournirez un code tout prêt), le but est déjà de corriger les erreur, puis de positionner les éléments dans l'ordre voulu, et enfin de les mettre en forme pour finaliser la mise en page.

Je ne vois pas ce que vous appelez "options du forum", ou alors, vous voulez ajouter ce texte ?

Pour le bouton plus!, pour espacer l'image du texte, comme c'est une image de fond, il suffit d'agrandir la marge intérieur (padding) à droite. Quant aux petites majuscules, il s'agit de la propriété css font-variant avec la valeur small-caps :
  • Localisez ce code css :
    Code:
    .pagination a[href^="javascript:showhide"] {
      background-image: url(http://2img.net/i/fa/invision/menu_action_down.gif);
      background-position: 100% 50%;
      background-repeat: no-repeat;
      padding: 0 10px 0 25px;
    }
  • Modifiez 10px qui correspond à la marge à droite (dans l'ordre pour les quatre valeurs : haut droite bas gauche) en 15px ou une autre valeur de votre choix. Ajoutez font-variant: small-caps; Ce qui donne :
    Code:
    .pagination a[href^="javascript:showhide"] {
      background-image: url(http://2img.net/i/fa/invision/menu_action_down.gif);
      background-position: 100% 50%;
      background-repeat: no-repeat;
      padding: 0 15px 0 25px;
      font-variant: small-caps;
    }


Pour l'heure à droite, c'est à cause des boutons d'édition qui ont été déplacé avec des positions relatives, 'espace à droite est leur emplacement d'origine. Pour éviter cela, on va modifier leur position avec un positionnement absolu, mais il nous faut pour cela un élément de référence les contenant : on va prendre postbody :
  • Localisez le code css
    Code:
    .postbody {
      display: block;
      padding: 10px;
      text-align: justify;
      width: 70%;
    }
  • ajoutez position:relative; pour qu'il devienne élément de référence, ce qui donne :
    Code:
    .postbody {
      display: block;
      padding: 10px;
      text-align: justify;
      width: 70%;
      position: relative;
    }
  • Localisez
    Code:
    ul.profile-icons {
      margin-top: 10px;
      border-radius: 10px;
      list-style: none;
    }
  • Supprimez ce code qui ne sert à rien.
  • Localisez
    Code:
    .profile-icons {
      float: right;
      position: relative;
      top: -48px;
      right: -90px;
    }
  • modifiez le en
    Code:
    .postbody ul.profile-icons {
      position: absolute;
      right: 0px;
      top: -25px;
    }
    La date devrait alors avoir sa place à droite.
    Vous pouvez augmenter la valeur de right: 0px; pour décaler les boutons vers la gauche, ou la diminuer (une valeur négative donc) pour les décaler vers la droite.


Pour remonter la date, il faut supprimer dans le template des éléments qui ne contiennent rien mais provoquent des retours à la ligne avant son affichage :
  • dans votre template viewtopic_body, localisez
    Code:
    <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
    Il s'agit d'un bloc vide.
  • supprimez cette ligne
  • Localisez
    Code:
    <h2 class="topic-title">{postrow.displayed.ICON}</h2>
    <p class="author">&nbsp;<div class="positiondatemsg">{postrow.displayed.POST_DATE_NEW}</div></p>
  • modifiez ce passage ainsi :
    Code:
    <div class="author positiondatemsg">{postrow.displayed.ICON}{postrow.displayed.POST_DATE_NEW}</div>
  • enregistrez et publiez


Pour ajouter un espace entre la date et le message, il suffit d'ajouter une marge au dessus de ce dernier :
  • ajoutez le code css :
    Code:
    .postbody .content {
      margin-top: 50px;
    }
    (modifiez la valeur si besoin.)


Pour le titre de la page, non il n'est vraiment à côté, il est bien en dessous, mais comme les boutons sont en float, ils prennent de l'espace à droite et les éléments suivant lui "laissent la place"... C'est un peu compliqué le positionnement en float ^^"
Bref, pour que le titre se place bien sous les boutons en oubliant le float :
  • localisez ce code css :
    Code:
    h1.page-title {
      font-size: 18px;
      margin-bottom: 35px;
      text-align: center;
    }
  • Ajoutez clear:both; ce qui donne :
    Code:
    h1.page-title {
      font-size: 18px;
      margin-bottom: 35px;
      text-align: center;
      clear: both;
    }
  • Vous pouvez également modifier la valeur du margin-bottom pour modifier la marge sous le titre, et de la même façon ajouter un margin-top pour modifier la marge au dessus du titre.
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par SweetGumiho Ven 10 Avr 2015 - 19:12

MlleAlys a écrit:oui c'est normal que tout ne soit pas fait d'un coup (et pour rappel le forum n'a pas pour but d'être un forum de commande où on vous fournirez un code tout prêt), le but est déjà de corriger les erreur, puis de positionner les éléments dans l'ordre voulu, et enfin de les mettre en forme pour finaliser la mise en page.
J'en ai bien conscience, ne vous en faites pas ! C'est bien pour cette raison que je poste mes demandes ici et non sur les forums de codage/graphisme (je suis inscris sur nombre d'entre eux pourtant). Ici au moins j'ai la chance de pouvoir apprendre en même temps et je constate au fil des aides que je gagne de plus en plus en autonomie, ce qui me permet aussi de partager plus tard et d'offrir mon aide en retour. C'est beaucoup plus enrichissant et formateur que de prendre des codes tout faits et c'est bien pour ça que j'aime que l'on détaille les informations comme vous le faites. Smile

MlleAlys a écrit:Je ne vois pas ce que vous appelez "options du forum", ou alors, vous voulez ajouter ce texte ?
En fait j'aimerais que dans les sous-forums le "Plus !" s'appelle "Options du forum" et non "Plus !" comme dans les sujets. ^_^

MlleAlys a écrit:Pour le titre de la page, non il n'est vraiment à côté, il est bien en dessous, mais comme les boutons sont en float, ils prennent de l'espace à droite et les éléments suivant lui "laissent la place"... C'est un peu compliqué le positionnement en float ^^"
Y aurait-il une méthode ou un positionnement optimal que vous me conseillerez dans ce cas ?

J'ai par contre un petit problème, c'est que les boutons d'édition de message sont maintenant sur le cadre et pas complètement à droite.

Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3) VEaP0lM Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3) 5kjO92P
SweetGumiho

SweetGumiho
****

Féminin
Messages : 410
Inscrit(e) le : 11/10/2014

http://theworldafter.forumactif.com/
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par MlleAlys Ven 10 Avr 2015 - 19:41

SweetGumiho a écrit:En fait j'aimerais que dans les sous-forums le "Plus !" s'appelle "Options du forum" et non "Plus !" comme dans les sujets. ^_^
Aaaah ok, je vais voir pour ça, j'ai quelque chose en javascript mais comme je suis pas très sûre de moi en javascript je préfère faire vérifier le code avant de vous le passer ^^"
En attendant, je vous propose déjà de modifier votre template pour pouvoir le différencier du plus des sujets :
  • éditez votre template viewforum_body
  • localisez ce passage qui contient pagination et menu plus :
    Code:
    <div class="pagination">
      <br />
      <script type="text/javascript">//<![CDATA[
          var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
          var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
          var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
          var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
          var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
          insert_plus_menu_new('f{FORUM_ID}&amp;f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      {PAGINATION}
      <br /><br />
    </div>
  • ajoutez la classe forumplus (c'est un nom arbitraire x3) à la première div ce qui donne :
    Code:
    <div class="pagination forumplus">
      <br />
      <script type="text/javascript">//<![CDATA[
          var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
          var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
          var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
          var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
          var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
          insert_plus_menu_new('f{FORUM_ID}&amp;f={FORUM_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      {PAGINATION}
      <br /><br />
    </div>
  • enregistrez et publiez


Pour le float, ce n'est pas un problème, le fonctionnement est juste un peu plus compliqué à comprendre au début, normalement en ayant ajouté la propriété css clear:both; vous ne devriez pas avoir de problème =)

Pour les boutons :
  • Reprenez le code du positionnement absolu des boutons :
    Code:
    .postbody ul.profile-icons {
      position: absolute;
      right: 0px;
      top: -25px;
    }
  • modifiez top:-25px en -35px ou une autre valeur de votre choix
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par SweetGumiho Ven 10 Avr 2015 - 19:53

Après avoir testé des placements, voici ce que j'ai :

Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3) R5hX0dl

Comme j'avais le "Plus !" collé aux boutons, j'ai voulu ajouter une marge mais ça n'a pas fonctionné. J'ai donc enlevé et j'ai simplement le code :
Code:
.postbody ul.profile-icons {
  position: absolute;
  right: -80px;
  top: -40px;
}

Le problème c'est que je ne sais plus si je dois aller dans ma configuration du "Plus !" pour toucher à cet espace ou dans celle des boutons. ^^;
SweetGumiho

SweetGumiho
****

Féminin
Messages : 410
Inscrit(e) le : 11/10/2014

http://theworldafter.forumactif.com/
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par MlleAlys Ven 10 Avr 2015 - 20:08

une marge en dessous du plus du coup c'est ça ?
Ici on va viser le lien "plus!", mais comme ce n'est pas un bloc, c'est un élément "en ligne", il n'accepte pas les marges et paddings. Du coup on va ajouter la marge à l'élément bloc qui contient le plus :
  • localisez
    Code:
    #M14_menu.pagination {
      font-variant: small-caps;
    }
  • ajoutez un margin-bottom pour ajouter une marge en dessous :
    Code:
    #M14_menu.pagination {
      font-variant: small-caps;
      margin-bottom: 10px;
    }


Pour comprendre un peu le fonctionnement des codes, vous pouvez aussi utiliser les outils de développement de votre navigateur, sur chrome vous faites clic droit sur l'élément et "inspecter l'élément" : un panneau s'ouvrira alors avec d'un côté le code html et de l'autre le css associé à l'élément. Vous pouvez modifier les contenus de ces panneaux pour tester des codes sans avoir peur des conséquences, il suffit d'actualiser la page pour que tout redevienne normal ! ^^


EDIT :
Mon javascript est correct ! Very Happy
Pour modifier "plus" en "options du forum", ajoutez donc dans modules > javascripts, sur les sous-forums, le javascript suivant :
Code:
$(function(){
  $('.forumplus a[href^="javascript:showhide"]').html('Options du forum')
});
(vous pouvez reconnaitre a[href^="javascript:showhide"] comme dans le css pour viser le lien "plus" et devant .forumplus la classe ajoutée dans le template pour ne viser que ceux des sous forums ! ^^)
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par SweetGumiho Ven 10 Avr 2015 - 20:38

"Inspect element" je l'utilise très très souvent oui (après je n'en comprends pas la moitié, mais ça finira par rentrer ^^). Je n'ai pas trouvé de navigateur aussi bien de ce côté. Firebug de Firefox ne fait vraiment pas le poids à côté. XD

Pour changer il n'y a pas moyen de passer par les templates comme j'ai fait pour changer "Permission de ce forum" en "Permissions de ce forum" et "Modérateurs" en "Gardiens" ? Ou alors effectivement comme ils ne sont pas dissociés de base dans le template ça ne fonctionne pas, c'est ça ?

En tous cas ça marche niquel, merci ! ♥

Problème résolu. Smile
SweetGumiho

SweetGumiho
****

Féminin
Messages : 410
Inscrit(e) le : 11/10/2014

http://theworldafter.forumactif.com/
SweetGumiho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifications du "Plus !" et placement des éléments en haut des sujets (phpBB3)

Message par MlleAlys Ven 10 Avr 2015 - 21:15

oui ici c'est le script qui est remplacé par le lien "plus" mais également tout le contenu, donc on ne peut pas le modifier par le template malheureusement ^^"
et de rien, je verrouille alors Smile
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum