Problème d'alignement de texte par rapport au thème et la taille du forum

2 participants

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

Résolu Problème d'alignement de texte par rapport au thème et la taille du forum

Message par Naru12021 Lun 26 Avr 2021 - 11:25

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Safari
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://hetalia-world.forumactif.com/

Description du problème

Bonjour,

Je suis en train de faire un nouveau thème pour mon forum mais je n'arrive pas à ce que tout les éléments soit aligné à la même largueur. (900px)

La bannière, les catégories, le QEEL sont déjà bien aligné. Mais la PA (encore en construction), les informations (dernières visites, date et heure, les boutons (voir les messages, marquer tous les forums comme lu) ne sont pas bien aligné.

Je ne sais pas trop où chercher pour arranger ça.

Auriez-vous une idée ?

Merci d'avance Smile

Naru
Naru12021

Naru12021
*

Féminin
Messages : 35
Inscrit(e) le : 03/04/2010

http://x0--d-gray-man--0x.forumdefan.com/index.htm
Naru12021 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'alignement de texte par rapport au thème et la taille du forum

Message par MlleAlys Lun 26 Avr 2021 - 16:03

Bonjour,
A vu de nez je dirais une marge ou un padding qui décale les éléments vers la droite.... Mais difficile à confirmer sans accès au forum pour inspecter le problème ni aucun code, difficile de confirmer et de dire où.
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: Problème d'alignement de texte par rapport au thème et la taille du forum

Message par Naru12021 Lun 26 Avr 2021 - 16:33

Mh... c'est bien ce qui me semblait mais je n'arrive pas à trouver l'endroit où je pourrais modifier ça.
Ca doit être des restes de l'ancien design et ça fait une éternité que j'ai plus mis la main dans le codage... Je vais essayer de retrouver mais si quelqu'un à une idée ça m'aiderait beaucoup o/
Naru12021

Naru12021
*

Féminin
Messages : 35
Inscrit(e) le : 03/04/2010

http://x0--d-gray-man--0x.forumdefan.com/index.htm
Naru12021 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'alignement de texte par rapport au thème et la taille du forum

Message par MlleAlys Lun 26 Avr 2021 - 16:45

Je dirais soit là :
Problème d'alignement de texte par rapport au thème et la taille du forum Sans_t16

Soit là :
Problème d'alignement de texte par rapport au thème et la taille du forum Sans_t15

Ou un mix des deux.
Pour en savoir plus, pour ma part il me faudra soit pouvoir voir l'index du forum, soit vos codes css et templates.
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: Problème d'alignement de texte par rapport au thème et la taille du forum

Message par Naru12021 Lun 26 Avr 2021 - 17:06

Alors je m'excuse d'avance j'ai piocher dans bcp de tuto en libre service. J'espère que vous vous y retrouverez quand même.

Voici le code CSS :

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

/*CUSTOMISATION DES FORUMS ET CATEGORIES PAR AWFUL*/
/*Import de la police*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,900');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap') ;
/*titre de catégorie*/
.titre-cate {
    font-family: 'Shadows Into Light', sans-serif;
    text-transform: none;
    width: 850px;
    margin: auto;
}
.titre-cate h2 {
    font-size: 25px;
    color: #3e3e3e;
    margin-bottom: 10px;
}
/*bloc forum*/
.wrap-forum {
    width: 900px;
    height: 110px;
    background-color: #CCE8FF;
    position: relative;
    font-family: 'Roboto', sans-serif;
    margin: 0 auto 10px;
}
.wrap-forum a,
.wrap-forum a:hover {
    text-decoration: none!important;
}
.wrap-forum.no-avatar .img-forum {
    display: none;
}
/*Titre forum*/
.forum-titre {
    position: absolute;
    width: 100%;
    height: 40px;
    background-color: #92BEE2;
    box-sizing: border-box;
    padding-left: 20px;
}
.forum-titre a {
    font-weight: 900;
    text-transform: uppercase;
    line-height: 40px;
    font-size: 16px;
    color: #444!important;
    transition: all 0.5s;
}
.forum-titre a:hover {
    color: #7D7B91 !important;
}
/*Suppression de l'image de nouveau message*/
.img-forum {
    position: absolute;
    bottom: 0;
    right: 0;
}
.img-forum img {
    display: none;
}
/*remplacement de l'image de nouveau message par un 'x' rouge pour old*/
.img-forum:before {
    content: "×";
    height: 15px;
    width: 15px;
    background: #CC9696;
    position: absolute;
    right: 155px;
    bottom: 10px;
    z-index: 2;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    color: #fff;
    font-size: 10px;
    padding-left: 1px;
    box-sizing: border-box;
}
/*changement du 'x' rouge en '✓' vert pour les nouveaux messages*/
.new:before {
    background: #5AC854;
    content: "✓";
}
/*description de forum*/
.forum-desc {
    position: absolute;
    height: 50px;
    width: 500px;
    overflow: auto;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    text-align: justify;
    padding-right: 10px;
    line-height: 12px;
}
/*Custom scrollbar (seulement pour Chrome !)*/
.forum-desc::-webkit-scrollbar {
    width: 4px;
}
.forum-desc::-webkit-scrollbar-track {
    background-color: #A1A2A7;
}
.forum-desc::-webkit-scrollbar-thumb {
    background-color: #CCE8FF;
}
/*Statistiques topics et posts*/
.stats-forum {
    left: 540px;
    position: absolute;
    top: 50px;
    text-transform: uppercase;
    font-size: 8px;
    letter-spacing: 1px;
    color: #696969;
}
/*Dernier message*/
.last-forum {
    position: absolute;
    right: 20px;
    text-transform: uppercase;
    font-size: 10px;
    bottom: 10px;
    color: #c60f3c#;
}
.last-forum a {
    text-transform: none;
}
.last-forum span > a:first-child {
    font-size: 15px;
    color: #696969;
    transition: all 0.3s;
}
.last-forum span > a:first-child:hover {
    color: #de99aa;
}
.last-forum:empty::before {
    content: "Pas de nouveaux messages";
    font-size: 10px;
    width: 100px !important;
    display: block;
    bottom: 10px;
    position: relative;
}
/*Sous-forums*/
.sous-forum {
    position: absolute;
    font-size: 0;
    right: 18px;
    top: 20px;
    max-width: 450px;
    background: #B3D8F7;
    z-index: 3;
}
.sous-forum a {
    display: inline-block;
    font-size: 9px !important;
    background: #CCE8FF;
    margin: 0 2px 3px;
    padding: 1px 4px;
    text-transform: uppercase;
    color: #696969 !important;
    transition: all 0.3s;
}
.sous-forum a:hover {
    background: #B3D8F7;
}
/*Bouton "+" pour l'affichage des sous-forums supplémentaires*/
.more {
    position: absolute;
    right: -10px;
    top: -16px;
    display: block;
    background: green;
    font-size: 10px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    text-align: center;
    line-height: 13.5px;
    color: #e7e7e7;
    box-sizing: border-box;
    padding-left: 1px;
    cursor: pointer;
}
/*Couleur bouton "-"*/
.more.less {
    background: #c35050;
}
/*Avatar du dernier posteur*/
.avatar-forum {
    width: 50px;
    height: 50px;
    overflow: hidden;
    position: absolute;
    border-radius: 50%;
    bottom: 10px;
    right: 155px;
    background-size: 100%;
}
.avatar-forum img {
    width: 50px;
}

/*** ----- EN TETE ----- ***/
.wrapper-entete{
 font: normal 15px/20px Tahoma, sans-serif;
}

.wrapper-entete .flex{
  display: flex;
}

.wrapper-entete .typo{
  font-family: 'Kristi', cursive;
}

.wrapper-entete a{
  color: #620019;
  text-decoration: none;
}

.wrapper-entete a:hover{
  color: #24060e;
  cursor: pointer;
}

.wrapper-entete .txt-right{
  text-align: right;
}

.wrapper-entete #logo-et{
  display: inline-block;
  margin-left:  10%;
  position: relative;
  top: 19px;
}

.wrapper-entete #content-et{
  background: #c8c5be url("http://pvereecken.fr/zenpub/zp2017/img/bkg-et.jpg") repeat-y center center;
  background-size: 100% auto;
  padding: 2% 0;
  position: relative;
}

.wrapper-entete #content-et .ligne-et{
  justify-content: space-between;
  margin: 0 10% 1.2% 20%;
  width: 68%;
}

.wrapper-entete h2{
  color: #4e453e;
  font-size: 50px;
  font-weight: normal;
  margin: 0;
  padding:  0;
}

.wrapper-entete .blk-et > div{
  background: url("http://pvereecken.fr/zenpub/zp2017/img/bkg-visu.jpg") no-repeat center center;
  background-size: cover;
  border-bottom: 4px solid #aea9a6;
  border-top: 4px solid #aea9a6;
  box-sizing: border-box;
  margin-top: -5px;
  padding: 3% .8%;
}

.wrapper-entete .blk-et p,
.wrapper-entete .blk-et ul{
  line-height: 1;
}

.wrapper-entete #et-deco{
  background: transparent url('http://pvereecken.fr/zenpub/zp2017/img/deco-et.png') no-repeat 0 100%;
    background-size: contain;
    bottom: 0;
    height: 56%;
    left: 10%;
    position: absolute;
    width: 10%;
}

/* Concept & protégés */

.wrapper-entete #et-concept,
.wrapper-entete #et-proteges{
  width:  55%;
}

/* Nouveautés & recrutement */

.wrapper-entete #et-nouveautes,
.wrapper-entete #et-recrutement{
  width:  41%;
}

.wrapper-entete #et-nouveautes ul{
  list-style: none;
  margin: auto;
  padding: 0;
  width: 96%;
}

.wrapper-entete #et-nouveautes ul li{
  border-left: 2px solid #aea9a6;
  margin-bottom: 3.4%;
  padding-left: 2%;
}

.wrapper-entete #et-nouveautes ul li:first-child{
  border-left: 2px solid #c752d3;
}

/*CUSTOMISATION DE LA PAGE DES MEMBRES PAR ARTEMIS*/

.memberlist_t {
    width: 850px;
    height: 50px;
    background: #92BEE2;
    margin: auto;
    text-align: center;
    color: #171717;
    font: 11px roboto;
    text-transform: uppercase;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    margin-bottom: 10px;
}

.tli-fields {
  width: 850px;
  margin: auto;
  text-align: center;
  margin-bottom: 10px;
}

.tli-fields input {
  border: 1px solid #e2e2e2;
  background: white;
}

.tli-fields select {
  border: 1px solid #e2e2e2;
}

.memberlist_arte {
  width: 850px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: auto;
  padding: 0;
  
}

.one_member {
  width: 275px;
  height: 120px;
  background: #95b8d9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 15px;
  position: relative;
  margin-bottom: 12px;
overflow:hidden;
}

.one_member a, .one_member a:hover {
  text-decoration: none;
  color: white !important;
}

.one_member:before {
  content: " ";
  width: 120px;
  height: 180px;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(251,251,251,0.2);
  z-index: 0;
  -webkit-clip-path: circle(50% at 29% 22%);
          clip-path: circle(50% at 29% 22%);
}

.avatar_member_list {
  width: 70px;
  height: 70px;
  z-index: 99;
}

.avatar_member_list img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 5px solid white;
  -o-object-fit: cover;
     object-fit: cover;
}


.pseudo_memberlist {
  margin: 0;
  width: 155px;
  height: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 99;
}

.pseudo_memberlist > h2 {
  color: white;
  font: 12px roboto;
  text-transform: uppercase;
  font-weight: 500;
  border-left: 2px solid white;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-left: 5px;
  width: 100%;
}

.pseudo_memberlist div {
  color: white;
    font: 9px roboto;
    font-weight: 400;
    margin-top: -40px;
    font-style: oblique;
    margin-bottom: -5px;
    text-transform: lowercase;
  
}

.pseudo_memberlist > h2 strong {
  color: white;
  font-weight: 500;
}

.stats_link_members {
  width: 155px;
  margin-left: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: -5px;
}

.stats_link_members span {
  display: block;
  font: 9px source code pro;
  color: white;
  text-transform: uppercase;
  margin: 0 0px;}

.one_member a[href^="/privmsg"]:before{
  content:'MP';
}

.stats_link_members a[href^="/privmsg"] img{
    display: none;
}

.stats_link_members span:after {
  content: "|";
    margin: 0 3px;
}

.stats_link_members span:last-child:after {
  content: " ";
}


/* QEEL PAR AWFUL */
 #qeel {
     font-family: 'Roboto', sans-serif;
     width: 900px;
     margin:auto;
     position: relative;
     display: flex;
     flex-wrap: wrap;
     padding-bottom: 20px;
     background: #CCE8FF;
}
 #qeel a, #qeel a:hover, #qeel a:active, #index-links a, #index-links a:hover, #index-links a:active {
     text-decoration: none!important;
}
/* Titre du QEEL */
 #qeel-titre {
     height: 100px;
     background: #92BEE2;
     flex: 100%;
     margin-bottom: 20px;
}
 #qeel-titre h2 {
     color: #fff;
     font: 900 30px 'Montserrat', sans-serif;
     text-transform: uppercase;
     text-align: right;
     line-height: 100px;
     padding-right: 20px;
}
/* Case dernières 24 heures */
 #qeel-connectes24 {
     width: 140px;
     border: 1px solid #92BEE2;
     background:#f9f9f9;
     margin-left: 20px;
     margin-right: 20px;
     box-sizing: border-box;
     height: 152px;
     overflow: auto;
}
 #qeel-connectes24 td.row1 {
     background-color: transparent;
     font-family: 'Roboto', sans-serif;
     padding: 5px;
}
 #qeel-mid {
     width: 300px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     margin-right: 20px;
}
/* Dernier inscrit */
 #qeel-dernier h3 {
     text-align: center;
     text-transform: uppercase;
     font-size: 12px;
     margin: 0;
     font-family: "Montserrat", sans-serif;
}
 #qeel-dernier div {
     text-align: center;
     width: 100%;
     background: #CCE8FF;
     height: 50px;
     margin-top: 5px;
}
 #qeel-dernier div a strong {
     font-weight: 300;
     text-transform: uppercase;
     font-size: 20px;
     line-height: 50px;
     color: #7b7b7b;
}
/* Case liste des connectés */
 #qeel-connectes {
     background: #CCE8FF;
     overflow: auto;
     padding: 5px;
     font-size: 11px;
     flex: 1;
     margin-right: 10px;
     height: 110px;
     box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
/* Les groupes */
 #qeel-groupes {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 #qeel-groupes div {
     border: 1px solid #92BEE2;
     width: calc(100% / 3 - 2px);
     text-transform: uppercase;
     font-size: 8px;
     text-align: center;
     height: 35px;
     margin-top: 3px;
     line-height: 35px;
     color: #a7a7a7;
     box-sizing: border-box;
     background: #fff;
     box-shadow: 3px 0 0 #B3D8F7 inset,-3px 0 0 #B3D8F7 inset,0 3px 0 #B3D8F7 inset,0 -3px 0 #B3D8F7 inset;
}
 #qeel-groupes div:nth-child(1) a {
     color: #ed7171;
}
 #qeel-groupes div:nth-child(2) a {
     color: #c785d1;
}
 #qeel-groupes div:nth-child(3) a {
     color: #8ec5c9;
}
 #qeel-groupes div:nth-child(4) a {
     color: #78c69a;
}
 #qeel-groupes div:nth-child(5) a {
     color: #d2c853;
}
 #qeel-groupes div:nth-child(6) a {
     color: #dab15e;
}
 #qeel-right {
     flex: 1;
     margin-right: 20px;
     display: flex;
     flex-wrap: wrap;
}
/* Statistiques messages et membres */
 #qeel-stats2 {
     display: flex;
     flex-direction: column;
     height: 110px;
}
 #qeel-stats2 div{
     background: #CCE8FF;
     width: 80px;
     margin-bottom: 9px;
     text-transform: uppercase;
     font-size: 10px;
     text-align: center;
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     font-weight: 300;
}
 #qeel-stats2 div:last-child {
     margin-bottom: 0px;
}
/* Statistique des membres en lignes (x membres, x invités, x invisibles) */
 #qeel-stats {
     text-transform: uppercase;
     font-size: 10px;
     font-weight: bold;
     color: #aeaeae;
     flex: 100%;
     align-self: start;
}
 #qeel-stats b {
     color: #bbb657;
}
 #qeel-stats i {
     font-weight: 300!important;
     font-style: inherit;
     color: #000000;
}
 #qeel-stats u {
     text-decoration: none;
  font-weight: 300;
color: #000;
}
/* Crédits du QEEL */
 #qeel-credits {
     font-size: 9px;
     text-transform: uppercase;
     color: #7a7a7a;
     text-align: right;
     flex: 100%;
     align-self: end;
}
/*Les liens en dessous du QEEL */
 #index-links {
     width: 900px;
     margin: auto;
     display: flex;
     justify-content: space-between;
     margin-top: 10px;
}
 #index-links a {
     border: 1px solid #92BEE2;
     background: #fff;
     flex: 1;
     margin-right: 3px;
     text-align: center;
     text-transform: uppercase;
     font-size: 9px;
     padding: 10px 0;
     font-family: "Oswald", sans-serif;
     box-shadow: 3px 0 0 #b3d8f7 inset,-3px 0 0 #b3d8f7 inset,0 3px 0 #b3d8f7 inset,0 -3px 0 #b3d8f7 inset;
     color: #ababab;
     transition: color 0.3s;
}
 #index-links a:hover {
     color: #ccc;
}
 #index-links a:last-child {
     margin-right: 0px;
}

/*PERSONNALISATION AFFICHAGE DES MESSAGES PAR AWFUL*/
.silence {
    display: flex;
    flex-wrap: wrap;
}
/*Titre du sujet*/
 .post-title {
     text-align: center;
     font-family: "Montserrat", sans-serif;
     font-size: 35px;
     color: #171717;
     margin: 0;
     padding: 10px 0 30px;
     letter-spacing: -1px;
     text-shadow: -1px 1px 0 #92bee2;
}
/*Corps du message*/
 .post {
     background: #CCE8FF;
}
 .post-left {
     width: 250px;
}
 .post-right {
     flex: 1;
}
/*Boutons en bas de post */
 .post-bottom {
     flex: 100%;
     position: relative;
}
 .post-bottom div {
     display: inline-block;
     margin: 10px 15px 10px 0;
}
 .post-bottom div:first-child {
     display: inline-block;
     margin-left: 15px;
}
 .post-bottom div a {
     position: relative;
     text-decoration: none !important;
}
 .post-bottom div a:after {
     content: "Profil";
     text-transform: uppercase;
     font-family: "Roboto", sans-serif;
     font-size: 8px;
     letter-spacing: 1px;
     border: 1px solid #92BEE2;
     padding: 0px 8px;
     color: #9f9f9f;
     height: 16px;
     line-height: 16px;
     display: inline-block;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-bottom div a:hover:after {
     border: 1px solid #92BEE2;
     color: #595959;
}
 .post-bottom .btn-pm a:after {
     content: "Mp";
}
 .post-bottom .btn-mail a:after {
     content: "Mail";
}
 .post-bottom .btn-link a:after {
     content: "click";
}
/*Apparence du "en ligne" */
.post-bottom .online:empty {
    display: none;
}
 .online img {
     display: none;
}
 .online:before {
     content: "\f2a9";
     position: absolute;
     right: 10px;
     bottom: 10px;
     font-family: Ionicons;
     font-size: 40px;
     color: #d2d2d2;
}
/*Haut du post*/
 .post-top {
flex: 100%;
     height: 80px;
     background: #92BEE2;
     border-bottom: 3px solid #171717;
     position: relative;
}
/*Rang*/
 .rank {
     position: relative;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-family: "Roboto", sans-serif;
     font-size: 9px;
     left: 30px;
     top: 45px;
}
/*Pseudo*/
 .post-name {
     font-family: "Montserrat", sans-serif;
     font-size: 30px;
     position: absolute;
     left: 30px;
     top: 10px;
}
/*Boutons éditer, citer, etc.*/
 .post-btn {
     text-align: right;
     position: absolute;
     right: 5px;
     bottom: 15px;
}
 .post-btn img, .post-bottom img {
     display: none;
}
 .post-btn div {
     display: inline-block;
     margin: 0 5px;
}
 .post-btn div a:before {
     content: "\f11d";
     display: inline-block;
     height: 35px;
     width: 35px;
     border: 1px solid #171717;
     border-radius: 50%;
     font-family: Ionicons;
     text-align: center;
     line-height: 35px;
     font-size: 20px;
     color: #171717;
     background: #92BEE2;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-btn div a:hover:before {
     background: #CCE8FF;
}
 .post-btn .btn-edit a:before {
     content: "\f2bf";
}
 .post-btn .btn-delete a:before {
     content: "\f252";
}
 .post-btn .btn-ip a:before {
     content: "\f149";
}
 .post-btn .btn-report a:before {
     content: "\f100";
}
/*Avatar*/
 .post-profil {
     width: 200px;
     margin: 25px auto;
     position: relative;
     overflow: hidden;
}
/*Infos du profil au survol*/
 .profil-hover {
     height: 400px;
     width: 200px;
     position: absolute;
     background: #92BEE2;
     top: 100%;
     text-align: center;
     box-sizing: border-box;
     padding: 5px;
     -webkit-transition: all 0.3s;
     transition: all 0.3s;
}
 .post-profil:hover .profil-hover {
     top: 0;
}
 .profil-hover-content {
     height: 100%;
     background: #CCE8FF;
     overflow: auto;
     font-family: "Roboto", sans-serif;
     font-size: 11px;
}
 .profil-hover-content div {
     margin: 5px 0;
}
 .profil-hover-content div .label {
     display: block;
     text-transform: uppercase;
     font-size: 8px;
     letter-spacing: 1px;
}
 .profil-hover-content div .label span {
     color: #92BEE2 !important;
}
 .postdetails {
     font-family: "Montserrat", sans-serif;
     text-transform: uppercase;
     font-size: 7px;
     letter-spacing: 1px;
     color: #171717;
     margin-top: 5px;
     display: inline-block;
}
 .postdetails i {
     font-size: 14px;
     color: #171717;
     vertical-align: text-bottom;
}

/*CUSTOMISATION DE LA BOITE DE RÉCEPTION PAR AWFUL*/
/*Boite MP*/
#mp {
     font-family: 'Roboto', sans-serif;
     background: #92BEE2;
}
/*Header*/
 .mp-header {
     align-items: center;
     display: flex;
     justify-content: space-between;
     padding: 10px;
     background: #323232;
     color: #e7e7e7;
}
/*Liens du header*/
 .mp-links {
     display: flex;
}
 .mp-links div {
     margin-right: 10px;
     text-transform: uppercase;
     font-size: 10px;
     font-weight: bold;
}
 .mp-links div:last-child {
     margin-right: 0px;
}
 .mp-links div a {
     font-weight: normal;
     color: #757575;
     transition: color 0.3s ease-in-out;
}
 .mp-links div a:hover {
     color: #ccc;
}
/*Barre de pourcentage*/
 .mp-percent {
     font-size: 10px;
     width: 250px;
}
 .mp-percent > div {
     background: #444;
     width: 100%;
     margin-top: 5px;
}
 .mp-percent > div > div {
     background: #a16bdb;
     display: inline-block;
}
/*Corps de la boîte*/
 .mp-body {
     padding: 15px;
}
 .mp-body-head {
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
}
 .mp-body-head select {
     border: 1px solid #aaa;
}
 .mp-body-head input{
     font-size: 11px!important;
}
/*Bouton nouveau*/
 #mp a[href="/privmsg?mode=post"]::before {
     content: "Nouveau";
     font-family: "Montserrat", sans-serif;
     font-size: 16px;
     font-weight: 900;
     text-transform: uppercase;
     transition: color 0.3s ease-in-out;
     color: #323232;
}
 #mp a[href="/privmsg?mode=post"]:hover::before {
     color: #5d5c5c;
}
 #mp a[href="/privmsg?mode=post"] img {
     display: none;
}
/*Item MP*/
 .mp-item {
     background: #CCE8FF;
     padding: 10px;
     box-sizing: border-box;
     position: relative;
     display: flex;
     justify-content: space-between;
     border-left: 3px solid #b0b0b0;
}
 .mp-item + .mp-item {
     margin-top: 8px;
}
 .mp-item.new-mp {
     border-left: 3px solid #a16bdb;
}
 .mp-item > img {
     display: none;
}
 .mp-item > div > div:first-child {
     font-size: 11px;
     margin-bottom: 5px;
}
 .mp-item > div > div:first-child > a:first-child {
     margin-right: 5px;
     color: #1d1d1d;
     font-weight: bold;
     border-right: 1px solid #ccc;
     padding-right: 5px;
}
 .mp-item > div > div:nth-child(2) {
     text-transform: uppercase;
     color: #aaa;
     font-size: 9px;
     letter-spacing: 1px;
}
 .mp-bottom-btn {
     padding: 10px 10px 0px;
     display: flex;
     justify-content: flex-end;
}
 .mp-bottom-btn input, .mp-body-head input{
     transition: all 0.3s ease-in-out;
     border: 1px solid #aaa;
     font-family: inherit;
     text-transform: uppercase;
     font-size: 9px;
     color: #414141;
     cursor: pointer;
     background: #e9e9e9;
}
 .mp-bottom-btn input:hover, .mp-body-head input:hover{
     border: 1px solid #848080;
}
 .mp-bottom {
     align-items: center;
     padding: 10px;
     display: flex;
     font-size: 10px;
}
 .mp-bottom a + div {
     margin-left: 10px;
}
 .mp-bottom a + div strong {
     color: #a16bdb;
}
 .mp-bottom div:last-of-type {
     margin-left: auto;
}
 .mp-bottom div:last-of-type a {
     color: #575757;
     transition: all 0.3s ease-in-out;
}
 .mp-bottom div:last-of-type a:hover {
     color: #999;
}
 .mp-bottom div:last-of-type a:last-child {
     margin-left: 10px;
}
 .mp-empty {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #969696;
}

/*
 * Libre service bloc de connexion rapide verte
 * NEVER UTOPIA
 */

 /* Bloc qui entoure tout */
 .cnxl-bloc {
     margin: 20px auto;

     font-family: 'Playfair Display', serif;
     text-align: center;
     font-size: 15px;
     color: #484848;
 }

 /* Aligner les 3 blocs */
 .cnxl-submit-bloc,
 .cnxl-inscription,
 .cnxl-input-bloc {
     display: inline-block;
     vertical-align: middle;
 }

 /* Style commun pour tous les champs */
 .cnxl-form input {
     padding: 10px;
     border: none;
     font-family: inherit;
     font-size: 15px;
     outline: none;
 }

 /*
  * Décoration à gauche
  * Inscription
  */

 .cnxl-inscription {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 2px solid #E5DB84;
     padding: 8px;
 }

 .cnxl-inscription img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }


 /*
  * Champs à remplir au centre
  */

 .cnxl-input-bloc {
     margin: 0 20px;
     width: 200px;
     border-radius: 5px;
     box-shadow: 0 0 0 2px #E5DB84;
     overflow: hidden;
     padding: 0 5px; /* espace entre le bord et le trait des input */
     background: #FFFFFF;
 }

 .cnxl-input-bloc input {
     color: black;
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-bottom: 1px solid #E5DB84; /* bordure entre les input */
     box-shadow: 0 0 0 100px #ffffff inset; /* couleur de fond des input */
 }
 .cnxl-input-bloc input:last-of-type {
     border: none;
 }


 /*
  * Connexion à droite
  */

 /* Bouton de connexion */
 .cnxl-submit-bloc input {
     background: #E5DB84;
     border-radius: 3px;
     cursor: pointer;
     transition: all 300ms ease-out;
 }

 /* Bouton de connexion au survol */
 .cnxl-submit-bloc input:hover {
     background: #ede390;
 }

 /*
  * Zone en bas
  */

 .cnxl-form label {
     cursor: pointer;
 }

 /* Liens (Mot de passe oublié) */
 .cnxl-bloc a {
     font-size: 10px;
     text-decoration: none!important;
     color: #766e6e;
     text-decoration: none;
     transition: all 300ms ease-out;
 }

 /* Liens au survol (Mot de passe oublié) */
 .cnxl-bloc a:hover {
     color: #a79d46;
 }

 /*
  * Fin libre service Connexion rapide verte
  * Never Utopia
  */

/*LISTE DES SUJETS PAR AWFUL*/
/*Customisation du bloc contenant les sujets (ajout d'un titre, etc)*/
.topic-wrap {
    margin: 10px 0;
}
 .topic-wrap th {
    display: none;
}
 .topic-wrap-table::before , .topic-wrap th:first-child::before {
    content: "topics";
    background: #92BEE2;
    display: block;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    font-size: 11px;
    text-align: left;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 20px;
    text-transform: uppercase;
    color: #3e3e3e;
}
 .topic-wrap-table.topic-note::before {
    content: "notes & annonces";
}
 .topic-wrap th:first-child {
    display: block;
    position: relative;
    height: 20px;
    padding: 0;
}
 .topic-wrap th:first-child::before {
    content: "topics";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*Bloc topic */
 .topic {
    display: flex;
    min-height: 50px;
    background: #CCE8FF;
    border: 1px solid #151515;
    color: #868686;
    font-family: "Roboto", sans-serif;
    border-bottom: 0;
}
.topic a, .topic a:hover, .topic a:active {
    text-decoration: none!important;
}
 .topic-left, .topic-stats, .topic-last {
    justify-content: center;
    display: flex;
    flex-direction: column;
}
/*Image nouveau message, verrouillé, etc*/
 .topic-img {
    width: 50px;
    position: relative;
}
 .topic-img img {
    display: none;
}
/*L'image est supprimée et remplacée par un cercle*/
 .topic-img::before {
    content: "";
    height: 30px;
    width: 30px;
    border: 5px solid #2a2a2a;
    border-radius: 50%;
    position: absolute;
    left: calc(50% - 15px);
    box-sizing: border-box;
    top: calc(50% - 15px);
}
/*Si le topic est verrouillée, l'image est remplacée par une croix*/
 .topic.verrouille .topic-img::before {
    content: "×";
    height: 30px;
    width: 30px;
    border: 0;
    position: absolute;
    left: calc(50% - 15px);
    box-sizing: border-box;
    top: calc(50% - 15px);
    text-align: center;
    font-size: 50px;
    line-height: 30px;
    color: #2a2a2a;
}
/*Changement de couleur en cas de nouveau message*/
 .topic.nouveau .topic-img::before {
    border-color: #e9c343;
}
 .topic.nouveau.verrouille .topic-img::before {
    color: #e9c343;
}
 .topic-left {
    flex: 1;
}
/*Titre de topic*/
 .topic-titre {
    display: flex;
}
 .topic-titre img {
    align-self: center;
    margin-right: 10px;
}
 .topic-titre h2 {
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    margin: 0;
}
 .topic-titre a {
    color: #3e3e3e
    transition: all 0.3s;
}
 .topic-titre a:hover {
    color: #aaa;
}
 .topic-titre strong {
    margin-right: 3px;
    color: #3e3e3e;
}
/*Auteur du topic*/
 .topic-auteur {
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    font-size: 8px;
    display: flex;
    color: #848484;
}
 .topic-auteur br, .topic-auteur > div img {
    display: none;
}
 .topic-auteur > div {
    align-self: center;
    font-family: "Roboto", sans-serif;
    font-size: 7px;
    margin-left: 10px;
}
 .topic-auteur > div a, .topic.nouveau .topic-last > div > a::before {
    color: #e9c343;
    margin-left: 2px;
    transition: all 0.3s;
}
 .topic-auteur > div a:hover, .topic-last > div > a:hover::before {
    color: #8a7d4f;
}
/*Description de topic*/
 .topic-desc {
    font-size: 9px;
    text-align: justify;
    padding-right: 10px;
}
/*Statistiques*/
 .topic-stats {
    width: 120px;
    text-align: center;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #CCE8FF;
    background: #CCE8FF;
    border-right: 1px solid #151515;
    border-left: 1px solid #151515;
}
 .topic-stats > div:first-child {
    position: relative;
    margin-bottom: 8px;
}
 .topic-stats > div:first-child::after {
    position: absolute;
    content:"";
    width: 70px;
    height: 1px;
    background: #2d2d2d;
    bottom: -4px;
    left: calc(50% - 35px);
}
/*Dernier message*/
 .topic-last {
    width: 200px;
    font-size: 10px;
    padding: 0 10px;
}
 .topic-last > div > a::before {
    content: "►";
    margin-left: 0;
    color: #666;
}
 .topic-last > div > a img {
    display: none;
}
Naru12021

Naru12021
*

Féminin
Messages : 35
Inscrit(e) le : 03/04/2010

http://x0--d-gray-man--0x.forumdefan.com/index.htm
Naru12021 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'alignement de texte par rapport au thème et la taille du forum

Message par Naru12021 Lun 26 Avr 2021 - 17:06

Et les différentes templates que j'ai modifier.

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>&nbsp;</td>
                        <td><input class="post" type="text" size="10" name="username"/>&nbsp;</td>
                        <td>
                            <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                            <span class="gensmall">{L_AUTO_LOGIN}</span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td><span class="genmed">{L_PASSWORD}:</span>&nbsp;</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_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 -->
                    <!-- BEGIN topicit_connect -->
                    <div class="ti-connect"></div>
                    <!-- END topicit_connect -->
                </div>
            </td>
            <!-- END switch_social_login -->

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

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td width="50%" valign="top">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
 <!-- END switch_user_logged_in -->
 <!-- BEGIN switch_delete_cookies -->
 <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
 <!-- END switch_delete_cookies -->
 </td>
 </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<div class="cnxl-bloc">
    <form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <!-- Bloc gauche - INSCRIPTION-->
       <a class="cnxl-inscription" href="/register" title="S'inscrire !">
           <img src="https://2img.net/image.noelshack.com/fichiers/2016/09/1457207134-decoration.png" alt="Rejoindre le forum" />
       </a>

         <!-- Bloc milieu - LES CHAMPS A REMPLIR-->
        <div class="cnxl-input-bloc">
            <input type="text" name="username" placeholder="Pseudo" />
            <input type="password" name="password" placeholder="Mot de passe" />
        </div>

         <!-- Bloc droit - BOUTON CONNEXION-->
         <div class="cnxl-submit-bloc">
            <input type="submit" name="login" value="Connexion" />
        </div>

        <!-- En bas-->
        <div>
            <input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
            <label for="autologin">Connexion automatique</label>
        </div>
    </form>
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA --><!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400|Montserrat:900|Roboto" rel="stylesheet">
<div id="qeel">
  <div id="qeel-titre"><h2>Qui est en ligne ?</h2></div>
  <div id="qeel-connectes24"><table>{L_CONNECTED_MEMBERS}</table></div>
  <div id="qeel-mid">
  <div id="qeel-dernier"><h3>Bienvenue sur le forum d'Hetalia World</h3><div>{NEWEST_USER}</div></div>
  <div id="qeel-groupes">
    <div><a href="">Administratrices</a></div>
    <div><a href="">Membre du staff</a></div>
    <div><a href="">Hetaliens</a></div>
  </div>
  </div>
  <div id="qeel-right">
  <div id="qeel-stats">{TOTAL_USERS_ONLINE}</div>
  <div id="qeel-connectes">{LOGGED_IN_USER_LIST}</div>
  <div id="qeel-stats2"><div>{TOTAL_POSTS}</div><div>{TOTAL_USERS}</div></div>
  
    <div id="qeel-credits">Crédits : xxx - codage by <a href="http://terrible.forumactif.org/" target="_blank">awful</a></div>
  </div>
</div>
<div id="index-links">
  <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
 <a href="/?mode=delete_cookies" rel="nofollow">Supprimer les cookies du forum</a>
</div>
<script type="text/javascript">
  $('#qeel-stats2').html($('#qeel-stats2').html().replace(/Nos membres ont posté un total de|Nous avons /ig," ").replace(/membre enregistré/,"membre").replace(/membres enregistrés/,"membres"));
  $('#qeel-dernier').html($('#qeel-dernier').html().replace(/L'utilisateur enregistré le plus récent est/ig," "));
  $('#qeel-connectes').html($('#qeel-connectes').html().replace(/Utilisateurs enregistrés : /ig," "));
  $('#qeel-connectes24').html($('#qeel-connectes24').html().replace(/Membres connectés au cours des 24 dernières heures : /ig," "));
  $('#qeel-stats').html($('#qeel-stats').html().replace(/Il y a en tout| :: /ig," ").replace(/utilisateur en ligne/,"<i>utilisateur en ligne</i> <u>>></u>").replace(/utilisateurs en ligne/,"<i>utilisateurs en ligne</i> <u>>></u>").replace(/Enregistré,/,"<i>Enregistré</i> <u>|</u>").replace(/Enregistrés,/,"<i>Enregistrés</i> <u>|</u>").replace(/Invisible et/,"<i>Invisible</i> <u>|</u>").replace(/Invisibles et /,"<i>Invisibles</i> <u>|</u>").replace(/Invité/,"<i>Invité</i>").replace(/Invités/,"<i>Invités</i>"));
</script>
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />

{AUTO_DST}

index-box

Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
  <tr>
    <td valign="bottom">
      <!-- BEGIN switch_user_logged_in -->
      <span class="gensmall">{LAST_VISIT_DATE}<br />
      {CURRENT_TIME}<br />
      </span>
      <!-- END switch_user_logged_in -->
      <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
    </td>
    <td class="gensmall" align="right" valign="bottom">
      <!-- BEGIN switch_user_logged_in -->
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
      <!-- END switch_user_logged_in -->
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
    </td>
  </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->

  <!-- END cathead -->
  <!-- BEGIN forumrow -->
<div class="wrap-forum">
    <div class="img-forum">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
    </div>
    <div class="forum-titre">
        <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
    <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
    <div class="stats-forum">
        <div>{catrow.forumrow.TOPICS} topics</div>
        <div>
            {catrow.forumrow.POSTS} posts</div>
    </div>
    <div class="avatar-forum">
        <!-- BEGIN avatar -->
        {catrow.forumrow.avatar.LAST_POST_AVATAR}
        <!-- END avatar -->
    </div>
    <div class="last-forum">
        {catrow.forumrow.LAST_POST}
  </div>
</div>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->

  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
<!-- END tablefoot --><!-- END catrow -->
<script>

  $('img[title="Nouveaux messages"]').closest('.img-forum').addClass('new');
  $('.wrap-forum').each(function(){
    var noavatar = $(this);
     var avatar = $(this).find('.avatar-forum');
    if( avatar.html() == ""){    
      $(noavatar).addClass("no-avatar");
  }
    });
$('.sous-forum').each(function(){
  
  var awful = $(this).find('a').length;
  
  if( awful > 4){    
    $('a', this).eq(3).nextAll().hide().addClass('toggleable');
    $(this).append('<div class="more">+</div>');    
  }
  
});
      $('.sous-forum').on('click','.more', function(){
  
  if( $(this).hasClass('less') ){    
    $(this).text('+').removeClass('less');    
  }else{
    $(this).text('-').addClass('less');
  }
  
  $(this).siblings('a.toggleable').toggle();
    
});
</script>

overall-header

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
  xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<link href='http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto' rel='stylesheet' type='text/css' />
<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:900|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:400,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">  
 <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
 <meta http-equiv="content-script-type" content="text/javascript"/>
 <meta http-equiv="content-style-type" content="text/css"/>
 <!-- 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}"/>
 {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 async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
 <script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- BEGIN google_analytics_code_bis -->
 gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- END google_analytics_code_bis -->
 </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 inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
 <table class="forumline" style="padding: 0px; width: 480px;" border="0" cellspacing="1"
   cellpadding="0">
 <tr height="25">
 <td class="catLeft">
 <span class="genmed module-title">{inactive_users_modal.L_MODAL_TITLE}</span>
 </td>
 </tr>
 <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
 <td class="row1" align="left" valign="top">
 <span class="genmed">{inactive_users_modal.L_MODAL_BODY}</span>
 <div id="inactive_popup_buttons">
 <input type="button" id="inactive_popup_url" class="mainoption"  value="{inactive_users_modal.L_MODAL_BUTTON}">
 <input type="button" id="inactive_popup_close" class="button" value="{inactive_users_modal.L_CLOSE}">
 </div>
 </td>
 </tr>
 </table>
</div>
<script type="text/javascript">
 $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
 document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
 $('#inactive_popup').hide(50);
 });
 $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
 document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
 location.href = '{inactive_users_modal.U_MODAL}'
 })
</script>
<!-- END inactive_users_modal -->

<!-- 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>
 <!-- BEGIN switch_quick_login -->
 <tr>
 <td class="row1" align="left" valign="top">
 <div class="social_btn">
 <!-- BEGIN fb_quick_connect -->
 <div class="fb-login-button"></div>
 <!-- END fb_quick_connect -->
 &nbsp;
 <!-- BEGIN topicit_quick_connect -->
 <div class="ti-connect"></div>
 <!-- END topicit_quick_connect -->
 </div>
 </td>
 </tr>
 <!-- END switch_quick_login -->
 </table>
</div>
<!-- END switch_login_popup -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
 <table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_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="{LIKE_POPUP_MSG_HEIGHT}">
 <td class="row1" align="left" valign="top">
 <div id="like_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="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
 </form>
 </div>
 <span class="genmed">{LIKE_POPUP_MSG}</span>
 </td>
 </tr>
 </table>
</div>
<!-- END switch_like_popup -->

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

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="0" 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 loading="lazy" 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 loading="lazy" 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/>
 <span class="gen">{SITE_DESCRIPTION}<br/>&nbsp; </span>
 </td>
 <!-- BEGIN switch_logo_right -->
 <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
 </td>
 <!-- END switch_logo_right -->
 </tr>
 </table>

 <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>

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

topic-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 -->
<div class="topic-wrap">
<table class="topic-wrap-table" width="100%" border="0" cellspacing="0" cellpadding="0">

  <!-- BEGIN pagination -->
  <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END pagination -->
  <!-- END header_table --><!-- BEGIN header_row -->
  <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall"> <b>{topics_list_box.row.L_TITLE}</b></span></td>
  </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <tr>
          <td colspan="7">
          <div class="topic">
            <div class="topic-img">
            <img 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>
            <div class="topic-left">

            <div class="topic-titre">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2>
              <a href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
        </div>
              <div class="topic-auteur">{topics_list_box.row.TOPIC_AUTHOR}<div>{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></div></div>
            <!-- BEGIN switch_description -->
        <div class="topic-desc">
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </div>
        <!-- END switch_description -->
            </div>
            <div class="topic-stats"><div>{topics_list_box.row.REPLIES} réponses</div><div>{topics_list_box.row.VIEWS} vues</div></div>
            <div class="topic-last">{topics_list_box.row.LAST_POST_TIME}<div>{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</div></div>
          </div>
          </td>
  </tr>
  <!-- END topic --><!-- BEGIN no_topics -->
  <tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
  </tr>
  <!-- END no_topics --><!-- BEGIN bottom -->
  <tr>
      <td colspan="{topics_list_box.row.COLSPAN}" valign="middle">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td> <span class="gensmall">{PAGINATION}</span></td>
              <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
        </table>
      </td>
  </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
  </table></div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->
  <script>
    $(document).ready(function(){
    $('.topic').each(function(){
    $('.topic-img img[title="Nouveaux messages"]').closest('.topic').addClass('nouveau');
    $('.topic-img img[title="Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses."]').closest('.topic').addClass('verrouille');
    });

    $('.topic-wrap').find('th').closest('.topic-wrap-table').addClass('topic-note');
    });
  </script>

J'ai aussi modifier memberlist_body, viewforum_body & viewtopic_body mais je ne suis pas sur que le soucis soit là dedans...

Désolé de vous passez autant de pavé de code comme ça @_@
Naru12021

Naru12021
*

Féminin
Messages : 35
Inscrit(e) le : 03/04/2010

http://x0--d-gray-man--0x.forumdefan.com/index.htm
Naru12021 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème d'alignement de texte par rapport au thème et la taille du forum

Message par MlleAlys Lun 26 Avr 2021 - 17:14

Essayez ça :
- localisez le code suivant :
Code:
.wrap-forum {
  width: 900px;
  height: 110px;
  background-color: #CCE8FF;
  position: relative;
  font-family: 'Roboto', sans-serif;
  margin: 0 auto 10px;
}
- Supprimez la ligne : width: 900px;
- enregistrez

La largeur des catégories étant limitée, ça a l'air d'être ça qui fait que ça n'atteint pas le bord. En supprimant cette largeur, le bloc reprend automatiquement la largeur disponible jusqu'au bord.
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: Problème d'alignement de texte par rapport au thème et la taille du forum

Message par Naru12021 Lun 26 Avr 2021 - 17:25

C'est ça ! Merci ! Oh lala... une journée le nez dans le code et tout est résolu pour une simple petite ligne de trop x'D

Encore merci pour votre aide !
Naru12021

Naru12021
*

Féminin
Messages : 35
Inscrit(e) le : 03/04/2010

http://x0--d-gray-man--0x.forumdefan.com/index.htm
Naru12021 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