FORUM TEST
Event du moment C’est des rumeurs qui ont commencé à se propager parmi les commerçants et habitants d’Annapolis : les élus auraient signé leur accord pour annexer les espaces de Timber Creeks et fermer leurs accès à Chesapeake. On raconte que c’est le country club qui cherche à privatiser l’accès à la baie ou encore qu’un Seaworld y verra le jour. On murmure beaucoup, mais finalement que sait-on vraiment ?

-38%
Le deal à ne pas rater :
Ecran PC gaming 23,8″ – ACER KG241Y P3bip à 99,99€
99.99 € 159.99 €
Voir le deal


 :: Votre 1ère catégorie :: Sauvegardes CSS

Version 2: Gris/Vert/Rose

Version 2: Gris/Vert/Rose 
Meuf Géniale

Meuf Géniale
Admin
RP
Messages : 16
Date d'inscription : 10/08/2024
Hors RP

https://st-test.forumactif.com
CSS partie 1 - 1858

Code:
/*** ROOT
 *** Tutoriel : geniuspandalab.tumblr.com/post/634694343906689024/cssroot ***/

/* VARIABLE DU MODE DE BASE (ici clair) */
:root {
    --header: url('https://images2.imgbox.com/e3/17/cWdx5I3b_o.png');

  /* tailles textes */
    --mini-size: 10px; 
    --little-size: 0.75em; /* 12px */
    --normal-size: 0.8125em; /* 13px */
    --medium-size: 1em;
    --title-size: 1.375em; /* 22px */

  /* polices utilisées */
    --texte: "Raleway", sans-serif; /*police de base */
    --titre: "Dosis", sans-serif; /*Utilisé pour titre de fiche */
    --soustitre: 'Josefin sans'; /*Utilisé pour: sous-titre, t1, t2, etc */
    --fontAjout: 'Inclusive Sans', sans-serif; /*Utilisé pour: sous-forums */
 
  /* couleurs des fonds */
    --neutral: #FFFFFF; /*Blanc*/
    --fondclair: #fcfcfc; /*superclair*/
    --neutralDark: #efecea; /*beige*/
    --neutralDarker: #c1b7b4;/*Gris/beige*/
    --hyperlight: #cbcaca;
    --gradient: linear-gradient(-90deg, rgb(99, 131, 138), rgb(253, 223, 223));
   
    --linear-gradient(to right, #77177c 0%, #22215a 100%);

    --contrast: #171938;
    --contrastLight: #4a5a4f;
    --contrastLighter: #c3c8f3;

    /* couleurs des textes */
    --textColor: #6a747c;/*texte de base*/
    --textColorAccent: #F6F2F1;/*base1*/
    --color1: #C5C3C1;/*gris*/
    --color2: #d6c9c4;/*beige*/
    --color3: #63838A;/*vert d'eau*/
    --color4: linear-gradient(to bottom, #f6f2f1 0%, #C5C3C1 100%);/*background du forum*/

    --border: 1px solid #C5C3C1;

    --shadowBox: 0 0 20px var(--neutralDark);}

 
/* VARIABLES DU MODE INVERSE (ici sombre) */
 [data-color-scheme="dark"] {
    --header: url('https://images2.imgbox.com/84/cd/CBKMxFuz_o.png');
 
    --neutral: #BBB0AD;/*fond des boites / taupe clair*/
    --neutralDark: #212121; /*gris foncé*/
    --neutralDarker: #795854; /*bordeau*/
    --contrast: #e5e5f0; /*très clair*/
    --contrastLight: #4a5a4f; /*gris clair*/
    --contrastLighter: #314B3B; /*vert sapin*/
    --hyperlight: #8E7573;/*contour du forum*/
    --color4: linear-gradient(to bottom, #9e8d8b 0%, #875b57 100%);/*background du forum*/
    --gradient: linear-gradient(-90deg, rgb(161, 109, 106), rgb(49, 75, 59));
 
    /* couleurs des textes */
    --textColor: #b5a6a6;/*texte de base*/
    --textColorAccent: #333232;/*gris moins foncé*/
    --color1: #4A5A4F;/*vert*/
    --color2: #BBB0AD;/*rose*/
    --color3: #9A6560;/*bordeau foncé*/
    --border: 1px solid #9A6560;
    --shadowBox: 0 0 20px var(--neutralDark);}

 @media (prefers-color-scheme: dark) {
  [data-color-scheme=dark] {
    --header: url('https://images2.imgbox.com/84/cd/CBKMxFuz_o.png');
 
    --neutral: #BBB0AD;
    --neutralDark: #212121;
    --neutralDarker: #795854;
    --contrast: #e5e5f0;
    --contrastLight: #4a5a4f;
    --contrastLighter: #40485e;
    --hyperlight: #8E7573;
    --textColor: #b5a6a6;
    --textColorAccent: #333232;
    --gradient: linear-gradient(-90deg, rgb(161, 109, 106), rgb(49, 75, 59));
    --border: 1px solid #9A6560;

    --shadowBox: 0 0 20px var(--neutralDark);}}

/* S'applique à TOUS les éléments du forum*/
* {
    box-sizing: border-box;} /*évite que les éléments soient agrandis par le padding*/

/*** -------TOUTES LES PAGES -------- ***/

/* FOND DU FORUM ---*/
body {
  background: var(--color4);
    font-family: var(--texte);
    font-size: var(--normal-size);
    color: var(--textColor);
    margin: 0 !important;
}

/* SCROLLBAR --- */
::-webkit-scrollbar {
  background-color: var(--neutralDark);
  height: 3px;
  width: 5px;
}
::-webkit-scrollbar-track-piece {
  background-color: var(--neutralDark);
}
::-webkit-scrollbar-thumb {
  height: 3px;
  width: 5px;
  border-radius: 5px;
  background: var(--color3);
}

/* STRUCTURE PRINCIPALE ---*/
.main_forum {
    width: 940px;
    /*largeur forum*/
    margin: 20px auto;
    padding: 20px;
    background: var(--hyperlight);
    border: 3px solid var(--neutralDarker);
    border-radius: 1px;
}

/* BANNIERE ---*/
/* Mettre la bannière en fond permet de la changer selon le thème clair ou sombre */
#header {
    background-image: var(--header);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 900px;
    height: 450px;
    display: block;
    margin-top: 5px
}

/* Conteneur de toutes les sous-sections
 * comme les encadrés d'options, de rappel, etc... */
.panel {
    background: var(--textColorAccent);
    border: var(--neutralDark);
    border-radius: 5px;
    padding: 10px;
    margin: 25px 0;
}

.sidebar {
    position: fixed;
    background-color: #TRANSP;
    inset: 0;
    width: max-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 10px;
    z-index: 999;
}

/* Conteneur de l'ascenseur
 * Sert essentiellement à définir où le placer dans la page */
 .sidebar_bottom {
z-index: 999;
display: flex;
gap: 10px;
position: fixed;
top: 0;
height: 45px;
align-items: center;
align-content: center;
  left: 70px;
}
 .sidebar_top{
z-index: 999;
display: flex;
gap: 10px;
position: fixed;
top: 0;
height: 45px;
align-items: center;
align-content: center;
  left:20px;
}

/* Lien de renvoi haut/bas */
.sidebar_bottom > a {
    margin-top: -10px;
    padding: 5px 8px;
    color: var(--color3);
    background: var(--textColorAccent);
    border-radius: 5px;
    text-align: center;
}
.sidebar_top > a {
    margin-top: -10px;
    padding: 5px 8px;
    color: var(--color3);
    background: var(--textColorAccent);
    border-radius: 5px;
    text-align: center;
}

/* BOUTON CHANGEMENT DE THEME ---*/
@media (prefers-color-scheme: dark) {.color-scheme-toggle .dark{display: none}}
@media (prefers-color-scheme: light) {.color-scheme-toggle .light{display: none}}
.color-scheme-toggle,
[data-color-scheme="light"] .color-scheme-toggle .dark,
[data-color-scheme="dark"] .color-scheme-toggle .light {display: block;width: 100%;}
[data-color-scheme="dark"] .color-scheme-toggle .dark,
[data-color-scheme="light"] .color-scheme-toggle .light {display: none}

.color-scheme-toggle {
background-color: transparent;
  margin-top: -5px;
padding: 5px;
font-size: 35px;
text-align: center;
border-radius: 5px;
color: var(--neutral);
}

.color-scheme-toggle:hover {
    color: var(--color3);
}

/*** -------------- LIENS ET TEXTE -------------------- ***/

/* LIENS DU FORUM --- */
a {
font-weight: 600;
  font-family: var--(fontAjout);
  text-decoration: none;
  color: var(--neutralDarker);
}

/*liens au survol*/
a:hover {
    color: var(--color1);}

/* Emoji mis par défaut de FA * Les réduire les rend moins horribles à voir */
.emojione {
    width: 19px !important}

/* TITRES DES PAGES --- ***/

/* Utilisé pour des titres de pages */
h1,
h1.page-title {
  background: var(--neutralDark);
  border-radius: 3px;
  padding: 7px;
  font-size: var(--title-size);
  color: var(--textColor);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  font-family: var(--titre);
}

/* Utilisé pour des titres de sujets, blogs... */
h2,
.h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

/* Utilisé pour des titres de sous-sections, petit encadré, ...*/
h3,
.h3 {
  font-family: var(--fontAjout);
  text-transform: uppercase;
  font-size: var(--little-size);
padding: 2px 3px;
  border-radius:2px;
  font-weight: 400;
}

/*** --------------------------------------- ***/
/*** BOUTONS D'INTERACTION ET BARRE DE TEXTE ***/

/* BARRE DE TEXTE ---*/
input[type="text"],
input[type="password"],
input.inputbox {
    border: none;
    border-radius: 5px;
    background: var(--neutralDark);
    font-size: var(--little-size);
    color: var(--textColor);
    padding: 2px 6px;
}

/* BOUTONS D'INTERACTION --- *
 * Envoyer, prévisualiser, sauvegarder, aller,... */
input[type="submit"],
input[type="button"],
input[type="hidden"],
input[type="reset"] {
    font-size: var(--normal-size);
    padding: 2px 8px !important;
    border-radius: 5px;
    background: var(--neutralDark);
    color: var(--textColor);
    font-weight: 600;
    border: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="hidden"]:hover,
input[type="reset"]:hover {
    color: var(--color3);
}

.submit-buttons {text-align: center;}
.quickmod {margin-bottom: 20px;}

/* MENUS DEROULANTS --- */
select {
    background: transparent;
    border: var(--border);
    border-radius: 5px;
    font-size: var(--normal-size);
    padding: 1px 4px;
    color: var(--color1);
}

option {
    background: var(--neutral);
    border: 1px solid var(--border);
}

/* Editeur de texte */
.sceditor-container {
    background: var(--textColorAccent)!important;
    border: 1px solid var(--neutralDark)!important;
}

/* Barre d'outils de l'éditeur de texte*/
div.sceditor-toolbar {
    background: var(--textColorAccent)!important;
    border: 1px solid var(--neutralDark)!important;
}

/* Conteneur des groupes d'outils */
div.sceditor-group {
    background: var(--textColorAccent)!important;
  border: 1px solid var(--neutralDark)!important;
}

/* Bouton d'un outil */
a.sceditor-button {
    height: 26px !important;
    /*ne pas retirer*/
    width: 26px !important;
    /*ne pas retirer*/}

/* Conteneur de la zone de texte */
.sceditor-container iframe,
.sceditor-container textarea {
    background: var(--textColorAccent)!important;
    border: 1px solid var(--neutralDark)!important;
    /*ne pas supprimer*/
    width: 100% !important;
    margin: 0 !important;
    padding: 5px !important;
    /*ne pas supprimer*/
    min-height: 200px !important;
}

/*Boîte Smiley*/
body#sce_smilies_body {
    background: transparent!important;
}

/* Autre champs de texte */
textarea {
    background: var(--textColorAccent)!important;
    border: 1px solid var(--neutralDark)!important;
    color: var(--textColor)!important;
    font-family: var(--texte);
}

/*** ---------PAGINATIONS -------------------- ***/

/*lien unique vers les pages numérotées*/
.pagination span a {
    font-size: var(--little-size);
font-style:italic;
letter-spacing: 1px;
font-weight: 700;
font-family: var(--titre);
}

/*survol des liens uniques des pages*/
.pagination span a:hover {font-weight: 600}

/*lien actif : page sur laquelle vous vous trouvez */
.pagination span strong {
font-size: var(--little-size);
font-style:italic;
letter-spacing: 1px;
font-weight: 700;
font-family: var(--titre);
}

/*suppression de l'image-lien "aller à la page suivante" */
.page-topic span a:last-child,
.pag-img {
    display: none;
}


/*** ------------------------------- ***/
/*** ELEMENTS ESTHETIQUES ---------- ***/

/* Contenur général qui sert généralement de fond et/ou de contour*/
.container {
    background: var(--textColorAccent);
    padding: 10px;
    border-radius: 5px;
}

/* Barre de séparation */
.separator {
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid var(--neutralDark);
    clear: both;
    height: 1px;
    width: 100%;
}

/* Conteneur moins large (les historiques des messages essentiellement) */
.wrapped {
    width: 80%;
    margin: 10px auto;
    clear: both;
}

/* Image/avatar réduit */
.mini_img img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    margin-right: 10px;
    background: var(--neutralDark);
}


/* Permet d'aligner un élément à droite ou à gauche */
.right {
    float: right
}

.left {
    float: left
}

.clear {
    clear: both
}

/* Barre de gestion
 * Contient des boutons ou des liens spéciaux */
.links_bar {
    padding: 10px;
    border-radius: 5px;
    margin: 25px 0;
    clear: both;
}

/* supprime si vide */
.links_bar:empty {
    display: none
}

/* Lien spécial mis en avant */
.specials_links a,
a.specials_links {
    background: var(--neutralDark);
    padding: 2px 6px;
    border-radius: 5px;
}

/* Suppression des liens vides */
.specials_links a:empty,
a.specials_links:empty {
    display: none
}

/*** ---------------TOOLBAR ----------------------- ***/

/* Toute la toolbar */
#fa_toolbar {
    font-size: var(--normal-size);
    font-family: var(--texte);
}

/* Supression de la barre de recherche, des boutons sociaux et des flèches */
#fa_search,
#fa_share,
#fa_hide {
    display: none
}

/* Logo Forumactif :  */
#fa_left {
    display: none
}

/* Conteneur du lien de bienvenue et notification */
#fa_right {
    position: relative;
    margin-top: 5px;
    margin-right: 5px;
    border-radius: 5px;
    height: 30px;
    display: flex;
    align-items: center;
    padding: 5px;
}

/* LIENS DE LA TOOLBAR ---*/

/* Tous les liens : connexion, s'enregistrer, bienvenue (pseudo), notification*/
#fa_welcome,
#fa_notifications,
#fa_right a.rightHeaderLink[href*="/login"],
#fa_right a.rightHeaderLink[href*="/register"] {
    cursor: pointer;
  font-family: var(--texte);
text-transform: uppercase;
font-size: var(--little-size);
font-weight: 600;
padding: 2px 3px;
}

/* Lien "Connexion" */
#fa_right a.rightHeaderLink[href*="/login"] {}

/* Lien "S'enregistrer" */
#fa_right a.rightHeaderLink[href*="/register"] {}

/* Lien "Bienvenue (pseudo)" */
#fa_welcome {font-size: var(--normal-size);}

/* Lien "notification"*/
#fa_notifications {font-size: var(--normal-size);}

/* liens "bienvenue" et "notification" [AU CLIC] */
#fa_right.welcome #fa_menu #fa_welcome,
#fa_toolbar > #fa_right.notification > #fa_notifications {
    background: var(--hyperlight);
  font-family: var(--texte);
  text-transform: uppercase;
  font-size: var(--normal-size);
padding: 2px 3px;
  border-radius:2px;
  font-weight: 400;
}

/* MENU bienvenue [ET] liste des notifications */
ul#fa_menulist,
ul#notif_list {
    border: var(--border);
    background: var(--neutralDark);
    border-radius: 5px;
    right: 0;
    left: initial !important;
    top: 45px;
    z-index: 999;
    position: absolute;
    display: none;
}

/* MENU BIENVENUE ---*/
/* conteneur */
#fa_menulist {
    width: 350px;
}

/* Colonne gauche du menu de bienvenue avec avatar */
#fa_usermenu {
    float: left;
    padding: 15px;
    text-align: center;
    min-height: 250px
}

/* Image de l'avatar dans le menu de bienvenue */
#fa_usermenu img {
    object-fit: cover;
    object-position: center;
    width: 120px;
    height: 120px;
    display: block;
    margin-bottom: 10px;
}

/* Liens du menu de bienvenue */
#fa_menulist li {
    margin: 10px 0;
}

/* Séparateur du menu de bienvenue */
#fa_toolbar #fa_right .fa_separator {
    margin: 5px 0 5px 150px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}


/* LISTE DES NOTIFICATIONS ---*/
/* conteneur*/
#notif_list {
    width: 380px;
    padding: 5px;
    flex-direction: column-reverse;
}

/* Ligne d'une notification */
#notif_list li {
    position: relative;
    padding: 5px;
    padding-right: 20px;
    border-top: 1px solid var(--neutralDark);
}

#notif_list li:nth-last-child(2) {
    border-top: none
}


/* Notifications non lues */
#notif_list .unread {
    background: var(--neutralDark);
    font-weight: bold;
}
span#notif_unread{color:#ff0000;
  padding: 3px;
}

/* Bouton suppresion d'une notification */
#fa_toolbar #fa_right #notif_list li a.delete {
    position: absolute;
    top: 8px;
    right: 5px;
}

/* Croix du bouton suppression */
#fa_toolbar #fa_right #notif_list li a.delete:before {
    content: "\f12a";
    display: inline-block;
    font-family: "Ionicons";
    font-style: normal;
    font-weight: normal;
    color: #FF4F42;
}

/* Lien "voir toutes les notifications" */
#notif_list .see_all {
    background: var(--neutralDark);
    border-radius: 5px;
    margin-top: 5px;
    text-align: center;
    order: -1;
}

/* POPUP NOTIFICATION ---*/

/* Placement du pop-up de nouvelle notification */
#fa_toolbar #live_notif {
    position: absolute;
    top: 45px;
    right: 0px !important;
}

/* Stylisation du pop-up */
#fa_toolbar #live_notif .fa_notification {
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px;
}


/* AVATAR TOOLBAR ---*/
/* Conteneur de l'avatar toolbar */
.fa_avatar {
    position: absolute;
    top: -1px;
    left: -55px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
}

/* Image de l'avatar */
.fa_avatar img {
    object-fit: cover;
    object-position: center;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 5px;
background: var(--color3);
}


/*** ------------------------------- ***/
/*** SWITCHEROO - Par Monomer ------ ***/
/*** Gestionnaire de multicompte --- ***/

:root {
    --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}

/* BARRE SWITCHEROO --- */
/* BARRE --- */
.switcheroo {
    color: var(--color2);
    margin-top: 60px;
}

/* Positionnement des ronds */
.switcheroo__squircles {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 15px;
}

/* AFFICHAGE DES COMPTES ---*/

/* Rond */
.switcheroo__squircle {
    position: relative;
    display: grid;
    place-items: center;
    background: var(--textColorAccent);
    border: 3px solid var(--neutral);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    transition: border-radius 128ms var(--ease);
}

/* Rond au survol */
.switcheroo__squircle:hover {
    border-radius: 50%;
}

.switcheroo__squircle:hover img {
    border-radius: 50%;
    transition: all 0.5s;
transform: rotate(360deg);
}

/* Conteneur de l'avatar */
.switcheroo__avatar {
    width: 100%;
    aspect-ratio: 1/1;
}

/* Image de l'avatar */
.switcheroo__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    transition: border-radius 128ms var(--ease);
    position: relative;
}

/* Avatar du compte connecté */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
    outline-color: var(--neutralDark);
    cursor: default;
}

/* AJOUTER UN COMPTE ---*/
/* button : ajouter un compte */
.switcheroo__squircle--button {
    transition: border-radius 128ms var(--ease);
    color: var(--color3);
}

/* icon plus */
.switcheroo__squircle--button i {font-size: 19px;}

.switcheroo__squircle--button:hover {color: var(--color3);}

/* Bouton de suppression */
.switcheroo__delete {
    display: grid;
    place-items: center;
    position: absolute;
    width: 16px;
    height: 16px;
    top: -7px;
    right: -7px;
    border-radius: 50%;
    background-color: var(--color2);
    transform: scale(0);
    opacity: 1;
    transition: transform 128ms var(--ease), opacity 64ms var(--ease);
    cursor: pointer;
    color: var(--neutral);
    line-height: 0;
}

.switcheroo__squircle:hover .switcheroo__delete {
    opacity: 1;
    transform: scale(1);
}

/* TOOLTIP - INFOBULLE DU PSEUDO ---*/

/* Conteneur du pseudo */
.switcheroo__popper {
    background-color: var(--neutralDarker);
    padding: 0.30rem 1rem;
    position: absolute;
    width: -webkit-max-content;
    width: max-content;
    border-radius: 5px;
    z-index: 0;
    opacity: 0;
    transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
    pointer-events: none;
    color: var(--color2);
    left: 155%;
    top: 50%;
    transform-origin: left;
    transform: translateY(-50%) scale(0.98);
}

/* Flèche tooltip */
.switcheroo__popper:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--neutralDarker);
    z-index: -1;
    left: -3px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    border-radius: 2px;
}

.switcheroo__squircle:hover .switcheroo__popper {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}


/* LOGO --- retirez display:none pour retrouver le logo */
.switcheroo__logo,
.switcheroo__divider {display: none}


/* MODAL : FENETRE DE CONNEXION --- */

/* Fond de l'affichage de connexion */
.monomer-overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: 0.2s opacity ease;
    background: rgba(0, 0, 0, 0.2);
}

/* Boîte de connexion */
.monomer-modal {
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 94%;
    padding: 30px;
    transition: 0.2s opacity ease;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: var(--neutral);
    padding: 50px;
    box-shadow: var(--shadowBox);
}


/* Champs à remplir */
.switcheroo__form-row {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* Nom du champ */
.switcheroo__form-label {
    margin-bottom: 8px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Zone de texte */
.switcheroo__form-input {
    padding: 6px!important;
    border-radius: 4px;
    width: 100%;
    background-color: var(--neutral);
    color: var(--contrastLight);
    cursor: text;
}

/* Bouton de connexion */
.switcheroo__form-button {
    border-radius: 8px;
    padding: 4px 10px 5px;
    border: none;
    outline: none;
    box-shadow: none;
    text-transform: uppercase;
    font-size: 14px;
    align-self: center;
    background-color: var(--hyperlight);
    cursor: pointer;
    color: var(--color2);
    font-weight: 600;
    margin-top: 10px;
}

.switcheroo__form-button:hover {
    background: var(--contrastLight);
}

.monomer-modal.monomer-open,
.monomer-overlay.monomer-open {
    opacity: 1;
}

/* Fermer la boîte de connexion */
.monomer-close {
    font-size: 16px;
    line-height: 12px;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: var(--textColor);
    border: 0;
    outline: none;
    background: var(--contrastLighter);
    border-radius: 4px;
    padding: 0;
    padding-left: 1px;
}

.monomer-close:hover {
    background: var(--contrastLight);
}


/*** ------------------------------- ***/
/*** BARRE DE NAVIGATION ----------- ***/

/* Conteneur de la barre de nav */
.navbar {
    background: var(--neutralDark);
    padding: 12px;
  position: fixed;
width: 100%;
top: 0;
z-index: 99;

    display: flex;
    /* permet de mettre les liens sur une ligne */
    align-items: center;
    /*centre verticalement*/
    justify-content: center;
    /*centre horizontalement*/
}

/* Suppression des liens peu utilisés*/
.navbar a[href^="/faq"],
/*faq*/
.navbar a[href^="/calendar"],
/*calendrier*/
.navbar a[href^="/groups"]
/*groupes*/
    { display: none}

/* liens de navigation */
a.mainmenu {
text-transform: uppercase;
font-family: var(--texte);
font-size: var(--little-size);
padding: 2px 3px;
  border-radius:2px;
  font-weight: 600;
  filter: blur(0px)}

/* Lien navigation au survol*/
a.mainmenu:hover {
    letter-spacing: 1px;
    transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;-o-transition-duration: 0.6s;
}

/* Image des liens */
a.mainmenu img {display: none}


/***----------------------- BANDEAU ----------------------- ***/

/* Barre défilante */
.module {
    border-radius: 5px;
    border: var(--border);
    margin: 10px 0;
    padding: 4px 8px;
}

/*BANDEAU FORUM*/
.cp-anchor-o:before{
content:'\e910';
font-family:'cappuccicons';
}
.cp-boat-o:before{
content:'\e976';
font-family:'cappuccicons';
}
.cp-milkshake-o:before{
content:'\eb87';
font-family:'cappuccicons';
}
.cp-moon-o:before{
content:'\eb97';
font-family:'cappuccicons';
}
.topsite {
  display: flex;
flex-direction: column;
align-items: center;
}
.topsite a:hover {
  transition: all 0.5s;
transform: rotate(360deg);
}
.topsite a {
  font-size: 18px;
padding: 3px;
color: var(--color3);
}
#scenarpa {
  display: grid;
grid-template-columns: 100px 250px;
  gap:5px;
  align-content: center;
align-items: center;
}
#flexscenar a {
width: 45px;
height: 50px;
  column-gap: 5px;
}
#flexscenar a img {
padding: 4px;
border: 1px solid var(--hyperlight);
width: 45px;
height: 50px;
object-fit: cover;
  border-radius: 2px;
}
#lienscenarband {
  text-align:center;
}
#flexscenar {
  display: flex;
gap: 5px;
  flex-wrap: wrap;
}
#bandeau {
  display: grid;
grid-template-columns: auto auto 50px;
  gap:10px;
  background-color: var(--textColorAccent);
padding: 10px;
border-radius: 5px;
  margin-top: 1rem;
}
.intrigue {
  background-color: var(--neutralDark);
padding: 10px;
height: 100px;
overflow: auto;
border-radius: 5px;
  font-family: var(--texte);
  font-size: var(--normal-size);
  text-align: justify; 
}


/* PAGE D'ACCUEIL ---*/
#gridpa {
  display: grid;
grid-template-columns: 35% 35% 27.8%;
grid-gap: 10px;
}
.blockpa {
padding: 15px;
text-align: justify;
background: var(--neutralDark);
font-family: var(--texte);
  font-weight: 400;
  font-size: var(--medium-size);
border-radius: 5px;
}
.infopa {
margin-top: -10px; 
padding: 7px;
text-align: justify;
background: var(--neutralDark);
font-family: var(--texte);
  font-weight: 400;
  font-size: 11px;
border-radius: 5px;
}
.staff {
  display: flex;
align-items: center;
  justify-content: center;
gap: 5px;
  margin-top: 10px;
}
.staff img {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 50px;
background: var(--gradient);
padding: 2px;
}
.staff button {
  background-color: transparent;
}
.gridlien {
  display: grid;
grid-template-columns: 20% auto;
justify-items: center;
align-content: flex-start;
}
tpa {
  display: block;
padding: 5px;
text-align: center;
background: var(--neutralDark);
border-radius: 5px;
  font-family: var(--fontAjout);
  font-weight: 700;
color: var(--color2);
  margin-bottom: 5px;
}

#liens li {
  position: relative;
  padding: 5px;
background: var(--neutralDark);
border-radius: 5px;
border: 1px solid var(--neutralDarker);
margin-top: 5px;
  width: 245px;
}
#liens ul {
  display: none;
}
ul#liens li:hover ul {
    display: block ;
    position: absolute;
    top: 0px;
  left: 251px;
    z-index: 100;
}
#liens li ul li {
  width: 150px;
  margin-top:0px;
  margin-bottom:5px;
}

.staffcontent active {display:block;}
.staffcontent {
  background: var(--textColorAccent:);
  padding:10px;
  overflow:auto;
  height: 60px;
  display:none;
  text-align:center;
}

.mdmcontent active {display:block;}
.mdmcontent {
  background: var(--neutral);
  padding:5px;
  overflow:auto;
height: 45px;
  display:none;
  text-align:center;
}
#mdm1 {
  padding: 12px;
}
.mdm {
display: flex;
align-items: center;
justify-content: space-around;
margin-top: 5px;
}
.mdm img {
width: 50px;
height: 30px;
object-fit: cover;
  filter: grayscale(1);
background-color: var(--gradient);
object-position: top;
  border-radius: 2px;
}
.mdm button {
  background-color: transparent;
  font-size: 25px;
  margin: 0;
padding: 0;
}
.mdmcontent.container {
    background: var(--neutralDark);
  padding:5px;
}

.selectpa {width: 280px;margin-top: 10px;}

.machin {
    padding: 10px 10px;
    font: var(--soustitre);
  color: var(--color2);
    border: 1px solid var(--color2);
    text-align: center;
    background-image: url(https://images2.imgbox.com/0b/0d/UMaiKMee_o.png);
    background-position: center;
    background-size: cover;
}

/*** -----------CATEGORIES -------------------- ***/


/* Descriptif de catégorie */
.cateint {
  height:90px;
  overflow:auto;
  padding: 0px 10px;
text-align: justify;
 background: var(--textColorAccent);
}
/* Petit texte entre parenthèse */
xtx {
font-family: var(--soustitre);
font-size: var(--mini-size);
color: var(--color3);
text-transform: uppercase;
font-weight: 800;
 
  /* Je ne sais pas, dans le doute ne touche pas */
}
.cate {width: 55%;}
.category {
  border-top: 2px solid var(--color3);
    background: var(--neutralDark);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 30px;
}
.row {
  align-items:center;
}
.forum_row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    background: var(--neutralDark);
    padding: 10px;
    border-radius: 5px;
  justify-content: center;
}
.forum_row:last-child {
    margin-bottom: 0
}

/* titre d'un forum */
a.forumtitle {
    margin-bottom: 5px;
font-family: var(--titre);
font-size: 1.400em;
display: inline-flex;
background: var(--gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.forum-img {
width: 80px;
height: 110px;
  position: absolute;
}

.forum_desc {
    align-self: center;
  font-family: var(--texte);
text-align: justify;
}
.catdesc {
  height: 60px;
  overflow: auto;
  padding: 5px;
  background: var(--textColorAccent);
  border-radius: 10px;
}

  /* Titre d'une catégorie */
.cate_title h2 {
  display: block;
  background: var(--textColorAccent);
  font-size: var(--title-size);
  color: var(--textColor);
  text-transform: uppercase;
  text-align: center;
  font-weight: 600;
  padding: 5px 10px;
  font-family: var(--titre);
  margin-bottom: 20px;
}

/* Liens sous-forum */
.sousfo {
  display:inline-flex;
  gap:5px;
  margin-top:5px;
}
.sousfo a {
  background: var(--hyperlight);
text-transform: uppercase;
font-family: var(--titre);
font-size: var(--little-size);
font-weight: 600;
padding: 2px 3px;
  border-radius:2px;
  color: var(--neutral);
}
.sousfo a:hover {
background: var(--textColorAccent);
}

/* Avatar*/

/* Position de l'avatar */
.newbackava {
  position:relative;
width: 80px;
display: flex;
  align-items: center;
  height: 80px;
  margin: 10px;
}

.forum_lastpost-avatar {
  position: absolute;
z-index: 10;
}

.forum_lastpost-avatar img {
    width: 50px;
    height: 80px;
    margin: 15px;
    object-fit: cover;
    object-position: center;
}

.forum_lastpost {
    display: flex;
    align-items: center;
justify-content: center;
background-color: var(--textColorAccent);
border-radius: 5px;
padding: 10px;
  text-align: center;
line-height: 1.6;
  width: 23%;
}

.forum_details {
    border-top: 1px solid var(--textColorAccent);
    padding-top: 10px;
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}


#subforum {
    font-size: 0
}

#subforum a {
    font-size: var(--little-size);
    margin-right: 10px;
}

.forum_stats {
    font-weight: 600;
  font-size: var(--normal-size);
  transform: rotate(-90deg);
text-align: center;
  line-height: 1rem;

}

/*** ------------------------------- ***/
/*** QUI EST EN LIGNE -------------- ***/

.qeel {
    display: grid;
grid-template-columns: 30% 30% 38%;
grid-gap: 10px;
margin-bottom: 10px;
}

.qeel > div {
background-color: var(--neutralDark);
    padding: 10px 10px;
  border: 1px solid var(--neutralDarker);
  border-radius:10px;
}

.qeel-left {
    border-radius: 10px;
  display: flex;
align-items: center;
justify-content: center;
  gap: 5px;
}

/* Dernier inscrit */
#last_user {
    text-align: center;
  display: flex;
align-items: center;
font-size: 14px;
  gap: 5px;
}

#lastuser_avatar img {
  height: 100px;
  width: 120px;
object-fit: cover;
object-position: center;
border-radius: 10px;
background: var(--gradient);
padding: 4px;
}

/* groupes*/
#gridgroupe {
  display:grid;
  gap:10px;
  grid-template-columns: auto auto auto;
  grid-area: 2 / 1 / 3 / 3;
  align-content: center;
}
a.groups {
    display: block;
    background: var(--textColorAccent);
    border-radius: 5px;
    text-align: center;
    padding: 10px 0px;
    opacity: 1;
}

a.groups:hover {
    opacity: .7;
}

a.groups:last-child {margin-bottom: 0}

.gridstat {
  display: grid;
grid-template-columns: 48% 48%;
gap: 10px;
align-items: center;
text-align: center;
  margin-bottom:10px;
}

/*X connectés :: 1 membre, 0 invisible, 0 invité*/
#total_users {}

/*Connectés en ce moment*/
#online_users {
    height: 70px;
    overflow: auto;
  font-size: var(--normal-size);
}

/*ne pas supprimer*/
#online_users br {
    display: none
}

.credits {
    border-radius: 5px;
    padding: 5px;
    margin-top: 10px;
    line-height: 10px;
}

.qeel-right {
  text-align: justify;
  grid-area: 1 / 3 / 3 / 4;
}
#lastconnect {
  height: 115px;
  overflow: auto;
  font-size: var(--medium-size);
}
#qeel_posts, #qeel_members {
  padding: 5px 8px;
border-radius: 5px;
background-color: var(--textColorAccent);
}


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

/*** ------------------------------- ***/
/*** ENTETE ET FOOTER DE LA LISTE DES SUJETS ***/

/* Chaîne de navigation et pagination
 * (réutilisé dans l'affichage d'un sujet (viewtopic_body)) */
.navigation_links {
  background: var(--hyperlight);
  font-family: var(--texte);
  text-transform: uppercase;
  font-size: var(--normal-size);
padding: 2px 3px;
  border-radius:2px;
  font-weight: 400;
}

/* chaîne de lien de navigation : catégorie > forum > sous-fo */
.navigation_chain {
    font-size: 0;
    /*retire les :: de séparation */
}

.navigation_chain a {
    /*rétablit la taille des liens*/
    margin-right: 8px;
  font-size: 0.7rem;
}

.navigation_chain a:before {
    content: '›';
    /*symbole ou texte modifiable*/
    background: var(--hyperlight);
  font-family: var(--texte);
  text-transform: uppercase;
  font-size: var(--little-size);
padding: 2px 3px;
  border-radius:2px;
  font-weight: 400;
}

/* BOUTONS DE MESSAGE : Répondre, Nouveau,... ---*
 * (réutilisé dans l'affichage d'un sujet (viewtopic_body) et les MP (privmsgs_body) */
.buttons {
    background: var(--neutralDark);
  font-family: var(--texte);
  text-transform: uppercase;
  font-size: var(--medium-size);
    padding: 4px 8px;
    margin-right: 5px;
    border-radius: 5px;
    opacity: 1;
}

.buttons:hover {
    opacity: .7;
}

/* BOUTONS : modérer les sujets de ce forum */
#moderation_forum_tools,
#moderation_forum_tools strong {
    font-size: 0px;
}

#moderation_forum_tools a {
    border-radius: 5px;
    padding: 2px 8px;
    font-size: var(--normal-size);
}

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

.topicslist_row {
    background: var(--textColorAccent);
  font-size: var(--medium-size);
  font-family: var(--texte);
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/*Style des Notes/Annonces*/
.topic-type{
      text-transform:uppercase;
      color: var(--color3);
      font-size: var(--medium-size);
      font-family: var(--texte);
      padding: 0 5px;
      font-weight: bold;
      display: inline-block;
      }


.topicslist_row:last-child {
    margin-bottom: 0
}

/* Image du sujet */
.topicslist-img {
    width: 20px;
    height: 20px;
  border-radius: 100%;
align-content: center;
align-items: center;
}

.topicslist_infos {
    flex-grow: 100;
}

/*titre du sujet*/
.topictitle {
    font-size: var(--medium-size);
  font-family: var(--texte);
  /* permet de raccourir les titres trop long ainsi : "Titre du suj..." */
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 430px;
    white-space: nowrap;
      vertical-align: bottom;
}

/* icône de type de message ( exemple : -18 ans, sujet résolu, ... ) */
.topic_msgicon {
    margin-right: 5px
}

.topic_msgicon:empty {
    display: none;
}

.topiclist-infos img {
    margin-right: 3px;
    width: 30px;
    height: 30px;
  border-radius: 100%;
}

.topicslist-stats {
    text-align: right;
    display: inline-block;
    color: var(--textColor);
    font-family: var(--fontAjout);font-size: 8px;text-transform: uppercase;
    margin: 2px 5px 2px 0;padding: 2px 10px;
}

.topicslist-avatar-lastpost img {
    object-fit: cover;
    object-position: center;
    width: 30px;
  border-radius: 100%;
  object-fit: cover;
    height: 30px;
    background: var(--neutralDark);
  border: 3px solid var(--neutralDark);
  outline-color: var(--neutralDarker);
}

.topicslist-lastpost {
    width: 180px;
}

.topicslist-description {
    border-top: 1px solid var(--neutralDark);
    padding-top: 5px;
  font-size: var(--normal-size);
  font-family: var(--texte);
    width: 100%;
}
/****** -------------------------------AFFICHAGE D'UN SUJET -------------------------------- ******/

.post_row {
    background: var(--neutralDark);
    display: grid;
    text-align: justify;
    grid-template-rows: max-content auto;
    grid-template-columns: min-content 1fr;
    border-bottom: 1px solid var(--neutralDark);
}

div.post_row:nth-of-type(2) {
    border-radius: 5px 5px 0 0;
}

div.post_row:last-of-type {
    border-radius: 0 0 5px 5px;
    border-bottom: none
}

.post_details {
    grid-column: 1 / span 2;
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--neutralDark);
    width: 100%;
}
.post_date {
    flex-grow: 100;
}

/* BOUTONS D'EDITION DU MESSAGE --- */
/* Conteneur boutons d'édition */
ul.profile-icons {
    flex-grow: 1;
    display: flex;
}

/*UN SEUL bouton d'édition */
ul.profile-icons li {
  text-transform: uppercase;
font-family: var(--titre);
font-size: var(--little-size);
font-weight: 600;
}

/*hover d'un bouton d'édition*/
ul.profile-icons li:hover {
    background: var(--neutralDark);
}



/* BOUTON LIKE --- */
/* Conteneur du bouton like */
.like_button {
  text-transform: uppercase;
font-family: var(--titre);
font-size: var(--little-size);
font-weight: 600;
    float: right;
    margin-left: 10px;
    flex-grow: 1;
    cursor: pointer;
}

/* Bouton like */
.rep-button,
.rep-button:active,
.rep-button:focus {
  background-color: var(--neutralDark);
    color: var(--color3);
  text-transform: uppercase;
font-family: var(--titre);
font-size: var(--little-size);
font-weight: 600;
    border: none;
}
/*compteur de like*/
button.rep-button .rep-nb {
  background-color: var(--neutralDark);
    margin-left: 5px;
    padding: 0 3px;
    border-radius: 3px;
}

/*** ------------------------------- ***/
/*** PROFIL DANS LE SUJET --------------- ***/

.post_profile {
    padding: 10px;
    border-right: 1px solid var(--neutralDark);
}

/* Apparence du pseudo */

.post_pseudo {
font-weight: bold;
  text-transform: uppercase;
font-family: var(--titre);
font-size: var(--medium-size);
font-weight: 600;
  vertical-align: middle;
  justify-content: center;
  text-align:center;
}
.pseurank {text-align:center;}

.nomprof {
  display:flex;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  gap: 10px;
  background: var(--textColorAccent);
  border-radius: 3px;
padding: 4px 8px;
  min-width: 200px;
  margin-bottom: 5px;
}
Re: Version 2: Gris/Vert/Rose 
Meuf Géniale

Meuf Géniale
Admin
RP
Messages : 16
Date d'inscription : 10/08/2024
Hors RP

https://st-test.forumactif.com
CSS 1861

Code:
/* Apparence du rang */
.post_rank{
color: var(--neutral);font-weight: 400;
  font-family: var(--soustitre);font-size: var(--mini-size);text-transform: lowercase;
    margin-top: 5px;  background: var(--hyperlight);
 border: var(--border);
  border-radius: 3px;
padding: 4px 8px;
  min-width: 200px;
  text-align:center;
}

/* Lien "@" de mention */
a.fa-mention {background: var(--neutralDark);
text-transform: uppercase;
font-family: var(--titre);
font-size: var(--medium-size);
font-weight: 600;}


/* Mention "en ligne" */
.online {
  border-radius: 5px;
font-size: 0px;
}
.online:before {
content:'\eca1';
font-family:'cappuccicons';
font-size: 20px;
color: var(--color2);
  text-align: center;
}

.online:empty {display: none}

.post_message {padding: 50px;}

/*PROFILS ONGLETS*/
/* .systab .tab => les onglet */
.systab .tab {
padding: 5px;
  border-bottom: var(--border);
    border-top: var(--border);
cursor: pointer;
width: 100%;
font-weight: 600;
text-align: center;
  text-transform: uppercase;
    font-style:italic;
  font-weight: 900;
font-family: var(--soustitre);
}
.tabs {
    width: 100%;
    display: flex;
    gap: 5px;
  margin-top: 5px;
  justify-content: space-around;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
background: var(--f);
border-bottom-color: var(--gradient);
 
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  background: var(--d);
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
margin-top: 5px;
background: var(--hyperlight);
border: var(--border);
height: 300px;
overflow: auto;
border-radius: 5px;
padding: 10px;
font-family: var(--texte);
text-transform: lowercase;
text-align: justify;
font-size: var(--normal-size);
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 5px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}
.rponglet img {
  max-width: 165px;
  margin-bottom: -15px;
}
.field_label {
  font-weight:600;
  font-family: var(--fontAjout);
  text-transform: lowercase;
  color:var(--neutral);
  font-size: var(--medium-size);
}
.profil_contact {
display: flex;
justify-content: space-around;
text-transform: uppercase;
font-family: var(--titre);
font-size: var(--little-size);
}


/* REPONSE RAPIDE --- */
/*supression de la mention "réponse rapide" */
.quickreply div.h3 {display: none}

/*centrer la réponse rapide*/
.quickreply {
  background-color: var(--hyperlight);
    display: flex;
    justify-content: center;
    height: 200x;
 
}

/* Retire le cadre de la réponse rapide pour les invités */
#quickreply_content:empty {display: none}

/* Réponse rapide */
#container quickreply {background-color: var(--hyperlight);}


/*** ------------------------------- ***/
/*** SONDAGE ----------------------- ***/

.poll {
    background: var(--textColorAccent);
    border-radius: 5px;
    margin-bottom: 10px;
}

.head_poll {
    padding: 10px;
    border-bottom: 1px solid var(--neutralDark);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.poll_list {
    display: grid;
    grid-template-columns: 220px auto;
}

.poll_option {
    padding: 10px 20px 0 10px;
    border-right: 1px solid var(--neutralDark);
    text-align: right;
}

.poll_vote {
    padding: 10px 10px 0 20px;
    display: flex;
    align-items: center;
}

.poll_send {
    margin-left: 220px;
    padding: 20px 10px 20px 20px;
    border-left: 1px solid var(--neutralDark);
}

.poll_vote:nth-child(2),
.poll_option:first-child {
    padding-top: 20px;
}


/*** ------------------------------- ***/
/*** TEXTES, BALISES, ETC ---------- ***/

/* Lien-tag des utilisateurs */
.mentiontag {text-transform: uppercase;
font-family: var(--titre);
font-size: var(--normal-size);
color: var(--color2);
font-weight: 600;}


/* BALISES DE MESSAGE : spoiler, code, quote... */

/* Balise code, spoiler et hide*/
.codebox {
    display: block;
    width: 90%;
  max-width: 500px;
  max-height: 400px;
overflow: auto;
    margin: 0 auto;
  font-family: var(--texte);
}

/* Contenu code, spoiler et hide*/
.codebox dd {
    background: var(--hyperlight);
    border-radius: 5px;
    padding: 5px;
    font-family: var(--texte);
}

/* Nom de balise "code, spoiler" */
.codebox dt {
    font-weight: 700;
    font-size: var(--little-size);
}

/* Bouton "sélectionner le" code */
.selectCode {
    float: right;
    cursor: pointer;
}

.selectCode:hover {
    color: var(--hyperlight);
}

div.cont_code {
    clear: right;
    font-family: var(--texte);
}

/* Spoiler */
.hidebox.spoiler {}

/* spoiler fermé */
.spoiler_content {
    display: none;
}

/* spoiler ouvert */
.spoiler_content.hidden {
    display: block;
}


/* Citation contenu */
blockquote div {
    padding-left: 20px;
  background: var(--neutralDark);
    font-family: var(--texte);
}

/* Citation mention "... a écrit" */
blockquote cite {
    display: block;
    margin-left: -20px;
    font-style: normal;
}

/* Citation pseudo */
blockquote cite a {
    text-decoration: none !important
}

/* Hide */
.codebox.hidecode dd {
    background: transparent;
    opacity: 0.8;
}



/****** ------------------------------------------------------------------------------
 ****** MEMBRES ------------------------------------------------------ ******/

/*** ------------------------------- ***/
/*** PAGE DE PROFIL ---------------- ***/

.user_profile {
    background: var(--textColorAccent);
    border-radius: 5px;
    display: grid;
    grid-template-columns: max-content auto;
    padding: 10px;
    grid-gap: 10px;
  font-family: var(--fontAjout);
  text-transform: lowercase;
}
#rankprof {
display: flex;
justify-content: center;
padding: 5px;
  margin-top: -10px;
}
.onlineprofs {
  background: var(--gradient);
color: var(--neutral);
padding: 5px 8px;
border-radius: 5px;
}
.profile_avatar {
    width: 200px;
}

.profile_infos { 
font-family: var(--fontAjout);
text-transform: lowercase;
display: grid;
grid-template-columns: 25rem 15rem;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

.statsprofs {
  grid-area: 1 / 1 / 2 / 3;
  display: inline-flex;
gap: 10px;
align-items: center;
}
.statsprofs a {
  background-color: var(--neutralDark);
padding: 5px 10px;
border-radius: 5px;
}

.profirls {
  grid-area: 2 / 2 / 3 / 3;
  height: 10rem;
overflow: auto;
  background-color: var(--neutralDark);
padding: 10px;
border-radius: 5px;
}
.gifprofs { grid-area: 3 / 2 / 4 / 3; }

.gifprofs #field_id2 label {display:none;}

.gifprofs img {
  width: 15rem;
height: 7.1rem;
object-fit: cover;
}

.profile_contact form {
    display: flex;
  gap: 10px;
justify-content: center;
padding: 10px;
border: var(--border);
border-radius: 5px;
margin-top: 5px;
}

.profile_contact form > div {
    margin-left: 5px;
}

/* Suppression des cases vides de contact qui affichent " - "
 * nth-child(n+4) supprime toutes les cases après la quatrième */
.profile_contact form div:nth-child(2) {
    display: none
}

.profile_content {
height: 17.8rem;
overflow: auto;
font-family: var(--fontAjout);
text-transform: lowercase;
grid-area: 2 / 1 / 5 / 2;
background-color: var(--neutralDark);
padding: 10px;
border-radius: 5px;
}

.profile_field field > div {
    display: inline;
}

.profile_field label,
.profile_field label > span {
    font-weight: 600;
    color: var(--link);
}

.profile_field field {
    position: relative;
}

.profile_admin {
    text-align: center;
    margin: 10px 0 0;
}

.invisible {
  display: none !important;
  visibility: hidden;
}


/* Bouton édition d'un champ de profil */
.ajax-profil_edit {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0px;
}

/* Bouton édition d'un champ de profil */
.ajax-profil_edit {
    cursor: pointer;
    position: absolute;
    top: 0;
    left: -15px;
}

/* Bouton validation des modifications */
.ajax-profil_valid {
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
}




/*** ---- PROFILS SIMPLIFIÉS DES TAGS ---- ***/

/* Supression de la flèche peu esthétique*/
.tooltipster-arrow {}

.tooltipster-default {}

.preview_content {
    display: flex;
}

.preview_avatar img {
    object-fit: cover;
    object-position: center;
    width: 70px;
    height: 70px;
    border-radius: 5px;
    margin-right: 10px;
}

.preview_infos {
    width: 100%;
    padding-top: 3px
}

.preview_pseudo,
.preview_pseudo strong {
    font-size: var(--medium-size);
}

.preview_contacts {
    position: absolute;
    bottom: 8px;
    right: 10px;
}

.preview_contacts a {
    margin-left: 5px
}

.tooltipster-arrow {
    display: none
}


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

.userlist {
    display: grid;
    grid-template-columns: 32.5% auto 32.5%;
    grid-gap: 10px;
}

.userlist_profil {
    display: grid;
    grid-template-columns: 55px auto;
    grid-gap: 10px;
    padding: 10px;
    background: var(--color4);
    border-radius: 5px;
  align-items: center;
}

.userlist_avatar {}

.userlist_avatar img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100px;
    background: var(--gradient);
    object-position: center;
    padding: 2px;
}

.userlist_details {display: flex;
flex-direction: column;}

.userlist_pseudo {
    font-size: var(--medium-size);
  grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 3;
  text-align: center;
background-color: var(--neutralDark);
padding: 5px;
border-radius: 5px;
}

.userlist_infos {
    color: var(--textColor);
    font-family: var(--fontAjout);
    text-transform: lowercase;
    font-size: 11px;}

.userlist_contact {text-align: right;
font-family: var(--titre);}




/****** ------------------------------------------------------------------------------
 ****** MESSAGES PRIVES -------------------------------------------------------------- ******/

/*** ------------------------------- ***/
/*** LISTE DES MPs ----------------- ***/

/* Menu des MPS */
#privmsgs-menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px auto;
}

#privmsgs-menu li {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Affichage d'un MP dans la liste */
.mp_row {
    background: var(--textColorAccent);
    border-radius: 5px;
    display: grid;
    grid-template-columns: 55px auto;
    grid-gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    padding: 10px;
}


/*** ------------------------------- ***/
/*** AFFICHAGE D'UN MESSAGE PRIVÉ -- ***/

.message {
    background: var(--neutralDark);
    border-radius: 5px;
    display: grid;
    grid-template-rows: max-content auto;
    grid-template-columns: 220px auto;
}

.message_infos {
    grid-column: 1 / span 2;
    border-bottom: 1px solid var(--neutralDark);
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.mp-icons {
    display: flex;
    float: right;
}

.message_profil {
    padding: 10px;
    border-right: 1px solid var(--neutralDark);
    text-align: center;
}

.message_content {
    padding: 25px;
}



/****** ------------------------------------------------------------------------------
 ****** PAGES ANNEXES ---------------------------------------------------------- ******/

/*** ------------------------------- ***/
/*** PAGE D'ENVOI D'UN MESSAGE ----- ***/

.message-edition {
    display: flex;
    flex-direction: row;
    /* flex-direction: row-reverse; -- pour smileys à droite */
    gap: 15px;
    /*espace entre la zone de texte et la boîte à smileys*/
}

/* Prévisualisation d'un message */
#preview {
    background: var(--neutral);
    padding: 10px;
    border: var(--border);
    border-radius: 5px;
}



/*** ------------------------------- ***/
/*** EDITION DE PROFIL ------------- ***/

/* Onglets dans la modification de profil */
#tabs ul {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 10px
}

/*onglet*/
#tabs li {
    padding: 5px 10px;
    border: 1px solid transparent;
}

/* Onglet selectionné */
#tabs li.activetab {
    background: var(--neutralDark);
    border: var(--border);
    border-radius: 5px;
}

/* onglet au survol */
#tabs li:hover {
    background: var(--neutralDark);
    border-radius: 5px;
    border: var(--border);
}

/* Suppression de l'onglet "amis et ignorés" */
div#tabs li:nth-child(5) {
    display: none;
}


.profil_preferences dl,
.profil_editavatar dl {
    grid-template-columns: 40% auto;
}

.profil_preferences .italic {
    font-size: var(--little-size);
}

/* EDITER SIGNATURE ---*/
#parent_editor_simple > #smiley-box {
    float: left;
    /* float: right; -- pour smileys à droite */
}

#parent_editor_simple #message-box {
    margin-left: 240px;
    /* margin-right: XXXpx -- pour smileys à droite */
}

#parent_editor_simple #message-box > br {
    display: none
}

#parent_editor_simple #message-box > #textarea_content {
    width: 100% !important;
}

.panel.row2.sig {
    text-align: center;
    margin-top: 10px;
}


/*** ------------------------------- ***/
/*** PAGES DE RECHERCHES ----------- ***/

/* RECHERCHE DE MESSAGE -----*/

/* Conteneur d'un message*/
.post_search {
    display: grid;
    grid-template-columns: 200px auto;
    border-radius: 5px;
    margin: 10px 0;
    background: var(--neutral);
    font:"Inter", sans-serif;
}

.post_search > div {
    padding: 10px;
}

/* Colonne d'information du message */
.postsearch_infos {
    border-right: var(--border);
    font-size: var(--little-size);
}


/* RECHERCHE DE SUJET -----*/
/* Même CSS que la liste des sujets dans un forum */



/*** ------------------------------- ***/
/*** PAGE DE CONNEXION ------------- ***/

/* Centrer les pages de connexion */
form[name=form_login],
form[name=form_login] ~ .panel {
    text-align: center;
}

form[name=form_login] .content {
    display: grid;
    justify-content: center;
    justify-items: center;
}


/*** ------------------------------- ***/
/*** ELEMENTS FLOTTANTS ------------ ***/

/* Fenêtre popup "recherche" */
.overview {
    background: var(--neutral);
    border-radius: 5px;
    border: var(--border);
    padding: 10px;
    position: fixed !important;
    top: 50% !important;
}

/* Bouton rechercher */
.overview button[type="submit"] {
    width: 26px;
    height: 26px;
    margin-left: 5px;
}

.overview div {
    margin-bottom: 5px
}

.overview a {
    float: right;
}


/* Boîte "recherche un utilisateur" */
#find_username {
    display: none;
    position: fixed;
    left: 50%;
    width: 450px;
    margin-left: -225px;
    top: 50%;
    margin-top: -125px;
    background-color: var(--neutral);
    padding: 10px;
    border: var(--border);
    border-radius: 5px;
}

/*-------------- TEXTES/FICHES/ADMIN-------------*/

/*Fiche de présa*/
#gridprez {
  display: grid;
  grid-template-columns: 49% 49%;
  gap: 10px;
}
img.gifprez {
  width: 225px;
  height:120px;
  object-fit:cover;
  margin-bottom: 5px;
}
.encartprez {
  padding: 10px;
  background-color: var(--neutralDark);
  height:330px;
overflow: auto;
}
.encartprez2 {
  padding: 10px;
  background-color: var(--neutralDark);
  height: 170px;
  overflow: auto;
  margin-top: 10px;
}
#irl {
  background-color: var(--neutralDark);
  padding: 10px;
  display: flex;
  gap: 10px;
}
.irl {overflow:auto;
  height: 70px;
}
img.imgirl {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 3px solid var(--neutral);
outline: 1px solid var(--neutralDark);
}
avafiche {
  display:block;
  padding: 3px;
background: var(--gradient);
color: white;
text-align: center;
border-radius: 5px;
text-transform: uppercase;
  font-family: var(--fontAjout);
}
.encartpl {
  padding: 10px;
  background-color: var(--neutralDark);
  height: 80px;
  overflow: auto;
  margin-top: 10px;
}
.encartpl2 {
  padding: 10px;
  background-color: var(--neutralDark);
  height:240px;
overflow: auto;
}
/*Fiche de liens*/
.cp-id-card-o:before{
content:'\eb22';
font-family:'cappuccicons';
}
.cp-smartphone-:before{
content:'\ec84';
font-family:'cappuccicons';
}
.cp-volume-:before{
content:'\ecfa';
font-family:'cappuccicons';
}
.cp-pinterest-:before{
content:'\ebfb';
font-family:'cappuccicons';
}
.cp-lobster-o-:before{
content:'\eb67';
font-family:'cappuccicons';
}
.encartfiche1 {
  padding: 10px;
  background-color: var(--neutralDark);
  height:205px;
overflow: auto;
  margin-bottom: 5px;
}
.encartfiche2 {
  padding: 10px;
  background-color: var(--neutralDark);
  height:30px;
  text-align: center;
  size: 25px;
  letter-spacing: 8px;
}

.fondfichelien {
  width: 500px;
    padding: 20px;
  text-align: justify;
  display: block;
  border-radius: 3px;
  font-family: "Inter", sans-serif;
  color: var(--textColor);
  background: var(--textColorAccent);
}
.blocfiche {
  padding: 10px;
  background-color: var(--neutralDark);
  height:75px;
overflow: auto;
  margin-bottom: 5px;
}
.blocfiche2 {
  padding: 10px;
  background-color: var(--neutralDark);
  height:75px;
  width:210px;
overflow: auto;
  margin-bottom: 5px;
}
.blocfichepartenariat {
  padding: 10px;
  background-color: var(--neutralDark);
  height:105px;
overflow: auto;
  margin-bottom: 5px;
}
img.giflien {
  width: 210px;
  height:100px;
  object-fit:cover;
  margin-bottom: -5px;
}
/*Messages admins*/

.titre {
  background: var(--textColorAccent);
  border-radius: 3px;
  width: 500px;
  padding: 7px;
  font-size: var(--title-size);
  color: var(--textColor);
  text-transform: uppercase;
  text-align: right;
  font-weight: 600;
  font-family: var(--titre);}

.soustitre {
  background: var(--contrastLight);
  border-radius: 3px;
  max-width: 500px;
  width: 100%;
  padding: 5px;
  font-size: var(--little-size);
  text-transform: uppercase;
  color: #eaecf2;
  text-align: center;
  font-weight: 600;
  font-family: var(--texte);
display: block;}

.fondfiche {
  width: 500px;
  padding: 20px;
  text-align: justify;
  display: block;
  border-radius: 3px;
  font-family: "Inter", sans-serif;
  color: var(--textColor);
  background-color: var(--textColorAccent);
}

.lightfiche {
  text-align:center;
}
.lightfiche i:nth-child(1) {color:var(--color2);}
.lightfiche i:nth-child(2) {color:var(--color3);}

.blockfiche {
background-color: var(--hyperlight);
font-family: var(--texte);
 font-size: var(--medium-size);
  font-style:italic;
  font-weight: 600;
  width: 100%;
border: 3px solid var(--textColorAccent);
outline: 1px solid var(--neutralDark);
text-align: justify;
padding: 15px;
display: inline-block;
}
numb {
  font-size: var(--little-size);
  padding: 1px 4px;
background: var(--color3);
font-weight: 600;
border-radius: 5px;
color: var(--neutral);
margin-right: 2px;
}
numb2 {
font-size: var(--little-size);
  padding: 1px 4px;
background: var(--color2);
font-weight: 600;
border-radius: 5px;
color: var(--textColorAccent);
margin-right: 2px;
}

/*GIF FICHES*/
.deuxgif {
  display: flex;
  gap: 5px;
  justify-content: center;
}
.deuxgif img {
  height: 100px;
  background: var(--neutralDark);
padding: 5px;
}

.gifloat {
  height: 65px;
float: left;
padding-right: 10px;
}
.gifsolo {
  height: 100px;
  background: var(--neutralDark);
padding: 5px;
}
/*Image Réduite*/
.version {
  width: 400px;
  background-color: var(--hyperlight);
  border: 1px solid var(--neutral);
  outline: 10px solid var(--neutral);
  box-shadow: 0px 0px 1px var(--hyperlight);
  padding: 3px;
  margin: 3px;
}


/*Avatarfiche*/

.littleimg {
  width: 150px;
  border: 1px solid #FFFFFF;
  box-shadow: 0px 0px 1px #dce7ed;
  padding: 5px;
  margin-right: -3px;
  -webkit-filter: grayscale(1);
  transition-duration: 0.6s;
  -moz-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
}

.littleimg:hover {
  -webkit-filter: grayscale(0);
}

/*-------------- STYLE ET MESSAGES-------------*/

/*Italique/Souligné/surligné*/

it
{color: var(--color2);}

strong {
font-family: var(--texte);font-weight: 700!important;}

u {
  color: var(--textColor);text-decoration: none!important;box-shadow: inset 0 -0.1em var(--color3);}

::selection {
  color: #FFFFFF;background-color: var(--color2);}
::-moz-selection {
  color: #FFFFFF;background-color: var(--color2);}

/*TW et Fonts spéciaux*/

tw {
 filter: blur(2px);
    transition-duration: 0.6s;-moz-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;-o-transition-duration: 0.6s;}
tw:hover{filter: blur(0px);}

aa {
    background-color: var(--hyperlight);
    border-radius: 2px;
    display: inline-block;
    color: var(--textColor);
    font-family: var(--fontAjout);font-size: var(--little-size);letter-spacing: 1px;text-transform: uppercase;
    margin: 2px 5px 2px 0;padding: 2px 10px;
}

bb {
    background-color: var(--neutralDark);
    border-radius: 2px;
    display: inline-block;
    color: var(--color3);font-style:italic;font-weight: 500;
    font-family: var(--fontAjout);font-size: var(--little-size);
  letter-spacing: 1px;text-transform: uppercase;
    margin: 2px 5px 2px 0;padding: 3px;
}

cc {
  font-size: var(--medium-size);
  font-family: 'Times New Roman';
  text-transform: lowercase;
  font-style:italic;
  font-weight:900; }

ee{
  color: var(--neutralDarker);
  font-family: var(--soustitre);
  text-transform: uppercase;
font-size: var(--normal-size);
  font-style:italic;
  font-weight: 500;
}
bidule {
  font-size: var(--normal-size);
  color: var(--color3);
  text-transform: uppercase;
    font-style:italic;
font-family: var(--soustitre);
 padding: 4px;
}

t1 {
  font-size: var(--normal-size);
  color: var(--color3);
  text-transform: uppercase;
    font-style:italic;
  font-weight: 900;
font-family: var(--soustitre);
}

t2 {
font-size: var(--little-size);
font-style:italic;
letter-spacing: 1px;
font-weight: 700;
color: var(--neutralDarker);
font-family: var(--titre);
}

t3 {
font-size: var(--little-size);
background: var(--gradient);
padding: 2px 8px;
color: var(--neutral);
font-weight: 600;
border-radius: 3px;
}

t4 {
font-size: var(--little-size);
font-family: var(--soustitre);
color: var(--textColor);
background: var(--fondclair);
  text-transform: uppercase;
  padding: 3px;
}

t5 {
  font-size: var(--normal-size);
  color: var(--color3);
  text-transform: uppercase;
    font-style:italic;
  font-weight: 900;
font-family: var(--soustitre);
}
t6 {
  font-size: var(--normal-size);
  color: var(--color2);
  text-transform: uppercase;
  font-style:italic;
  font-weight: 900;
font-family: var(--soustitre);
}

pop {
  /* ouverture de convo*/
  background-color: #b6dbb9;
  border: 1px solid #809982;
  border-radius: 100px;
  font-size: 9px;
  width: 200px !important;
  font-family: 'verdana', sans-serif;
  color: #809982;
  font-weight: 700;
  margin-top: 3px;
  padding-right: 5px;
  padding-left: 5px;
}

stop {
  background-color: #cc9696;
  border: 1px solid #8c6767;
  border-radius: 100px;
  font-size: 9px;
  width: 200px !important;
  font-family: 'verdana', sans-serif;
  color: #8c6767;
  font-weight: 700;
  margin-top: 3px;
  padding-right: 5px;
  padding-left: 5px;
}

/*Traducteur*/
.original {border-bottom: 2px dotted var(--color3);}
.translate .original, .translate:hover .tslt {display: inline;}
.translate:hover .original, .translate .tslt {display: none;  }
Re: Version 2: Gris/Vert/Rose 
Meuf Géniale

Meuf Géniale
Admin
RP
Messages : 16
Date d'inscription : 10/08/2024
Hors RP

https://st-test.forumactif.com
Viewtopic body

Code:
<br />

 

<!----------------------------------------------->
<!-- LIENS DE NAVIGATION -------------->

<div class="navigation_links">

    <!-- Chaîne de lien : Catégorie > Forum > Sous-fo -->
    <span class="navigation_chain">
      <t2>{NAV_CAT_DESC}</t2>
    </span>

</div>

<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->

<div class="links_bar">
 
        <!-- Boutons : nouveau -->
        <!-- BEGIN switch_user_authpost -->
        <a class="buttons" href="{U_POST_NEW_TOPIC}" rel="nofollow"><img class="newtopic_button" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a> 
        <!-- END switch_user_authpost -->

        <!-- Bouton : répondre -->
        <!-- BEGIN switch_user_authreply -->
        <a class="buttons" href="{U_POST_REPLY_TOPIC}"><img class="reply_button" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
        <!-- END switch_user_authreply -->
 
        <!-- Pagination -->
        <span class="pagination right">
          <t2>{PAGINATION}</t2>
        </span>
       
 
</div>

<!----------------------------------------------->
<!-- MESSAGE -------------->


<!-- Contenenur des messages -->
<div class="container">

    <!-- Titre du poste -->
    <h1 class="page-title">{TOPIC_TITLE}</h1>
 
    <!-- Sondage (template : viewtopic_poll_ballot /// viewtopic_poll_result) -->
    {POLL_DISPLAY}


    <!-- Affichage d'un message -->
    <!-- BEGIN postrow -->
    <!-- BEGIN displayed -->
    <div id="{postrow.displayed.U_POST_ID}"></div>
    <div class="post post_row post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}">

        <!-- Conteneur informations du message-->
      <div class="post_details">

            <span class="post_date">
                <!-- Lien d'ancre vers le message -->
              <a href="{postrow.displayed.POST_URL}"><bidule>{postrow.displayed.POST_SUBJECT}</bidule></a>
          
                <!-- Date du message -->
              <time><bidule>{postrow.displayed.POST_DATE_NEW}</bidule></time>
            </span>
             
                <!-- Boutons d'édition de message -->
                <ul class="profile-icons ">
                  <li><bidule>{postrow.displayed.QUOTE_IMG}</bidule></li>
                  <li><bidule>{postrow.displayed.EDIT_IMG}</bidule></li>
                    <li><bidule>{postrow.displayed.DELETE_IMG}</bidule></li>
                    <li><bidule>{postrow.displayed.IP_IMG}</bidule></li>
                </ul>
         
                <!-- Conteneur du bouton like -->
                <!-- BEGIN switch_likes_active -->
                <div class="like_button">

                    <!-- Bouton "j'aime" -->
                    <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}" data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">

                        <!-- Texte "j'aime" -->
                      <i class="ion-heart"></i>     
                        <!-- Compte des "j'aime" -->
                      {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}

                    </button>
                </div>
                <!-- END switch_likes_active -->
                <!-- Fin du bouton like -->

        </div>
        <!-- Fin détails -->


        <!-- Colonne de profil -->
        <div class="post_profile" id="profile{postrow.displayed.U_POST_ID}">

            <div class="nomprof">
              <!-- En ligne -->
                <div class="{postrow.displayed.ONLINE_IMG_NEW}"> <!-- VOIR CSS .online -->
                   {postrow.displayed.ONLINE_IMG_NEW}<!-- Textuel -->
                </div>
              <div class "pseudoprofil"><div class="pseurank">
                <!-- Pseudo -->
                <span class="post_pseudo">{postrow.displayed.POSTER_NAME}</span></div>
            </div>
<br>
              </div>
             
              <!-- Avatar -->
            <div class="post_avatar">
                {postrow.displayed.POSTER_AVATAR}
            </div> 
             
              <!-- Rang -->
                 
                <div class="post_rank">
                    {postrow.displayed.POSTER_RANK_NEW} <!-- Textuel -->
                    {postrow.displayed.RANK_IMAGE} <!-- Image -->
                  </div>
         
            <div class="post_userinfo">
             
              <!-- Champs de profil -->
             
              <div class="systab s_slide">
            <div class="rponglet">
          <span>RP</span>
                <!-- BEGIN profile_field -->
                    <div class="user_field">
                        <!-- Label d'un champs de profil -->
                        <span class="field_label">{postrow.displayed.profile_field.LABEL}</span>
                     
                        <!-- Contenu d'un champs de profil -->
                        <span class="field_content">{postrow.displayed.profile_field.CONTENT}</span>
                     
         <!-- Séparateur entre champs de profil -->                     
                        <span class="field_separator">{postrow.displayed.profile_field.SEPARATOR}</span>
      </div> <!-- END profile_field -->
                  </div>
             
             
              <div class="hrponglet">
                <span>Hors RP</span>
                <!-- BEGIN profile_field -->
               
                <!-- END profile_field -->
                  </div></div>
             
             
                <!-- Fin de champs de profil -->

             
                <!-- Champs de profil de la feuille de personnage -->
                {postrow.displayed.POSTER_RPG}

            </div>

            <br />

            <!-- Lien de contact -->
            <div class="profil_contact">
                {postrow.displayed.PROFILE_IMG}<!-- Profil -->
                {postrow.displayed.PM_IMG}<!-- MP -->
                <!-- Autre contact-->
                <!-- BEGIN contact_field -->
                {postrow.displayed.contact_field.CONTENT} <!-- Autre champs de contact -->
                <!-- END contact_field -->
            </div>

        </div>
        <!-- Fin colonne profil -->


        <!-- Contenu du message -->
        <div class="post_message postbody content">
            <div>{postrow.displayed.MESSAGE}</div>

            <!-- Signature -->
            <!-- BEGIN switch_signature -->
            <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->

        </div>
        <!-- Fin du contenu du message -->
    </div>

    <!-- END displayed -->
    <!-- END postrow -->
    <!-- Fin affichage d'un message -->

</div>
<!-- Fin des messages -->


<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->


<div class="links_bar">
 
        <!-- Lien "surveiller le sujet" -->
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
  <span class="specials_links"><t2>{S_WATCH_TOPIC}</t2></span>
        <!-- END watchtopic -->
        <!-- END switch_user_logged_in -->
       
        <!-- BEGIN switch_plus_menu -->
        <!-- Lien "sujets surveillés" -->
   <a class="specials_links" href="{U_WATCHSEARCH_JS_PLUS_MENU}"><t2>Sujets surveillés</t2></a>
        <!-- END switch_plus_menu -->

    <!-- Pagination -->
    <!-- BEGIN topicpagination -->
  <span class="pagination right"><t2>{PAGINATION}</t2></span>
    <!-- END topicpagination -->

</div>


<!----------------------------------------------->
<!-- REGLES DE LA CATEGORIE (si activé) -------------->

<!-- BEGIN switch_forum_rules -->
<div class="panel" id="forum_rules">

    <!-- Titre "règlement" -->
    <div class="h3">{L_FORUM_RULES}</div>

    <!-- Règlement -->
    <div class="postbody">
        <!-- Image du règlement -->
        <!-- BEGIN switch_forum_rule_image -->
        <img class="left logo" src="{RULE_IMG_URL}" alt="" />
        <!-- END switch_forum_rule_image -->

        <!-- Contenu -->
        {RULE_MSG}
    </div>

</div>
<!-- END switch_forum_rules -->


<!----------------------------------------------->
<!-- REPONSE RAPIDE -------------->

<div class="container quickreply" id="quickreply_content">
    <!-- BEGIN switch_user_logged_in -->
    {QUICK_REPLY_FORM}
    <!-- END switch_user_logged_in -->
</div>


<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->


<div class="links_bar">
        <!-- Bouton : nouveau -->
        <!-- BEGIN switch_user_authpost -->
        <a class="buttons" href="{U_POST_NEW_TOPIC}" rel="nofollow"><img class="newtopic_button" src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a> 
        <!-- END switch_user_authpost -->
     
        <!-- Bouton : répondre -->
        <!-- BEGIN switch_user_authreply -->
        <a class="buttons" href="{U_POST_REPLY_TOPIC}"><img class="reply_button" src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
        <!-- END switch_user_authreply -->

    <!-- BEGIN switch_plus_menu -->
    <span class="right">
      <a href="{U_FAVOURITE_JS_PLUS_MENU}"><t2>Ajouter le sujet à ses favoris</t2></a>
    </span>
  <!-- END switch_plus_menu -->

</div>

<br/>

<!----------------------------------------------->
<!-- SAUTER VERS UN AUTRE FORUM -------------->


<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}" class="left">
    <fieldset class="jumpbox">
      <label><t2>{L_JUMP_TO}:</t2> </label>
      {S_JUMPBOX_SELECT} 
        <input class="button2" type="submit" value="{L_GO}" />
    </fieldset>
</form>


<!----------------------------------------------->
<!-- BOUTONS DE MODERATION -------------->

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}" class="right">
    <fieldset class="quickmod">
        <input type="hidden" name="t" value="{TOPIC_ID}" />

        <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
        <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />
        <label>{L_MOD_TOOLS}: </label>
        {S_SELECT_MOD}&nbsp;
        <input class="button2" type="submit" value="{L_GO}" />
    </fieldset>
  <span class="right">{S_TOPIC_ADMIN}</span>
</form>
<!-- END viewtopic_bottom -->

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

    <link rel="stylesheet" href="https://smalltalk.forumactif.com/h1-instagram">
<!-- Script image recadré -->
<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
    //<![CDATA[
    $(resize_images({
        'selector': '.postbody .content',
        'max_width': {
            switch_image_resize.IMG_RESIZE_WIDTH
        },
        'max_height': {
            switch_image_resize.IMG_RESIZE_HEIGHT
        }
    }));
    //]]>

</script>
<!-- END switch_image_resize -->

<!-- BEGIN switch_plus_menu -->
<script type="text/javascript">
    //<![CDATA[
    var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}',
        multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';

</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
    var hiddenMsgLabel = {
        visible: '{JS_HIDE_HIDDEN_MESSAGE}',
        hidden: '{JS_SHOW_HIDDEN_MESSAGE}'
    };
    showHiddenMessage = function(id) {
        try {
            var regId = parseInt(id, 10);
            if (isNaN(regId)) {
                regId = 0;
            }

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

        return false;
    };

    //]]>
 

</script>

Re: Version 2: Gris/Vert/Rose 
Meuf Géniale

Meuf Géniale
Admin
RP
Messages : 16
Date d'inscription : 10/08/2024
Hors RP

https://st-test.forumactif.com
Profil view body (dans les templates de profil)

Code:
<!-- IMPORTANT!!-->
<!-- ACTIVATE SIMPLE PROFILE: Users & Groups › Profiles › General options › Activate advanced profile: no -->

<br/>
<div class="container">

    <!-- Username -->
    <h1 class="page-title">{USERNAME}</h1>
 
  <!-- Rank-->
  <div id="rankprof"><numb>{POSTER_RANK}</numb></div>

    <!-- Profile contents -->
    <div class="user_profile">

        <!-- Avatar -->
        <div class="profile_avatar" id="user_avatar"> {AVATAR_IMG}</div>
     
        <!-- Profile info -->
        <div class="profile_infos">
         
            <div class="statsprofs" alt="1"><!-- BEGIN profile_field -->
          <!-- "Message" field contents -->
                        <!-- BEGIN profil_type_user_posts -->
                        <a rel="nofollow" href="/st/{PUSERNAME}" id="opentopics">Sujets ouverts</a><!-- topics opened by -->

                        <a rel="nofollow" href="/sta/{PUSERNAME}" id="alltopics">{L_TOPICS}</a> <!-- all topics -->
                            
                        <a rel="nofollow" href="/spa/{PUSERNAME}" id="allposts">{L_POSTS}</a> <!-- all posts -->
                        <!-- END profil_type_user_posts -->
   <!-- END profile_field -->
             
              <!-- "Last visited" field -->
                <div class="profile_field">
                    <label>{L_LAST_VISITED} : </label>
                    <field>{LAST_VISIT_TIME}</field>
                </div>
           
            <!-- Status: online -->
            <!-- BEGIN switch_show_status -->
              <div class="onlineprofs">{USER_ONLINE}</div>
            <!-- END switch_show_status -->
            </div>
           
            <!-- PROFILE FIELDS -->
            <div class="profile_content" alt="2">

              <!-- "Private messages" field -->
                <!-- BEGIN switch_dhow_mp -->
                <div class="profile_field">
                    <label>{L_PRIVATE_MSG} :</label>
                    <field>{PRIVATE_MSG}</field>
                </div>
                <!-- END switch_dhow_mp -->

                <!-- Other fields -->
                <!-- BEGIN profile_field -->
                <div class="profile_field" id="field_id{profile_field.ID}">
                    <label>{profile_field.LABEL}</label>
                    <field>{profile_field.CONTENT}

                        <!-- "Message" field contents -->
                       
              </field>
                </div>
                <!-- END profile_field -->

             
                 <!-- Character sheet -->
                <!-- BEGIN switch_rpg -->
                <!-- BEGIN rpg_fields -->
                <div class="profile_field">
                    <label>{switch_rpg.rpg_fields.F_NAME} :</label>
                    <field>{switch_rpg.rpg_fields.F_VALUE_NEW}</field>
                </div>
                <!-- END rpg_fields -->

                <fieldset class="submit-buttons">{U_ADMIN_RPG_NEW}</fieldset>
                <!-- END switch_rpg -->
            </div>
         
           
            <div class="profirls">
          </div>
           
            <div class="gifprofs">
          </div>
           
         
            <!-- End of profile fields -->

        </div>


    </div>
 
  <div class="profile_contact">
                <!-- Contact image link -->
                <form action="{S_PROFILE_ACTION}" method="post" name="post">
                    <!-- BEGIN contact_field -->
                    <div id="field_id{contact_field.ID}">{contact_field.CONTENT}</div>
                    <!-- END contact_field -->
                </form>
            </div>

    <!-- Profile moderation links -->
    <!-- BEGIN switch_auth_user -->
    <div class="profile_admin">{ADMINISTRATE_USER}{BAN_USER}</div>
    <!-- END switch_auth_user -->


</div>




<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function() {
        $('[id^=field_id]').each(function() {
            if ($(this).find('.field_editable').is('span, div')) {
                $(this).hover(function() {
                    if ($(this).find('.field_editable.invisible').is('span, div')) {
                        $(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
                        $(this).find('.ajax-profil_edit').attr({
                            alt: "{L_FIELD_EDIT_VALUE}",
                            title: "{L_FIELD_EDIT_VALUE}"
                        }).click(function() {
                            $(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
                            $(this).prev().find('.ajax-profil_valid').attr({
                                alt: "{L_VALIDATE}",
                                title: "{L_VALIDATE}"
                            }).click(function() {
                                var content = new Array();
                                $(this).parent().find('[name]').each(function() {
                                    var type_special = $(this).is('input[type=radio],input[type=checkbox]');
                                    if ((type_special && $(this).is(':checked')) || !type_special) {
                                        content.push(new Array($(this).attr('name'), $(this).attr('value')));
                                    }
                                });
                                var id_name = $(this).parents('[id^=field_id]').attr('id');
                                var id = id_name.substring(8, id_name.length);
                                $.post(
                                    "{U_AJAX_PROFILE}", {
                                        id: id,
                                        user: "{CUR_USER_ID}",
                                        active: "{CUR_USER_ACTIVE}",
                                        content: $.toJSON(content),
                                        tid: "{TID}"
                                    },
                                    function(data) {
                                        $.each(data, function(i, item) {
                                            $('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
                                        });
                                    },
                                    "json"
                                );
                            });
                            $(this).remove();
                        });
                    }
                }, function() {
                    if ($(this).find('.field_editable.invisible').is('span, div')) {
                        $(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
                        $(this).find('.ajax-profil_edit').remove();
                    }
                });
            }
        });
    });
    //]]>
</script>
           
Re: Version 2: Gris/Vert/Rose 
Contenu sponsorisé

RP
Hors RP