Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[MODERNBB] Décalage partie "derniers messages" catégories


2 participants

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

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 7 Avr 2021 - 10:33

  • Version du forum :
    MODERNBB
  • Templates modifiés :
    oui
  • Navigateur :
    Firefox
Bonjour Phil,

On m'a demandé de l'aide pour recoder un forum de graphisme.
Pour le moment je n'ai pas trop galéré mais là je suis face à un souci que je ne parviens pas à résoudre par moi-même.
J'ai codé les catégories et jusque-là il n'y avait pas de souci mais avant-hier, l'une des admins m'a fait remarquer un décalage entre la parte "lastpost" sur l'index et sa version à l'intérieur du forum.

Voici des captures écran pour que ce soit plus parlant :

[MODERNBB] Décalage partie "derniers messages" catégories YOKCnYB  [MODERNBB] Décalage partie "derniers messages" catégories DSWT3xC

Le forum test utilisé est celui-ci : https://worldofpizi.forumactif.com

Voici le CSS :

Code:
/*         CODAGE
        By AD
                    */
/****************************************
    CONFIGURATION GÉNÉRALE
*****************************************/
body, html {
color: #734a43;/*Couleur de la police*/
font-family: 'Montserrat', sans-serif !important;
font-size: 10px;
background: #c6a598 !important; /*Couleur de fond du body*/
position: relative;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.forabg
{
  width: 750px !important;    /* Taille de ton background, on fixe celle-ci */
  margin: auto;    /* Centre horizontalement l'élément pour éviter des décalages indésirables */
  margin-bottom: 50px;
}
 
  ul.topiclist .forabg {
    width: 100% !important;
  }
 
.topicpost
{
  font-size: 8px;
}
.lastpost-avatar
  {
  position: relative;
  left: 20px;
  }
}
#logo
{
  width: 100%;
  position: relative;
  top: -55px;
}
/* Multi-résolutions */
@media screen and (max-width : 1700px)
{
#logo img
{
  width: inherit;
}
}
#wrap
{
  background-color: #D4B9AF;
  width: 948px;
}

.topiclist li, .topicsforabg
{
  background-color: #BFA49F;
}
a
{
  color: #8d434a;
  text-shadow: 0px 1px #d7cab8;
  text-decoration: none !important;
  transition: all 1s ease;
 /* text-shadow: 0px 1px #ffffff4d; */
}


a:hover, fieldset dl:hover dt label  {
    color: #8d434a !important;
    text-shadow: 0px 1px #8d434a;
    cursor: pointer;
}
/*Flèches haut-bas*/
.fleches {
    bottom: 5px;
    position: fixed;
    right: 16px;
    width: 90px;
    height: 144px;
}
.haut {
    background-image: url(https://nsa40.casimages.com/img/2021/02/25/210225014721338983.png);
    display: block;
    height: 75px;
    width: 90px;
    position: absolute;
    z-index: 999;
    right: 0px;
}
.bas {
    background-image: url(https://nsa40.casimages.com/img/2021/02/25/210225014716545296.png);
    display: block;
    height: 75px;
    width: 90px;
    position: absolute;
    top: 75px;
}
/*Cacher les flèches sur petit écran et mobile*/
@media screen and (max-width: 1280px) {
    .fleches {
        display:none;
    }
}    
@media handheld  {
    .fleches  {
        display:none;
    }
}
/*******************************************
        SCROLLBAR
********************************************/

.mCSB_container{ margin-right: 18px!important; }/*Ne pas supprimer*/
 
.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #727782;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #000000;
}
.mCSB_scrollTools .mCSB_container:hover >.mCSB_dragger .mCSB_dragger_bar
.mCSB_scrollTools .mCSB_dragger:active, .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
         background: #53503c;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
         background: #000000;
    }

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #d4c7c1;
}

::-webkit-scrollbar-track {
    background-color: #ac988b;
}

/*Ne pas supprimer*/.mCustomScrollBox {
    position: relative;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}
/*Ne pas supprimer*/.mCSB_container {
    width: auto;
    height: auto;
}
/********************************************
        TOOLBAR
*********************************************/
#fa_toolbar
{
  background: transparent !important;
  position: fixed;
}
#fa_share, #fa_search
{
  display: none !important;
}
#fa_service, #fa_icon
{
  opacity: 0 !important;
}
#fa_usermenu img
{
  border-radius: 130px;
  box-shadow: 1px 1px 12px #555;
  width: 96px;
  border: 1px solid #d0d0d0;
}
#fa_usermenu, #fa_menulist
{
  background-color : #D4B9AF;
}
#fa_menulist :link
{
  color: #843845 !important;
}
#notif_list li.see_all
{
  background-color: #D4B9AF !important;
  text-transform: uppercase;
}
#notif_list a

  color: #843845 !important;
}
#notif_list li .contentText
{
  font-weight: normal;
}
/*******************************************
        NAVIGATION
********************************************/
.navbar
{
  background: #d3cabe;
  width: 948px;
  padding: 10px;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;

}
.navbar a
{
  color: #843845 !important;
  display: inline-block;
  padding: 0px;
  background: transparent !important;
}

.navbar a:hover {
    background: transparent !important;
    color: #8d434a !important;
    box-shadow: none !important;
    text-shadow: 0px 1px #8d434a80;
}
.navbar li
{
  display: initial;
}
ul.navbar img
{
  display: none;
}
/*******************************************
           BARRE D'ANNONCE
********************************************/

#fa_ticker_block .module {
    background-color: rgba(0,0,0,0.05);
    box-shadow: inset 0px 0px 8px #a8805842;
    padding: 5px 0 9px;
    height: 100px;
    border-radius: 50px;
    padding-top: 10px;
}
/********************************************
        PAGE D'ACCUEIL
*********************************************/
.panel
{
  width: auto;
  height: auto;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/********************************************
        DISCORD
*********************************************/
.discord {
  margin-top: 10px;
}
.didi {
  width: 350px;
  height: 74px;
  position: relative;
  top: 74px;
  margin-top: -70px;
  background: #87a279;
  opacity: 0.75;
  border-radius: 4px 4px 0px 0px;
}
/********************************************
    LIENS VOIR LES MESSAGES
*********************************************/
.linklist.top {
  width: 645px;
  border-width: 1px 0 1px;
  padding: 2px;
  margin-top: 23px;
  margin-left: 109px;
}
/********************************************
        CATÉGORIES
*********************************************/
.forabg
{
  box-shadow: none;
  width: 750px;
  overflow: hidden;
}
ul.forums li.row dl {
    height: 140px;
}
dl.icon {
    height: 73px;
    min-height: 35px;
    overflow: hidden;
}
.table-title img
{
  height: 200px;
  margin-bottom: -17px;
}
a.forumtitle, a.forumtitle:link, a.forumtitle:visited {
    position: relative;
    left: 20%;
    color: #d7d1be !important;
    text-shadow: 2px 2px 1px #974e4aa1;
    text-align: center;
    font-size: 22px;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: 'Fraunces', serif;
}
a.forumtitle:hover {
    color: #974e4a !important;
    text-shadow: 2px 2px 1px #d7d1be;
    transition: 1.5s all;
    cursor: pointer;
}
.desc
{
  width: 446px;
  height: 53px;
  overflow: auto;
  text-align: justify;
  color: #364440;
  margin-top: 5px;
  margin-bottom: 10px;
}
.desc b, .desc strong {
    color: #915f35 !important;
    text-shadow: 1px 1px #d7cab8;
    text-transform: uppercase;
    font-family: 'Kreon', serif;
    letter-spacing: 1px;
}
.subfo {
    width: 442px !important;
    height: 21px;
    background: #d7d4cb;
    box-shadow: inset 0px 0px 8px #d6a996;
    border-radius: 10px;
    overflow: auto;
    z-index: 999;
}
.subfo a::before {
    content: " ⬪ ";
    font-size: 10px
}
.subfo a
{
  color: #a2513f !important;
  font-size: 11px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0px #d6d3d0;
}
.lastpost
{
  position: relative;
  left: 150px;
}
.lastpost-avatar img
{
  position: absolute;
  top: -2px;
  left: -2px;
  border-radius: 0 !important;
  width:40px;
  height: 64px;
}
.lastpost-avatar
{
  top: 25px;
  width: 40px;
  height: 64px;
  border: 2px solid #a25349;
  border-radius: 10px;
  overflow: hidden;
}
.lastpostxt
{
  width: 150px;
  height: 55px;
  display: block;
  position: absolute;
  top: 30px;
  left: 440px;
  border-left: double #d7cab8;
  padding-left: 10px;
  text-align: left;
  font-size: 12px;
}
.lastpostxt a
{
  font-weight: bold !important;
}

.topicpost {
    position: absolute;
    top: 95px;
    left: 547px;
    width: 174px;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Kreon', serif;
    color: #915f35 !important;
    border-top: 1px #d7cab885 solid;
    border-bottom: 1px #d7cab885 solid;
    z-index: 1;
}
/********************************************
        QUI EST EN LIGNE
*********************************************/
.block {
    background-color: transparent !important;
    margin-bottom: 24px;
    overflow: hidden;
    padding: 18px;
    box-shadow: none;
}
.qeel {
    background: url(https://nsa40.casimages.com/img/2021/02/25/21022502135262810.png);
    background-repeat: no-repeat;
    display: block;
    position: relative;
    background-position: center !important;
    height: 500px;
    margin-bottom: 15px;
    overflow: hidden;
}
statistiques {
    display: block;
    position: absolute;
    height: 123px;
    width: 181px;
    overflow: auto;
    bottom: 63px;
    left: 247px;
    color: #554536;
    word-break: break-word;
    text-align: justify;
}
anniversaires {
    display: block;
    position: absolute;
    bottom: 65px;
    right: 219px;
    width: 165px;
    text-align: justify;
    height: 128px;
    overflow: auto;
    color: #554536;
    word-break: break-word;
}
/* Système d'onglet du QEEL */
.tableonglets span.ongletcont {display: none;}
.tableonglets input {display: none;}
.tableonglets input:checked + span.ongletcont {display: block;}
.tableonglets span.ongletcont {
    top: 68px;
    width: 333px;
    position: relative;
    height: 136px;
    overflow: auto;
    color: #352d2d;
    padding-left: 18px;
    padding-right: 18px;
    right: -268px;
}
.tableonglets label.ongletenligne {
    top: 233px;
    width: 130px;
    display: inline-block;
    position: relative;
    right: -296px;
    text-align: center;
    color: #ff000000 !important;
    cursor: pointer;
}
.tableonglets label.onglet24h {
    width: 58px;
    top: 233px;
    display: inline-block;
    position: relative;
    right: -312px;
    text-align: center;
    cursor: pointer;
    color: #0066ff00 !important;
}
/* Groupes */
.block-footer {
    background-color: #bb9f9a;
    position: relative;
    top: -18px;
    width: 700px;
    right: -88px;
    border-radius: 0 0 3px 3px;
    margin: 18px -18px -18px;
    padding: 12px 18px;
}
/********************************************
        FIN DU BAS DE PAGE
*********************************************/
.statistics {
    background-color: #bfa49f45;
    color: #824e6e;
    font-size: 12px;
    padding: 5px 0;
    height: 55px;
}
#picture_legend,  #privmsgs-menu {
    background: transparent !important;
    color: #734a43;
    font-size: 1.3rem;
    margin-bottom: 24px;
    overflow: hidden;
    padding: 0 9px 18px;
    text-align: center;
    border-top: 1px #d7cab8 solid;
    border-bottom: 1px #d7cab8 solid;
    box-shadow: none !important;
    border-right: none !important;
    border-left: none !important;
}
#page-footer {
    background-color: transparent !important;
}
.version {
    padding-bottom: 15px;
    color: #824e6e !important;
}
/* Lien bas forum */
.copyright a {
    color: #7b567b;
    text-shadow: 1px 0px #8d434a;
}
/********************************************
        LISTE DES SUJETS
*********************************************/
.sub-header-info img
{display: none;
}
.nav h2 {
  font-size: 13px;
  display: contents;
}
.forumbg
{
  box-shadow: none !important;
}
listesujets {
    background: url(https://nsa40.casimages.com/img/2021/02/25/210225022042575305.png);
    display: block;
    width: 750px;
    height: 200px;
}
h1.page-title {
    font-size: 3rem;
    font-weight: 500;
    margin: 0;
    word-break: break-word;
    font-family: 'Fraunces', serif;
}
ul.topiclist {
    margin: 0;
    width: 750px;
}

/* ul.topics .row dd.dterm, ul.topics .row dt {
  text-align: left;
} */

ul.topics .row dd.dterm, ul.topics .row dt {
    text-align: left;
    height: 75px;
}

.topic-description {
    width: 430px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 1px;
    color: #d9d6cb !important;
    font-style: italic;
}

.topic-title-container::after {
    content: " ";
    display: block;
    position: relative;
    width: 393px;
    height: 1px;
    border: 1px solid;
    color: #d4b9af;
}

.topic-title-container > strong {
    margin-right: 0px;
    padding: 0 !important;
    border: none;
    font-size: 11px;
}

.viewsreplies {
    top: 14px;
    display: inline-block;
    color: #9c414e;
    position: relative;
    width: 195px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* z-index: 2; */
    text-shadow: 1px 1px 0px #d6d3d0;
    box-shadow: inset 0px 0px 8px #a8805869;
    background: #d9d3c6a6;
    right: -68px;
    margin-top: -8px;
    margin-bottom: -9px;
    border-radius: 5px;
}
.topics .row .lastpost {
    left: 54px;
    padding: 9px 18px!important;
    position: relative;
    top: -4px;
    text-align: initial;
    width: 220px;
    height: 50px;
    right: 15px;
}
.row .pagination span a:active, .row .pagination span a:link, .row .pagination span a:visited {
  background-color: #a87939;
  color: #d4b9af;
}
.table-title, .table-title h2 {
    color: transparent;
    text-shadow: none;
}
.topics .lastpost-avatar {
    padding: 1px 18px 1px 0;
    position: relative;
    top: 22px;
    left: 94px;
    width: 35px;
    height: 35px;
    border-radius: 50px;
}
.topics .lastpost-avatar img {
  position: absolute;
  top: -15px;
  left: -13px;
  width: 50px;
  height: 70px;
  border-radius: 0 !important;
}
.topics .row .lastpost {
    left: 54px;
    padding: 9px 18px!important;
    position: relative;
    top: -4px;
}
infopost {
    position: absolute;
    display: inline-block;
    right: -75px;
    border-left: double #ae5969;
    top: 30px;
    width: 139px;
    padding-left: 10px;
    height: 40px;
    overflow: overlay;
    font-size: 12px;
}
/****************************************
        SUJET
*****************************************/
/* APPARENCE DES SUJETS */
.row2, .row1 {
    background-color: transparent;
    box-shadow: none !important;
    border: none !important;
}
.postbody {
    width: 658px;
    color: #734a43;
    background: #c7aa9e;
    float: none;
    font-size: 1.2rem;
    margin-right: 211px;
    padding: 12px 18px 18px;
    word-break: break-word;
    text-align: justify;
}
.post-head, .module .h3 {
    background-color: rgba(0,0,0,0.03);
    border-color: #bb9277;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 1px;
    padding: 18px;
}
.topic-title a {
  font-size: 18px;
  font-family: 'Fraunces', serif;
  margin-bottom: 3px;
}
/* BOUTON DES SUJETS */
.button, .button2, input[type="submit"] {
    background-color: #d3cabe !important;
    border-radius: 3px;
    box-shadow: 0 1px 3px #0000001f !important;
    color: #a24366 !important;
    display: inline-block;
    font-family: Montserrat, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    overflow: hidden;
    padding: 9px 18px;
    position: relative;
    text-decoration: none;
    vertical-align: middle;
    width: auto!important;
}
.button2:hover, .button:hover, input[type="submit"]:hover {
    background-color: #8d434a!important;
    color: #d3cabe !important;
    box-shadow: 0 1px 9px rgb(0 0 0 / 60%);
    transition: 1s all;
}
input[type="submit"] + .button1 /* Bouton envoyer dans prévisualisation, mettre pareil que button ect*/ {
    background-color: #d3cabe !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px #0000001f !important;
    color: #a24366 !important;
    display: inline-block;
    font-family: Montserrat, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
}
input[type="submit"] + .button1:hover {
    background-color: #8d434a !important;
    color: #d3cabe !important;
    box-shadow: 0 1px 9px rgb(0 0 0 / 60%) !important;
    transition: 1s all;
}
.button1[class^="ion-"]:before, .button2[class^="ion-"]:before, .button[class^="ion-"]:before, input[type="submit"][class^="ion-"]:before { /* pour retirer icon éditer nouveau message etc */
  content:" "!important;
}
.pagination span a:active, .pagination span a:link, .pagination span a:visited {
    background-color: #d3cabe;
    border-radius: 3px;
    box-shadow: 0 1px 3px #0000001f;
    color: #a24366;
    display: inline-block;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 30px;
    margin: 0 6px 0 0;
    padding: 0;
    width: 36px;
}
.pagination span a.pag-img /* Hauteur de la flèche à gauche des num pages*/ {
    background-color: transparent;
    border: none;
    vertical-align: top;
    height: 29px;
}
.button1, .button1:hover, .button1:active, .button1:link {background: transparent !important; box-shadow: none !important; border: none !important;}
/* CITATION, CODE */
blockquote cite a {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
}
blockquote {
    background-color: #DDCBC5;
    border-color: rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 0;
    border-style: solid;
    border-width: 0 0 0 6px;
    font-size: 1.2rem;
    margin: 0 9px;
    overflow: hidden;
    padding: 0px 18px 18px 18px;
    position: relative;
}

blockquote:before {
  content: none;
}

blockquote cite {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    border-bottom: 1px solid #c7aa9e;
    padding-top: 18px;
}
dl.codebox code {
    display: block;
    font-size: 12px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    height: auto;
    /* line-height: 1.3em; */
    margin: 2px 0;
    max-height: 250px;
    overflow: auto;
    padding-top: 5px;
    white-space: normal;
}

dl.codebox:before {
  content: none;
}

.selectCode {
    position: relative;
    float: right;
    text-transform: uppercase;
}

/* image du bouton mentionner */
.sceditor-button-mention div { background-image:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
    
/* menu déroulant du bouton mentionner */
#fa-mention {
  background:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
      padding-left:22px;
}

/****************************************
      PROFIL DANS SUJET
*****************************************/
.postprofile {
    background: url(https://nsa40.casimages.com/img/2021/03/13/210313115121602609.png);
    background-repeat: no-repeat;
    display: block;
    float: right;
    padding: 18px;
    right: -2px;
    top: -1px;
    position: relative;
    height: 720px;
    width: 220px;
    word-wrap: break-word;
}
.postprofile-name {
    position: relative;
    width: 188px;
    display: inline-block;
    font-size: 20px;
    top: -321px;
    font-family: 'Fraunces', serif;
}

.postprofile-avatar {
    margin-bottom: 6px;
    text-align: center;
    position: relative;
    top: 42px;
    left: -8px;
}
.postprofile-avatar img {
    border: 1px solid #FFF;
    border-radius: 0px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%);
    height: 320px;
    width: 200px;
}

.postprofile-rank::before {
    content: "mon rang";
    font-size: 30px;
    color: #8d434a;
    font-family: 'Great Vibes', cursive;
    text-shadow: 1px 1px 0px #ffffff9c;
    text-transform: lowercase;
}

.postprofile-rank {
    display: grid;
    position: relative;
    text-transform: uppercase;
    top: 22px;
    padding: 7px;
    font-family: 'Fraunces', serif;
    font-size: 20px !important;
    text-shadow: 1px 1px 1px #f7f1ea;
    line-height: 0.5;
    letter-spacing: -1px;
}
 
.postprofile-info {
    font-size: 11px;
    line-height: 1.3333;
    position: relative;
    text-align: justify;
    overflow: auto;
    top: 30px;
    height: 108px;
    width: 182px;
    display: block;
    padding: 10px;
}
dd.postprofile-contact {
    display: inline-block;
    position: relative;
    top: 20px;
    left: 20px;
    height: auto;
    width: auto;
}

.postprofile-contact img {
    border-radius: 20px;
    height: auto;
    margin: 10px;
}

.postprofile-contact a {
    display: block;
    float: left;
    margin-right: 9px;
    margin-top: 9px;
}
.contact {
    top: 15px;
    left: -5px;
    position: relative;
}
.contact:hover {
  cursor: pointer;
}
.contact img {
 width: auto;
 height: auto;
}
.profile-icons a.selected, .profile-icons a:hover, .profile-icons span.selected, .profile-icons span:hover, .btn-delete a:hover, .btn-ip a:hover {
  background-color: transparent;
  box-shadow: none;
}
.enligne {
    background: url(https://nsa40.casimages.com/img/2021/02/25/210225014716816407.png);
    position: absolute;
    height: 200px;
    width: 40px;
    top: 13px;
    right: -29px;
}
.signature_div {
    background: #bfa49f !important;
    width: 658px;
    position: relative;
    left: -18px;
    top: 18px;
    padding-bottom: 30px;
    border-top-style: double;
    border-top-color: #DDCBC5;
  }
/****************************************
    MESSAGES PREDEFINIS
*****************************************/

.postadmin {
    border-radius: 4px;
    display: block;
    margin: auto;
    padding: 15px;
    text-align: justify;
    width: 90%;
    background: #d6b49c;
    box-shadow: inset 0px 0px 5px #523f5442;
}
.postimportant {
    height: auto;
    overflow: auto;
    display: block;
    margin: auto;
    padding: 15px;
    text-align: justify;
    width: 80%;
    border-radius: 3px;
    background: #decabd66;
    box-shadow: 1px 1px 7px #a5918eb8;
}
.messagepredefini {
    background: #c1a49c;
    border-radius: 25px;
    display: block;
    height: auto;
    margin: 10px;
    padding-bottom: 20px;
    width: 92%;
    text-align: center;
    box-shadow: 1px 1px 0px 1px #fbfbfb1f;
}
.texte1 {
    background-color: #d3c3be;
    height: auto;
    margin: 11px 25px;
    padding: 20px;
    text-align: justify;
    color: #935e42;
    box-shadow: inset 0px 0px 8px #1c1c1c24;
}
.titre1 {
    color: #8d434a;
    font-family: 'Fraunces', serif;
    font-size: 24px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 2px;
    text-shadow: 1px 1px 0px #d7cab8;
    width: auto;
    line-height: 19px;
    padding-top: 10px;
    margin-bottom: -18px;
}
/*.titre2 {
    font-size: 18px;
    width: 100%;
    overflow-y: auto;
    text-transform: uppercase;
    font-family: times new roman, serif;
    height: 23px;
    padding: 0px 20px;
    display: inline-table;
    color: #90708e !important;
    background: #d8b8a7;
    text-shadow: 2px 1px 0px #d6a99682;
    box-shadow: inset 0px 0px 8px #b09ab047;
    border-radius: 12px;
    letter-spacing: 2px;
    margin: 10px 0px;
}*/

.titre2 { /*autre essai*/
  font-size: 30px;
    width: 100%;
    overflow-y: auto;
    font-family: 'Great Vibes', cursive;
    height: 20px;
    display: inline-table;
    color: #8e6682 !important;
    border-radius: 12px;
    letter-spacing: 2px;
    margin: 10px 0px;
    text-shadow: 1px 1px 0px #ffffff6e;
}

.titre3 /* Mettre comme titre1 sans margin-bottom et varier taille si besoin*/ {
    color: #8d434a;
    font-family: 'Fraunces', serif;
    font-size: 22px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 2px;
    text-shadow: 1px 1px 0px #d7cab8;
    width: auto;
    line-height: 19px;
    padding-top: 10px;
}
h {
    background-color: #d3cabe;
    color: #a47051;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 7px;
    padding: 1px 15px;
    font-family: times new roman, times, serif;
    border-radius: 10px;
    box-shadow: inset 0px 0px 8px #a8805842;
    text-shadow: 1px 1px 0px #d6d3d0;
    text-transform: lowercase;
    font-style: italic;
}
em, i {
  text-shadow: 1px 1px 0px #e6e6e691;
      font-size: 11.5px;
      letter-spacing: 1px;
      color: #b2615f;
}
.profile-icons i {
  color: #b2615f !important;
}
.profile-icons a, .profile-icons span {
 background-color: transparent !important;
 box-shadow: none !important;
 border: none !important;
 cursor: pointer;
}

.content h2, .panel h2 {
    font-family: times new roman, serif;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: lowercase;
    font-style: italic;
    padding-left: 5px;
    color: #523f54;
}

.content h2::before, .panel h2::before {
    content: "➻ ";
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-bottom: none;
}

.postbody h3, .postbody .h3 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #5e3521;
    font-family: trebuchet MS, sans-serif;
    border-bottom: none;
    text-shadow: 1px 1px 0px #d3cabe;
}
.postbody h3::before {
    content: "❝ ";
    font-size: 15px;
}

.postbody h3::after {
    content: " ❞";
    font-size: 15px;
}

/****************************************
    FORMULAIRE DE PRÉSENTATION
*****************************************/
.prez {position: relative;
padding-bottom: 170px
}

.pseudo-prez {
    margin-top: 8px;
    color: #805959;
    font-family: mr-darcy, sans-serif;
    font-size: 30px;
    font-weight: 500;
    text-shadow: 1px 1px 0px #7775755e;
    text-transform: uppercase;
    line-height: 5px;
}
.avatar-prez {
    float: left;
    position: relative;
    top: -2px;
    height: 320px;
  left: 10px
}
.avatar-prez img {
    border: 2px solid #d4c7c1;
    position: relative;
    border-radius: 5px;
}
.credit-avatar {
    color: #d0c3be;
    font-size: 10px;
    letter-spacing: 1px;
    position: absolute;
    top: 408px;
  left: 50px
}
.prez h1 {
    color: #884256;
    font-size: 13px;
    line-height: 2px;
    margin-bottom: -10px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-left: 2px;
    letter-spacing: 1px;
    font-family: rooney-sans, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px #eaeaea4d;
}
cc {
    color: #7b4d52;
    font-size: 9px;
    font-weight: 550;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-shadow: none;
}
cc:after {
    content: " ⇺ ";
    font-size: 11px;
}
.prez1, .prez2 {
    left: 223px;
    overflow: hidden;
    position: absolute;
    text-align: justify;
    width: 295px;
}
.prez1 {
    height: 152px;
    top: 86px; 
}
.prez2 {
    height: 178px;
    top: 244px;
}
.prez3 {
    height: 134px;
    overflow: hidden;
    position: relative;
    text-align: justify;
    top: 230px;
    width: 365px;
   left: -188px
}
.contenu-prez {
    overflow: auto;
    padding: 4px 0 5px 4px;
    border-radius: 2px;
    background: #D4B9AF;
    line-height: 14px;
        color: #3c4e4b;
}
.prez1 .contenu-prez {height: 118px;}
.prez2 .contenu-prez {height: 147px;}
.prez3 .contenu-prez {height: 105px;}
.gifprez {
    float: right;
    height: 115px;
    position: relative;
    right: 40px;
    top: 75px;
    width: 115px;
    border-radius: 100px;
    border: 2px solid #d4c7c1;
}
/****************************************
    VOIR PROFIL UTILISATEUR
*****************************************/
#cp-main .panel {
    border-radius: 0;
    padding: 18px !important;
}
.mod-login-avatar img {
    border-radius: 0px;
    /* box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 0 1px rgb(0 0 0 / 30%); */
    height: 320px;
    width: 200px;
}
/* Fond des infos du profil */
.panel fieldset, .module {
    margin-bottom: 18px;
    background: #c6a598 !important;
    padding: 10px;
    width: 100% !important;
}
a { color: #8d434a; }

et le template des catégories :

Code:
<ul class="linklist top">
    <!-- BEGIN switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
    </li>
    <li>
        <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
    </li>
    <!-- END switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
    </li>
    <!-- BEGIN switch_user_logged_in -->
        <li class="rightside">
            <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
        </li>
    <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
        <center><div class="forabg">
                          <center><dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd></center>
            <ul class="topiclist forums">
    <!-- END tablehead -->

    <!-- BEGIN forumrow -->
                <li class="row">
                    <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                        <dd class="dterm">
                            <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                                <h{catrow.forumrow.LEVEL} class="hierarchy">
                                <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                                </h{catrow.forumrow.LEVEL}>
                                                          <div class="desc">{catrow.forumrow.FORUM_DESC}</div>

                                <!-- BEGIN switch_moderators_links -->
                                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                                <!-- END switch_moderators_links -->
                                <div class="subfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                                                  <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                                                          <script type="text/javascript">$('.subfo').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>
                                                  </div>
                                          </dd>
                                              <div class="lastpost">
                            <!-- BEGIN ads -->
                            <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                            </span>
                            <!-- END ads -->
                           
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->
                            <span class="lastpostxt">
                            <!-- BEGIN switch_topic_title -->
                            <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                            <!-- END switch_topic_title -->
                            {catrow.forumrow.USER_LAST_POST}
                                                  </span>
                        </div>
                                          <div class="topicpost">{catrow.forumrow.TOPICS} {L_TOPICS}  <span style="font-weight: normal; color: #8d434a;">|</span> &nbsp;
                        {catrow.forumrow.POSTS} {L_POSTS}</div>
                    </dl>
                </li>
    <!-- END forumrow -->

    <!-- BEGIN tablefoot -->
                </ul>
                  </div></center>
    <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
    <li>
        <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
    </li>
    <li>
        <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
    </li>
    <li class="last">
        <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
    </li>
    <!-- BEGIN switch_delete_cookies -->
        <li class="rightside">
            <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
        </li>
    <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var btn_collapse = $('<div></div>', {
        class: 'btn-collapse'
    });

    var btn_collapse_show = $('<i></i>', {
        class: 'ion-android-add-circle hidden',
        'data-tooltip': '{L_EXPEND_CAT}'
    }).appendTo(btn_collapse);

    var btn_collapse_hide = $('<i></i>', {
        class: 'ion-android-remove-circle',
        'data-tooltip': '{L_HIDE_CAT}'
    }).appendTo(btn_collapse);

    var collapsed = [];

    if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
        collapsed = readCookie('collapsed').split(',');
    }

    $(document).on('click', '.btn-collapse', function() {
        $(this).children('.ion-android-add-circle').toggleClass('hidden');
        $(this).children('.ion-android-remove-circle').toggleClass('hidden');
        $(this).parents('.forabg').toggleClass('hidden');

        if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
        }

        if (!$(this).parents('.forabg').hasClass('hidden')) {
            removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

            createCookie('collapsed', collapsed);
        } else {
            collapsed.push('' + $(this).parents('.forabg').data('cindex'));

            createCookie('collapsed', collapsed);
        }
    });

    $('.forabg').each(function(i) {
        $(this).data('cindex', '' + i);

        $(btn_collapse)
            .clone()
            .attr('id', 'forabg' + i)
            .appendTo($(this).find('.header'));

        if ($.inArray('' + i, collapsed) > -1) {
            $(this).toggleClass('hidden');
            $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
            $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
        }
    });
});

function removeFromArray(item, array) {
    var i = array.indexOf(item);

    if (i > -1) {
        array = array.splice(i, 1);
    }
}

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}
//]]>
</script>

En tentant de corriger le problème, je me rends compte que lorsque je change le positionnement de cette partie dans l'index, ça me décale le positionnement de cette même partie à l'intérieur des forums qui du coup, n'est plus positionnée correctement.
Je ne comprends pas à quoi c'est dû. Ai-je mal codé quelque chose ailleurs, ce qui a provoqué ce souci ?

Par ailleurs, je ne comprends pas pourquoi quand je code, j'ai ce genre de petits bugs comme ça, où me serait-il possible de me former pour correctement positionner mes éléments ? Est-ce que je fais mal mes positionnements ?

En te remerciant pour tes réponses,

Pizi


Dernière édition par Pizi le Sam 10 Avr 2021 - 12:53, édité 1 fois

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 7 Avr 2021 - 16:11

Coucou Pizi,

alors à première vue tu n’utilises pas de catégorie mais que des forums et lorsque tu cliques sur un des liens tu arrives directement sur la liste des sujet
donc c'est sur le template  topics_list_box:
Affichage/Templates/Général/topics_list_box


Voir pour les catégories:
https://forum.forumactif.com/t169797-creer-une-categorie#1695990

Si tu as créé des catégories alors la structure doit être modifié via le P.A:
Affichage/Page d'acceuil/ Structure et hiérarchie/Niveau de compression de l'index
Conserver les catégories sur l'index :


Séparer les catégories sur l'index :

Cocher sur complet


Ensuite, je ne peux pas te donner de lien vers divers aide car personnellement je suis totalement autodidacte et ma situation professionnelle n'a strictement rien a voir avec ce que je fais sur ce forum.

Il faut s'entrainer sur des forums de tests, voilà pour moi la meilleure des formations.
Cela m'a prit quand même presque 6 années pour maitriser


Dernière édition par Milouze14 le Mer 7 Avr 2021 - 16:17, édité 1 fois

Pizi aime ce message

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 7 Avr 2021 - 16:17

Phil,

Autant pour moi, tu as raison ce sont des forums et non des catégories (je me mélange toujours les pinceaux entre les deux termes...).

Voici le template 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}()
      {
         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 -->
<center><div class="forumbg announcement"><listesujets></listesujets>
      <ul class="topiclist topics">
         <li class="header">
            
         </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>
</div></center>
   
      <div class="forumbg">
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm">
                  <!-- 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"><i class="ion-android-chat" data-tooltip="{topics_list_box.row.topic.table_sticky.L_REPLIES}"></i></dd>
               <dd class="views"><i class="ion-eye" data-tooltip="{topics_list_box.row.topic.table_sticky.L_VIEWS}"></i></dd>
               <dd class="lastpost"><i class="ion-android-time" data-tooltip="{topics_list_box.row.topic.table_sticky.L_LASTPOST}"></i></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="{topics_list_box.row.L_TOPIC_FOLDER_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 -->
               <div class="topic-title-container">
                  {topics_list_box.row.NEWEST_POST_IMG}
                  {topics_list_box.row.PARTICIPATE_POST_IMG}
                  {topics_list_box.row.TOPIC_TYPE}
                  <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 -->
                  <span class="topic-description">
                     {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
               <!-- END switch_description -->
               <span class="topic-author">
                   {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
               </span>
               {topics_list_box.row.GOTO_PAGE_NEW}
               <!-- BEGIN nav_tree -->
                  {topics_list_box.row.TOPIC_NAV_TREE_NEW}
               <!-- END nav_tree -->
            </dd>
            <div class="viewsreplies"> {topics_list_box.row.REPLIES} {L_REPLIES} | {topics_list_box.row.VIEWS} {L_VIEWS} </div>
            <dd class="lastpost">
               <!-- BEGIN avatar -->
                  <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
               <!-- END avatar -->

               <span><infopost>
                  {topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn> {topics_list_box.row.LAST_POST_IMG}<br />{topics_list_box.row.LAST_POST_TIME}
</infopost></span>
            </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>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 7 Avr 2021 - 16:18

Si tu veux le même affichage
Pizi, il faut créer des catégories, j'ai édité mon message impeccable

regarde le forum de tests:


https://m14phpbb2.forumactif.org/
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 7 Avr 2021 - 16:38

Phil,

Pardon, je n'avais pas compris...
On utilise pourtant des catégories :

https://i.imgur.com/mT8soNe.png

Par contre, on utilise une image à la place du titre.

Dans la structure, on es en séparation moyenne...

Sur le codage initial, il n'y a pas de souci :

https://easy-rabbit.forumactif.com/

(La codeuse a demandé à ce que son codage ne soit plus utilisé d'où le fait que je recode tout alors que ça a déjà été fait -_-'')
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 7 Avr 2021 - 16:50

Ta capture parle d'elle même texte rouge Pizi ,
les catégories ne sont donc pas représentées chère amie.

Normalement sur moyen, il ne devrait pas y avoir de soucis.
Mais il faut donner des titres aux catégories et les modifier par des images ensuite.
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 7 Avr 2021 - 16:58

Comment cela se fait alors que par exemple, pour le coin des membres j'ai bien un texte en titre de catégorie ?

Code:
<h2>Le coin des membres</h2><img src="https://nsa40.casimages.com/img/2021/02/25/21022502204286800.png" />

pourquoi ça fonctionne sur l'autre code et pas le mien ? :/
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 7 Avr 2021 - 18:21

Disons que les champs du PA ne sont pas prévus pour recevoir du html mais bel et bien du texte Pizi.


D’ailleurs vaut mieux mettre l'image dans les balises h2

Code:
<h2>Le coin des membres <img src="https://nsa40.casimages.com/img/2021/02/25/21022502204286800.png" /></h2>

Ensuite si besoin décaler l'image impeccable .

Comment cela se fait alors que par exemple, pour le coin des membres j'ai bien un texte en titre de catégorie ?


Tu as un code similaire ?
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 7 Avr 2021 - 18:25

Phil,

le h2 sert à cacher/afficher le texte au besoin en lieu et place de l'image (comme pour la navigation par exemple).

Oui en effet, le voici.

Forum : https://easy-rabbit.forumactif.com/

Le CSS :

Code:
/* VERSION 174 DEER. */

body, html {
color: #734a43;/*Couleur de la police*/
font-family: 'Montserrat', sans-serif !important;
font-size: 10px;
background: #c6a598 !important; /*Couleur de fond du body*/
position: relative;
}


.sujets {
    /* margin-bottom: 10px; */
    /* margin-top: 10px; */
    background-color: red;
    width: 500px;
    height: 74px;
    position: absolute;
    top: -4px;
    padding-top: 11px;
}

/*Ne pas afficher titre forum sur header*/ #site-desc p {display: none}

/*Liens*/
a {text-decoration: none !important;/*Ne pas supprimer*/ transition : 1s !important; text-shadow: 0px 1px #ffffff4d;}

a:hover, fieldset dl:hover dt label {
    text-decoration: none !important;/*Ne pas supprimer*/
    /*color: #364440 !important;*/
    letter-spacing: 1px;
    transition: all 1s ease;
}

/*Toolbar*/
#fa_share, #fa_toolbar #fa_icon {display: none !important;}/*Ne pas supprimer*/
#fa_toolbar {background-color: transparent;position: fixed !important;top: -5px;}/*Ne pas supprimer*/
#fa_right.welcome #fa_menu #fa_welcome {background-color: transparent;}/*Ne pas supprimer*/
#fa_left {padding: 5px !important;}/*Ne pas supprimer*/
#fa_usermenu { border-right: 0px solid transparent !important;width: 172px;}/*Ne pas supprimer*/
#fa_toolbar #fa_right.notification #notif_list {top: 36px;}/*Ne pas supprimer*/
#fa_toolbar #fa_right #notif_list {box-shadow: none !important;}/*Ne pas supprimer*/
#fa_right.welcome #fa_menu ul {display: block;top: 36px;box-shadow: none !important;}/*Ne pas supprimer*/
#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications {background-color: transparent;} /*Ne pas supprimer*/
#fa_usermenu tr {font-size: 11px !important;text-align: center;}
/*modifiable à partir de cette partie*/
#fa_service { font-size: 0px; color: transparent !important; background-color: transparent !important; overflow: hidden !important; opacity: 0 !important;}



/*Couleur de fond de la toolbar fermée*/
#fa_right {
    background: #cddad7 !important;
    box-shadow: inset 0px 0px 5px #82807f99;
}

/*Couleur recherche toolbar*/

#fa_search {
  display: none;
  visibility: hidden;
}

 #fa_textarea {
  border-bottom: 1px solid #9f9b61 !important;
  color: #cbbf75;}

/*couleurs fond premier onglet ouvert*/
#fa_right.welcome #fa_menu ul, #fa_usermenu {
    background-color: #b7cac5;
    color: #2a3f3d;
}

/*Couleur du texte des liens de la toolbar*/
#fa_toolbar a, #fa_menulist :link, #fa_menulist :visited {
    color: #2d4042 !important;
    border-radius: 4px;
}

/*avatar toolbar*/
#fa_usermenu img {
  border-radius: 130px;
  box-shadow: none;
  width: 96px;
  border: 1px solid #d0d0d0;}

/*couleur de fond notif*/
#fa_toolbar #fa_right.notification #notif_list {background: #d4c7c1 !important;}

/*news notifications (background plus sombre) */
#fa_toolbar #fa_right #notif_list li.unread {
    background-color: #ccb7ac !important;
    font-weight: bolder;
}

#fa_toolbar #fa_right #notif_list li .contentText a {color:#463e30 !important;} /*Couleur lien toolbar notif*/

/*"voir toutes les notifs'"*/
#fa_toolbar #fa_right #notif_list li.see_all {
    background-color: #99b3b5;
    text-align: center;
    text-transform: uppercase;
}
#fa_toolbar #fa_right #notif_list li {
    color: #71684d;
}
#cp-main table.table1 {
    background-color: #dac9b8;
    margin-bottom: 18px;
}
/* HEADER */

#page-header {
    background-color: transparent !important;
}

#logo {
    width: 100%;
    height: auto;
    background-color: transparent !important;
    float: none !important;
    display: block !important;
    position: relative;
    top: -55px;
}

/*Adapté à toutes les résolutions*/
@media screen and (max-width : 1700px) {
#logo img {
    width: inherit;
}
}
/*Custom Scrollbar Jquery scrollbar Firefox*/
 
.mCSB_container{ margin-right: 18px!important; }/*Ne pas supprimer*/
 
.mCSB_scrollTools .mCSB_draggerRail {
    background-color: #727782;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background: #000000;
}
.mCSB_scrollTools .mCSB_container:hover >.mCSB_dragger .mCSB_dragger_bar
.mCSB_scrollTools .mCSB_dragger:active, .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
        background: #53503c;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {
        background: #000000;
    }

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #d4c7c1;
}

::-webkit-scrollbar-track {
    background-color: #ac988b;
}

/*Ne pas supprimer*/.mCustomScrollBox {
    position: relative;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}
/*Ne pas supprimer*/.mCSB_container {
    width: auto;
    height: auto;
}
/*Navig*/
.navig {
    background: #d3cabe;
    font-size: 12.5px;
    letter-spacing: 2px;
    padding: 10px;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    width: 948px;
}

.navig a {
    color: #843845 !important; /*couleur texte barre de navig*/
}

/*.navig a:hover {
    color: red !important;
}*/

/*couleur de fond recherche, cadre "option*/.row3 {background-color: #d6dedc  !important;
box-shadow: none !important;}

.twitter {
    position: fixed;
    display: block;
    width: 220px;
    height: 200px;
    bottom: 10px;
    left: 10px;
}

.navig li {display: initial;}/*Ne pas supprimer*/
ul.navig img {display: none;}/*Ne pas supprimer*/

/*Fond*/
#wrap {
    background-color: #d4b9af;
    width: 948px;/*Ne pas supprimer*/
}

/*Annonces*/
/*Ne pas supprimer*/#fa_ticker_block {
    margin: 0 !important;
    position: relative;
    left: 57px;
}
#fa_ticker_block .module {
    background-color: #d5c4a4a1;
    height: 110px;
    border-radius: 50px;
    box-shadow: inset 0px 0px 8px #a8805842;
    width: 750px;
}

.texteannonce {
    /*width: 82%;
    left: 73px;*/
    position: relative;
    top: 5px;
    display: block;
    overflow: hidden;
    overflow-wrap: break-word !important;
    height: 93px;
    white-space: normal !important;
}

.texteannonce h1, .postlink:visited {
    color: #274377;
    font-size: 23px !important;
    text-transform: uppercase;
    font-family: mr-darcy, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-shadow: 1px 1px 0px #7775755e;
}

/*Discord*/
.dis {
    width: 350px;
    height: 74px;
    position: relative;
    background: #87a279;
    opacity: 0.75;
    left: 0px;
    display: block;
    top: 74px;
    margin-top: -83px;
    border-radius: 4px 4px 0px 0px;
}
/*Liens nouveaux messages/messages sans réponses/voir ses messages...*/
/*Ne pas supprimer*/.linklist.top {
    width: 645px;
    position: relative;
    top: 23px;
    left: 109px;
}

/*Catégories*/
.table-title img {
    left: -18px;
    position: relative;
    top: 25px;
    z-index: 999;
}
ul.forums li.row dl {
    height: 129px;
}
.table-title, .table-title h2 {color: transparent; text-shadow: none;}/*Ne pas supprimer*/

.linklist.top {
    border-width: 1px 0 1px;
    padding: 2px;
}


/*Ne pas supprimer*/ ul.topiclist {
    margin: 0;
    width: 750px;
}

a.forumtitle {
    color: #274377 !important;
    display: block;
    font-size: 18px;
    width: 59%;
    height: 30px;
    position: absolute;
    text-transform: uppercase;
    right: 227px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 2.3;
    font-family: mr-darcy, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    text-shadow: 1px 1px 0px #7775755e;
}

a.forumtitle:hover {
  letter-spacing: 1px;
  transition: all 1s ease;
}

forumdesc {
    display: block;
    height: 53px;
    overflow: auto;
    text-align: justify;
    width: 446px;
    color: #364440;
    position: absolute;
    /*right: 220px;*/
    bottom: 33px;
}

forumdesc b, forumdesc strong {
    color: #297a3f !important; /* Correspond à TITRE DU FORUM*/
    text-transform: uppercase; /*Texte en majuscules*/
    font-size: 12px;
    letter-spacing: 1.5px; /*espace entre les lettres*/
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 700;
}


.lastpostcat {
    display: block;
    height: 70px;
    left: 535px;
    padding: 4px;
    position: absolute;
    top: 26px;
    width: 200px;
}

.lastpost-avatar img {
    position: absolute !important;
    z-index: 1 !important;
    width: 50px !important;
    height: 70px !important;
    left: -7px !important;
    top: -5px !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.lastpost-avatar {
    border: 2px solid #95ada7;
    border-radius: 10px;
    height: 60px;
    overflow: hidden;
    width: 40px;
}

.infoslastpost {
    display: inline-block;
    position: relative;
    width: 180px;
    left: 50px;
    text-align: left;
    top: -57px;
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    border-left: double #297a3f;
    padding-left: 10px;
}

chiffres {
    position: absolute;
    text-transform: uppercase;
    color: #096b69;
    text-align: center;
    font-size: 13px;
    right: 15px;
    top: 98px;
    width: 199px;
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 700;
    z-index: 1;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0px #9c9a9769;
}

sousfo {
    display: block;
    background: #d5c4a4a1;
    font-size: 0;
    width: 442px;
    overflow: auto;
    height: 21px;
    text-align: left;
    top: 102px;
    position: absolute;
    padding-left: 12px;
    padding-top: 3px;
    box-shadow: inset 0px 0px 8px #a8805842;
    left: 80px;
    border-radius: 10px;
}

sousfo a::before {
    content: " ⬪ ";
    font-size: 10px
}
sousfo a {
    font-size: 11px;
    display: inline-block;
    color: #a2513f !important;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-shadow: 1px 1px 0px #d6d3d0;
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 400;
    padding-right: 3px;
}

/*Ne pas supprimer*/.forabg {
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 24px;
    padding: 0;
    width: 750px !important;
    position: relative;
    left: 53px;
}

/*Liste des sujets*/
.sub-header-info img {display: none;}/*Ne pas supprimer*/
.forumbg {box-shadow: none !important;}/*Ne pas supprimer*/

dl.icon {
    height: 73px;
    overflow: hidden;
    position: relative;
}

.topic-title-container > strong {
    margin-right: 0px;
    padding: 0 !important;
    border: none;
    font-size: 11px;
}

listedessujets {
    background: url(https://zupimages.net/up/21/06/xi0u.png);
    display: block;
    width: 750px;
    height: 200px;
}

ul.topiclist li, ul.topiclist.bg_none, li.row:hover, li.row {
    background: #bfa49f !important; /* COULEUR DE FOND CATEGORIE + SUJET*/
}
.topic-title-container {
    width: 145%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    z-index: 999;
    position: relative;
}
.topic-title-container::after {
    content: " ";
    display: block;
    position: relative;
    background: #b7cac8;
    width: 424px;
    height: 1px;
    /*margin: 1px;*/
}

a.topictitle {
    font-size: 14px !important;
    color: #297a3f !important;
    text-shadow: 0px 0px 5px #59636b6b!important;
    font-family: 'mr-darcy', sans-serif;
    text-transform: uppercase;
}

.topictitle {
    text-transform: lowercase;
    letter-spacing: 1px;
    font-size: 12px !important;
    display: contents !important;
}

.topic-description {
    width: 430px;
    display: inline-block;
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    color: #364440 !important;
    text-shadow: 0px 1px #ffffff4d;
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 400;
}

.topic-author {
    position: relative;
    left: -2px;
}

ul.topics .row dd.dterm, ul.topics .row dt { text-align: left;}

.topics .row .lastpost {
    padding: 9px 18px !important;
    text-align: initial;
    width: 220px;
    height: 50px;
    position: absolute;
    right: 15px;
    top: 0;
}

.lastpost-avatar2 {
    border: 2px solid #95ada7;
    border-radius: 10px;
    float: left;
    height: 60px;
    overflow: hidden;
    width: 40px;
    top: 0;
    position: relative;
    left: -10px;
}

.lastpost-avatar2 img {
    display: block;
    position: relative;
    z-index: 1;
    width: 50px;
    height: 70px;
    top: -5px;
    left: -7px;
}

lastpostsujets {
    position: relative;
    display: inline-block;
    left: 10px;
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    border-left: double #297a3f;
    padding-left: 10px;
}

.vuesetrep {
    display: inline-block;
    color: #a2513f;
    position: absolute;
    top: 53px;
    width: 170px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    text-shadow: 1px 1px 0px #d6d3d0;
    box-shadow: inset 0px 0px 8px #a8805842;
    background: #d5c4a4a1;
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 500;
    border-radius: 10px;
}

/*Pagination liste des sujets*/
.row .pagination span a:active, .row .pagination span a:link, .row .pagination span a:visited {background-color: #95ada757; color: #fff;}

/*.pagination a:hover {background:#;}*//*Couleur lien page quand on suvole la souris*/

.nav h2 {font-size: 12px; display: contents;} /*ne pas supprimer*/

/*Sujets*/
h1.page-title a, .post h2.topic-title a {
    font-family: 'mr-darcy', sans-serif;
    font-size: 25px;
    text-transform: capitalize;
    color: #274377 !important;
    text-shadow: 1px 1px 0px #7775755e;
}
/*Pagination d'un sujet*/
.pagination span a:active, .pagination span a:link, .pagination span a:visited {background-color: #d2ccb7; color: #475896 !important;}
.pag-img {background: transparent !important;}/*Ne pas supprimer*/


/*Boutons cliquer*/

.button1[class^="ion-"]:before, .button2[class^="ion-"]:before, .button[class^="ion-"]:before, input[type="submit"][class^="ion-"]:before {
    font-size: 1.8rem;
    margin-right: 9px;
    vertical-align: -2px;
    content: "  ";
}

input:disabled {
    border-bottom: none;
}

.button, .button2, input[type="submit"] {
    display: inline-block;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    width: auto !important;
    padding: 11px;
    transition: 0.5s all;
    background: #95ada7;
    color: #4d5656 !important;
    box-shadow: none;
}

.button1 { /*bouton nouveau et répondre*/
    background-color: transparent;
    /* border-radius: 3px; */
    box-shadow: none !important;
    /* border: none;
    color: #d3414b;
    display: inline-block;*/
    overflow: hidden;
    position: relative;
    /*vertical-align: middle;*/
    width: auto !important;
    padding: 11px;
    /*transition: 0.5s all;*/
}

/*Sujet*/
.post {background-position: 100% 0;background-repeat: no-repeat;border: none;box-shadow: none;margin-bottom: 24px;} /*ne pas supprimer*/

/*sondage*/
.poll-bar {background-color: #95ada7 !important;} /*couleur fond votes*/
.poll-bar-bar {background-color: #65887f !important;} /*couleur votes*/
.row1, .row2 {background: transparent; box-shadow: none;}/*Ne pas supprimer*/
h2 { color: #297a3f;text-shadow:1px 1px 0px #dedad9;}

.post-head {
    background-color: #b9998c;
    border-color: #dbd8cb;
    border-radius: 3px 3px 0 0;
    border-style: solid;
    border-width: 0 0 2px;
    padding: 18px;
}

.postbody {width: 658px;} /*ne pas supprimer*/

/*Couleurs messages*/
.sceditor-container iframe, .sceditor-container textarea, .sceditor-container, .postbody, .inputbox, input[type="text"] {
    background: #d4c3c0 !important;
    color: #5f4c4e !important;
}

.mentiontag {
    background-color: #95ada7; /*Fond couleur tag*/
    transition: 0.5s;
}

.mentiontag:active, .mentiontag:hover { /*Survol couleur de fond tag*/
    background-color: #95ada7;
}

.mentiontag:link, .mentiontag:visited {
    color: #414b4a;
}

.tooltip-content img {width:100px; height: 161px}

.signature_div {
    background: #bfa49f !important;
    text-align: center;
    padding-bottom: 39px;
    display: block;
    width: 658px;
    position: relative;
    left: -18px;
    top: 18px;
    /* box-shadow: 0px -7px 5px #293535ad; */
    /* border-top: 2px solid #28f4f782; */
}


.button2:hover, .button:hover, input[type="submit"]:hover {
    background: #95ada7;
    color: #efe8e4 !important;
    border: none;
    box-shadow: none;
    letter-spacing: 1px;
    transition: 0.5s !important;
}

.button1:hover { /*survol répondre nouveau*/
    background-color: transparent !important;
    box-shadow: none !important;
    border: none;
}


.button1:active, .button1:link, .button2:active, .button1:visited, .button2:link, .button2:visited, .button:active, .button:hover, .button:link, .button:visited, input[type="submit"]:active, input[type="submit"]:hover, input[type="submit"]:link, input[type="submit"]:visited {
      color: #367d47 !important;
}

/*Redimensionnement des images*/
.postbody img {
    max-width: 500px; /*Largeur à partir de laquelle l'image deviendra une miniature*/
}

/*Réponse rapide*/
.h3, h3 {color: #a2513f;text-shadow: 1px 1px 0px #f5e8e4a3;}
div.sceditor-toolbar {border:none !important;} /*ne pas supprimer*/

/*Message important tutoriel admin titre 1 2 3*/
.postimportant, .tutoriel {
    background-color: #cddad7;
    display: block;
    margin: auto;
    padding: 15px;
    text-align: justify;
    width: 90%;
    color: #444c45;
    border-radius: 5px;
}
/*Titres des messages*/
.titre1, .postbody h1, .titre3 {
    color: #274377;
    font-family: mr-darcy, sans-serif;
    font-size: 27px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    padding: 2px;
    text-shadow: 1px 1px 0px #7775755e;
    width: auto;
    line-height: 19px;
    padding-top: 10px;
}

.titre2::before {
    content: " ";
    font-size: 16px;
    font-weight: 100 !important;
}

.titre2::after {
    content: " ";
    font-size: 16px;
    font-weight: 100 !important;
}

.titre2 {
    font-size: 18px;
    width: 100%;
    overflow-y: auto;
    text-transform: uppercase;
    font-family: rooney-sans, sans-serif;
    height: 23px;
    padding: 10px;
    margin-bottom: 5px;
    display: inline-table;
    color: #297a3f !important;
    background: #dbd8cb;
    text-shadow: 2px 1px 0px #807e7d36;
    box-shadow: inset 0px 0px 8px #a8805842;
    border-radius: 25px;
    font-weight: 700;
    letter-spacing: 2px;
    border-left: double #297a3f;
}

/*Post admin */
.postadmin {
    border-radius: 4px;
    display: block;
    margin: auto;
    padding: 15px;
    text-align: justify;
    width: 90%;
}

.postbody h2 {
    color: #a2513f;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    width: 100%;
    text-shadow: 1px 1px 0px #f4f4f46b;
}
.postbody h3, .postbody .h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    font-family: rooney-sans, sans-serif;
    border-bottom: dotted 2px;
}
.postbody h3::before {
    content: "⎈ ";
    font-size: 23px;
}

.postimportant .postadmin {
    height: 230px;
    overflow: auto;
    width: 80%;
    border-radius: 3px;
    background: #bbcec9;
}

/*Messages prédéfinis*/
.messagepredefini, .postadmin {
    background-color: #95ada7;
    color: #53584c;
}

.messagepredefini {
    border-radius: 5px;
    display: block;
    height: auto;
    margin: 10px;
    padding: 10px;
    width: 92%;
    text-align: center;
    box-shadow: 0px 0px 4px #31302f2b;
}

.messagepredefini > h {
    background-color: #d2ccb7;
    color: #a2513f;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2px;
    margin: 7px;
    padding: 1px 15px;
    text-transform: uppercase;
    font-family: rooney-sans, sans-serif;
    border-radius: 10px;
    box-shadow: inset 0px 0px 8px #a8805842;
    text-shadow: 1px 1px 0px #d6d3d0;
}

.texte1 {
    background-color: #b7cac5;
    height: auto;
    margin: 11px;
    padding: 20px;
    text-align: justify;
    color: #53554c;
    /* text-shadow: 1px 1px #b47956; */
    box-shadow: inset 0px 0px 8px #1c1c1c24;
    /* box-shadow: inset 0px 0px 3px #7d6959; */
}

hr {
    background-color: #e1dfe0;
    border: none;
    height: 2px;
}

.postbody b, .postbody strong, .postimportant b, .tutoriel b {
    letter-spacing: 1px;
    font-weight: bolder;
    color: #274378 !important;
}

em, i {
    color: #39814d;
    text-shadow: 1px 1px 0px #e6e6e691;
    font-size: 11px;
    letter-spacing: 1px;
}

/* Couleur des boutons éditer, supprimer dans les messages */
.profile-icons i {
    margin: 0;
    transition: none;
    vertical-align: -13px;
    color: #a28571 !important;
    background-color: #0000;
    text-shadow: 0px 0px 0px;
}

u {
    border-bottom: 1px solid #a2513f;
    letter-spacing: 1px;
    text-decoration: none;
}
 
/*Bloc qui contient la ligne de l'intitulé et le contenu de QUOTE*/
blockquote {
    background-color: #dbd8cb;
    border: none;
    border-radius: 5px;
    padding-left: 13px;
    padding-top: 3px;
    margin-bottom: 12px;
}
blockquote::before, dl.codebox::before {display:none;}

dl.codebox dt {
    border-bottom: 1px solid #78978f;
    display: block;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 6px;
}
/*Bloc intérieur de QUOTE incluant l'intitulé*/blockquote > div {border:none;border-radius:10px;}

/*Intitulé de QUOTE*/
blockquote cite {
    background: #95ada7;
    border-bottom: 2px solid #78978f;
    border-radius: 5px 5px 0 0;
    color: #415048;
    margin-left: -13px;
    text-align: center;
    text-transform: uppercase;
    width: 614px;
    letter-spacing: 1px;
    margin-top: -2px;
    margin-bottom: 14px;
    font-size: 12px;
}

blockquote cite a {
    color: #27437c !important;
}

/*Code*/
.codebox dt {background: none;}

dl.codebox {
    background-color: transparent;
    border-color: transparent;
}
dl.codebox > dd {
    background: #dbd8cb;
    border: none;
    color: #415048;
    font-size: 11px;
    padding: 20px;
    box-shadow: inset 0px 0px 0px #98958d4f;
}
/*Ne pas supprimer*/code {
    font-family: Lucida Sans Unicode, Lucida Sans, sans-serif !important;
}

.selectCode {
    position: relative;
    float: right;
    text-transform: uppercase;
}
/*Bloc qui contient le titre et le contenu de SPOILER*/
.spoiler {
    background-color: #d3b778;
    border: none;
    text-align: center;
    border-radius: 3px;
}
.spoiler > dt {
    background: #b7cac5;
    border-radius: 3px 3px 0 0;
    color: #5c593c;
    position: relative;
    top: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/*Contenu de SPOILER fermé*/
.spoiler_closed {
  background-image: none;
  background-color: #473E2B;
  border:none;
}
/*Contenu de SPOILER ouvert*/
.spoiler_content {
    background-image: none;
    background-color: transparent;
    border:none;
}
/*Pour éliminer un espace pas rapport sous le spoiler*/
.spoiler > dd:last-child {border: none;}/*Ne pas supprimer*/

/* image du bouton mentionner *//*Ne pas supprimer*/
.sceditor-button-mention div { background-image:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) !important }
 
/* menu déroulant du bouton mentionner */
#fa-mention {
  background:url(https://i.servimg.com/u/f19/18/21/60/73/scemen10.png) no-repeat 3px 50% #FFF;
  padding-left:22px;
}
/*Profil*/
.postprofile {
    display: block;
    float: right;
    font-size: 12px;
    padding: 18px;
    position: relative;
    width: 220px;
    height: 720px;
    word-wrap: break-word;
    background: #b9998c;
    right: -2px;
  /* border: 2px solid #1f2527; */
}


.i_icon_online {
    position: absolute;
    right: -35px;
    top: 90px;
    z-index: 1;
}

.postprofile-name {
    font-family: mr-darcy, sans-serif;
    font-size: 23px;
    position: absolute;
    top: 12px;
    display: block;
    text-align: center;
    width: 198px;
    left: 11px;
    height: 43px;
    padding: 9px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #d4b9af;
    border-radius: 10px;
    letter-spacing: -1px;
}

.postprofile-name strong {font-weight: lighter;}

.postprofile-avatar {
    margin-bottom: 0;
    text-align: center;
    position: relative;
    width: 206px;
    height: 327px;
    top: 33px;
    left: -11px;
}

.postprofile-avatar img {
    border: 2px solid #78978f;
    border-radius: 10px;
    height: 320px;
    position: relative;
    width: 200px;
    top: 10px;
}

.postprofile-rank::before {
    content: "⚙ Je suis ⚙";
    font-size: 12px;
    color: #415048;
    font-family: rooney-sans, sans-serif;
    letter-spacing: 6px;
    text-shadow: 1px 1px 0px #ffffff9c;
    text-transform: uppercase;
}

.postprofile-rank {
    display: grid;
    position: relative;
    text-transform: lowercase;
    top: 45px;
    height: 43px !important;
    width: 198px;
    left: -7px;
    margin-bottom: 26px;
    border-radius: 10px;
    padding: 6px;
    font-family: mr-darcy, sans-serif;
    font-size: 25px !important;
    text-shadow: 1px 1px 1px #f7f1ea;
    line-height: 0.9;
    background: #d4b9af;
 
}

.postprofile-info {
    display: block;
    height: 110px;
    margin-bottom: 18px;
    overflow: auto;
    padding: 11px;
    position: relative;
    top: 33px;
    background: #d4c3c0;
}

.postprofile .label span, .postprofile .label {
    font-weight: 500;
    color: #297a3f !important; /*couleur crédits, messages, age...*/
    text-transform: uppercase;
    font-size: 9px;
    letter-spacing: 0.5px;
}


.postprofile-contact {
    position: relative;
    left: 42px;
    top: 15px;
}
.postprofile-contact img {
    border-radius: 11px;
    height: auto;
}
.petitsicon img {
    margin-right: 8px; /*espace entre petites icons*/
}

.petitsicon {
    position: relative;
    right: 50px;
}

.contacts {
    position: relative;
    display: block;
    right: 50px;
    float: none;
}

.profile-icons a.selected, .profile-icons a:hover, .profile-icons span.selected, .profile-icons span:hover, .btn-delete a:hover, .btn-ip a:hover {background-color: transparent;box-shadow: none;}

/*Signature*/
#cp-main .panel.sig {
    background-color: transparent;
    box-shadow: none;
}

/*Formulaire de présentation*/
.prez {position: relative;}
 
.pseudo-prez {
    margin-top: 8px;
    color: #274377;
    font-family: mr-darcy, sans-serif;
    font-size: 30px;
    font-weight: 500;
    text-shadow: 1px 1px 0px #7775755e;
    text-transform: uppercase;
    line-height: 5px;
}

.avatar-prez {
    float: left;
    position: relative;
    top: -2px;
    height: 320px;
}

.avatar-prez img {
    border: 2px solid #d4c7c1;
    position: relative;
    border-radius: 5px;
}
 
.credit-avatar {
    color: #d0c3be;
    font-size: 10px;
    letter-spacing: 1px;
    position: absolute;
    top: 422px;
}
 
.prez h1 {
    color: #a45c4c;
    font-size: 13px;
    line-height: 2px;
    margin-bottom: -10px;
    text-transform: uppercase;
    margin-top: 5px;
    margin-left: 2px;
    letter-spacing: 1px;
    font-family: rooney-sans, sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 0px #eaeaea4d;
}

cc {
    color: #297c46;
    font-size: 9px;
    font-weight: 550;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-shadow: none;
}
 
cc:after {
    content: " ⇺ ";
    font-size: 11px;
}
 

.prez1, .prez2 {
    left: 223px;
    overflow: hidden;
    position: absolute;
    text-align: justify;
    width: 295px;
}

.prez1 {
    height: 152px;
    top: 86px; 
}
 
.prez2 {
    height: 178px;
    top: 244px;
}
 
.prez3 {
    height: 134px;
    overflow: hidden;
    position: relative;
    text-align: justify;
    top: 35px;
    width: 365px;
}
 
.contenu-prez {
   overflow: auto;
   padding: 4px 0 5px 4px;
   border-radius: 2px;
   background: #cddad7;
   line-height: 14px;
        color: #3c4e4b;
}

.prez1 .contenu-prez {height: 118px;}
.prez2 .contenu-prez {height: 147px;}
.prez3 .contenu-prez {height: 105px;}
 
.gifprez {
    float: right;
    height: 115px;
    position: relative;
    right: 40px;
    top: -120px;
    width: 115px;
    border-radius: 100px;
    border: 2px solid #d4c7c1;
}
/*QEEL*/
/*Ne pas supprimer*/ .block {
    background-color: transparent;
    box-shadow: none;
    overflow: visible;
    text-align: left;
}

qeel {
    background: url(https://nsa40.casimages.com/img/2021/02/25/210225021351338208.png);
    display: block;
    height: 500px;
    left: 76px;
    margin: 10px;
    position: relative;
    width: 700px;
    text-align: justify !important;
}

texteqeel {
    display: block;
    position: absolute;
    left: 212px;
    top: 105px;
    width: 315px;
    text-align: justify;
    color: #598086;
    overflow: auto;
    height: 285px;
}

texteqeel br {/*ne pas supprimer*/
    height: 0px !important;
    display: contents;
}

titreqeel {
    font-size: 23px;
    display: block;
    color: #274377;
    text-shadow: 1px 1px 0px #7775755e;
    margin: 1px;
    font-family: mr-darcy, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
}


/* Nouvelle version block QEEL */

statistiques {
    display: block;
    position: absolute;
    height: 265px;
    width: 130px;
    overflow: auto;
    top: 130px;
    left: 24px;
    color: #554536;
    /* background: linear-gradient(
182deg
 , #d7cecb, #c0a391); */
    word-break: break-word;
}


anniversaires {
    display: block;
    position: absolute;
    top: 130px;
    right: 18px;
    width: 110px;
    text-align: justify;
    height: 260px;
    overflow: auto;
    color: #554536;
    /* background: linear-gradient(
182deg
 , #d7cecb, #c0a391); */
    word-break: break-word;
}



/* Onglets QEEL */

.tableonglets span.ongletcont {
  display: none;
}
.tableonglets input {
  display: none;
}
.tableonglets input:checked + span.ongletcont {
  display: block;
}


.tableonglets span.ongletcont {
    top: 50px;
    width: 330px;
    position: relative;
    height: 350px;
    overflow: auto;
    color: #352d2d;
    padding-left: 18px;
    padding-right: 18px;
    right: -200px;
}

.tableonglets label.ongletenligne {
    top: 424px;
    width: 83px;
    display: inline-block;
    position: relative;
    right: -275px;
    text-align: center;
    color: transparent !important;
    /* font-family: georgia, serif; */
    /* font-weight: 400; */
    /* font-style: normal; */
    /* background: #c0a391ad; */
    /* text-shadow: 1px 1px #b47956; */
    /* box-shadow: inset 0px 0px 8px #a880584d; */
    /* color: #d4c7c1; */
    cursor: pointer;
}

.tableonglets label.onglet24h {
    top: 424px;
    display: inline-block;
    position: relative;
    right: -295px;
    text-align: center;
    cursor: pointer;
    color: transparent !important;
    font-family: georgia, serif;
    /* background: #c0a391ad; */
    /* text-shadow: 1px 1px #b47956; */
    /* box-shadow: inset 0px 0px 8px #a880584d; */
    /* color: #d4c7c1; */
    width: 50px;
}


groupes_qeel a::before {
    content: " ⟐ ";
}
groupes_qeel a {
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1px;
    display: inline;
    font-family: rooney-sans, sans-serif;
}
groupes_qeel {
    position: relative;
    display: block;
    background: #d5c4a4a1;
    padding: 15px;
    height: 100px;
    width: 750px;
    font-size: 0 !important;
    text-align: center;
    left: 57px;
    margin-bottom: 7px;
    margin-top: 22px;
    border-radius: 50px;
    box-shadow: inset 0px 0px 8px #a8805842;
}

/*Index des tutoriels*/
.indextuto {
    background-image: url(https://www.zupimages.net/up/17/26/ajmj.jpg);
    position:relative;
    width:200px;
    height:100px;
    overflow:hidden;
    display: inline-block;
    white-space: normal;
    margin : 5px;
    border: 5px solid #fff;
    box-shadow: 1px 1px 2px #e6e6e6;
    background-color : #c6cfe5;
}
.indextuto a{
    display: block;
    overflow: auto;
    background-color: #856F71;
    color: #ffffff;
    font-size: 10px;
    text-transform: uppercase;
    padding-left : 30px;
    padding-right : 30px;
    padding-bottom : 2px;
    padding-top : 2px;
    height: 20px;
    transform: translateY(-100px) rotate(0deg);
    transition: all 0.2s ease-in-out;
}
 
.texte {
    display: block;
    padding-top: 20px;
    text-align: center;
    color: black;
}
.effect img {
    position:absolute;
    right:0px;
    top: 0px;
    cursor:pointer;
    opacity: 1;
    transition: all 0.4s ease-in-out 0.2s;
}

.texte a, .texte a:hover {
    color: #fff !important;
}
 
.effect:hover img    {
    transform: scale(0);
    opacity: 0;
    transition-delay: 0s;
}     
.effect:hover .a {
    opacity: 1;
}                                                                           
.effect:hover a,
.texte:hover{
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0.4s;
}
.effect:hover a.info{
    transform: scale(1);
    opacity: 1;
}
 
.tutotext {
    background: rgba(220, 219, 219, 0.9);
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    display: inherit;
    height: 50px;
    left: 0%;
    margin: 4px;
    overflow: auto;
    padding-top: 13px;
    position: relative;
    text-align: center;
    width: 224px;
}
 
/* General link styles */
.link {
    outline: none;
    text-decoration: none;
    position: relative;
    font-size: 12px;
    line-height: 1;
    color: #9e9ba4;
    display: inline-block;
}
/* Surinami */
.link--surinami {
    font-family: 'Orbitron', sans-serif;
    font-size: 11px;
    padding: 8px;
    text-align: center;
    word-spacing: 4px;
}
 
.link--surinami::before,
.link--surinami::after {
    content: '';
    width: 100%;
    height: 1px;
    z-index: -1;
    background: #5E3C35;
    position: absolute;
    -webkit-transform: scale3d(0,1,1);
    transform: scale3d(0,1,1);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}
 
.link--surinami::before {
    right: 0;
    top: 0;
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
 
.link--surinami::after {
    left: 0;
    bottom: 0;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
 
.link--surinami:hover::before,
.link--surinami:hover::after {
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
 
.link--surinami span {
    position: relative;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}
 
.link--surinami:hover span {
    color: transparent;
}
 
.link--surinami span::before,
.link--surinami span::after {
    position: absolute;
    color: #A36662;
    opacity: 0;
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}
 
.link--surinami span::before {
    content: attr(data-letters-l);
    left: 0px;
    -webkit-transform: translate3d(-5px,0,0);
    transform: translate3d(-5px,0,0);
    text-align:justify;
}
 
.link--surinami span::after {
    content: attr(data-letters-r);
    right: 0;
    -webkit-transform: translate3d(5px,0,0);
    transform: translate3d(5px,0,0);
}
 
.link--surinami:hover span::before,
.link--surinami:hover span::after {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*Liste des membres*/
table.table1 thead th {
    color: #6c9fa7;

}


/*MP*/
li.header dd, li.header dt {
    color: #171515;
    font-size: 11px;
}
.button-round:hover {
    background-color: #fff;
    box-shadow: none;
}
.button-round:active, .button-round:hover, .button-round:link, .button-round:visited {
    background: #d3414b;
    box-shadow: none !important;
}
/*Voir profil*/
.mod-login-avatar img {
    width: 200px;
    height: 320px;
    border-radius: 0;
}
.module .h3 {
    background-color: #ECECEC;
    color: #7c8a0d;
}

/*Flèches haut-bas*/
.fleches {
    bottom: 5px;
    position: fixed;
    right: 16px;
    width: 90px;
    height: 144px;
}
.haut {
    background-image: url(https://nsa40.casimages.com/img/2021/02/25/210225014721338983.png);
    display: block;
    height: 75px;
    width: 90px;
    position: absolute;
    z-index: 999;
    right: 0px;
}
.bas {
    background-image: url(https://nsa40.casimages.com/img/2021/02/25/210225014716545296.png);
    display: block;
    height: 75px;
    width: 90px;
    position: absolute;
    top: 75px;
}
/*Cacher les flèches sur petit écran et mobile*/
@media screen and (max-width: 1280px) {
    .fleches {
        display:none;
    }
}
   
@media handheld  {
    .fleches  {
        display:none;
    }
}

/*Membres*/
td.avatar-mini img {
    height: 61px;
    width: 38px;
}
/*autres*/
.posts, .views {
    display: none !important;
}

table.forumline td.stat-bar {
    filter: grayscale(100%);
}
table.table1 tbody tr.hover, table.table1 tbody tr:hover {background-color: transparent !important;}

/*Stats & footer*/
.statistics {
    background-color: #567b8e;
    position: relative;
    color: #cddad7 !important;
    white-space: break-spaces;
}

/* Ligne statistique dernier membre..*/
.rightside {color: #2b3a39;} /*COULEUR TEXTE "|" "©" "|" etc.*/

#page-footer {background-color: #b7cac8;} /*COULEUR DE FOND DU FOOTER*/
#page-footer a {color: #274381 !important;}

.copyright-body {
    border-color: #297a3f !important;
    color: #364440 !important;
}
.panel .posts, .panel .views {
    display: initial !important;
}

.panel {
    background-color: #99b5a159;
    border-radius: 10px;
    box-shadow: inset 0px 0px 8px #588ea842;
    margin-bottom: 24px;
    overflow: hidden;
    padding: 18px 18px 0;
    position: relative;
}

.content h2, .panel h2 {
    font-family: rooney-sans, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.526;
    margin-bottom: 9px;
    margin-top: -3px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-left: double;
    padding-left: 10px;
    border-bottom: none;
}

li.row {
    border-color: transparent;
    border-style: solid;
    border-width: 3px 0 0;
}

Le template index_box :

Code:
<ul class="linklist top">
   <!-- BEGIN switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
   </li>
   <li>
      <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
   </li>
   <!-- END switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
   </li>
   <!-- BEGIN switch_user_logged_in -->
      <li class="rightside">
         <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
      </li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <ul class="topiclist">
            <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
         </ul>
                  <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                                                         
                                                          <forumdesc>{catrow.forumrow.FORUM_DESC}</forumdesc>

                        <!-- BEGIN switch_moderators_links -->
                           {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                        <!-- END switch_moderators_links -->
                                                          <sousfo>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</sousfo>
                        <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                     </div>
                  </dd>
                                         
                  <chiffres> {catrow.forumrow.TOPICS} {L_TOPICS} 
                                                  {catrow.forumrow.POSTS} {L_POSTS}</chiffres>
                                         
                  <div class="lastpostcat">
                     <!-- BEGIN ads -->
                     <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                  {catrow.forumrow.ads.LOCATION}
                                </span>
                     </span>
                            <!-- END ads -->
                     
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                     <span class="infoslastpost">
                     <!-- BEGIN switch_topic_title -->
                     <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                     <!-- END switch_topic_title -->
                     {catrow.forumrow.USER_LAST_POST}
                     </span>
                  </div>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
   <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
   </li>
   <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
   </li>
   <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
      <li class="rightside">
         <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   var btn_collapse = $('<div></div>', {
      class: 'btn-collapse'
   });

   var btn_collapse_show = $('<i></i>', {
      class: 'ion-android-add-circle hidden',
      'data-tooltip': '{L_EXPEND_CAT}'
   }).appendTo(btn_collapse);

   var btn_collapse_hide = $('<i></i>', {
      class: 'ion-android-remove-circle',
      'data-tooltip': '{L_HIDE_CAT}'
   }).appendTo(btn_collapse);

   var collapsed = [];

   if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
      collapsed = readCookie('collapsed').split(',');
   }

   $(document).on('click', '.btn-collapse', function() {
      $(this).children('.ion-android-add-circle').toggleClass('hidden');
      $(this).children('.ion-android-remove-circle').toggleClass('hidden');
      $(this).parents('.forabg').toggleClass('hidden');

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
         collapsed = readCookie('collapsed').split(',');
      }

      if (!$(this).parents('.forabg').hasClass('hidden')) {
         removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

         createCookie('collapsed', collapsed);
      } else {
         collapsed.push('' + $(this).parents('.forabg').data('cindex'));

         createCookie('collapsed', collapsed);
      }
   });

   $('.forabg').each(function(i) {
      $(this).data('cindex', '' + i);

      $(btn_collapse)
         .clone()
         .attr('id', 'forabg' + i)
         .appendTo($(this).find('.header'));

      if ($.inArray('' + i, collapsed) > -1) {
         $(this).toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
      }
   });
});

function removeFromArray(item, array) {
   var i = array.indexOf(item);

   if (i > -1) {
      array = array.splice(i, 1);
   }
}

function createCookie(name, value, days) {
   var expires;

   if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toGMTString();
   } else {
      expires = "";
   }
   document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
   var nameEQ = encodeURIComponent(name) + "=";
   var ca = document.cookie.split(';');
   for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
   }
   return null;
}
//]]>
</script>

et le template topics_list_box :

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

      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}()
      {
         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 -->

<center><div class="forumbg announcement"><listedessujets></listedessujets>
      <ul class="topiclist topics">
         <li class="header">
            
         </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>
</div></center>
      <div class="forumbg">
      <ul class="topiclist topics">
         <li class="header">
            <dl class="icon">
               <!--<dd class="dterm">-->
               <dd class="dterm">
                  <!-- 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>
               
            </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 -->
               <div class="topic-title-container">
                  {topics_list_box.row.NEWEST_POST_IMG}
                  {topics_list_box.row.PARTICIPATE_POST_IMG}
                  {topics_list_box.row.TOPIC_TYPE}
                  <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 -->
                  <span class="topic-description">
                     {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
               <!-- END switch_description -->
               <span class="topic-author">
                   {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
               </span>
               {topics_list_box.row.GOTO_PAGE_NEW}
               <!-- BEGIN nav_tree -->
                  {topics_list_box.row.TOPIC_NAV_TREE_NEW}
               <!-- END nav_tree -->
            </dd>
            <div class="vuesetrep"> {topics_list_box.row.REPLIES} {L_REPLIES} {topics_list_box.row.VIEWS} {L_VIEWS} </div>

            <dd class="lastpost">
               <!-- BEGIN avatar -->
                  <span class="lastpost-avatar2">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
               <!-- END avatar -->

               <span><lastpostsujets>
                  {topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn> {topics_list_box.row.LAST_POST_IMG}<br />{topics_list_box.row.LAST_POST_TIME}
</lastpostsujets></span>
            </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>
</div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Sur son codage, il n'y a pas ces décalages mais sur le mien si :/
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 7 Avr 2021 - 19:37

Je reviens toujours aux catégories Pizi et je n'en vois aucune sur le forum .

Sur ce forum:
https://easy-rabbit.forumactif.com/

La compression est positionnée sur complet il me semble est le codage est différent.



Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Mer 7 Avr 2021 - 20:34

Entre les deux forums c’est exactement la même organisation entre les catégories et les forums. De plus le choix de structure et hiérarchie est identique (sur Moyen)...
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 8 Avr 2021 - 6:35

Coucou Pizi,
ben franchement je sèche car je ne vois pas ce qui pourrait engendrer
ce dysfonctionnement.
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Jeu 8 Avr 2021 - 10:49

Bonjour Phil,

Merci pour ta réponse.
Je vais tenter de remettre le même code pour voir le comportement du forum, si ça ne viendrait pas d'un positionnement mal fait peut-être.

Je viens te redire si ça fonctionne ?

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 8 Avr 2021 - 10:52

Regarde si il n’y a pas de JavaScript à tout hasard !!

Pizi aime ce message

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Jeu 8 Avr 2021 - 16:05

Je n'en ai pas l'impression.
J'ai essayé son code et sur le forum test, j'ai toujours le décalage. Moins prononcé certes mais toujours.
L'avantage c'est que du coup, ce décalage il est le même que ce soit sur l'index que dans le forum...

Mais ce qui me dérange dans son code c'est toutes ces positions relatives partout.
On est bien d'accord qu'on met un position relative que lorsque l'on veut créer un encrage pour ensuite mettre un bloc en absolute ? Ou c'est moi qui n'ai pas compris les positionnements ?

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 8 Avr 2021 - 19:03

Alors je reprend tout depuis le début:

Tu as modifié tes templates depuis ?

La catégorie vie du forum sur l'index:
https://worldofpizi.forumactif.com/

Puis seule:
https://worldofpizi.forumactif.com/c1-category

Sur le forum test, on ne voit pas la catégorie sur le fil d'Ariane:

[MODERNBB] Décalage partie "derniers messages" catégories Pizite10


Alors que l'officiel:
[MODERNBB] Décalage partie "derniers messages" catégories Piziof10

Pizi aime ce message

Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Ven 9 Avr 2021 - 11:38

Oui j'ai utilisé le template et le code de l'officiel pour essayer de me débloquer sur le forum test.

Voici le code du template des catégories (le seul que j'ai modifié) de l'original :

Code:
<ul class="linklist top">
    <!-- BEGIN switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
    </li>
    <li>
        <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
    </li>
    <!-- END switch_user_logged_in -->
    <li>
        <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
    </li>
    <!-- BEGIN switch_user_logged_in -->
        <li class="rightside">
            <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
        </li>
    <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
    <!-- BEGIN tablehead -->
        <div class="forabg">
            <ul class="topiclist">
                <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
            </ul>
                  <ul class="topiclist forums">
    <!-- END tablehead -->

    <!-- BEGIN forumrow -->
                <li class="row">
                    <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                        <dd class="dterm">
                            <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                                <h{catrow.forumrow.LEVEL} class="hierarchy">
                                                                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                                </h{catrow.forumrow.LEVEL}>
                                                         
                                                          <forumdesc>{catrow.forumrow.FORUM_DESC}</forumdesc>

                                <!-- BEGIN switch_moderators_links -->
                                    {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                                <!-- END switch_moderators_links -->
                                                          <sousfo>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</sousfo>
                                <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
                            </div>
                        </dd>
                                         
                        <chiffres> {catrow.forumrow.TOPICS} {L_TOPICS}&nbsp;
                                                  {catrow.forumrow.POSTS} {L_POSTS}</chiffres>
                                         
                        <div class="lastpostcat">
                            <!-- BEGIN ads -->
                            <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                  {catrow.forumrow.ads.LOCATION}
                                </span>
                            </span>
                            <!-- END ads -->
                           
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

                            <span class="infoslastpost">
                            <!-- BEGIN switch_topic_title -->
                            <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                            <!-- END switch_topic_title -->
                            {catrow.forumrow.USER_LAST_POST}
                            </span>
                        </div>
                    </dl>
                </li>
    <!-- END forumrow -->

    <!-- BEGIN tablefoot -->
                </ul>
        </div>
    <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
    <li>
        <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
    </li>
    <li>
        <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
    </li>
    <li class="last">
        <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
    </li>
    <!-- BEGIN switch_delete_cookies -->
        <li class="rightside">
            <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
        </li>
    <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
    var btn_collapse = $('<div></div>', {
        class: 'btn-collapse'
    });

    var btn_collapse_show = $('<i></i>', {
        class: 'ion-android-add-circle hidden',
        'data-tooltip': '{L_EXPEND_CAT}'
    }).appendTo(btn_collapse);

    var btn_collapse_hide = $('<i></i>', {
        class: 'ion-android-remove-circle',
        'data-tooltip': '{L_HIDE_CAT}'
    }).appendTo(btn_collapse);

    var collapsed = [];

    if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
        collapsed = readCookie('collapsed').split(',');
    }

    $(document).on('click', '.btn-collapse', function() {
        $(this).children('.ion-android-add-circle').toggleClass('hidden');
        $(this).children('.ion-android-remove-circle').toggleClass('hidden');
        $(this).parents('.forabg').toggleClass('hidden');

        if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
        }

        if (!$(this).parents('.forabg').hasClass('hidden')) {
            removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

            createCookie('collapsed', collapsed);
        } else {
            collapsed.push('' + $(this).parents('.forabg').data('cindex'));

            createCookie('collapsed', collapsed);
        }
    });

    $('.forabg').each(function(i) {
        $(this).data('cindex', '' + i);

        $(btn_collapse)
            .clone()
            .attr('id', 'forabg' + i)
            .appendTo($(this).find('.header'));

        if ($.inArray('' + i, collapsed) > -1) {
            $(this).toggleClass('hidden');
            $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
            $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
        }
    });
});

function removeFromArray(item, array) {
    var i = array.indexOf(item);

    if (i > -1) {
        array = array.splice(i, 1);
    }
}

function createCookie(name, value, days) {
    var expires;

    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toGMTString();
    } else {
        expires = "";
    }
    document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}
//]]>
</script>

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 9 Avr 2021 - 19:01

Ben écoute,
je n'arrive à rien car je ne reproduis ce décalage sur mon fofo de test.

Peut être relancer celle qui a codée ce forum:
https://easy-rabbit.forumactif.com/
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 10 Avr 2021 - 6:52

Coucou Pizi,

je vois que tu as bien avancè car tu n'as plus de décalage impeccable .




Alors j'ai revu toutes les class afin qu'elles soient explicites ainsi que des placement concrets avec des dimensions en relation avec le conteneur.

Sauvegardes ta css et le template Pizi clin oeil .

Ta css commentée hors body etc etc:
Code:

/* on repositionne le lien des categories sur le fil d ariane*/
.sub-header-path span h2{font-size: 1.3rem;display: inline;}
/*on supprime le lien de l image figurant dans le PA*/*
.sub-header-path span img{display:none;}
/*on supprime sur l entete des  categories le titre*/
.table-title h2,.hierarchy img{display:none;}
ul.topiclist li, ul.topiclist.bg_none, li.row:hover, li.row {background: #bfa49f !important;}
a.forumtitle {
    color: #274377 !important;
    display: block;
    font-size: 18px;
    width: 59%;
    height: 30px;
    position: absolute;
    text-transform: uppercase;
    right: 227px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 2.3;
    font-family: mr-darcy, sans-serif;
    font-weight: 500;
    font-style: normal;
    text-align: center;
    text-shadow: 1px 1px 0px #7775755e;
}
/*LA PARTIE GAUCHE*/
dl.icon dd.dterm
{
width: 52%;  
}
/*LA PARTIE DROITE*/
.bloc_droit{float: right;width: 35%;  height: 130px;}
/*LA DIV RECEVANT L AVATAR*/
.lastpost_avatar
{
position: absolute;
margin-top: 15px;
width: 40px;
height: 64px;
border: 2px solid #a25349;
border-radius: 10px;
}
/* L AVATAR*/
.lastpost_avatar img
{
position: absolute;
top: -2px;
left: -2px;
width:40px;
height: 64px;
}
/*LA PARTIE MESSAGE A DROITE*/
.lastpost_message
{
display: inline-block;
position: relative;
width: 180px;
left: 20px;
text-align: left;
font-family: rooney-sans, sans-serif;
font-style: normal;
font-weight: 500;
text-transform: uppercase;
border-left: double #297a3f;
padding-left: 10px;
height: 80px;
top: 10px;
}
.lastpost_message a{font-weight: bold !important;}
/*LA PARTIE OU SONT INSCRIT L SUJTS ET MESSAGES*/
.lastpost_chiffre
{
position: relative;
text-transform: uppercase;
color: #096b69;
text-align: center;
font-size: 12px;
left: 15px;
top: 15px;
width: 90%;
font-family: rooney-sans, sans-serif;
font-style: normal;
font-weight: 700;
z-index: 1;
letter-spacing: 1px;
text-shadow: 1px 1px 0px #9c9a9769;
height: 30px;
}
/*LES PARTIES Sujet ou message*/
.lastpost_chiffre .titre{margin-left:5px;}



    #wrap
    {
      background-color: #D4B9AF;
      width: 948px;
    }


    .forabg
    {
      box-shadow: none;
      width: 750px;
      overflow: hidden;
    }
    ul.forums li.row dl {
        height: 140px;
    }
    dl.icon {
        height: 73px;
        min-height: 35px;
        overflow: hidden;
    }
    .table-title img
    {
      height: 200px;
      margin-bottom: -17px;
    }
    a.forumtitle, a.forumtitle:link, a.forumtitle:visited {
        position: relative;
        left: 20%;
        color: #d7d1be !important;
        text-shadow: 2px 2px 1px #974e4aa1;
        text-align: center;
        font-size: 22px;
        transition: all 0.2s;
        white-space: nowrap;
        font-family: 'Fraunces', serif;
    }
    a.forumtitle:hover {
        color: #974e4a !important;
        text-shadow: 2px 2px 1px #d7d1be;
        transition: 1.5s all;
        cursor: pointer;
    }
    .desc
    {
      width: 390px;
      height: 53px;
      overflow: auto;
      text-align: justify;
      color: #364440;
      margin-top: 5px;
      margin-bottom: 10px;
 
    }
    .desc b, .desc strong {
        color: #915f35 !important;
        text-shadow: 1px 1px #d7cab8;
        text-transform: uppercase;
        font-family: 'Kreon', serif;
        letter-spacing: 1px;
    }
    .subfo {
        width: 442px !important;
        height: 21px;
        background: #d7d4cb;
        box-shadow: inset 0px 0px 8px #d6a996;
        border-radius: 10px;
        overflow: auto;
    position: relative;
padding: 2px 5px 2px 5px;
top: -18px;
left: 30px;
    }
    .subfo a::before {
        content: " ⬪ ";
        font-size: 10px
    }
    .subfo a
    {
      color: #a2513f !important;
      font-size: 11px;
      text-transform: uppercase;
      text-shadow: 1px 1px 0px #d6d3d0;
    }
  

/*CORRECTION SUR LE CSS DE BASE*/
.lastpost-avatar:after{background:none!important;border:none!important;box-shadow:none!important;border-radius:0px!important;content:""!important;}
  
  


Le template:
Code:

        <ul class="linklist top">
        <!-- BEGIN switch_user_logged_in -->
        <li>
            <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
        </li>
        <li>
            <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
        </li>
        <!-- END switch_user_logged_in -->
        <li>
            <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
        </li>
        <!-- BEGIN switch_user_logged_in -->
            <li class="rightside">
                <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
            </li>
        <!-- END switch_user_logged_in -->
    </ul>

    <!-- BEGIN catrow -->
        <!-- BEGIN tablehead -->
            <center><div class="forabg">
                              <center><dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd></center>
                <ul class="topiclist forums">
        <!-- END tablehead -->

        <!-- BEGIN forumrow -->
                    <li class="row">
                        <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                            <dd class="dterm">
                                <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                                    <h{catrow.forumrow.LEVEL} class="hierarchy">
                                    <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                                    </h{catrow.forumrow.LEVEL}>
                                                              <div class="desc">{catrow.forumrow.FORUM_DESC}</div>

                                    <!-- BEGIN switch_moderators_links -->
                                        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                                    <!-- END switch_moderators_links -->
                            
                                                      </div>
                                              </dd>
<div class="bloc_droit">                          
<div class="lastpost_avatar">
  <!-- BEGIN ads -->
                                <span class="AD_LastPA">
                                    <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                    <span class="AD_LastInfos">
                                        <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                        {catrow.forumrow.ads.DATE}<br />
                                        {catrow.forumrow.ads.LOCATION}
                                    </span>
                                </span>
                                <!-- END ads -->
                              
                                <!-- BEGIN avatar -->
                                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                                <!-- END avatar -->  
  </div>                              
<div class="lastpost_message">
 <!-- BEGIN switch_topic_title -->
<a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
{catrow.forumrow.USER_LAST_POST}
 </div>                          
<div class="lastpost_chiffre">
  <span class="sujets"><span class="number">{catrow.forumrow.TOPICS}</span><span class="titre"> {L_TOPICS}</span>  </span>
 <span style="font-weight: normal; color: #8d434a;">|</span> &nbsp;
    <span class="messages"><span class="number">{catrow.forumrow.POSTS}</span><span class="titre"> {L_POSTS}</span>  </span>
<script>$(function(){$('.sujets').each(function(){var a=$(this).find('.number').text();if(a<2){$(this).find('.titre').text('Sujet');}if(a>1){$(this).find('.titre').text('Sujets');}});$('.messages').each(function(){var a=$(this).find('.number').text();if(a<2){$(this).find('.titre').text('Message');}if(a>1){$(this).find('.titre').text('Messages');}});});</script>  
</div>
</div>
          <div class="subfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                                                                      <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
                                                              <script type="text/javascript">$('.subfo').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>
                        </dl>
                    </li>
        <!-- END forumrow -->

        <!-- BEGIN tablefoot -->
                    </ul>
                      </div></center>
        <!-- END tablefoot -->
    <!-- END catrow -->

    <!-- BEGIN switch_on_index -->
    <ul class="linklist bottom">
        <li>
            <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
        </li>
        <li>
            <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
        </li>
        <li class="last">
            <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
        </li>
        <!-- BEGIN switch_delete_cookies -->
            <li class="rightside">
                <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
            </li>
        <!-- END switch_delete_cookies -->
    </ul>
    <!-- END switch_on_index -->

    <script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        var btn_collapse = $('<div></div>', {
            class: 'btn-collapse'
        });

        var btn_collapse_show = $('<i></i>', {
            class: 'ion-android-add-circle hidden',
            'data-tooltip': '{L_EXPEND_CAT}'
        }).appendTo(btn_collapse);

        var btn_collapse_hide = $('<i></i>', {
            class: 'ion-android-remove-circle',
            'data-tooltip': '{L_HIDE_CAT}'
        }).appendTo(btn_collapse);

        var collapsed = [];

        if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
            collapsed = readCookie('collapsed').split(',');
        }

        $(document).on('click', '.btn-collapse', function() {
            $(this).children('.ion-android-add-circle').toggleClass('hidden');
            $(this).children('.ion-android-remove-circle').toggleClass('hidden');
            $(this).parents('.forabg').toggleClass('hidden');

            if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
                collapsed = readCookie('collapsed').split(',');
            }

            if (!$(this).parents('.forabg').hasClass('hidden')) {
                removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

                createCookie('collapsed', collapsed);
            } else {
                collapsed.push('' + $(this).parents('.forabg').data('cindex'));

                createCookie('collapsed', collapsed);
            }
        });

        $('.forabg').each(function(i) {
            $(this).data('cindex', '' + i);

            $(btn_collapse)
                .clone()
                .attr('id', 'forabg' + i)
                .appendTo($(this).find('.header'));

            if ($.inArray('' + i, collapsed) > -1) {
                $(this).toggleClass('hidden');
                $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
                $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
            }
        });
    });

    function removeFromArray(item, array) {
        var i = array.indexOf(item);

        if (i > -1) {
            array = array.splice(i, 1);
        }
    }

    function createCookie(name, value, days) {
        var expires;

        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }
        document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
    }

    function readCookie(name) {
        var nameEQ = encodeURIComponent(name) + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) === ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
        }
        return null;
    }
    //]]>
    </script>




Je t'ai ajouté des spans avec des class sur les sujets et messages et un script qui va mettre au singulier le cas échéant les textes hinhin .


Tu peux désormais déposer ceci dans la description de la catégorie:
Code:
<h2>Le coin des membres</h2><img src="https://nsa40.casimages.com/img/2021/02/25/21022502204286800.png" />


De plus, tu vas retrouver le lien de la catégorie sans image et bien positionné sur le fil d'Ariane.

Voir sur mo fofo de tests:

https://m14phpbb2.forumactif.org/
Pizi
Pizi
http://esteria.forumactif.com

MessagePizi Sam 10 Avr 2021 - 12:51

Bonjour Phil,

J'ai fait quelques ajustements dans le code que tu m'as fourni et ça marche !

Merci beaucoup <3
Je n'ai bougé que le css du coup :

Code:
/********************************************
        CATÉGORIES
*********************************************/
    /* on repositionne le lien des categories sur le fil d ariane*/
    .sub-header-path span h2{font-size: 1.3rem;display: inline;}
    /*on supprime le lien de l image figurant dans le PA*/*
    .sub-header-path span img{display:none;}
    /*on supprime sur l entete des  categories le titre*/
    .table-title h2,.hierarchy img{display:none;}
    ul.topiclist li, ul.topiclist.bg_none, li.row:hover, li.row {background: #bfa49f !important;}
    a.forumtitle {
        color: #d7d1be !important;
        display: block;
        font-size: 18px;
        width: 59%;
        height: 30px;
        margin-left: -20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-family: 'Fraunces', serif;
        text-shadow: 1px 1px 0px #974e4aa1;
    }
    /*LA PARTIE GAUCHE*/
    dl.icon dd.dterm
    {
    width: 52%; 
    }
    /*LA PARTIE DROITE*/
    .bloc_droit{float: right;width: 35%;  height: 130px;}
    /*LA DIV RECEVANT L AVATAR*/
    .lastpost_avatar
    {
    position: absolute;
    margin-top: 25px;
    width: 40px;
    height: 64px;
    border: 2px solid #a25349;
    border-radius: 10px;
    overflow: hidden;
    }
    /* L AVATAR*/
    .lastpost_avatar img
    {
    position: absolute;
    top: -1.5px;
    left: -1.9px;
    width:40px;
    height: 64px;
    border-radius: 0 !important;
    }
    /*LA PARTIE MESSAGE A DROITE*/
    .lastpost_message
    {
    display: inline-block;
    position: relative;
    width: 180px;
    left: 20px;
    text-align: left;
    font-family: rooney-sans, sans-serif;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
    border-left: double #d7cab8;
    padding-left: 10px;
    height: 80px;
    top: 25px;
    }
    .lastpost_message a{font-weight: bold !important;}
    /*LA PARTIE OU SONT INSCRIT L SUJTS ET MESSAGES*/
    .lastpost_chiffre
    {
    position: relative;
    text-transform: uppercase;
    color: #915f35;
    text-align: center;
    font-size: 12px;
    left: 5px;
    top: 30px;
    width: 90%;
    font-family: 'Kreon', serif;
    font-style: normal;
    font-weight: 700;
    z-index: 1;
    height: 21px;
    border-top: 1px #d7cab885 solid;
    border-bottom: 1px #d7cab885 solid;
  line-height: 21px;
    }
    /*LES PARTIES Sujet ou message*/
    .lastpost_chiffre .titre{margin-left:5px;}



        #wrap
        {
          background-color: #D4B9AF;
          width: 948px;
        }


        .forabg
        {
          box-shadow: none;
          width: 750px;
          overflow: hidden;
        }
        ul.forums li.row dl {
            height: 140px;
        }
        dl.icon {
            height: 73px;
            min-height: 35px;
            overflow: hidden;
        }
        .table-title img
        {
          height: 200px;
          margin-bottom: -17px;
        }
        a.forumtitle, a.forumtitle:link, a.forumtitle:visited {
            position: relative;
            left: 20%;
            color: #d7d1be !important;
            text-shadow: 2px 2px 1px #974e4aa1;
            text-align: center;
            font-size: 22px;
            transition: all 0.2s;
            white-space: nowrap;
            font-family: 'Fraunces', serif;
        }
        a.forumtitle:hover {
            color: #974e4a !important;
            text-shadow: 2px 2px 1px #d7d1be;
            transition: 1.5s all;
            cursor: pointer;
        }
        .desc
        {
          width: 390px;
          height: 53px;
          overflow: auto;
          text-align: justify;
          color: #364440;
          margin-top: 5px;
          margin-bottom: 10px;
    
        }
        .desc b, .desc strong {
            color: #915f35 !important;
            text-shadow: 1px 1px #d7cab8;
            text-transform: uppercase;
            font-family: 'Kreon', serif;
            letter-spacing: 1px;
        }
        .subfo {
            width: 442px !important;
            height: 21px;
            background: #d7d4cb;
            box-shadow: inset 0px 0px 8px #d6a996;
            border-radius: 10px;
            overflow: auto;
        position: relative;
    padding: 2px 5px 2px 5px;
    top: -18px;
    left: 30px;
        }
        .subfo a::before {
            content: " ⬪ ";
            font-size: 10px
        }
        .subfo a
        {
          color: #a2513f !important;
          font-size: 11px;
          text-transform: uppercase;
          text-shadow: 1px 1px 0px #d6d3d0;
        }
     

    /*CORRECTION SUR LE CSS DE BASE*/
    .lastpost-avatar:after{background:none!important;border:none!important;box-shadow:none!important;border-radius:0px!important;content:""!important;}

Du coup, qu'est-ce qui provoquait le décalage ainsi ? Comment as-tu fait pour corriger le souci ?
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Sam 10 Avr 2021 - 15:33

Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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