Manuel d'utilisation
Templates
.js
Javascript
Tout voir
Feuille de CSS
Hiérachie
Structure du forum
Root
Fond de la page
Conteneur généraux
Scrollbar
Tires des pages
Input et boutons
Ascenseur
Généralités
Liens et textes
Éléments esthétiques
Pagination
Editeur de texte
Entête du forum
Toolbar
Bannière
Barre de navigation
Annonces défilantes
Page principale
Page d'accueil
Catégories
Qui est en ligne
Forums
Entête et footer d'un forum
Liste des sujets
Sujets
Affichage d'un sujet
Sondages
Textes, balises,...
Page d'envoi d'un message
Membres
Page de profil
Profil simplié des tags
Modifier le profil
Liste des membres
Messages privés
Liste des messages privés
Affichage d'un message privé
Blogs
Liste des blogs
Affichage d'un blog
Commentaires d'un blogs
Poubelle de Forumactif
Feuille de CSS
/****** STRUCTURE DU FORUM -----------------------------------------------------------
****** Elements du forum qui déifnissent sa structure et hiérachie sur toutes les pages
****** (ne les RENOMMEZ PAS, ils sont généraux aux pages Web ou à Forumactif) ------- ******/
/*** ROOT
*** tuto : https://code-lab.tumblr.com/post/634694343906689024/cssroot ***/
:root {
--text: #333;
--link: #000;
--light: #FFF;
--lighter: #fafafa;
--grey: #F4F4F4;
--greyer: #E5E5E5;
--border: 1px solid #E5E5E5;
--font: 'Open Sans';
}
/*** ------------------------------- ***/
/*** FOND DE LA PAGE --------------- ***/
body {
background: var(--grey);
font-family: 'Open Sans';
}
/*** ------------------------------- ***/
/*** CONTENEUR GENERAUX --------------- ***/
/*structure principale*/
.main_forum {
width: 840px;/*largeur forum*/
margin: 10px auto 10px;/*espace top - centrer auto - espace bottom*/
padding: 20px;
background: #fff;
border-radius: 5px;
}
/* Conteneur de toutes les sous-sections
* comme les encadrés d'options, de rappel, etc... */
.panel {
background: var(--light) !important;
border: var(--border);
border-radius: 5px;
padding: 5px;
margin: 10px 0;
}
/* FACULTATIF : on annules toutes les propriétés établies pour la classe .panel
* dans le cas où la classe .panel se repète deux fois. Ca évite les doublons et l'effet répétitif. */
.panel .panel {
background: transparent;
border: none;
padding: 0;
margin: 0;
border-radius: 0;
}
/* Conteneur des parties inaccessibles de FA (comme la liste des sujets les plus actifs, par ex.)
* Il est conseillé de les personnaliser de la même façon que le reste de votre design.
* Pour les repérer, n'hésitez pas à utiliser l'outil d'inspecteur Web */
.forabg, .forumbg {
background: var(--grey);
background-image: none !important;
border: var(--border);
border-radius: 5px;
padding: 8px;
margin-bottom: 10px !important;}
.row, .row1, .row2 {
border: none !important;
background: transparent !important;
}
/* Fond de l'encadré "recherche */
.overview {
background: var(--light);
}
/* 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;
}
/*** ------------------------------- ***/
/*** SCROLLBAR --------------------- ***/
/* Scrollbar entière */
::-webkit-scrollbar {width: px;}
/* Rail */
::-webkit-scrollbar-track {}
/* Poignée */
::-webkit-scrollbar-thumb {}
/*** ------------------------------- ***/
/*** TITRES DES PAGES -------------- ***/
/* Utilisé pour des titres de pages */
h1, h1.page-title {
color: var(--link);
margin: 10px 0 20px;
font-size: 18px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-align: center;
}
/* Utilisé pour des titres de sujets, blogs... */
h2 {
display: inline-block !important;
margin: 0;
font-size: 13px;
font-weight: 700;
}
/* Utilisé pour des titres de sous-sections, petit encadré, ...*/
.h3, h3 {
color: var(--text);
border: none !important;
padding-bottom: 10px;
margin: 0;
text-transform: none !important;
font-size: 14px;
}
/*** ------------------------------- ***/
/*** BOUTONS D'INTERACTION ET BARRE DE TEXTE ***/
/* BARRE DE TEXTE ---*/
input.inputbox {
border: var(--border) !important;
border-radius: 5px;
background: var(--grey) !important;
}
/* BOUTONS D'INTERACTION --- *
* Envoyer, prévisualiser, sauvegarder, aller,... */
.button1, .button2, a.button1, a.button2, button.button2, input.button1, input.button2 {
font-size: 12px;
padding: 2px 3px!important;
border: var(--border) !important;
border-radius: 5px;
background: var(--grey) !important;
}
/* MENUS DEROULANTS --- */
select {
background: transparent !important;
border: var(--border) !important;
border-radius: 5px;
font-size: 12px;
}
/*** ------------------------------- ***/
/*** ASCENSEUR --------------------- ***/
/* Conteneur de l'ascenseur
* Sert essentiellement à définir où le placer dans la page */
.elevator {
position: fixed;
bottom: 20px;
right: 10px;
width: 100px;
}
/* Lien de renvoi haut/bas */
.elevator a {
display: block;
padding: 5px 8px;
background: var(--light);
border: var(--border);
border-radius: 5px;
text-align: center;
margin-top: 5px;
}
/****** ------------------------------------------------------------------------------
****** GÉNÉRALITÉS ------------------------------------------------------------------
****** Sélecteurs généraux s'appliquant à plusieurs reprises sur tout le forum ******/
/* S'applique à TOUS les éléments du forum*/
* { box-sizing: border-box; /*évite que les éléments soient agrandis par le padding*/
font-size: 12px;}
/*** ------------------------------- ***/
/*** LIENS ET TEXTE -------------------- ***/
/* LIENS DU FORUM --- */
a {
font-weight: 600;
text-decoration: none !important;}
/*liens au survol*/
a:hover {}
/*liens visités*/
a:visited {}
/* TEXTES --*/
p {font-size: 12px !important;}
/* Contenu de tous les messages postés (en sujet comme en MP)*/
.postbody, .content {
width: 100%; /*ne pas retirer*/
font-size: 12px!important;
}
/* Emoji mis par défaut de FA
* Les réduire les rend moins horribles à voir */
.emojione {
width: 13px !important
}
/*** ------------------------------- ***/
/*** ELEMENTS ESTHETIQUES ---------- ***/
/* Contenur général qui sert généralement de fond et/ou de contour*/
.container {
background: var(--grey);
border: var(--border);
padding: 8px;
border-radius: 5px;
}
/* Barre de séparation */
.separator {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid var(--grey);
clear: both;
}
/* Conteneur moins large (les historiques des messages essentiellement) */
.wrapped {
width: 80%;
margin: 20px auto !important;
}
/* Permet d'aligner un élément à droite ou à gauche */
.right {float: right}
.left {float: left}
/* Barre de gestion
* Contient des boutons ou des liens spéciaux */
.links_bar {
height: 38px;
border: var(--border);
border-radius: 5px;
margin: 10px 0;
padding: 8px;
display: flex;
justify-content: space-between;
align-items: center;
clear: both;
}
/* Mise en valeur d'un lien spécial */
a.specials_links,
.specials_links a,
span.specials_links {
background: var(--grey);
border-radius: 5px;
height: 24px;
padding: 2px 8px;
}
/* On retire les liens spéciaux vide (pour les invités) */
a.specials_links:empty,
.specials_links a:empty,
span.specials_links:empty {
display: none
}
/* 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(--grey);
}
/*** ------------------------------- ***/
/*** PAGINATION -------------------- ***/
/* FA utilise la même classe .pagination partout intégrée dans ses variables (on ne peut donc pas la retirer des templates)
* Ici, on la "reset" pour en faire ce qu'on veut. */
.pagination {
float: none !important;
margin-top: 0 !important;
text-align: left !important;
}
/*lien unique vers les pages numérotées*/
.pagination span a {
background-color: var(--grey) !important;
border: none !important;
color: var(--link) !important;
border-radius: 3px;
font-size: 12px !important;
margin: 0 2px;
padding: 1px 4px;
}
/*survol des liens uniques des pages*/
.pagination span a:hover {
background-color: var(--greyer) !important;
}
/*lien actif : page sur laquelle vous vous trouvez */
.pagination span strong {
background-color: var(--link);
border-radius: 3px;
border: none !important;
margin: 0 2px;
padding: 1px 4px;
}
/*suppression de l'image-lien "aller à la page suivante" */
.page-topic span a:last-child {
display: none;
}
/*** ------------------------------- ***/
/*** EDITEUR DE TEXTE -------------- ***/
/*NE PAS MODIFIER*/
.quickreply div#textarea_content {width: 100% !important;}
/*centrer la réponse rapide*/
.quickreply {
display: flex;
justify-content: center;
}
/*Longueur de l'éditeur de texte*/
form#quick_reply {
width: 705px;
}
/* Retire le cadre de la réponse rapide pour les invités */
#quickreply_content:empty {
display: none;
}
/* Editeur de texte */
.sceditor-container {}
/* Barre d'outils de l'éditeur de texte*/
div.sceditor-toolbar {
background: var(--light) !important;
border-bottom: var(--border) !important;
}
/* Conteneur des groupes d'outils */
div.sceditor-group {
background: var(--grey) !important;
border-bottom: var(--border) !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 {
/*ne pas supprimer*/
width: 100% !important;
margin: 0 !important;
padding: 5px !important;
/*ne pas supprimer*/
min-height: 150px !important;
}
/****** ------------------------------------------------------------------------------
****** ENTETE DU FORUM --------------------------------------------------------------
****** Tous les éléments qui s'affichent en tête de toutes les pages ---------------- ******/
/*** ------------------------------- ***/
/*** TOOLBAR ----------------------- ***/
/* Supression de la barre de recherche, des boutons sociaux et des flèches */
#fa_search,
#fa_share,
#fa_hide {
display: none !important
}
/* Logo Forumactif :
* ATTENTION, il est techniquement interdit de supprimer de logo de FA.
* Techniquement. Faites-en donc ce que vous voulez. */
#fa_left {}
/* Toute la toolbar */
#fa_toolbar {
font-size: 12px !important;
font-family: var(--font);
background: transparent !important;
}
/* Conteneur du lien de bienvenue et notification */
#fa_right {
position: relative;
margin-top: 5px;
margin-right: 5px;
background: var(--light);
border: var(--border);
border-radius: 5px;
height: 40px;
display: flex !important;
align-items: center;
padding: 5px;
font-size: 12px !important;
}
/* Liens contenus à droite */
#fa_right a {
color: var(--link) !important;
font-weight: 600 !important;
margin-left: 0 !important;
}
/* Lien "Connexion" */
#fa_right a.rightHeaderLink:first-child { margin-right: 10px;}
/* Lien "S'enregistrer" */
#fa_right a.rightHeaderLink:last-child {}
/* Lien "Bienvenue (pseudo)" */
#fa_welcome {}
/* Lien "notification"*/
#fa_notifications
/* liens "bienvenue" et "notification" [AU CLIC] */
#fa_right.welcome #fa_menu #fa_welcome,
#fa_toolbar > #fa_right.notification > #fa_notifications {
background: var(--grey);
border-radius: 5px;
}
/* Affichage du menu bienvenue [ET] liste des notification */
ul#fa_menulist,
ul#notif_list {
border: var(--border) !important;
background: var(--light);
border-radius: 5px;
right: 0;
left: initial!important;
}
/* Menu bienvenue */
ul#fa_menulist {
margin-top: 10px;
width: 300px!important;
}
/* Image de l'avatar dans le menu bienvenue */
#fa_usermenu img {
object-fit: cover;
object-position: center;
}
/* Liste des notifications*/
ul#notif_list {
top: 50px;
font-size: 12px !important;
font-family: var(--font);
}
/* Lien dans une notification*/
ul#notif_list a {
text-decoration: none !important
}
/* Notifications non lues */
#notif_list .unread {
background: var(--grey) !important;
}
/* Lien "voir toutes les notifications" */
#notif_list .see_all {
background: var(--grey) !important;
border-radius: 5px;
margin: 5px !important;
}
/* Conteneur de l'avatar toolbar */
.fa_avatar {
position: absolute;
top: -1px;
left: -45px;
width: 40px;
height: 40px;
border-radius: 5px;
border: var(--border);
background: var(--light);
display: grid;
place-items: center;
}
/* Image de l'avatar */
.fa_avatar img {
object-fit: cover;
object-position: center;
width: 30px;
height: 30px;
border-radius: 3px;
}
/* Placement du pop-up de nouvelle notification */
#fa_toolbar #live_notif {
top: 45px;
right: 0px!important;
}
/* Stylisation du pop-up */
#fa_toolbar #live_notif .fa_notification { }
/* Lien à l'intérieur du pop-up de notification */
#live_notif a {
color: var(--light)!important;
}
/*** ------------------------------- ***/
/*** SWITCHEROO - Par Monomer ------ ***/
/*** Gestionnaire de multicompte --- ***/
:root {
--gap-size: 16px;
--ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
/* BARRE SWITCHEROO --- */
.switcheroo {}
.switcheroo[position="static"] {
position: relative;
}
/* si barre EN HAUT */
.switcheroo[position="top"] {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
/* si barre EN BAS */
.switcheroo[position="bottom"] {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
/* si barre A L'HORIZONRAL */
.switcheroo[direction="horizontal"] {
width: 100%;
}
/* si barre A LA VERTICAL */
.switcheroo[direction="vertical"] {
height: 100%;
}
/* Positionnement des ronds */
.switcheroo__squircles {
display: flex;
margin: 0;
padding: 0;
list-style: none;
padding: var(--gap-size);
gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
flex-direction: column;
}
/* BARRE --- */
.switcheroo {
color: var(--color-text);
background-color: var(--light);
border: var(--border);
font-size: 16px;
}
/* AFFICHAGE DES COMPTES ---*/
/* Rond */
.switcheroo__squircle {
position: relative;
display: grid;
place-items: center;
background-color: var(--grey);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: border-radius 128ms var(--ease);
}
/* Rond au survol */
.switcheroo__squircle:hover {
border-radius: 6px;
background: var(--greyer)
}
/* Contenenur de l'avatar */
.switcheroo__avatar {}
/* Image de l'avatar */
.switcheroo__avatar img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 50%;
transition: border-radius 128ms var(--ease);
position: relative;
}
/* Image de l'avatar au survol */
.switcheroo__avatar img:hover {
border-radius: 5px;
}
/* Avatar du compte connecté */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
border-radius: 6px;
cursor: default;
}
/* Indicateur de l'avatar survolé */
.switcheroo__squircle:before {
content: "";
display: block;
background-color: var(--grey);
border: var(--border);
border-radius: 50%;
height: 48px;
width: 48px;
opacity: 0;
pointer-events: none;
position: absolute;
top: -5px;
bottom: 0;
right: 0;
left: -5px;
z-index: -1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* Indicateur du compte sélectionné/actif */
.switcheroo__squircle.active:before {
opacity: 1;
border-radius: 8px;
}
.switcheroo__squircle:hover:before {
border-radius: 8px;
opacity: 1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* 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(--red);
transform: scale(0);
opacity: 1;
transition: transform 128ms var(--ease), opacity 64ms var(--ease);
cursor: pointer;
color: var(--light);
}
.switcheroo__squircle:hover .switcheroo__delete {
opacity: 1;
transform: scale(1);
}
/* TOOLTIP - INFOBULLE DU PSEUDO ---*/
/* Conteneur du pseudo */
.switcheroo__popper {
background-color: var(--text);
padding: 0.68rem 1rem;
position: absolute;
width: -webkit-max-content;
width: max-content;
border-radius: 4px;
z-index: 0;
opacity: 0;
transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
pointer-events: none;
color: #fff;
}
/* Conteneur du pseudo: si vertical */
.switcheroo[direction="vertical"] .switcheroo__popper {
left: 155%;
top: 50%;
transform-origin: left;
transform: translateY(-50%) scale(0.98);
}
/* Conteneur du pseudo : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper {
top: 155%;
left: 50%;
transform-origin: top;
transform: translateX(-50%) scale(0.98);
}
/* Flèche tooltip */
.switcheroo__popper:before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background-color: var(--text);
z-index: -1;
}
/* Flèche tooltip : si vertical */
.switcheroo[direction="vertical"] .switcheroo__popper:before {
left: -2px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* Flèche tooltip : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
left: 50%;
top: -2px;
transform: translateX(-50%) rotate(-45deg);
}
/* Positionnement tooltip au survol */
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* LOGO --- */
.switcheroo__logo {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
}
/* DIVIDER : barre de séparation --- */
.switcheroo__divider {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
background-color: var(--greyer);
border-radius: 3px;
transform: scale(0.8);
}
/* Divider : si vertical */
.switcheroo[direction="vertical"] .switcheroo__divider {
width: 100%;
height: 2px;
}
/* Divider : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__divider {
width: 2px;
}
/* AJOUTER UN COMPTE ---*/
/* button : ajouter un compte */
.switcheroo__squircle--button {
transition: border-radius 128ms var(--ease);
color: var(--text);
}
.switcheroo__squircle--button:hover {
color: var(--light);
font-weight: bold;
}
/* MODAL : FENETRE DE CONNEXION --- */
/* Fond de l'afficage 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(255, 255, 255, 0.6);
}
/* Boîte de connexion */
.monomer-modal {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
opacity: 0;
width: 94%;
padding: 24px 20px;
transition: 0.2s opacity ease;
transform: translate(-50%, -50%);
border-radius: 5px;
background: var(--grey);
border: var(--border);
color: var(--text);
}
/* Formulaire */
.switcheroo__form {
padding: 48px;
background: var(--light);
border-radius: 5px;
}
/* Champs à remplir */
.switcheroo__form-row {
display: flex;
flex-flow: column;
align-items: flex-start;
margin-bottom: 16px;
}
/* Nom du champs */
.switcheroo__form-label {
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
/* Zone de texte */
.switcheroo__form-input {
padding: 6px;
font-size: 16px;
border-radius: 4px;
width: 100%;
background-color: var(--light);
border: var(--border)!important;
border-bottom: 3px solid var(--greyer)!important;
color: var(--text);
cursor: text;
}
/* Bouton de connexion */
.switcheroo__form-button {
border-radius: 8px;
padding: 4px 6px;
border: none;
outline: none;
box-shadow: none;
text-transform: uppercase;
font-size: 14px;
align-self: flex-end;
background-color: var(--light);
border: var(--border);
cursor: pointer;
}
.switcheroo__form-button:hover {
border: 1px solid transparent;
background: var(--text);
color: var(--light);
}
.monomer-modal.monomer-open, .monomer-overlay.monomer-open {
opacity: 1;
}
/* Fermer la boîte de connexion */
.monomer-close {
font-size: 20px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
position: absolute;
top: -7px;
right: -7px;
padding: 5px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: var(--red);
border-radius: 50%;
padding: 0;
}
.monomer-close:hover {
background: var(--text);
font-weight: 700;
}
/*** ------------------------------- ***/
/*** BANNIERE ---------------------- ***/
#header { }
#header img { }
/*** ------------------------------- ***/
/*** BARRE DE NAVIGATION ----------- ***/
/* Conteneur de la barre de nav */
.navbar {
background: var(--grey) !important;
border: var(--border);
border-radius: 5px;
margin-top: 10px;
padding: 5px;
height: 40px;
display: flex;
/*ne pas supprimer*/
align-items: center;
/*centre verticalement*/
justify-content: center;
/*centre horizontalement*/
}
/* Suprresion des liens peu utilisé en les identifiant par leur numéro d'ordre*/
.navbar li:nth-child(2), /*calendrier*/
.navbar li:nth-child(3), /*faq*/
.navbar li:nth-child(6) /*groupes*/
{
display: none !important
}
/* liens de navigation */
a.mainmenu {
padding: 6px;
}
/* Lien navigation au survol*/
a.mainmenu:hover {
background: var(--light);
border-radius: 5px;
}
/* Image des liens */
a.mainmenu img {
display: none
}
/*** ------------------------------- ***/
/*** ANNONCES DEFILANTES ----------- ***/
/* Barre défilante */
.module {
background: transparent !important;
border-radius: 5px;
border: var(--border);
margin: 10px 0;
padding: 4px 8px;
}
/* Intérieur d'une annonce*/
#fa_ticker_container {
margin-bottom: 4px;/*ne pas retirer*/
}
/****** ------------------------------------------------------------------------------
****** PAGE PRINCIPALE -------------------------------------------------------------- ******/
/* PAGE D'ACCUEIL ---*/
.introduction { }
/* CADRE DE CONNEXION RAPIDE --- */
.user_login_form {margin: 0 !important}
/*** ------------------------------- ***/
/*** CATEGORIES -------------------- ***/
/* Titre d'une catégorie
* Il est conseillé de garder le selecteur ".cate_title h2"
*/
.cate_title h2 {
display: block !important;
text-align: center;
text-transform: uppercase;
font-size: 18px !important;
font-weight: 700 !important;
margin: 10px 0 20px;
}
.forums {}
.forum_row {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto;
grid-row-gap: 1px;
margin-bottom: 10px;
}
.forum_row:last-child {margin-bottom: 0}
.forum_row > div {
background: var(--light);
padding: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.top_row {border-radius: 5px 5px 0 0;}
a.forumtitle {
width: 100%;
margin-bottom: 10px;
font-size: 16px;
}
img.forum-img {
background: var(--grey);
width: 60px;
height: 60px;
}
.forum_desc {
height: 60px;
overflow: auto;
width: 435px;
margin: 0 10px;
}
.forum_lastpost-avatar {
width: 60px;
height: 60px;
margin-right: 10px;
}
.forum_lastpost-avatar img {
background: var(--grey);
width: 60px;
height: 60px;
object-fit: cover;
object-position: center;
}
.forum_lastpost {
display: flex;
align-items: center;
width: 152px;
}
.bottom_row {border-radius: 0 0 5px 5px;}
#ssforum {font-size: 0}
#ssforum a {font-size: 12px;margin-right: 10px;}
.forum_stats {
font-weight: 600;
float: right;
}
/*** ------------------------------- ***/
/*** QUI EST EN LIGNE -------------- ***/
.qeel {
background: var(--grey);
border: var(--border);
border-radius: 5px;
padding: 8px;
display: grid;
grid-template-columns: 247px 286px 247px;
grid-gap: 1px;
margin-bottom: 10px;
}
.qeel > div {
background: var(--light);
padding: 15px 10px;
}
.qeel-right {
border-radius: 5px 0 0 5px;
}
.qeel-right #last_user {display: flex; align-items: center;}
.qeel-right #lastuser_avatar img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 5px;
margin-right: 10px;
}
.qeel-right a.groups {
display: block;
background: var(--grey);
border-radius: 5px;
text-align: center;
padding: 2px 0;
margin-bottom: 5px;
}
.qeel-right a.groups:hover {
background: var(--lighter)
}
.qeel-right a.groups:last-child {margin-bottom: 0}
/*X connectés :: 1 membre, 0 invisible, 0 invité*/
#total_users {}
/*Connectés en ce moment*/
#online_users {
min-height: 72px;
max-height: 72px;
overflow: auto;
}
/*ne pas supprimer*/
#online_users br {
display: none
}
.qeel-middle .credits {
font-size: 10px;
border: var(--border);
border-radius: 5px;
padding: 5px;
margin-top: 5px;
}
.qeel-left {
border-radius: 0 5px 5px 0;
text-align: justify;
}
/****** ------------------------------------------------------------------------------
****** FORUMS ----------------------------------------------------------------------- ******/
/*** ------------------------------- ***/
/*** 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 {
display: flex;
justify-content: space-between;
}
/* chaîne de lien de navigation : catégorie > forum > sous-fo */
.navigation_chain {
font-size: 0;
/*retire les :: de séparation */
}
.navigation_chain a {
font-size: 12px;
/*rétablit le font-size: 0*/
margin-right: 8px;
}
.navigation_chain a:before {
content: '›';
/*symbole ou texte modifiable*/
font-size: 14px;
margin-right: 3px;
}
/* BOUTONS DE SUJET ---*
* (réutilisé dans l'affichage d'un sujet (viewtopic_body) et les MP (privmsgs_body) */
.buttons {
background: var(--grey);
padding: 1px 8px;
margin-right: 5px;
border-radius: 5px;
}
.buttons:hover {background: var(--lighter);}
/*ne pas retirer*/
#users_here br {display: none}
/* OUTILS DE MODÉRATION D'UN FORUM ---*/
/*Supprime le texte inutile*/
#moderation_forum_tools, #moderation_forum_tools strong {
font-size: 0px;
}
/* Lien de modération du forum */
#moderation_forum_tools a {
background: var(--grey);
border-radius: 5px;
height: 24px;
padding: 2px 8px;
}
/*** ------------------------------- ***/
/*** LISTE DES SUJETS -------------- ***/
.topicslist_row {
background: var(--light);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
display: grid;
grid-column-gap: 10px;
grid-template-columns: 50px 375px 95px 50px 152px;
grid-template-rows: 50px auto;
align-items: center;
}
.topicslist_row:last-child {margin-bottom: 0}
.topicslist_row:hover {background: var(--lighter)}
.topicslist-img {
width: 50px;
height: 50px;
background: var(--grey);
}
.topicslist-infos {}
.topictitle {}
.topic_msgicon { margin-right: 5px }
.topic-type {}
.topic-author {}
.topiclist-infos img {margin-right: 3px}
.topicslist_icon {}
.topicslist-stats {text-align: right;}
.topicslist-avatar-lastpost img {
object-fit: cover;
object-position: center;
width: 50px;
height: 50px;
background: var(--grey);
}
.topicslist-description {
grid-column: 1 / span 5;
border-top: 1px solid var(--grey);
margin: 10px -10px 0;
padding: 5px 10px 0;
}
/****** ------------------------------------------------------------------------------
****** AFFICHAGE D'UN SUJET --------------------------------------------------------- ******/
/*** ------------------------------- ***/
/*** SUJET ------------------------- ***/
.post_row {
background: var(--light);
display: grid;
grid-template-columns: 220px 563px;
grid-template-rows: 38px auto;
}
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;}
.post_details {
grid-column: 1 / span 2;
padding: 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--grey);
}
.post_date {flex-grow: 100;}
/* BOUTONS D'EDITION DU MESSAGE --- */
/* Conteneur boutons d'édition */
ul.profile-icons {
margin-top: 0 !important;
flex-grow: 1;
}
/*UN SEUL bouton d'édition */
ul.profile-icons li {
margin: 0 0 0 6px !important;
padding: 2px;
}
/*hover d'un bouton d'édition*/
ul.profile-icons li:hover {
background: var(--grey);
border-radius: 5px;
}
/* BOUTON LIKE --- */
/* Conteneur du bouton like */
.like_button {
float: right;
margin-left: 10px;
flex-grow: 1;
}
/* Bouton like
* Le bouton de base de forumactif étant déjà très personnalisé,
* il est conseillé d'appliquer !important à chaque déclaration
*/
.rep-button,
.rep-button:active,
.rep-button:focus {
margin: 0 !important;
background: var(--grey) !important;
border: none !important;
box-shadow: none !important;
float: none !important;
font-family: var(--font) !important;
padding: 3px 5px !important;
border-radius: 5px;
text-transform: inherit !important;
line-height: normal !important;
color: var(--text) !important;
font-weight: 600 !important
}
/*Bouton au survol*/
.rep-button:hover {background: var(--greyer) !important;}
/* Texte "j'aime" */
button.rep-button .like_text {}
/*compteur de like*/
button.rep-button .rep-nb {
line-height: normal !important;
margin-left: 5px;
padding: 0 3px;
background: var(--light);
border-radius: 3px;
border: none !important;
}
.post_profil {
padding: 10px;
border-right: 1px solid var(--grey);
border-bottom: 1px solid var(--grey);
}
/* Lien "@" de mention */
a.fa-mention { }
/* La variable de l'image "en ligne" s'applique en background-image,
* il faut donc donner au conteneur la taille de l'image pour qu'elle apparaisse pleinement
*/
.online {width: 46px;height: 16px;}
.post_message {
padding: 10px;
border-bottom: 1px solid var(--grey);
}
/* REPONSE RAPIDE --- */
/*supression de la mention "réponse rapide" */
.quickreply div.h3 {display: none}
/*** ------------------------------- ***/
/*** SONDAGE ----------------------- ***/
.poll {
background: var(--light);
border-radius: 5px;
margin-bottom: 10px;
}
.head_poll {
padding: 10px;
border-bottom: 1px solid var(--grey);
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(--grey);
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(--grey);
}
.poll_vote:nth-child(2),
.poll_option:first-child
{padding-top: 20px;}
/*** ------------------------------- ***/
/*** TEXTES, BALISES, ETC ---------- ***/
/* Lien-tag des utilisateurs */
.mentiontag {}
/* BALISES DE MESSAGE : spoiler, code, quote...
* Utilisez !important pour personnaliser au-dessus des bases de FA si besoin
*/
/*Balise code*/
#blank_code {
width: 85%;
margin: 0 auto;
border-radius: 5px;
border: var(--border) !important;
}
/* titre "code" */
#blank_code dt {
background: var(--grey);
border-radius: 5px;
padding: 2px 5px;
border: none !important;
margin: 0 !important;
}
/* Sélectionner le code */
.selectCode {
float:right;
text-transform: uppercase;
cursor:pointer;
font-size: 10px;
}
/*contenu code*/
#blank_code code {}
/*Balise spoiler*/
#blank_spoiler {
width: 85%;
margin: 0 auto;
border-radius: 5px;
border: var(--border) !important;
}
/*titre "spoiler*/
#blank_spoiler dt {
background: var(--grey);
border-radius: 5px;
padding: 2px 5px;
border: none !important;
margin: 0 !important;
}
/*contenu spoiler*/
.spoiler_content {margin: 5px 5px 2px;}
/*Balise citation*/
blockquote#blank_quote {
margin: 15px !important;
border: none !important;
border-left: 2px solid var(--grey) !important;
;
}
/*Citation : titre "XXX a écrit"*/
blockquote#blank_quote cite {}
/*Balise hide*/
#blank_hide {
padding: 10px;
width: 85%;
margin: 0 auto;
border-radius: 5px;
background: var(--lighter);
border: none !important;
}
/*Balise blockquote*/
blockquote {border: none !important;}
/*** ------------------------------- ***/
/*** PAGE D'ENVOI D'UN MESSAGE ----- ***/
/* Largeur de la boîte des smileys */
#smiley-box, .smile-status-box {width: 20%!important;}
/* Largeur de la zone de texte */
#message-box #textarea_content { width: 78%!important }
/* Prévisualisation d'un message */
#preview {
background: var(--light)!important;
padding: 0 10px 10px;
border: var(--border)!important;
border-radius: 5px;
}
/****** ------------------------------------------------------------------------------
****** MEMBRES ------------------------------------------------------ ******/
/*** ------------------------------- ***/
/*** PAGE DE PROFIL ---------------- ***/
.user_profil {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 220px auto;
}
.profil_avatar {
padding: 10px;
border-right: 1px solid var(--grey);
}
.profil_infos {padding: 10px;}
.profil_contact form {display: flex;}
.profil_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 */
.profil_contact form div:nth-child(n+4) {display: none}
.profil_content {
margin-top: 20px;
height: 265px;
overflow: auto;
}
.profil_field {
margin: 10px 0;
display: grid;
grid-template-columns: 120px auto;
}
.profil_field label {
font-weight: 600;
color: var(--link);
}
.profil_field field {}
.profil_admin {
text-align: center;
margin: 10px 0 0;
}
/*** ------------------------------- ***/
/*** PROFILS SIMPLIFIÉS DES TAGS ---- ***/
/* Supression de la flèche peu esthétique*/
.tooltipster-arrow {display: none !important}
.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: 16px !important;
}
.preview_contacts {
position: absolute;
bottom: 8px;
right: 10px;
}
.preview_contacts a {margin-left: 5px}
.tooltipster-arrow {display: none}
/*** ------------------------------- ***/
/*** MODIFIER LE PROFIL ------------ ***/
/* Onglets dans la modification de profil */
div#tabs {margin: 20px 0 10px !important;}
/* Permet d'espacer équitablement tout les onglets*/
#tabs ul {
display: flex;
justify-content: space-between;
}
/* Onglet selectionné */
#tabs li.activetab {
background: var(--grey);
border-radius: 5px;
}
/* Liens d'onglet */
#tabs a {padding: 4px !important;}
#tabs a:hover {
background: var(--grey);
border-radius: 5px;
}
/* Texte contenu dans l'onglet */
#tabs a span {padding: 0 !important;}
/* Suppression de l'onglet "amis et ignorés"
* Déjà supprimé dans le profil seul et permet d'aligner tous les onglets sur une ligne */
div#tabs li:nth-child(5) { display: none;}
/*** ------------------------------- ***/
/*** LISTE DES MEMBRES ------------- ***/
.userlist {
display: grid;
grid-template-columns: 385px 385px;
grid-gap: 10px;
}
.userlist_profil {
display: grid;
grid-template-columns: 95px auto;
grid-gap: 1px;
}
.userlist_avatar {
background: var(--light);
padding: 10px;
border-radius: 5px 0 0 5px;
}
.userlist_avatar img {
width: 75px;
height: 120px;
}
.userlist_details {
background: var(--light);
padding: 10px;
border-radius: 0 5px 5px 0;
}
.userlist_pseudo {font-size: 14px;}
.userlist_infos {}
.userlist_contact {}
/****** ------------------------------------------------------------------------------
****** MESSAGES PRIVES -------------------------------------------------------------- ******/
/*** ------------------------------- ***/
/*** LISTE DES MPs ----------------- ***/
.mp_row {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 55px auto;
margin-bottom: 5px;
}
.mp_row:hover {background: var(--lighter);}
.mp_img {
padding: 10px;
border-right: 1px solid var(--grey);
}
.mp_img img {
width: 35px;
height: 35px;
background: var(--grey);
}
.mp_infos {padding: 10px;}
/*** ------------------------------- ***/
/*** AFFICHAGE D'UN MESSAGE PRIVÉ -- ***/
.message {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 220px auto;
grid-template-rows: 38px auto;
}
.message_infos {
grid-column: 1 / span 2;
border-bottom: 1px solid var(--grey);
padding: 10px;
display: flex;
justify-content: space-between;
}
.message_profil {
padding: 10px;
border-right: 1px solid var(--grey);
text-align: center;
}
.message_content { padding: 10px;}
/****** ------------------------------------------------------------------------------
****** BLOGS ------------------------------------------------------------------------ ******/
/*** ------------------------------- ***/
/*** LISTE DES BLOGS --------------- ***/
.bloglist {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 65px auto;
grid-template-rows: 60px auto;
margin-bottom: 10px;
}
.bloglist_date {
grid-row: 1 / span 2;
padding: 10px;
border-right: 1px solid var(--grey);
line-height: 22px;
text-align: center;
}
.blog_daymonth {font-size: 16px;font-weight: 700;}
.blog_year {font-size: 18px;}
.bloglist_infos {
display: flex;
justify-content: space-between;
padding: 10px;
}
.bloglist_details {text-align: right}
.bloglist_resum { padding: 0 10px 10px;}
/*** ------------------------------- ***/
/*** AFFICHAGE D'UN BLOG ---------- ***/
.blog_post {
background: var(--light);
display: grid;
grid-template-rows: 38px auto;
border-radius: 5px;
}
.blog_details {
padding: 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--grey);
}
.blog_author {flex-grow: 100;}
/*** ------------------------------- ***/
/*** COMMENTAIRES D'UN BLOG -------- ***/
.blog_comment {
border: var(--border);
padding: 10px;
border-radius: 5px;
margin: 5px auto 10px;
}
.comment_avatar {margin-right: 10px;float: left;}
.comment_avatar img {
object-fit: cover;
object-position: center;
border-radius: 5px;
width: 40px !important;
height: 40px !important;
margin:0!important;
}
.comment_details {
height: 40px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
.comment_details .left {flex-grow: 100;}
.comment_content {margin-left: 50px;}
/****** ------------------------------------------------------------------------------
****** POUBELLE DE FORUMACTIF -------------------------------------------------------
****** Les éléments dont on veut plus ----------------------------------------------- ******/
ul.topics dd.dterm, ul.topics dt {padding-left: 60px!important}
dl.icon {background-size: 40px}
.adminlink br {display: none}
.corners-top {display: none !important}
.corners-bottom {display: none !important}
li.header dl.icon, ul.topiclist li.header, table.table1 thead { display: none !important;}
.forumbg table.table1 {margin: 0;}
form[name=notif_opts] table.table1 thead { display: contents!important}
#cp-main table.table1 thead th { border: none!important}
#cp-main {float: none !important; margin: 0 auto !important;}
Structure du forum
Root
/*** tuto : https://code-lab.tumblr.com/post/634694343906689024/cssroot ***/
:root {
--text: #333;
--link: #000;
--light: #FFF;
--lighter: #fafafa;
--grey: #F4F4F4;
--greyer: #E5E5E5;
--border: 1px solid #E5E5E5;
--font: 'Open Sans';
}
Fond de la page
body {
background: var(--grey);
font-family: 'Open Sans';
}
Conteneur généraux
/*structure principale*/
.main_forum {
width: 840px;/*largeur forum*/
margin: 10px auto 10px;/*espace top - centrer auto - espace bottom*/
padding: 20px;
background: #fff;
border-radius: 5px;
}
/* Conteneur de toutes les sous-sections
* comme les encadrés d'options, de rappel, etc... */
.panel {
background: var(--light) !important;
border: var(--border);
border-radius: 5px;
padding: 5px;
margin: 10px 0;
}
/* FACULTATIF : on annules toutes les propriétés établies pour la classe .panel
* dans le cas où la classe .panel se repète deux fois. Ca évite les doublons et l'effet répétitif. */
.panel .panel {
background: transparent;
border: none;
padding: 0;
margin: 0;
border-radius: 0;
}
/* Conteneur des parties inaccessibles de FA (comme la liste des sujets les plus actifs, par ex.)
* Il est conseillé de les personnaliser de la même façon que le reste de votre design.
* Pour les repérer, n'hésitez pas à utiliser l'outil d'inspecteur Web */
.forabg, .forumbg {
background: var(--grey);
background-image: none !important;
border: var(--border);
border-radius: 5px;
padding: 8px;
margin-bottom: 10px !important;}
.row, .row1, .row2 {
border: none !important;
background: transparent !important;
}
/* Affichage des sujets dans les pages "sujets actifs/messages depuis dernières visites/... */
/*taille de l'image du sujet*/
dl.icon {background-size: 40px}
/* Décalage à gauche du titre du sujet */
ul.topics dd.dterm, ul.topics dt {padding-left: 60px!important}
/* Fenêtre popup "recherche" */
.overview {
background: var(--light)
}
/* 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;
}
Scrollbar
/* Scrollbar entière */
::-webkit-scrollbar {width: px;}
/* Rail */
::-webkit-scrollbar-track {}
/* Poignée */
::-webkit-scrollbar-thumb {}
Tire des pages
/* Utilisé pour des titres de pages */
h1, h1.page-title {
color: var(--link);
margin: 10px 0 20px;
font-size: 18px !important;
font-weight: 700 !important;
text-transform: uppercase;
text-align: center;
}
/* Utilisé pour des titres de sujets, blogs... */
h2 {
display: inline-block !important;
margin: 0;
font-size: 13px;
font-weight: 700;
}
/* Utilisé pour des titres de sous-sections, petit encadré, ...*/
.h3, h3 {
color: var(--text);
border: none !important;
padding-bottom: 10px;
margin: 0;
text-transform: none !important;
font-size: 14px;
}
Boutons d'interaction et barre de texte
/* BARRE DE TEXTE ---*/
input.inputbox {
border: var(--border) !important;
border-radius: 5px;
background: var(--grey) !important;
}
/* BOUTONS D'INTERACTION --- *
* Envoyer, prévisualiser, sauvegarder, aller,... */
.button1, .button2, a.button1, a.button2, button.button2, input.button1, input.button2 {
font-size: 12px;
padding: 2px 3px!important;
border: var(--border) !important;
border-radius: 5px;
background: var(--grey) !important;
}
/* MENUS DEROULANTS --- */
select {
background: transparent !important;
border: var(--border) !important;
border-radius: 5px;
font-size: 12px;
}
Ascenseur
/* Conteneur de l'ascenseur
* Sert essentiellement à définir où le placer dans la page */
.elevator {
position: fixed;
bottom: 20px;
right: 10px;
width: 100px;
}
/* Lien de renvoi haut/bas */
.elevator a {
display: block;
padding: 5px 8px;
background: var(--light);
border: var(--border);
border-radius: 5px;
text-align: center;
margin-top: 5px;
}
Généralités
/* S'applique à TOUS les éléments du forum*/
* { box-sizing: border-box; /*évite que les éléments soient agrandis par le padding*/
font-size: 12px;}
Liens et textes
/* LIENS DU FORUM --- */
a {
font-weight: 600;
text-decoration: none !important;}
/*liens au survol*/
a:hover {}
/*liens visités*/
a:visited {}
/* TEXTES --*/
p {font-size: 12px !important;}
/* Contenu de tous les messages postés (en sujet comme en MP)*/
.postbody, .content {
width: 100%; /*ne pas retirer*/
font-size: 12px!important;
}
/* Emoji mis par défaut de FA
* Les réduire les rend moins horribles à voir */
.emojione {
width: 13px !important
}
Éléments esthétiques
/* Contenur général qui sert généralement de fond et/ou de contour*/
.container {
background: var(--grey);
border: var(--border);
padding: 8px;
border-radius: 5px;
}
/* Barre de séparation */
.separator {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid var(--grey);
clear: both;
}
/* Conteneur moins large (les historiques des messages essentiellement) */
.wrapped {
width: 80%;
margin: 20px auto !important;
}
/* Permet d'aligner un élément à droite ou à gauche */
.right {float: right}
.left {float: left}
/* Barre de gestion
* Contient des boutons ou des liens spéciaux */
.links_bar {
height: 38px;
border: var(--border);
border-radius: 5px;
margin: 10px 0;
padding: 8px;
display: flex;
justify-content: space-between;
align-items: center;
clear: both;
}
/* Mise en valeur d'un lien spécial */
a.specials_links,
.specials_links a,
span.specials_links {
background: var(--grey);
border-radius: 5px;
height: 24px;
padding: 2px 8px;
}
/* On retire les liens spéciaux vide (pour les invités) */
a.specials_links:empty,
.specials_links a:empty,
span.specials_links:empty {
display: none
}
/* 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(--grey);
}
Pagination
/* FA utilise la même classe .pagination partout intégrée dans ses variables (on ne peut donc pas la retirer des templates)
* Ici, on la "reset" pour en faire ce qu'on veut. */
.pagination {
float: none !important;
margin-top: 0 !important;
text-align: left !important;
}
/*lien unique vers les pages numérotées*/
.pagination span a {
background-color: var(--grey) !important;
border: none !important;
color: var(--link) !important;
border-radius: 3px;
font-size: 12px !important;
margin: 0 2px;
padding: 1px 4px;
}
/*survol des liens uniques des pages*/
.pagination span a:hover {
background-color: var(--greyer) !important;
}
/*lien actif : page sur laquelle vous vous trouvez */
.pagination span strong {
background-color: var(--link);
border-radius: 3px;
border: none !important;
margin: 0 2px;
padding: 1px 4px;
}
/*suppression de l'image-lien "aller à la page suivante" */
.page-topic span a:last-child {
display: none;
}
Editeur de texte
/*NE PAS MODIFIER*/
.quickreply div#textarea_content {width: 100% !important;}
/*centrer la réponse rapide*/
.quickreply {
display: flex;
justify-content: center;
}
/*Longueur de l'éditeur de texte*/
form#quick_reply {
width: 705px;
}
/* Retire le cadre de la réponse rapide pour les invités */
#quickreply_content:empty {
display: none;
}
/* Editeur de texte */
.sceditor-container {}
/* Barre d'outils de l'éditeur de texte*/
div.sceditor-toolbar {
background: var(--light) !important;
border-bottom: var(--border) !important;
}
/* Conteneur des groupes d'outils */
div.sceditor-group {
background: var(--grey) !important;
border-bottom: var(--border) !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 {
/*ne pas supprimer*/
width: 100% !important;
margin: 0 !important;
padding: 5px !important;
/*ne pas supprimer*/
min-height: 150px !important;
}
Entête du forum
Toolbar
/* Supression de la barre de recherche, des boutons sociaux et des flèches */
#fa_search,
#fa_share,
#fa_hide {
display: none !important
}
/* Logo Forumactif :
* ATTENTION, il est techniquement interdit de supprimer de logo de FA.
* Techniquement. Faites-en donc ce que vous voulez. */
#fa_left {}
/* Toute la toolbar */
#fa_toolbar {
font-size: 12px !important;
font-family: var(--font);
background: transparent !important;
}
/* Conteneur du lien de bienvenue et notification */
#fa_right {
position: relative;
margin-top: 5px;
margin-right: 5px;
background: var(--light);
border: var(--border);
border-radius: 5px;
height: 40px;
display: flex !important;
align-items: center;
padding: 5px;
font-size: 12px !important;
}
/* Liens contenus à droite */
#fa_right a {
color: var(--link) !important;
font-weight: 600 !important;
margin-left: 0 !important;
}
/* Lien "Connexion" */
#fa_right a.rightHeaderLink:first-child { margin-right: 10px;}
/* Lien "S'enregistrer" */
#fa_right a.rightHeaderLink:last-child {}
/* Lien "Bienvenue (pseudo)" */
#fa_welcome {}
/* Lien "notification"*/
#fa_notifications
/* liens "bienvenue" et "notification" [AU CLIC] */
#fa_right.welcome #fa_menu #fa_welcome,
#fa_toolbar > #fa_right.notification > #fa_notifications {
background: var(--grey);
border-radius: 5px;
}
/* Affichage du menu bienvenue [ET] liste des notification */
ul#fa_menulist,
ul#notif_list {
border: var(--border) !important;
background: var(--light);
border-radius: 5px;
right: 0;
left: initial!important;
}
/* Menu bienvenue */
ul#fa_menulist {
margin-top: 10px;
width: 300px!important;
}
/* Image de l'avatar dans le menu bienvenue */
#fa_usermenu img {
object-fit: cover;
object-position: center;
}
/* Liste des notifications*/
ul#notif_list {
top: 50px;
font-size: 12px !important;
font-family: var(--font);
}
/* Lien dans une notification*/
ul#notif_list a {
text-decoration: none !important
}
/* Notifications non lues */
#notif_list .unread {
background: var(--grey) !important;
}
/* Lien "voir toutes les notifications" */
#notif_list .see_all {
background: var(--grey) !important;
border-radius: 5px;
margin: 5px !important;
}
/* Conteneur de l'avatar toolbar */
.fa_avatar {
position: absolute;
top: -1px;
left: -45px;
width: 40px;
height: 40px;
border-radius: 5px;
border: var(--border);
background: var(--light);
display: grid;
place-items: center;
}
/* Image de l'avatar */
.fa_avatar img {
object-fit: cover;
object-position: center;
width: 30px;
height: 30px;
border-radius: 3px;
}
/* Placement du pop-up de nouvelle notification */
#fa_toolbar #live_notif {
top: 45px;
right: 0px!important;
}
/* Stylisation du pop-up */
#fa_toolbar #live_notif .fa_notification { }
/* Lien à l'intérieur du pop-up de notification */
#live_notif a {
color: var(--light)!important;
}
Switcheroo
:root {
--gap-size: 16px;
--ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
/* BARRE SWITCHEROO --- */
.switcheroo {}
.switcheroo[position="static"] {
position: relative;
}
/* si barre EN HAUT */
.switcheroo[position="top"] {
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
/* si barre EN BAS */
.switcheroo[position="bottom"] {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
/* si barre A L'HORIZONRAL */
.switcheroo[direction="horizontal"] {
width: 100%;
}
/* si barre A LA VERTICAL */
.switcheroo[direction="vertical"] {
height: 100%;
}
/* Positionnement des ronds */
.switcheroo__squircles {
display: flex;
margin: 0;
padding: 0;
list-style: none;
padding: var(--gap-size);
gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
flex-direction: column;
}
/* BARRE --- */
.switcheroo {
color: var(--color-text);
background-color: var(--light);
border: var(--border);
font-size: 16px;
}
/* AFFICHAGE DES COMPTES ---*/
/* Rond */
.switcheroo__squircle {
position: relative;
display: grid;
place-items: center;
background-color: var(--grey);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: border-radius 128ms var(--ease);
}
/* Rond au survol */
.switcheroo__squircle:hover {
border-radius: 6px;
background: var(--greyer)
}
/* Contenenur de l'avatar */
.switcheroo__avatar {}
/* Image de l'avatar */
.switcheroo__avatar img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 50%;
transition: border-radius 128ms var(--ease);
position: relative;
}
/* Image de l'avatar au survol */
.switcheroo__avatar img:hover {
border-radius: 5px;
}
/* Avatar du compte connecté */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
border-radius: 6px;
cursor: default;
}
/* Indicateur de l'avatar survolé */
.switcheroo__squircle:before {
content: "";
display: block;
background-color: var(--grey);
border: var(--border);
border-radius: 50%;
height: 48px;
width: 48px;
opacity: 0;
pointer-events: none;
position: absolute;
top: -5px;
bottom: 0;
right: 0;
left: -5px;
z-index: -1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* Indicateur du compte sélectionné/actif */
.switcheroo__squircle.active:before {
opacity: 1;
border-radius: 8px;
}
.switcheroo__squircle:hover:before {
border-radius: 8px;
opacity: 1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* 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(--red);
transform: scale(0);
opacity: 1;
transition: transform 128ms var(--ease), opacity 64ms var(--ease);
cursor: pointer;
color: var(--light);
}
.switcheroo__squircle:hover .switcheroo__delete {
opacity: 1;
transform: scale(1);
}
/* TOOLTIP - INFOBULLE DU PSEUDO ---*/
/* Conteneur du pseudo */
.switcheroo__popper {
background-color: var(--text);
padding: 0.68rem 1rem;
position: absolute;
width: -webkit-max-content;
width: max-content;
border-radius: 4px;
z-index: 0;
opacity: 0;
transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
pointer-events: none;
color: #fff;
}
/* Conteneur du pseudo: si vertical */
.switcheroo[direction="vertical"] .switcheroo__popper {
left: 155%;
top: 50%;
transform-origin: left;
transform: translateY(-50%) scale(0.98);
}
/* Conteneur du pseudo : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper {
top: 155%;
left: 50%;
transform-origin: top;
transform: translateX(-50%) scale(0.98);
}
/* Flèche tooltip */
.switcheroo__popper:before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background-color: var(--text);
z-index: -1;
}
/* Flèche tooltip : si vertical */
.switcheroo[direction="vertical"] .switcheroo__popper:before {
left: -2px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* Flèche tooltip : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
left: 50%;
top: -2px;
transform: translateX(-50%) rotate(-45deg);
}
/* Positionnement tooltip au survol */
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* LOGO --- */
.switcheroo__logo {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
}
/* DIVIDER : barre de séparation --- */
.switcheroo__divider {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
background-color: var(--greyer);
border-radius: 3px;
transform: scale(0.8);
}
/* Divider : si vertical */
.switcheroo[direction="vertical"] .switcheroo__divider {
width: 100%;
height: 2px;
}
/* Divider : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__divider {
width: 2px;
}
/* AJOUTER UN COMPTE ---*/
/* button : ajouter un compte */
.switcheroo__squircle--button {
transition: border-radius 128ms var(--ease);
color: var(--text);
}
.switcheroo__squircle--button:hover {
color: var(--light);
font-weight: bold;
}
/* MODAL : FENETRE DE CONNEXION --- */
/* Fond de l'afficage 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(255, 255, 255, 0.6);
}
/* Boîte de connexion */
.monomer-modal {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
opacity: 0;
width: 94%;
padding: 24px 20px;
transition: 0.2s opacity ease;
transform: translate(-50%, -50%);
border-radius: 5px;
background: var(--grey);
border: var(--border);
color: var(--text);
}
/* Formulaire */
.switcheroo__form {
padding: 48px;
background: var(--light);
border-radius: 5px;
}
/* Champs à remplir */
.switcheroo__form-row {
display: flex;
flex-flow: column;
align-items: flex-start;
margin-bottom: 16px;
}
/* Nom du champs */
.switcheroo__form-label {
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
/* Zone de texte */
.switcheroo__form-input {
padding: 6px;
font-size: 16px;
border-radius: 4px;
width: 100%;
background-color: var(--light);
border: var(--border)!important;
border-bottom: 3px solid var(--greyer)!important;
color: var(--text);
cursor: text;
}
/* Bouton de connexion */
.switcheroo__form-button {
border-radius: 8px;
padding: 4px 6px;
border: none;
outline: none;
box-shadow: none;
text-transform: uppercase;
font-size: 14px;
align-self: flex-end;
background-color: var(--light);
border: var(--border);
cursor: pointer;
}
.switcheroo__form-button:hover {
border: 1px solid transparent;
background: var(--text);
color: var(--light);
}
.monomer-modal.monomer-open, .monomer-overlay.monomer-open {
opacity: 1;
}
/* Fermer la boîte de connexion */
.monomer-close {
font-size: 20px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
position: absolute;
top: -7px;
right: -7px;
padding: 5px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: var(--red);
border-radius: 50%;
padding: 0;
}
.monomer-close:hover {
background: var(--text);
font-weight: 700;
}
Bannière
#header { }
#header img { }
Barre de navigation
/* Conteneur de la barre de nav */
.navbar {
background: var(--grey) !important;
border: var(--border);
border-radius: 5px;
margin-top: 10px;
padding: 5px;
height: 40px;
display: flex;
/*ne pas supprimer*/
align-items: center;
/*centre verticalement*/
justify-content: center;
/*centre horizontalement*/
}
/* Suprresion des liens peu utilisé en les identifiant par leur numéro d'ordre*/
.navbar li:nth-child(2), /*calendrier*/
.navbar li:nth-child(3), /*faq*/
.navbar li:nth-child(6) /*groupes*/
{
display: none !important
}
/* liens de navigation */
a.mainmenu {
padding: 6px;
}
/* Lien navigation au survol*/
a.mainmenu:hover {
background: var(--light);
border-radius: 5px;
}
/* Image des liens */
a.mainmenu img {
display: none
}
Annonces défilantes
/* Barre défilante */
.module {
background: transparent !important;
border-radius: 5px;
border: var(--border);
margin: 10px 0;
padding: 4px 8px;
}
/* Intérieur d'une annonce*/
#fa_ticker_container {
margin-bottom: 4px;/*ne pas retirer*/
}
Page principale
Page d'accueil
/* PAGE D'ACCUEIL ---*/
.introduction { }
/* CADRE DE CONNEXION RAPIDE --- */
.user_login_form {margin: 0 !important}
Catégories
/* Titre d'une catégorie
* Il est conseillé de garder le selecteur ".cate_title h2"
*/
.cate_title h2 {
display: block !important;
text-align: center;
text-transform: uppercase;
font-size: 18px !important;
font-weight: 700 !important;
margin: 10px 0 20px;
}
.forums {}
.forum_row {
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto;
grid-row-gap: 1px;
margin-bottom: 10px;
}
.forum_row:last-child {margin-bottom: 0}
.forum_row > div {
background: var(--light);
padding: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.top_row {border-radius: 5px 5px 0 0;}
a.forumtitle {
width: 100%;
margin-bottom: 10px;
font-size: 16px;
}
img.forum-img {
background: var(--grey);
width: 60px;
height: 60px;
}
.forum_desc {
height: 60px;
overflow: auto;
width: 435px;
margin: 0 10px;
}
.forum_lastpost-avatar {
width: 60px;
height: 60px;
margin-right: 10px;
}
.forum_lastpost-avatar img {
background: var(--grey);
width: 60px;
height: 60px;
object-fit: cover;
object-position: center;
}
.forum_lastpost {
display: flex;
align-items: center;
width: 152px;
}
.bottom_row {border-radius: 0 0 5px 5px;}
#ssforum {font-size: 0}
#ssforum a {font-size: 12px;margin-right: 10px;}
.forum_stats {
font-weight: 600;
float: right;
}
Qui est en ligne
.qeel {
background: var(--grey);
border: var(--border);
border-radius: 5px;
padding: 8px;
display: grid;
grid-template-columns: 247px 286px 247px;
grid-gap: 1px;
margin-bottom: 10px;
}
.qeel > div {
background: var(--light);
padding: 15px 10px;
}
.qeel-right {
border-radius: 5px 0 0 5px;
}
.qeel-right #last_user {display: flex; align-items: center;}
.qeel-right #lastuser_avatar img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 5px;
margin-right: 10px;
}
.qeel-right a.groups {
display: block;
background: var(--grey);
border-radius: 5px;
text-align: center;
padding: 2px 0;
margin-bottom: 5px;
}
.qeel-right a.groups:hover {
background: var(--lighter)
}
.qeel-right a.groups:last-child {margin-bottom: 0}
/*X connectés :: 1 membre, 0 invisible, 0 invité*/
#total_users {}
/*Connectés en ce moment*/
#online_users {
min-height: 72px;
max-height: 72px;
overflow: auto;
}
/*ne pas supprimer*/
#online_users br {
display: none
}
.qeel-middle .credits {
font-size: 10px;
border: var(--border);
border-radius: 5px;
padding: 5px;
margin-top: 5px;
}
.qeel-left {
border-radius: 0 5px 5px 0;
text-align: justify;
}
Forums
Entête et footer d'un forum
/* Chaîne de navigation et pagination
* (réutilisé dans l'affichage d'un sujet (viewtopic_body)) */
.navigation_links {
display: flex;
justify-content: space-between;
}
/* chaîne de lien de navigation : catégorie > forum > sous-fo */
.navigation_chain {
font-size: 0;
/*retire les :: de séparation */
}
.navigation_chain a {
font-size: 12px;
/*rétablit le font-size: 0*/
margin-right: 8px;
}
.navigation_chain a:before {
content: '›';
/*symbole ou texte modifiable*/
font-size: 14px;
margin-right: 3px;
}
/* BOUTONS DE SUJET ---*
* (réutilisé dans l'affichage d'un sujet (viewtopic_body) et les MP (privmsgs_body) */
.buttons {
background: var(--grey);
padding: 1px 8px;
margin-right: 5px;
border-radius: 5px;
}
.buttons:hover {background: var(--lighter);}
/*ne pas retirer*/
#users_here br {display: none}
/* OUTILS DE MODÉRATION D'UN FORUM ---*/
/*Supprime le texte inutile*/
#moderation_forum_tools, #moderation_forum_tools strong {
font-size: 0px;
}
/* Lien de modération du forum */
#moderation_forum_tools a {
background: var(--grey);
border-radius: 5px;
height: 24px;
padding: 2px 8px;
}
Liste des sujets
.topicslist_row {
background: var(--light);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
display: grid;
grid-column-gap: 10px;
grid-template-columns: 50px 375px 95px 50px 152px;
grid-template-rows: 50px auto;
align-items: center;
}
.topicslist_row:last-child {margin-bottom: 0}
.topicslist_row:hover {background: var(--lighter)}
.topicslist-img {
width: 50px;
height: 50px;
background: var(--grey);
}
.topicslist-infos {}
.topictitle {}
.topic_msgicon { margin-right: 5px }
.topic-type {}
.topic-author {}
.topiclist-infos img {margin-right: 3px}
.topicslist_icon {}
.topicslist-stats {text-align: right;}
.topicslist-avatar-lastpost img {
object-fit: cover;
object-position: center;
width: 50px;
height: 50px;
background: var(--grey);
}
.topicslist-description {
grid-column: 1 / span 5;
border-top: 1px solid var(--grey);
margin: 10px -10px 0;
padding: 5px 10px 0;
}
Sujets
Sujet
.post_row {
background: var(--light);
display: grid;
grid-template-columns: 220px 563px;
grid-template-rows: 38px auto;
}
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;}
.post_details {
grid-column: 1 / span 2;
padding: 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--grey);
}
.post_date {flex-grow: 100;}
/* BOUTONS D'EDITION DU MESSAGE --- */
/* Conteneur boutons d'édition */
ul.profile-icons {
margin-top: 0 !important;
flex-grow: 1;
}
/*UN SEUL bouton d'édition */
ul.profile-icons li {
margin: 0 0 0 6px !important;
padding: 2px;
}
/*hover d'un bouton d'édition*/
ul.profile-icons li:hover {
background: var(--grey);
border-radius: 5px;
}
/* BOUTON LIKE --- */
/* Conteneur du bouton like */
.like_button {
float: right;
margin-left: 10px;
flex-grow: 1;
}
/* Bouton like
* Le bouton de base de forumactif étant déjà très personnalisé,
* il est conseillé d'appliquer !important à chaque déclaration
*/
.rep-button,
.rep-button:active,
.rep-button:focus {
margin: 0 !important;
background: var(--grey) !important;
border: none !important;
box-shadow: none !important;
float: none !important;
font-family: var(--font) !important;
padding: 3px 5px !important;
border-radius: 5px;
text-transform: inherit !important;
line-height: normal !important;
color: var(--text) !important;
font-weight: 600 !important
}
/*Bouton au survol*/
.rep-button:hover {background: var(--greyer) !important;}
/* Texte "j'aime" */
button.rep-button .like_text {}
/*compteur de like*/
button.rep-button .rep-nb {
line-height: normal !important;
margin-left: 5px;
padding: 0 3px;
background: var(--light);
border-radius: 3px;
border: none !important;
}
.post_profil {
padding: 10px;
border-right: 1px solid var(--grey);
border-bottom: 1px solid var(--grey);
}
/* Lien "@" de mention */
a.fa-mention { }
/* La variable de l'image "en ligne" s'applique en background-image,
* il faut donc donner au conteneur la taille de l'image pour qu'elle apparaisse pleinement
*/
.online {width: 46px;height: 16px;}
.post_message {
padding: 10px;
border-bottom: 1px solid var(--grey);
}
/* REPONSE RAPIDE --- */
/*supression de la mention "réponse rapide" */
.quickreply div.h3 {display: none}
Sondages
.poll {
background: var(--light);
border-radius: 5px;
margin-bottom: 10px;
}
.head_poll {
padding: 10px;
border-bottom: 1px solid var(--grey);
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(--grey);
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(--grey);
}
.poll_vote:nth-child(2),
.poll_option:first-child
{padding-top: 20px;}
Textes, balises, ...
/* Lien-tag des utilisateurs */
.mentiontag {}
/* BALISES DE MESSAGE : spoiler, code, quote...
* Utilisez !important pour personnaliser au-dessus des bases de FA si besoin
*/
/*Balise code*/
#blank_code {
width: 85%;
margin: 0 auto;
border-radius: 5px;
border: var(--border) !important;
}
/* titre "code" */
#blank_code dt {
background: var(--grey);
border-radius: 5px;
padding: 2px 5px;
border: none !important;
margin: 0 !important;
}
/* Sélectionner le code */
.selectCode {
float:right;
text-transform: uppercase;
cursor:pointer;
font-size: 10px;
}
/*contenu code*/
#blank_code code {}
/*Balise spoiler*/
#blank_spoiler {
width: 85%;
margin: 0 auto;
border-radius: 5px;
border: var(--border) !important;
}
/*titre "spoiler*/
#blank_spoiler dt {
background: var(--grey);
border-radius: 5px;
padding: 2px 5px;
border: none !important;
margin: 0 !important;
}
/*contenu spoiler*/
.spoiler_content {margin: 5px 5px 2px;}
/*Balise citation*/
blockquote#blank_quote {
margin: 15px !important;
border: none !important;
border-left: 2px solid var(--grey) !important;
;
}
/*Citation : titre "XXX a écrit"*/
blockquote#blank_quote cite {}
/*Balise hide*/
#blank_hide {
padding: 10px;
width: 85%;
margin: 0 auto;
border-radius: 5px;
background: var(--lighter);
border: none !important;
}
/*Balise blockquote*/
blockquote {border: none !important;}
Page d'envoi d'un message
/* Largeur de la boîte des smileys */
#smiley-box, .smile-status-box {width: 20%!important;}
/* Largeur de la zone de texte */
#message-box #textarea_content { width: 78%!important }
/* Prévisualisation d'un message */
#preview {
background: var(--light)!important;
padding: 0 10px 10px;
border: var(--border)!important;
border-radius: 5px;
}
Membres
Page de profil
.user_profil {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 220px auto;
}
.profil_avatar {
padding: 10px;
border-right: 1px solid var(--grey);
}
.profil_infos {padding: 10px;}
.profil_contact form {display: flex;}
.profil_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 */
.profil_contact form div:nth-child(n+4) {display: none}
.profil_content {
margin-top: 20px;
height: 265px;
overflow: auto;
}
.profil_field {
margin: 10px 0;
display: grid;
grid-template-columns: 120px auto;
}
.profil_field label {
font-weight: 600;
color: var(--link);
}
.profil_field field {}
.profil_admin {
text-align: center;
margin: 10px 0 0;
}
Profil simplié au survol des tags
/* Supression de la flèche peu esthétique*/
.tooltipster-arrow {display: none !important}
.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: 16px !important;
}
.preview_contacts {
position: absolute;
bottom: 8px;
right: 10px;
}
.preview_contacts a {margin-left: 5px}
.tooltipster-arrow {display: none}
Modifier le profil
/* Onglets dans la modification de profil */
div#tabs {margin: 20px 0 10px !important;}
/* Permet d'espacer équitablement tout les onglets*/
#tabs ul {
display: flex;
justify-content: space-between;
}
/* Onglet selectionné */
#tabs li.activetab {
background: var(--grey);
border-radius: 5px;
}
/* Liens d'onglet */
#tabs a {padding: 4px !important;}
#tabs a:hover {
background: var(--grey);
border-radius: 5px;
}
/* Texte contenu dans l'onglet */
#tabs a span {padding: 0 !important;}
/* Suppression de l'onglet "amis et ignorés"
* Déjà supprimé dans le profil seul et permet d'aligner tous les onglets sur une ligne */
div#tabs li:nth-child(5) { display: none;}
Liste des membres
.userlist {
display: grid;
grid-template-columns: 385px 385px;
grid-gap: 10px;
}
.userlist_profil {
display: grid;
grid-template-columns: 95px auto;
grid-gap: 1px;
}
.userlist_avatar {
background: var(--light);
padding: 10px;
border-radius: 5px 0 0 5px;
}
.userlist_avatar img {
width: 75px;
height: 120px;
}
.userlist_details {
background: var(--light);
padding: 10px;
border-radius: 0 5px 5px 0;
}
.userlist_pseudo {font-size: 14px;}
.userlist_infos {}
.userlist_contact {}
Messages privés
Liste des messages privés
.mp_row {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 55px auto;
margin-bottom: 5px;
}
.mp_row:hover {background: var(--lighter);}
.mp_img {
padding: 10px;
border-right: 1px solid var(--grey);
}
.mp_img img {
width: 35px;
height: 35px;
background: var(--grey);
}
.mp_infos {padding: 10px;}
Affichage d'un message privé
.message {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 220px auto;
grid-template-rows: 38px auto;
}
.message_infos {
grid-column: 1 / span 2;
border-bottom: 1px solid var(--grey);
padding: 10px;
display: flex;
justify-content: space-between;
}
.message_profil {
padding: 10px;
border-right: 1px solid var(--grey);
text-align: center;
}
.message_content { padding: 10px;}
Blogs
Liste des blogs
.bloglist {
background: var(--light);
border-radius: 5px;
display: grid;
grid-template-columns: 65px auto;
grid-template-rows: 60px auto;
margin-bottom: 10px;
}
.bloglist_date {
grid-row: 1 / span 2;
padding: 10px;
border-right: 1px solid var(--grey);
line-height: 22px;
text-align: center;
}
.blog_daymonth {font-size: 16px;font-weight: 700;}
.blog_year {font-size: 18px;}
.bloglist_infos {
display: flex;
justify-content: space-between;
padding: 10px;
}
.bloglist_details {text-align: right}
.bloglist_resum { padding: 0 10px 10px;}
Affichage d'un blog
.blog_post {
background: var(--light);
display: grid;
grid-template-rows: 38px auto;
border-radius: 5px;
}
.blog_details {
padding: 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--grey);
}
.blog_author {flex-grow: 100;}
Commentaires d'un blog
.blog_comment {
border: var(--border);
padding: 10px;
border-radius: 5px;
margin: 5px auto 10px;
}
.comment_avatar {margin-right: 10px;float: left;}
.comment_avatar img {
object-fit: cover;
object-position: center;
border-radius: 5px;
width: 40px !important;
height: 40px !important;
margin:0!important;
}
.comment_details {
height: 40px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
.comment_details .left {flex-grow: 100;}
.comment_content {margin-left: 50px;}
Poubelle de Forumactif
ul.topics dd.dterm, ul.topics dt {padding-left: 60px!important}
dl.icon {background-size: 40px}
.adminlink br {display: none}
.corners-top {display: none !important}
.corners-bottom {display: none !important}
li.header dl.icon, ul.topiclist li.header, table.table1 thead { display: none !important;}
.forumbg table.table1 {margin: 0;}
form[name=notif_opts] table.table1 thead { display: contents!important}
#cp-main table.table1 thead th { border: none!important}
#cp-main#cp-main#cp-main {float: none; margin: 0 auto; width: 100%}