Accueil
Calendrier
FAQ
Rechercher
Dernières images
Membres
Groupes
S'enregistrer
Connexion
Problème chatbox
Invité
bonsoir (c'est encore moi!)
franchement, je m'en sortais super bien, j'avais réussi à régler mes soucis seule mais là, je désespère !!
je passe mon design de mon fo test au vrai forum pour la MAJ et misère, je vois que j'ai oublié la chatbox. je fais un tour dans le coin et je tombe sur le sujet où tu as expliqué que tu n'as pas pensé à la chatbox mais qu'on peut utiliser le code de base de FA.
Mon problème est là : même le code de FA ne donne rien ! La CB est toute cassée et je n'y comprends RIEN
personnaliser le cb n'est pas un soucis pour moi, mais là elle est juste insupportable à utiliser et ça fait plusieurs heures que je suis dessus sans succès merci d'avance si tu peux me sauver
franchement, je m'en sortais super bien, j'avais réussi à régler mes soucis seule mais là, je désespère !!
je passe mon design de mon fo test au vrai forum pour la MAJ et misère, je vois que j'ai oublié la chatbox. je fais un tour dans le coin et je tombe sur le sujet où tu as expliqué que tu n'as pas pensé à la chatbox mais qu'on peut utiliser le code de base de FA.
Mon problème est là : même le code de FA ne donne rien ! La CB est toute cassée et je n'y comprends RIEN
- css:
- Code:
/*** CSS BLANK THEME ***/
/*** STRUCTURE DU FORUM ***/
:root {
--acc1: #2b3b3a;
--acc2:#c0d3d2;
--acc3:#fff;
--acc4:#dfa798;
--light:#ededed;
--lighter: #fafafa;
--light-dark: #5B5B5B;
--grey: #c0d3d2;
--greyer: #fefefe;
--border2: 1px solid #c0d3d2;
--border1: 1px solid #f1ede4;
--background1: #f1ede4;
--background2: #fefefe;
--background3: #c0d3d2;
--degrade: linear-gradient(-45deg,#2b3b3a,#c0d3d2)!important;
--gr1: #575555;
--gr2: #9E1E19;
--gr3: #A68D0F;
--gr4: #335466;
--gr5: #428742;
--gr6: #8C5E71;
--gr7: #B86627;
--little-size: 12px;
--normal-size: 14px;
--medium-size: 16px;
--large-size: 18px;
--title-size: 22px;
--font: 'Trebuchet MS';
}
/* 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(--grey);
font-family: var(--font);
font-size: var(--little-size);
color: #4B4B4B;
margin: 0 !important;
}
/* SCROLLBAR */
::-webkit-scrollbar{width:px}
/* STRUCTURE PRINCIPALE */
.main_forum {
width: 880px;
/*largeur forum*/
margin: 20px auto;
padding: 20px;
background: #fafafa;
border-radius: 5px;
}
/* Conteneur sous-sections
* encadrés options, rappel, etc */
.panel {
background: var(--greyer);
border: var(--border);
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
/* ASCENSEUR */
.elevator{position:fixed;bottom:20px;left:20px;width:52px;z-index:999}
/* Lien de renvoi haut/bas */
.elevator a {
display: block;
padding: 5px 8px;
background: var(--background2);
border-radius: 5px;
text-align: center;
margin-top: 10px;
}
/****** GÉNÉRALITÉS ******/
/*** LIENS ET TEXTE ***/
/* LIENS DU FORUM */
a {
font-weight: 600;
text-decoration: none;
color: var(--acc1);
}
/*liens au survol*/
a:hover {
color: var(--acc2);
}
.emojione{width:15px!important}
/* TITRES DES PAGES */
/* titres pages */
h1,
h1.page-title {
color: var(--acc4);
margin: 10px 0 20px;
font-family: 'Unica One', cursive;
font-size: var(--large-size);
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
/* titres sujets */
h2,
.h2 {
margin: 0;
font-family: 'Unica One', cursive;
font-size: var(--medium-size);
font-weight: 700;
}
/* titres sous-sections, petit encadré */
h3,
.h3 {
color: var(--acc1);
padding-bottom: 10px;
margin: 0;
font-size: var(--normal-size);
font-weight: bold;
}
/*** BOUTONS D'INTERACTION ET BARRE DE TEXTE ***/
/* BARRE DE TEXTE */
input[type="text"],
input[type="password"],
input.inputbox {
border: var(--border);
border-radius: 5px;
background: #f7f7f7;
font-size: var(--normal-size);
padding: 2px 6px;
}
/* BOUTONS D'INTERACTION *
* Envoyer, prévisualiser, sauvegarder, aller */
input[type="submit"],
input[type="button"],
button[type="submit"],
.button2 {
font-size: var(--little-size);
padding: 2px 8px !important;
border-radius: 5px;
background: var(--background1);
color: var(--acc1);
font-weight: 700;
border: none;
}
input[type="submit"]:hover {
background: var(--acc4);
color: var(--lighter)
}
.submit-buttons{text-align:center}.quickmod{margin-bottom:10px}
/* MENUS DEROULANTS */
select {
background: transparent;
border: var(--border);
border-radius: 5px;
font-size: var(--normal-size);
padding: 1px 4px;
}
/*** EDITEUR DE TEXTE ***/
/* Editeur de texte */
.sceditor-container {}
/* Barre d'outils de l'éditeur de texte*/
div.sceditor-toolbar {
background: var(--background1) !important;
border-bottom: var(--border2) !important;
}
/* Conteneur des groupes d'outils */
div.sceditor-group {
background: var(--greyer) !important;
border-bottom: var(--border) !important;
}
/* Bouton d'un outil */
a.sceditor-button{height:26px!important;width:26px!important}
/* Conteneur de la zone de texte */
.sceditor-container iframe,.sceditor-container textarea{width:100%!important;margin:0!important;padding:5px!important;min-height:250px!important}
/*** PAGINATIONS ***/
.pagination {}
/*lien unique vers les pages numérotées*/
.pagination span a {
font-size: var(--little-size);
}
/*survol des liens uniques des pages*/
.pagination span a:hover {
font-weight: 700
}
/*lien actif : page sur laquelle vous vous trouvez */
.pagination span strong {
background-color: var(--grey);
color: var(--acc3);
border-radius: 3px;
padding: 1px 4px;
}
/*suppression de l'image-lien "aller à la page suivante" */
.page-topic span a:last-child,.pag-img{display:none}
/*** ELEMENTS ESTHETIQUES ***/
/* fond et/ou contour */
.container {
background: var(--greyer);
padding: 10px;
border-radius: 5px;
}
/* Barre de séparation */
.separator {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid var(--grey);
clear: both;
height: 1px;
width: 100%;
}
/* Conteneur moins large */
.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(--greyer);
}
/* Permet d'aligner un élément à droite ou à gauche */
.right{float:right}.left{float:left}.clear{clear:both}
/* Barre de gestion
* boutons ou liens spéciaux */
.links_bar {
padding: 10px;
border: var(--border);
border-radius: 5px;
margin: 10px 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(--grey);
color: var(--acc3);
padding: 2px 6px;
border-radius: 5px;
}
/* Suppression des liens vides */
.specials_links a:empty,a.specials_links:empty{display:none}
/*** ENTETE FORUM ***/
/*** TOOLBAR ***/
/* Toute la toolbar */
#fa_toolbar {
font-size: 11px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
}
/* 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: 8px;
background: var(--lighter);
border: var(--border);
border-radius: 5px;
height: 40px;
display: flex;
align-items: center;
padding: 5px;
}
/* LIENS DE LA TOOLBAR */
/* Tous les liens */
#fa_welcome,#fa_notifications,#fa_right a.rightHeaderLink[href*="/login"],#fa_right a.rightHeaderLink[href*="/register"]{cursor:pointer;padding:4px 6px}
/* Lien "Connexion" */
#fa_right a.rightHeaderLink[href*="/login"] {}
/* Lien "S'enregistrer" */
#fa_right a.rightHeaderLink[href*="/register"] {}
/* 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;
}
/* MENU bienvenue [ET] liste des notifications */
ul#fa_menulist,
ul#notif_list {
border: var(--border);
background: var(--lighter);
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)}
/* 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(--lighter);
font-family: 'Trebuchet MS';
font-size: var(--little-size);
text-transform: none;
}
#notif_list li:nth-last-child(2){border-top:none}
/* Notifications non lues */
#notif_list .unread {
background: var(--background1);
font-weight: bold;
}
/* Bouton suppresion d'une notification */
#fa_toolbar #fa_right #notif_list li a.delete{position:absolute;top:7px;right:7px}
/* 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:400;color:#2b3b3a}
/* Lien "voir toutes les notifications" */
#notif_list .see_all {
background: var(--grey);
border-radius: 5px;
margin-top: 5px;
text-align: center;
padding: 4px 4px 4px 10px;
order: -1;
}
/* POPUP NOTIFICATION */
/* Placement du pop-up de nouvelle notification */
#fa_toolbar #live_notif{position:absolute;top:45px;right:0!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: -45px;
width: 40px;
height: 40px;
border-radius: 5px;
border: var(--border);
background: var(--lighter);
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}
/* STRUCTURE DE LA TOOLBAR
* rien modifier pour bon fonctionnement */
#fa_right #fa_menu ul,#fa_right.notification #fa_menu ul,#fa_right #fa_notifications #notif_unread,#notif_list hr{display:none}#fa_toolbar #live_notif .fa_notification .content{display:inline-block}#fa_right.welcome #fa_menulist{display:block}#fa_right.notification #notif_list{display:flex}#fa_toolbar #fa_right #fa_notifications.unread #notif_unread{display:inline}#fa_usermenu table{width:100%}#fa_usermenu table tr{display:flex;justify-content:center}.fa_fix{position:fixed!important;position:absolute;top:0;right:0}
/*** 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[position="static"]{position:relative}.switcheroo[position="top"]{position:fixed;top:0;left:0;z-index:100}.switcheroo[position="bottom"]{position:fixed;bottom:0;left:0;z-index:100}.switcheroo[direction="horizontal"]{width:100%}.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: transparent;
border: var(--border);
font-size: 16px;
}
/* AFFICHAGE DES COMPTES */
/* Rond */
.switcheroo__squircle {
position: relative;
display: grid;
place-items: center;
background-color: var(--background2);
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(--greyer);
color: var(--acc2);
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}
/* 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(--acc1);
transform: scale(0);
opacity: 1;
transition: transform 128ms var(--ease), opacity 64ms var(--ease);
cursor: pointer;
color: var(--greyer);
line-height: 0;
}
.switcheroo__squircle:hover .switcheroo__delete{opacity:1;transform:scale(1)}
/* TOOLTIP - BULLE PSEUDO */
/* Conteneur du pseudo */
.switcheroo__popper {
background-color: var(--greyer);
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: var(--acc2);
font-size: 14px;
}
/* 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(--greyer);
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 /* à retirer si vous voulez ajouter le logo*/}
/* DIVIDER : barre de séparation --- */
.switcheroo__divider {
display: none
/* à retirer si vous voulez ajouter le logo*/
background-color: var(--greyer);
border-radius: 3px;
transform: scale(0.
;
}
/* 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(--acc1);
}
.switcheroo__squircle--button:hover {
color: var(--acc2);
font-weight: bold;
}
/* MODAL 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:.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: 5px;
background: var(--background2);
color: var(--acc1);
}
/* Formulaire */
.switcheroo__form {
padding: 48px;
background: var(--background2);
border-radius: 5px;
}
/* Champs à remplir */
.switcheroo__form-row{display:flex;flex-flow:column;align-items:flex-start;margin-bottom:16px}
/* 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;
font-size: 16px;
border-radius: 4px;
width: 100%;
background-color: var(--lighter);
border: var(--border) !important;
border-bottom: 3px solid var(--background3) !important;
color: var(--acc1);
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(--background2);
border: var(--border);
cursor: pointer;
}
.switcheroo__form-button:hover {
border: 1px solid transparent;
background: var(--background3);
color: var(--background2);
}
.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(--acc1);
border-radius: 50%;
padding: 0;
}
.monomer-close:hover {
background: var(--background2);
font-weight: 700;
}
/*** BANNIERE ***/
#header {}
#header img{width:870px;height:500px;object-position:center;padding:0 30px 3px 0}
/*** BARRE DE NAVIGATION ***/
/* Conteneur de la barre de nav */
.navbar {
background: #f1ede4;
border-radius: 5px;
margin-top: 10px;
padding: 9px;
font-size: 11px;
font-family: 'Nunito Sans', sans-serif;
text-transform: uppercase;
font-weight: 500;
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{padding:5px}
/* Lien navigation au survol*/
a.mainmenu:hover {
background: var(--lighter);
border-radius: 5px;
}
/* Image des liens */
a.mainmenu img{display:none}
/**INDEX **/
/* PAGE D'ACCUEIL ---*/
.introduction {}
/***CATEGORIES ICE&FIRE***/
/*liens voir nouveaux messages, supp cookies (en haut et en bas des catés*/
.liens_pa {
background: transparent;
padding: 5px 0 5px;
border-radius: 7px;
margin-top: 12px;
text-align: center;
}
.liens_pa a {
background: var(--background1);
border-radius: 7px;
padding: 1px 10px;
margin: 0 10px;
text-transform: uppercase;
font-size: 9px;
}
/*Titre de la catégorie*/
.cat_titre { background: var(--background3);
border-radius: 7px 7px 0 0;
color: #fff;
font-family: 'Unica One', cursive;
font-weight: 800;
letter-spacing: 1px;
margin-top: 14px;
padding-left: 7px;
padding-top: 10px;
text-transform: uppercase;}
.cat_titre h2 {color: var(--greyer);
font-size: 17px;
font-weight: 800;
margin: 0;}
/*Rassemblement de balises répétitives*/
#cate {margin: 0 7px 0 0;
border-radius: 7px;}
.liensforums, .imgnew, .txt_derniermess {
border: var(--border1); }
/*Corps des catégories*/
.cat_container { background: var(--background2);
border-radius: 7px;
height: 114px;/*à modifier seulement si vous la voulez plus haute*/
padding: 10px;
margin: 0 0 4px;
display: flex;
font-size:14px;}
/*Partie liens forums*/
.liensforums { font-size: 0px;
overflow: auto;
width: 18%;
padding: 5px;
text-align: left;}
#liensforums2 a {
display: block;
text-transform: lowercase;
font-size: 11px;
}
#liensforums2 a::before {
color: #c0d3d2;
content: " ● ";
}
/*Partie image new, no new etc.*/
.imgnew { padding: 1px 1px 1px 1px;
width: 5%;}
.imgnew img { border-radius: 6px;
height: 100%;
object-fit: cover;
width: 100%;}
/*Partie titre du forum et description*/
.titredescriforum {
width: 65%;}
/*titre forum*/
.titreforum { background: var(--background1);
border-radius: 7px;
padding-left: 13px;
padding-top: 3px;
font-family: 'Nunito Sans', sans-serif;
text-transform: normal;
text-align: left;}
.titreforum a { font-size: 15px;
font-weight: 700;
color: var(--acc4);}
/*description*/
.descricat { height: 67px; /*à modifier si vous changer la height de .cat_container*/
margin-top: 4px;
text-align: justify;
overflow: auto;
line-height: 20px;
border-top: var(--border1);
font-size: 11.5px;}
/*Partie nb de sujets et messages*/
.nbsujnotes { display: flex;
flex-wrap: wrap;
max-width: 60px;}
.nbsujnotes2 { background: var(--background1);
border-radius: 4px;
color: var(--acc4);
font-size: 11px;
font-weight: 700;
text-align: center;
min-width: 60px;
display: flex;
justify-content: center;
align-items: center;}
.nbsujnotes2:nth-child(2) {margin-top:7px;
background: #fafafa;
color:var(--acc2);}
/*Partie dernier message posté*/
.derniermess {
max-width: 164px;}
/* titre avec écrit last song*/
.ti_derniermess { background-image: var(--degrade);
border-radius: 4px;
color: var(--acc3);
font-size: 10px;
margin: 0 0 0 21px;
text-align: center;
padding-left: 18px;
min-width: 140px;}
/*dernier avatar*/
.avatarcat { background: var(--background2);
border: var(--border1);
border-radius: 50px;
margin-top: -18px;
padding: 2px;
position: absolute;
}
.avatarcat img { border-radius: 50px;
width: 39px;
height: 39px;
object-fit: cover;}
/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
border-radius: 7px;
margin: 4px 0 0;
padding: 8px 0 7px 45px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
text-transform: normal;
height: 73px; /*à modifier si vous changer la height de .cat_container*/
display: flex;
flex-wrap: wrap;
align-items: center;
}
.txt_derniermess a { font-size: 12px;}
.txt_derniermess br {
content: "";
margin: 2em 0 0 4em;
display: block;
font-size: 18%;
}
/***QEEL ICE&FIRE***/
/*balise qui contient tout le QEEL*/
.qeel_container { background: var(--background2);
margin: 10px 0 0;
border-radius: 10px;
padding: 10px 10px 7px;
display: flex;
flex-wrap: wrap;}
/*MEMBRES CO 24 H CRÉDITS GROUPES*/
.qeel1 { margin-right: 7px;
width: 70%;}
/*balise qui contient membres co 24 heures / nouveau membre et txt credits*/
.qeel4 { display: flex;
margin:0 0 7px 0;}
/*balise connectes dernieres 24 heures*/
.qeel_dc { width: 57%;
margin: 0 7px 0 0;
height: 98px;
border-top: var(--border1);
margin-right: 7px;
padding: 5px;
font-size: 12px;
text-align: justify;
overflow: auto;
color: var(--acc2);}
/*balise nouveau inscrit et txt credits*/
.qeel_nmcred {width: 43%;}
/*balise nouveau inscrit*/
.qeel_nm { border: var(--border1);
border-radius: 7px 7px 7px 28px;
padding: 4px;
display: flex;
flex-wrap: wrap;}
/*balise avatar nouveau inscrit*/
.qeel_avatar { width: 50px;
z-index: 100;
height: 50px;
padding: 4px;
border-radius: 10px 100% 100%;
background: var(--background2);
border: var(--border1);
box-sizing: border-box;}
/*avatar nouveau inscrit*/
.qeel_avatar img { width: 40px;
object-fit: cover;
height: 40px;
border-radius: 10px 100% 100%;}
/*balise pseudo nouveau inscrit*/
.qeel_nouvmembre { text-align: center;
text-transform: normal;
font-size: 16px;
line-height: 31px;
min-height: 30px;
margin: 0 0 0 20px;}
.qeel_nouvmembre strong {font-weight:500;}
/*balise titre bienvenue sur forum*/
.qeel_bienvenue { width: 100%;
text-align: right;
background: var(--background1);
text-transform: normal;
font-weight: 600;
font-size: 12px;
padding: 0 10px 0 0;
margin: -11px 0 0 24px;
border-radius: 4px;
color: var(--acc4);}
/*balise txt libre/credits*/
.qeel_cred { text-align: justify;
height: 45px;
overflow: auto;
margin-top: 4px;
font-size: 12px;}
/*balise contenant groupes*/
.qeel_groups { display: flex;
width: 100%;
border-top: var(--border1);
padding: 6px 0 0;}
/*balise des groupes*/
.group { background: var(--background1);
padding: 3px 10px 2px;
border-radius: 2px;
width: 92%;
text-align: center;
text-transform: uppercase;
margin:0 7px 0 0;
font-size: 10.5px;
font-weight: 600;}
.group:last-child {margin:0;}
/*NB CONNECTES INVITES MEMBRES CO NB INSCRITS/MESSAGES*/
.qeel2 { width: 29%;}
/*balise nb utilisateurs en ligne*/
.qeel_stats { text-align: center;
text-transform: uppercase;
font-size: 9px;
border-bottom: var(--border1);
padding: 0 0 4px;
letter-spacing: 1px;}
.qeel_stats strong {
font-weight:500;}
/*balise nb inscrits/messages et membres connectes*/
.qeel5 { display: flex;
margin: 7px 0 0;}
/*balise nb inscrits/messages*/
.qeel_sujmess { margin: 0 7px 0 0;
max-width: 85px;}
/*nb inscrits/messages*/
.qeel_sujmess2 { background: #fafafa;
text-align: center;
font-size: 11px;
padding: 0 10px;
border-radius: 7px;
font-weight: 700;
height: 52px;
display: flex;
justify-content: center;
align-items: center; color: var(--acc2);}
.qeel_sujmess2:nth-child(1) {margin: 0 0 5px;
background: var(--background1);
color: var(--acc4);}
/*balise membres connectes*/
.qeel_mc { border: var(--border1);
border-radius: 7px;
padding: 5px;
text-align: justify;
text-transform: normal;
width: 100%;}
.qeel_mc br {display:none!important;}
/*balise titre membres co*/
.qeel_mc2 { text-align: center;
background: var(--acc2);
text-transform: uppercase;
font-size: 11px;
color: var(--acc3);
border-radius: 4px;}
/*balise contenant les pseudos des membres co*/
.qeel_mc3 {font-size: 0px;
height: 76px;
margin: 4px 0 0;
border-top: var(--border1);
overflow: auto;}
.qeel_mc3 a {font-size:14px;}
/*balise credits, surtout ne SUPPRIMEZ PAS*/
.qeel_iaf { width: 100%;
border-top: 1px solid #ededed;
margin: 7px 0 0;
padding: 7px 0 0;
text-align: center;
font-size: 7px;
text-transform: uppercase;
letter-spacing: 1px;
color: #d1d1d1;}
/*** LISTE DES SUJETS ***/
/*** DESSUS/DESSOUS ***/
/*Boutons nouv/rep et navigation*/
.pro_nav { display: flex;
font-size: 0;
margin: 15px 0;
align-items:center;}
/*liens dans navigation*/
.pro_nav a { font-size: 10px;
text-transform: uppercase;
margin: 0 10px 0 0;
font-weight: 600;
padding: 1px 0 0;}
/*styling bouton nouv/rep*/
.pro_nouvrep a { background: var(--background3);
color: var(--acc3)!important;
padding: 2px 10px;
border-radius: 6px;
font-family: 'Trebuchet MS';
font-weight: 700;
letter-spacing: 1px;
font-size: 13px; transition: .5s ease;}
.pro_nouvrep { margin: 0 10px 0 0;
}
.pro_nouvrep a:nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.pro_nouvrep a:nth-child(1):hover {background: var(--background3); transition: .5s ease;
color: var(--acc3)!important;}
/*liens navigation à côté de bouton rep/nouv*/
.liens_suj { background: var(--background2);
padding: 2px 10px 3px;
border-radius: 7px;
display: flex;
justify-content: flex-start;
font-size: 0;
align-items: center;}
.liens_suj a {
margin: 0 15px 0 0;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;}
/*la pagination*/
.pagination { float: none;
display: flex;
justify-content: flex-end;
font-size: 0px;
margin:0;}
.pagination2 {
text-transform: uppercase;
}
.pagination a, .pagination span {font-size:11px;}
.pagination a { padding: 0 10px 0;}
.pagination a strong {font-weight:500;}
.pagination span strong { background: var(--acc2);
padding: 0 5px;
border: none;
color: var(--acc3);
font-size: 10px;
border-radius: 3px;
line-height: 16px;
width: auto;}
.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active
{ color: var(--acc1);
background: var(--background1);
padding: 0 5px;
border: none;
font-size: 10px;
border-radius: 3px;
line-height: 16px;
width: auto;}
.pagination span a.pag-img {vertical-align: baseline;}
.pagination span a.pag-img img { height: 9px;
margin-top: 0;}
/*titre de liste des sujets*/
.cat_titre { background: var(--background3);
border-radius: 7px 7px 0 0;
color: #fff;
font-family: 'Unica One', cursive;
font-weight: 800;
font-size: 16px;
letter-spacing: 1px;
margin-top: 14px;
padding: 9px 20px;
text-transform: uppercase;}
/*** LES SUJETS ***/
/*Div qui contient toutes les balises*/
.af_suj1 { display: flex;
background: var(--background2);
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
height: 74px;
margin: 0 0 7px;}
/*partie image new/no new*/
.af_suj2 { width: 57px;
margin: 0 7px 0 0;}
.af_suj2 img { width: 57px;
height: 54px;
object-fit: cover;
border-radius: 10px;}
/*partie réponses / vues*/
.af_suj3 { width: 9%;
margin: 0 7px 0 0}
.suj_stat {background: #fafafa;
border-radius: 7px;
display: flex;
height: 25px;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
color: var(--acc2);}
.suj_stat:nth-child(1) {
margin:0 0 4px;
background: var(--background1);
color:var(--acc4);}
/*partie titre du sujet, auteur, pagination & description*/
.af_suj4 {width: 58%;}
/*titre du sujet*/
.suj_titre { border-bottom: var(--border1);
padding: 8px 0 4px;
margin: 0 0 4px;}
a.topictitle { color: var(--acc1);
font-weight: 600;
font-size: 14px;
text-transform: normal;
line-height: 13px;}
a.topictitle:hover {
text-decoration:var(--acc4);}
ba { color: var(--acc2);
font-size: 11px;
letter-spacing: 1px;
text-transform: normal;
line-height: 13px;}
.suj_titre img {margin:0 5px 0 0;}
/*partie auteur et pagination*/
.af_suj5 { display: flex;}
.suj_auteur { width: 50%;
font-size: 11px;
text-transform: normal;}
.suj_pagination { text-transform: uppercase;
font-size: 0px;
width: 50%;
text-align: right;
}
.suj_pagination a { font-size: 11px;
background: var(--background1);
padding: 0 9px;
border-radius: 4px;
margin: 0 3px 0 0;}
.suj_pagination br, .suj_pagination img {display:none!important;}
.suj_pagination .gensmall {font-size:0px!important;}
/*description du sujet*/
.suj_description { color: var(--acc1);
font-style: italic;
font-size: 13px;}
/*partie avatar dernier posteur*/
.af_suj6 { border: var(--border1);
padding: 3px;
width: 50px;
height: 50px;
border-radius: 60px;
box-sizing: border-box;
margin: auto 7px;}
.af_suj6 img {width: 41px;
height: 42px;
border-radius: 51px;
object-fit: cover;}
/*partie dernier message et dernier posteur pseudo*/
.af_suj7 {width: 17%;
display: flex;
flex-wrap: wrap;
font-size: 14px;
align-items: center;
text-transform: normal;
margin: auto 0;}
.af_suj7 span {
padding:0 10px 0 0;
}
.af_suj7 img {margin:0 0 0 3px;}
/*** AFFICHAGE SUJETS SI PAS DE SUJETS ***/
li.row {
border: none;
text-align: center;
list-style: none;
padding: 9px;
text-transform: uppercase;
color: var(--acc1);
letter-spacing: 1px;
border-radius: 0 0 10px 10px;
font-size:12px;
background:var(--background2);
}
li.row:hover {
background-color: var(--background2);
}
/*** AFFICHAGE D'UN SUJET ***/
/*styling bouton nouv/rep*/
.buttons { background: var(--background3);
color: var(--acc3)!important;
padding: 2px 10px;
border-radius: 6px;
font-family: 'Trebuchet MS';
text-transform: uppercase;
font-weight: 700;
letter-spacing: 1px;
font-size: 13px; transition: .5s ease;}
/* PARTICIPANTS DU SUJET */
/* Conteneur de la liste des participants au sujet */
.poster-list{display:flex;align-items:center;justify-content:center;margin-top:-10px;margin-bottom:20px}
/* Avatar du participant*/
.poster {
background: var(--poster-avatar);
height: 30px;
width: 30px;
border-radius: 100%;
margin-left: -8px;
border: 2px solid var(--lighter);
background-size: cover;
background-position: center;
}
/* Lien de renvoi vers son profil */
.poster a {
display: block;
height: 100%;
}
/* Nombre de participants */
.poster-count {
margin-left: 8px;
}
/*** SUJET ***/
.post_row {
background: var(--greyer);
display: grid;
grid-template-rows: max-content auto;
grid-template-columns: min-content auto;
border-bottom: 1px solid var(--light);
}
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(--light);
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{padding:2px 4px;border-radius:5px}
/*hover d'un bouton d'édition*/
ul.profile-icons li:hover {
background: var(--greyer);
}
.post_profile {
padding: 10px;
border-right: 1px solid var(--light);
}
.post_pseudo{font-weight:700}
/* Lien "@" de mention */
a.fa-mention {}
/* Mention "en ligne" */
.online {
display: inline-block;
position: relative;
background-color: var(--grey);
border-radius: 5px;
padding: 0 5px;
margin: 0 auto;
}
.online:empty{display:none}.post_message{padding:10px}
/* REPONSE RAPIDE */
.quickreply div.h3{display:none}.quickreply{display:flex;justify-content:center}#quickreply_content:empty{display:none}
/*** SONDAGE ***/
.poll {
background: var(--lighter);
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;
}
/*** AFFICHAGE PROFIL ***/
/*** DIV PRINCIPAL CONTENANT LE PROFIL ***/
.spro_1 {
background: var(--background2);
padding: 10px;
border-radius: 10px;
display: flex;
margin:20px 0;
}
/*** GAUCHE (rang et avatar) ***/
/*Div à gauche qui contient avatar et rang*/
.spro_2 {
background: var(--background1);
padding: 10px;
border-radius: 10px;
width: 232px;
box-sizing: border-box;
}
/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
background: var(--background2);
flex-wrap: wrap;
margin: 0 0 7px;
border-radius: 10px 10px 10px 10px;
}
/*Div qui contient le pseudo*/
.spro_username { padding: 7px 0 0 12px;
border-bottom: var(--border1);
text-align: left;
font-size: 15px;
height: 31px;
box-sizing: border-box;
width: 100%;}
/*Div contenant le rang et limage*/
.spro_rang2 {
padding: 1px 12px 0 0;
display: flex;
width: 100%;
justify-content: flex-end;
font-size: 12px;
line-height: 28px;
}
/*Styling de limage*/
.spro_rang2 img { width: 60px;
height: 60px;
border-radius: 100%;
padding: 5px;
box-sizing: border-box;
background: var(--background2);
border: var(--border1);
margin: -31px 0 0 7px;
}
/*Div contenant lavatar*/
.spro_avatar {
background: var(--background2);
padding: 6px;
border-radius: 10px;
box-sizing: border-box;
}
/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
max-width: 200px;}
/*** DROITE (derniere visite, images contact, infos) ***/
/*Div contenant le tout*/
.spro_3 {
margin: 0 0 0 7px;
width: 100%;
}
/*Div de la derniere connexion*/
.spro_lastvisit { margin: 0 0 7px;
background: var(--background1);
text-align: center;
text-transform: uppercase;
color: var(--acc2);
font-weight: 600;
letter-spacing: 1px;
line-height: 24px;
border-radius: 6px;
font-size: 14px;
}
/*Div contenant contact et les infos*/
.spro_profile { border: var(--border1);
padding: 10px;
border-radius: 10px;
}
/*Div contenant le en ligne et les images contact*/
.spro_contact { border-bottom: var(--border1);
padding: 0 0 7px;
margin: 0 0 7px;
display: flex;
text-transform: uppercase;
justify-content: space-evenly;
font-weight: 600;
color: var(--acc1);
font-size: 14px;
align-items: center;
}
/*Styling images contact*/
.spro_contact img {
width: 23px;
background: var(--background1);
padding: 3px;
box-sizing: border-box;
border-radius: 5px;
}
/*Div contenant toutes les infos*/
.spro_info { height: 292px;
overflow: auto;}
.spro_info img {
max-width:200px;
border-radius:10px;
}
/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}
dl.details dt {
text-align: left;
width: 12em;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
color: var(--acc2);
}
dl.details dd {
margin: 0 0 .5em 12em;
font-size:14px;
line-height:22px;
}
/*Div contenant les liens en bas*/
.spro_links { display: flex;
margin: 7px 0 0;
}
/*Styling des liens*/
.spro_links a {
width: 100%;
line-height: 29px;
background: var(--background1);
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
border-radius: 10px;
font-size: 12px;
}
.spro_links a:nth-child(2) {
margin:0 7px;
}
/*** PROFILS SIMPLIFIÉS DES TAGS ***/
/* Supression de la flèche peu esthétique*/
.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: auto auto;
grid-gap: 10px;
}
.userlist_profil {
display: grid;
grid-template-columns: 95px auto;
grid-gap: 10px;
padding: 10px;
background: var(--lighter);
border-radius: 5px;
}
.userlist_avatar {}
.userlist_avatar img {
width: 75px;
height: 120px;
object-fit: cover;
object-position: center;
}
.userlist_details {}
.userlist_pseudo {
font-size: var(--medium-size);
}
.userlist_infos {}
.userlist_contact {}
/*** LISTE 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: 2px;
font-size: var(--little-size);
padding: 3px 5px 3px 2px !important;
border-radius: 5px;
background: var(--background1);
color: var(--acc1);
font-weight: 700;
border: none;
}
#privmsgs-menu li:hover {
background: var(--acc4);
color: var(--lighter)
}
/*styling bouton nouv/rep*/
.newpm_button { background: var(--background3);
color: var(--acc3);
padding-right: 1px;
padding-top: 3px;
text-align: center;
border-radius: 6px;
font-family: 'Trebuchet MS';
font-weight: 700;
letter-spacing: 1px;
font-size: 13px; transition: .5s ease;}
.newpm_button { margin: 0 10px 0 0;
}
.newpm_button :nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.newpm_button :nth-child(1):hover {background: var(--background3); transition: .5s ease;
color: var(--acc3)!important;}
/* new/no new */
.mp_img { width: 57px;
margin: 0 7px 0 0;}
.mp_img img { width: 57px;
height: 54px;
object-fit: cover;
border-radius: 10px;}
/* Affichage d'un MP dans la liste */
.mp_row {
background: var(--background2);
border-radius: 5px;
display: grid;
grid-template-columns: 55px auto;
grid-gap: 10px;
align-items: center;
margin-bottom: 10px;
padding: 10px;
}
/*** AFFICHAGE MP ***/
/* style bouton rep */
.replypm_button a { background: var(--background3);
color: var(--acc3)!important;
padding: 2px 10px;
border-radius: 6px;
font-family: 'Trebuchet MS';
font-weight: 700;
letter-spacing: 1px;
font-size: 13px; transition: .5s ease;}
.replypm_button { margin: 0 10px 0 0;
}
.replypm_button a:nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.replypm_button a:nth-child(1):hover {background: var(--background3); transition: .5s ease;
color: var(--acc3)!important;}
.message {
background: var(--background2);
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(--border);
padding: 10px;
display: flex;
justify-content: space-between;
}
.mp-icons {
display: flex;
float: right;
}
.message_profil {
padding: 10px;
border-right: 1px solid var(--border);
text-align: center;
}
.message_content {
padding: 10px;
}
/*** PAGES ANNEXES ***/
/*** ENVOI 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(--background2);
padding: 10px;
border: var(--border1);
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(--grey);
border: var(--border);
border-radius: 5px;
}
/* onglet au survol */
#tabs li:hover {
background: var(--grey);
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 RECHERCHES ***/
/* RECHERCHE MESSAGE /
/* Conteneur d'un message*/
.post_search {
display: grid;
grid-template-columns: 200px auto;
border-radius: 5px;
margin: 10px 0;
background: var(--lighter);
}
.post_search > div{padding:10px}
/* Colonne d'information du message */
.postsearch_infos {
border-right: var(--border);
font-size: var(--little-size);
}
/* RECHERCHE SUJET */
/* Même CSS que la liste des sujets dans un forum */
/*** PAGE CO ***/
/* 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(--lighter);
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(--lighter);
padding: 10px;
border: var(--border);
border-radius: 5px;
}
/*** STRUCTURE FA ***/
/*** BALISES GENERALES ***/
ul{list-style-type:none;padding:0;margin:0}fieldset{border:none;padding:0;margin:0}dl{display:grid;grid-template-columns:220px auto;grid-gap:15px}dd{margin:0}dt{margin:0}dt label{font-weight:700}button,input{border:none}
button,
select,
input {
font-family: var(--font);
cursor: pointer;
}
/* Structure page de connexion */
.fld_connexion dl{display:grid;grid-row-gap:15px;grid-template-columns:150px auto}.fld_connexion dl:nth-of-type(2) dd:last-of-type{grid-column:1 / span 2}.fld_connexion dl:nth-of-type(3){margin:0}.fld_connexion dl:nth-of-type(n+3){display:block}.invisible{display:none;visibility:hidden}.visible{display:block;visibility:visible}
/* Indicateur complexité du mot de passe */
#cont_pwd{display:flex;align-items:center;height:100%;margin-left:5px}.pwd_img{padding:2px 6px;display:none;border-radius:3px}
#pwd_good {
background-color: #4CAF50;
color: #FFF;
}
#pwd_middle {
background-color: #FFCC00;
color: #000;
}
#pwd_bad {
background-color: #F04040;
color: #FFF;
}
/*** POUBELLE FA ***/
#find_username br,#users_here br,#main-content > p,.adminlink br,.corners-top,.corners-bottom{display:none}#find_username .panel{border:none;margin:0}.adminlink{clear:both}#cp-main#cp-main#cp-main,table,.quickreply div#textarea_content{width:100%!important}.panel .panel{background:transparent;border:none;padding:0;margin:0;border-radius:0}.social_btn{display:none}
/*** PA ICE&FIRE ***/
:root {
--accc1: #000;
--accc2:#DD9F8C;
--white: #fff;
--border: #f1ede4;
--background: #f1f1f1;
}
/*** CORPS PA ***/
.pa_1 { background-color: var(--background2);
border-radius: 10px;
display: grid;
text-align:center;
grid-gap: 6px;
grid-template: 18px 40px 20px 75px 18px 10px / 228px 102px 115px 132px 110px 110px;
padding: 0 10px 10px -25px;}
/*** GAUCHE (actualité/intrigue, staff, forum optimisé) ***/
/* CONTAINER ACTUALITÉ */
.item_13 { border: 1px solid var(--border);
border-radius: 4px;
grid-area: 1 / 1 / span 3 /span 1;
padding: 4px 4px 0;
text-align: justify;}
.texte_4 { height: 69px;
line-height: 15px;
overflow: auto;}
.title { margin-top: 2.5px;}
/* PARTIE STAFF ET ONGLETS */
/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}
/*container des onglets*/
.onglets_pa { display: flex;
flex-direction: column;
height: 75px;
position: relative;
right: -3px;
text-align: justify;
width: 225px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}
/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
align-items: center;
display: flex;
justify-content: center;
margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}
/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff { border-radius: 50px;
width: 27px;
height: 27px;
padding: 2px;
border: 1px solid var(--border);
object-fit: cover;}
/*décide de la largeur de la séparation entre les images*/
.lab { cursor: pointer;
margin-left: 5px;
}
.lab:hover {
opacity:0.8;
}
/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
box-sizing: border-box;
margin-top: 5px;
opacity: 0;
padding: 4px 0;
position: absolute;
scrollbar-width: none;
text-align: center;
visibility: hidden;
width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
height: 36px;
}
.contenu.visible {
opacity: 1;
visibility: visible;
}
/*balise déco du prénom, nom*/
h { color: var(--acc1);
font-weight: 600;
letter-spacing: 1px;
font-size: 12px;}
/*balise de la partie admin / profil*/
.sous_titre { font-size: 9px;
letter-spacing: 1px;}
/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}
/*container déco de la partie optimisée pour*/
.titre_3 {
background-color: var(--background3);
border-radius: 4px;
color: var(--acc1);
font-size: 9px;
font-weight: 500;
margin-top: -4px;
padding: 3px 0;
}
/*** CENTRE (contexte, liens navigation, règles ***/
/* CONTEXTE ET HOVER */
/* corps du contexte (container en gros qui tient tout*/
.gif_pa { border: 1px solid var(--border);
border-radius: 7px;
display: inline-block;
grid-area: 1 / 2 / span 5 /span 2;
height: 192px;
line-height: 110%;
overflow: auto;
padding: 3px;
width: 224px; } /* à modifier si vous modifiez la largeur de la grid */
/*container de l'image du contexte*/
.img_pa {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius:7px;
}
/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
height: 184px;
object-fit: cover;
width: 224px; /* même largeur que gif_pa*/
}
/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt { background-color: var(--background2);
height: 192px;
left: 108px;
line-height: 16px;
overflow: auto;
padding: 5px;
position: absolute;
scrollbar-width: none;
text-align: justify;
top: 96px;
transform: translate(-50%,-50%);
width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */
/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background2);
bottom: 0;
height: 0;
left: 0;
overflow: hidden auto;
position: absolute;
scrollbar-width:none;
right: 0;
transition: .5s ease;
width: 100%;
}
.img_pa:hover .overflow {
height: 100%}
/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar {width:0px;height:0px;}
/*PARTIE NAVIG/LIENS*/
.item_1 { grid-area: 1 / 4 / span 5 /span 1;}
/*liens navigation*/
.link_pa { background-color: var(--background1);
border-radius: 4px;
font-size: 10px;
font-weight: 900;
font-color: var(--acc4);
letter-spacing: 1px;
text-transform:uppercase;
margin-bottom: 6px;
line-height: 10px;
padding: 1px 0;}
/*container avec les règles*/
.item_5 { border: 1px solid var(--border);
border-radius: 4px;
height: 77px;
line-height: 15px;
overflow: auto;
padding: 5px 7px 3px;
text-align: justify;
margin: 8px 0;}
/*** DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) ***/
/*TIMELINE*/
/*container timeline*/
.item_8 { border: 1px solid var(--border);
border-radius: 5px;
grid-area: 1 / 5 / span 2 /span 2;
height: 57px;
padding: 2px 5px;
text-align: justify;}
/*container texte timeline*/
.texte_1 { height: 40px;
line-height: 13px;
overflow: auto;
text-align: justify;}
/*partie premiere version signée xx*/
.titre_4 { background-color: var(--background3);
border-radius: 4px;
margin-top: 1px;
color: var(--acc1);
font-size: 9px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;}
/*PARTIE PÉRIODE DE JEU*/
/*container période de jeu*/
.item_9 { border-bottom: 1px solid var(--border);
color: var(--acc1);
font-size: 11px;
font-weight: 600;
grid-area: 3 / 5 / span 1 /span 2;
letter-spacing: 1px;
margin-top: -2px;
text-transform: uppercase;}
/*déco de texte pour rendre rose*/
j {color:var(--acc2);
font-style: italic;
font-weight: 700;
}
/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/
/*container du tout*/
.item_10 { grid-area: 4 / 5 / span 2 /span 2;}
/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}
/*container des membres du mois (colonne gauche)*/
.float_pa1 { float: left;
width: 160px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
height: 56px;}
/*style des images des membres du mois*/
.mdm1, .mdm2 {
border: 1px solid var(--border);
border-radius: 10px;
height: 30px;
object-fit: cover;
padding: 3px;
width: 21px;
}
.mdm2 {margin:0 5px;}
/*container de la partie nous soutenir*/
.float_pa2 {float: left;
height: 56px;
margin-left: 4px;
line-height: 12px;
width: 62px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}
/*icons discord et tumblr*/
.discord_pa { width: 21px;}
/*PARTIE PARTENARIATS*/
/*container de la partie partenariats*/
.item_11 { border-top: 1px solid var(--border);
margin-top: -5px;
padding-top: 6px;}
/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
border-width: 1px;
border-radius: 5px;
border: 1px solid var(--border);
width: 175px;
letter-spacing: 1px;
font-size: 8px;
text-transform: uppercase;}
/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 { grid-area: 6 / 1 / span 1 /span 6;
font-size: 7px;
border-top: 1px solid var(--border);
letter-spacing: 1px;
padding-top: 5px;
color: #d1d1d1;}
/* CHATBOX PERSONNALISEE */
.chatbox{
border:none;
}
/* Couleur du texte par défaut (contextmenu / message + heure + liste des membres sans groupe) */
#chatbox, #chatbox_contextmenu, #chatbox_contextmenu a, #chatbox_members {
color: #000!important;
}
/* Enlever image de fond par défaut */
.chatbox .catBottom { background: transparent; }
#chatbox_header{
background:#327794;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
#chatbox_header strong{
margin-left:10px;
text-transform:uppercase;
}
#chatbox_header a{
color: #000000;
}
/* Liste des membres à droite */
#chatbox_members{
width:181px;
background:#82A9B4;
margin-bottom:-10px;
border:none;
}
#chatbox_members .member-title{
color:#FFF;
padding:3px;
margin-top:10px;
margin-bottom:5px;
}
/* Menu au clic droit du pseudo à droite */
#chatbox_contextmenu{
background:#FFF;
font-size:15px;
}
/* Titre de la liste des membres (En ligne) */
#chatbox_members .online{ background:#327794;
border-radius:10px;
}
/* Titre de la liste des membres (Hors ligne) */
#chatbox_members .away{ background:#327794;
border-radius:10px;
}
/* Partie centrale de la chatbox */
#chatbox{
background:#ffffff;
border:none!important;
}
body.chatbox {
background-color: transparent;
}
/* Fond des messages differents */
.chatbox_row_2{ background:#f4ece8!important; }
.chatbox_row_1{ background:transparent!important; }
#chatbox > p{
margin:0; /* phpbb3 => enlever les marges par défaut */
border:0px !important;
}
.chatbox td.catBottom, .chatbox th.thBottom{
border:0px !important;
}
/* Barre inférieure de la chatbox */
#chatbox_footer{
background:#327794;
padding-bottom:4px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
/* Zone décriture du message de la chatbox */
.chatbox input{ border:1px solid #6f6660!important; }
#chatbox_footer #submit_button{
padding-right:2px;
}
#chatbox_footer {
display: block !important;
}
/*************FIN CB*************/
personnaliser le cb n'est pas un soucis pour moi, mais là elle est juste insupportable à utiliser et ça fait plusieurs heures que je suis dessus sans succès
merci d'avance si tu peux me sauver Invité
ok alors je-
j'étais en train d'écrire un message pour dire que je m'étais trompée de CSS entre mes différents essais, je remets le bon et j'actualise pour faire un screen et là ça fonctionne ??? je comprends rien
bon je vais tester sur mon forum, je croise les doigts pour que ça marche mais je sais pas ce qui a changé pour que ce soit le cas mdrr
j'étais en train d'écrire un message pour dire que je m'étais trompée de CSS entre mes différents essais, je remets le bon et j'actualise pour faire un screen et là ça fonctionne ??? je comprends rien
bon je vais tester sur mon forum, je croise les doigts pour que ça marche mais je sais pas ce qui a changé pour que ce soit le cas mdrr
Pronoun(s) : Elle/she
Messages : 157
Hey! Je m'excuse ton message est passé à travers le filet de mon attention !!
J'espère que tu as pu régler ton problème
J'espère que tu as pu régler ton problème
|
|
|