6 résultats trouvés pour notif_list

problème codage qeel

css:

.menu{padding:5px;margin-top:-20px;}

a.mainmenu[href^="/calendar"], a.mainmenu[href^="/faq"] {
 display: none;
}
.mainmenu{margin-top:-20px;  
  font-size: 14px;color:#FAA0DF;
font-family: 'Mulish', sans-serif;font-size:12px;text-transform:uppercase;color:#FAA0DF;padding:1px;letter-spacing:-1px;
       }

a.mainmenu{padding:1px;
   text-decoration: none;
font-family: 'Mulish', sans-serif;font-size:12px;text-transform:uppercase;color:#9fbdbd;text-shadow: 0 0 3px #fff, 0 0 3px #fff;letter-spacing:-1px;
}

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

a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
}


 
 
 /*---  NAVIGATION ET HEADER ---*/
#fa_toolbar {
   background-color: transparent !important;  /* Rend transparent le fond principal */
}

#fa_right {
  background:#FBE677; /* Couleur de fond */
      text-transform:uppercase;font-size:12px;
   padding-left: 10px;  /* Règle la marge intérieure gauche */
   padding-right: 10px;  /* Règle la marge intérieure droite */
 margin-right: 30px;
 border-radius: 10px;
     box-shadow: 0px 0px 4px 2px rgba(119, 119, 119, 0.2);
-moz-box-shadow: 0px 0px 4px 2px rgba(119, 119, 119, 0.2);
-webkit-box-shadow: 0px 0px 4px 2px rgba(119, 119, 119, 0.2);
}
ul#notif_list{
 background-color:#FFFDFB;
}
ul#notif_list{
 background-color:#FFFDFB;
}
div.fa_notification{
 background-color:#FFFDFB;
}
#notif_list li .contentText{
 background-color:#FFFDFB;
}
li.see_all{
 background-color:#FFFDFB;color:#5f4037;
}
#fa_left {display:none!important;}
ul#fa_menulist {display:none!important;}
div#fa_search {display:none!important;}
span#fa_share {display:none!important;}
a#fa_hide {display: none!important;}

a.mentiontag { text-transform:uppercase;color:#C2A3D1;font-family: 'Inter', sans-serif;font-size:10px;padding:2px;font-weight:bold;text-shadow: 0 0 5px #fff, 0 0 5px #fff;}
.catHead, .catBottom, .catLeft, .catRight, .thLeft, .thRight,
.thSides, .thCornerL, .thCornerR, .thTop, .thHead, .row3Right
{
border: none !important;
}

 
/*---  SWITCHEROOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO ---*/
.switcheroo {
 --color-bg: #17141b;
 --color-delete: #e74c3c;
 --color-tooltip: #010203;
 --color-squircle: #201f2e;
 --color-accent: #b14255;
 --color-button: #aaa2f2;
 --color-pill: #ffffff;
 --gap-size: 1rem;
 --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
 --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
.switcheroo {
 position: fixed;
 z-index: 10;
 top: 0;
 bottom: 0;
 flex-shrink: 0;
 background-color: var(--color-bg);
}
.switcheroo__squircles {
 display: flex;
 flex-direction: column;
 min-height: 100vh;
 margin: 0;
 padding: 0;
 list-style: none;
 background-color: var(--color-body);
 padding: var(--gap-size);
 gap: var(--gap-size);
}
.switcheroo__squircle {
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: var(--color-squircle);
 width: 48px;
 height: 48px;
 border-radius: 50%;
 cursor: pointer;
 position: relative;
 transition: border-radius 128ms var(--ease);
}
.switcheroo__squircle--button {
 transition: border-radius 128ms var(--ease);
 color: var(--color-button);
}
.switcheroo__squircle--button:hover {
 color: #fff;
 background-color: var(--color-button);
}
.switcheroo__squircle:hover {
 border-radius: 36%;
}
.switcheroo__squircle:hover .switcheroo__popper {
 opacity: 1;
 transform: translateY(-50%) scale(1);
}
.switcheroo__squircle:hover:before {
 opacity: 1;
 transform: translate(-100%, -50%) scale(0.5);
}
.switcheroo__squircle:hover .switcheroo__delete {
 opacity: 1;
 transform: scale(1);
}
.switcheroo__squircle:before {
 content: "";
 width: 100%;
 height: 100%;
 display: block;
 background-color: var(--color-pill);
 position: absolute;
 border-radius: 4px;
 top: 50%;
 transform: translate(-100%, -50%) scale(0);
 transition: transform 128ms, opacity 64ms;
 pointer-events: none;
 opacity: 0;
}
.switcheroo__squircle.active {
 border-radius: 36%;
 cursor: default;
}
.switcheroo__squircle.active:before {
 opacity: 1;
 transform: translate(-85%, -50%) scale(0.2);
 border-radius: 50%;
}
.switcheroo__popper {
 background-color: var(--color-tooltip);
 padding: 0.68rem 1rem;
 position: absolute;
 left: 155%;
 top: 50%;
 transform-origin: left;
 transform: translateY(-50%) scale(0.98);
 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;
}
.switcheroo__popper:before {
 content: "";
 position: absolute;
 width: 24px;
 height: 24px;
 background-color: var(--color-tooltip);
 left: -2px;
 top: 50%;
 transform: translateY(-50%) rotate(-45deg);
 z-index: -1;
}
.switcheroo__avatar {
 position: relative;
 width: 100%;
 height: 100%;
 border-radius: inherit;
 overflow: hidden;
}
.switcheroo__avatar img {
 width: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.switcheroo__delete {
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 width: 16px;
 height: 16px;
 top: -2px;
 right: -2px;
 border-radius: 50%;
 background-color: var(--color-delete);
 transform: scale(0);
 opacity: 1;
 transition: transform 128ms var(--ease), opacity 64ms var(--ease);
 cursor: pointer;
}
.switcheroo__delete i {
 transform: scale(0.5);
 pointer-events: none;
}
.switcheroo__divider {
 width: 100%;
 height: 2px;
 background-color: var(--color-pill);
 border-radius: 1px;
 opacity: 0.06;
 transform: scale(0.;
}
.switcheroo__form {
 padding: 48px;
}
.switcheroo__form-row {
 display: flex;
 flex-flow: column;
 align-items: flex-start;
 margin-bottom: 16px;
}
.switcheroo__form-label {
 margin-bottom: 8px;
 font-size: 14px;
 text-transform: uppercase;
}
.switcheroo__form-input {
 padding: 6px;
 font-size: 16px;
 border-radius: 4px;
 width: 100%;
 border-bottom: 2px solid var(--color-accent);
 background-color: var(--color-bg);
}
.switcheroo__form-button {
 border-radius: 8px;
 padding: 8px;
 border: none;
 outline: none;
 box-shadow: none;
 text-transform: uppercase;
 font-size: 14px;
 align-self: flex-end;
 color: #fff;
 background-color: var(--color-accent);
}

.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.6);
}

.monomer-modal {
 position: absolute;
 z-index: 999;
 top: 50%;
 left: 50%;
 opacity: 0;
 width: 94%;
 padding: 24px 20px;
 transition: .2s opacity ease;
 transform: translate(-50%, -50%);
 border-radius: 2px;
 background: var(--color-squircle);
}

.monomer-modal.monomer-open.monomer-anchored {
 top: 20px;
 transform: translate(-50%, 0);
}

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

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

/* Close Button */
.monomer-close {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 20px;
 font-weight: 700;
 line-height: 24px;
 text-align: center;
 width: 24px;
 height: 24px;
 position: absolute;
 top: -5px;
 right: -5px;
 padding: 5px;
 cursor: pointer;
 color: #fff;
 border: 0;
 outline: none;
 background: var(--color-delete);
 border-radius: 50%;
 padding: 0;
}

.monomer-close:hover {
 opacity: 0.8;
}


/******************************** catégories ********************************/
.blocDernierPost{
 float:right;
 width:120px;
 height:140px;
}

.dernierPost{
background-image:url('https://zupimages.net/up/21/11/0azn.png');
   color: #9fbdbd;
 font-family: "open sans";
   font-size: 11px;
   padding: 10px;
   position: absolute;
   right: 2%;
   text-align: center;
   top: 16%;
   height: 100px;width: 120px;
}

.dernierPost span{
   left: 1%;
   position: relative;
}

.imgOldNewLock{
   height: 33px;
   position: relative;
   width: 120px;
}
.avatarCate{
   background: #FCE579;
   padding: 3px;
   position: absolute;
   right: 19.2%;
   top: 16%;
   width: 70px;
}

.avatarCate img{
 width:70px;
}
.blocForum{
 position:relative;
 width:100%;  
 height:auto;
 background:transparent;
 }

.titreCate{
 width: 100%;
   height: 60px;
   /* background: linear-gradient(180deg, #3A6E74,#402F3F); */
background-image:url('https://zupimages.net/up/21/11/jr7c.png');
   
   margin: auto;
   letter-spacing: 3px;
}
.titreCate h2 /*titre de la caté*/
{    font-family: Kufam;
   font-size: 22px;
   text-align: center;
   text-transform: uppercase;
   transform: rotate(-2deg);
   color: #7db08a !important;
   padding-top: 16px;
}

.blocCate{
background: #f5f9fa;
   /* border: 2px dotted red; */
   height: auto;
   position: relative;
   width: 100%;
   padding: 8px 0 8px 0;
}
.titreForum /*titre du forum*/
{
   height: 20px;
   left: 21%;
   top: 2%;
   margin: auto;
   position: absolute;
   width: 50%;
   z-index: 1;transform: rotate(-2deg);
}

.titreForum a{
font-family: Kufam;
   font-size: 15px;
   color: #9fbdbd !important;
   text-transform: uppercase;
}
.descriptionForum{
   background-color: #FFFFFF;
   font-family: open sans;
   font-size: 13px;
   height: 110px;
   left: 21%;
   overflow: auto;
   padding: 5px;
   position: absolute;
   text-align: justify;
   top: 16%;
   width: 48%;
}

.descriptionForum strong{
   
   font-family: indie flower;
   text-transform: uppercase;
   color: #F9BFB3 ;
 
   font-size: 11px;
}
.sujetsMessages{
   color : #9fbdbd;
   font-family: poppins;
   font-size: 10px;
   height: 10px;
   position: absolute;
   right: -6.5%;
   text-align: center;
   top: 54%;
   width: 16%;
   transform: rotate(-90deg);
   z-index: 1;
}
.sousForums {
   background-color: #FFFFFF;
   font-size: 0;
   height: 90x;
   left: 1%;
   position: absolute;
   text-align: center;
   top: 16%;
   width: 130px;
   padding: 15px;height: 90px;    overflow: auto;
}

.sousForums a{
   color: #7db08a;
   display: block;
   font-family: kufam;
   font-size: 11px;
   padding: 3px 0 0;
   text-align: center;
   text-transform: uppercase;
   transition: all 1s ease;
}

.sousForums a:hover{
   letter-spacing: 1.5px;
}



/********************************************************* LISTE SUJETS *********************************************************/

/* - - - - Liste des sujets claire #1
- - - - - - Auteur: Syx(/Kehoru)
- - - - - - Merci de créditer pour toute utilisation du CSS et/ou du template  - - - - */

/* - - - - - - - - > > > > topics_list_box - - - - - - - - */

/* - - - - AFFICHAGE DE CHAQUE SUJET - - - - */

/* le block du sujet */
.lsuj_sujet {
position: relative;
background-color: #fbfbfb;
margin: 10px 0;
box-sizing: border-box;
padding: 10px 10px 10px 35px;
box-shadow: 0 0 5px rgba(50,50,50,.15); }

/* block de gauche dont la couleur s'adapte selon le statut du sujet (rien de nv., nv. message, verrouillé) */
.lsuj_folder {
position: absolute;
left: 0;
top: 0;
width: 25px;
height: 100%; }

/* block de l'icône du sujet */
.lsuj_icon {
vertical-align: top;
margin-right: 12px;
width: 16px;
padding-top: 12px; }

/* le block regroupant les infos primaires du sujet */
.lsuj_infos {
width: 50%;
vertical-align: middle; }

/* le type de sujet (annonce, note, etc.) */
.lsuj_sujet div.lsuj_type {
color: #3e3e3e;
font-size: 0;
vertical-align: text-top !important; }

/* le titre du sujet */
.lsuj_title {
padding-top: 1%;}
.lsuj_title a {
color: #4e4e4e;
font-size: 14px;
font-family: Roboto; }

/* l'auteur du sujet */
.lsuj_author {
margin-left: 5px;
font-size: 11px;
background-color: rgba(150,150,150,.05);
padding: 1px 4px;
vertical-align: unset;
position: relative; }

.lsuj_author::before {
content: "Ouvert par ";
color: #9e9e9e; }

/* la description du sujet (ne s'affichera tout de même que si les descriptions de sujets sont activées */
.lsuj_desc {
color: #757575;
font-size: 12px;
display: block !important;
width: 100%;
text-align: justify;
font-style: italic;
margin-top: 2px;
min-height: 20px; }

/* on place une phrase pour les sujets sans description */
.lsuj_desc:empty::before {
content: "Aucune description";
opacity: .65; }

/* block regroupant '.lsuj_count', '.lsuj_lastpost', '.lsuj_lastpost-avatar' */
.lsuj_right {
width: 46%;
right: 1%;
vertical-align: middle; }

/* block regroupant le nb. de réponses et de vues */
.lsuj_count {
vertical-align: top;
width: 50%;
text-align: center;
color: #4c4c4c;
font-size: 11px; }

/* block du dernier message du sujet */
.lsuj_lastpost {
vertical-align: top;
width: auto;
box-sizing: border-box;
text-align: right;
display: inline-block !important;
float: right;
margin-top: 6px; }

/* avatar de l'auteur du dernier message du sujet */
.lsuj_lastpost-avatar .lastpost-avatar {
float: none !important;
padding: 0 !important;
display: inline-block !important;}

.lsuj_lastpost-avatar .lastpost-avatar img {
border-radius: 0 !important;
width: 30px;
height: auto;
box-shadow: 0 0 0 1px #ececec;
border: 2px solid #fbfbfb; /* à changer selon la couleur de fond du block général du sujet (.lsuj_sujet) */ }

/* léger déplacement vertical de l'avatar: peut être changé selon les forums/cas */
.lsuj_lastpost-avatar {
position: relative;
top: 2px;}

/* date du dernier message du sujet */
.lsuj_lp_time {
font-size: 12px;
color: #5a5a5a;
font-family: Arial; }

/* on retire le 'br' automatique précédent l'affichage des pages de chaque sujet et l'image */
.lsuj_navtree br, .lsuj_navtree img {
display: none !important;}

/* auteur du dernier message du sujet */
.lsuj_lp_author {
display: block !important;
height: 13px;
line-height: 11px; }
.lsuj_lp_author a, .lsuj_lp_author strong {
font-size: 11px; }

/* déplacement de l'image près du pseudo de l'auteur du dernier message: peut être changé au cas par cas */
.lsuj_lp_author img {
position: relative;
top: -1px; }


/* - - - - AFFICHAGE DES PAGES DE CHAQUE SUJET - - - */
.lsuj_navtree {
color: #5a5a5a;
padding-bottom: 5px;
font-size: 0;}

.lsuj_navtree a {
font-size: 11px;
background-color: #ececec;
padding: 0 2px;
margin: 0 1px; }

.lsuj_navtree::before {
content: "Pages:";
font-size: 10px;
color: #6a6a6a;
margin-right: 3px; }

/* on cache le block des pages s'il n'y en a aucune */
.lsuj_navtree:empty {
display: none !important; }


/* - - - - CODES POUR LA PARTIE NB. DE RÉPONSES ET DE VUES - - - - */
.lsuj_replies {display: block !important;}
.lsuj_replies::after {
content: " réponses";
color: #848484; }

.lsuj_views {display: block !important;}
.lsuj_views::after {
content: " vues";
color: #848484; }

/* remplacer "0 réponses" par "Aucune réponse" + mise au singulier si qu'une seule réponse */
.lsuj_replies[number="0"]::before {
content: "Aucune réponse";
font-size: 11px;
color: #a7a7a7; }
.lsuj_replies[number="0"] {
font-size: 0; }

.lsuj_replies[number="1"]::after {
content: " réponse" !important; }
.lsuj_views[number="1"]::after {
content: " vue" !important; }



/* - - - - - - - - > > > > viewforum_body - - - - - - - - */

/* - - - - PAGINATION - - - - */
.lsuj_pagin {
font-size: 0;
display: block;
box-sizing: border-box;
padding: 0 0 15px 0;
text-align: center;
background-image: linear-gradient(90deg, transparent, rgba(30,30,30,.1), transparent);
color: #616161;
font-family: sans-serif;
text-transform: uppercase;
position: relative; }
.lsuj_pagin a {
font-size: 11px;
position: relative;
z-index: 2; }

.lsuj_pagin_bottom {
font-size: 0;
display: block;
box-sizing: border-box;
padding: 5px 0 10px 0;
text-align: center;
background-image: linear-gradient(90deg, transparent, rgba(30,30,30,.035), transparent);
color: #616161;
font-family: sans-serif;
text-transform: uppercase;
position: relative; }
.lsuj_pagin_bottom a {
font-size: 11px;
position: relative;
z-index: 2; }

/* effet de transition en fondu (couleurs à adapter selon le fond du forum) */
.lsuj_pagin::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
background-image: linear-gradient(0deg, #E9EBED, transparent); }

/* un margin pour les flèches du pagination */
.lsuj_pagin a:nth-child(3), .lsuj_pagin_bottom a:nth-child(3) {
margin-right: 5px;}
.lsuj_pagin a:last-child, .lsuj_pagin_bottom a:last-child {
margin-left: 5px;}


/* la mention "Aller à la page" */
.lsuj_pagin a:nth-child(2), .lsuj_pagin_bottom a:nth-child(2) {
margin-right: 5px;
color: #585858; }

/* - - - - BOUTON #TOP - - - - */
.lsuj_backtotop {
position: fixed;
right: .5%;
bottom: 4%;
background-color: white;
padding: 4px; }

/* - - - - NAVIGATION FORUM & BOUTON "PLUS !" - - - - */
.lsuj_top {
background-color: rgba(60,60,60,.1);
box-sizing: border-box;
padding: 1%; }

.lsuj_forumnav {
font-size: 10px;
display: inline-block;
width: 80%; }
.lsuj_forumnav a {
color: #4c4c4c; }

.lsuj_forumnav h1 {
display: inline-block;
padding: 2px 0;
margin: 0 1px; }

.lsuj_plus {
display: inline-block;
width: 20%;
text-align: right;
font-size: 12px;
vertical-align: text-bottom; }

/* indicateur du sous-forum actuel */
.lsuj_forumnav h1:last-child {
border-bottom: 1px solid #b5b5b5;
border-top: 1px solid #b5b5b5; }

/* titre du sous-forum */
.lsuj_sforum {
display: block;
box-sizing: border-box;
padding: 10px;
text-align: center;
font-size: 19px;
background-image: linear-gradient(90deg, transparent, rgba(30,30,30,.1), transparent);
margin-top: 10px;
color: #616161;
font-family: sans-serif;
text-transform: uppercase; }

/* - - - - BOUTON NOUVEAU SUJET/SOUS-FORUM VERROUILLÉ - - - - */

.lsuj_newpost a[auth-state="Poster un nouveau sujet"]::before {
content: "Poster un nouveau sujet";
position: absolute;
left: 0;
top: 18px;
width: 100%;
text-align: center;
color: #fff;
font-family: sans-serif;
font-size: 16px;
text-shadow: 1px 1px 1px rgba(10,10,10,.07); }
.lsuj_newpost a {
position: fixed;
bottom: 2%;
opacity: .65;
transition: all .4s ease;
right: 2%;
width: 200px;
height: 55px;
background-image: linear-gradient(55deg, #397fd0, #599dec, #397fd0);
border-width: 1px 2px;
border-style: solid;
border-color: #397fd0;
box-shadow: 0 0 3px rgba(40,40,40,.35); }

.lsuj_newpost a:hover {
transition: all .4s ease;
opacity: 1; }

/* si le sous-forum est verrouillé */
.lsuj_newpost a[auth-state="Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets."]::before {
content: "Sous-forum verrouillé";
position: absolute;
left: 0;
top: 18px;
width: 100%;
text-align: center;
color: #fff;
font-family: sans-serif;
font-size: 16px;
text-shadow: 1px 1px 1px rgba(10,10,10,.07); }
.lsuj_newpost a[auth-state="Ce forum est verrouillé, vous ne pouvez pas poster, ni répondre, ni éditer les sujets."] {
filter: grayscale(1); }

/* - - - - BLOCK DES OPTIONS (MARQUER COMME LUS, SURVEILLER) - - - - */
.lsuj_options {
padding: 15px 0 10px 0;
text-align: right; }

.lsuj_options a, .lsuj_moderators a {
font-size: 12px;
border-left: 1px solid #ccc;
padding: 0 5px;
border-right: 1px solid #ccc; }

.lsuj_watch a {
margin-left: -1px; }

/* - - - - BLOCK DES MODÉRATEURS - - - - */
.lsuj_moderators {
float: left;
margin-top: 15px; }

/* - - - - BLOCK "UTILISATEURS PARCOURANT ACTUELLEMENT CE FORUM" - - - - */
.lsuj_userlist {
background-color: #b0cadc;
box-sizing: border-box;
padding: 1%;
font-size: 13px;
margin: 10px 0 10px 0; }

/* - - - - BLOCK AFFICHANT LES PERMISSIONS DE L'UTILISATEUR - - - - */
.lsuj_auth {
color: #656565;
font-size: 12px;
text-align: center;
margin: 10px 0 20px 0;
border-bottom: 1px solid #00000015;
padding-bottom: 10px; }
.lsuj_auth a {
color: #2d2d2d;
border-bottom: 1px dotted #9c9c9c; }

/* on transforme les sauts de ligne 'br' entre chaque permission */
.lsuj_auth br {
content: "";
width: 1px;
height: 12px;
background-color: black;
display: inline-block;
vertical-align: middle;
margin: 0 5px;
opacity: .2;
position: relative;
top: -1px; }






/* - - - - MODIFICATIONS POUR CHAQUE TYPE DE SUJET - - - - */

/* Annonce */
.lsuj_type[type*="Annonce:"]::before {
content: "Annonce";
font-size: 11px;
font-family: Arial;
background-color: #57768c;
padding: 2px 5px 1px 5px;
margin: 0 3px 0 5px;
display: inline-block;
text-transform: uppercase;
color: white; }

/* Note */
.lsuj_type[type*="Annonce globale:"]::before {
content: "Annonce globale";
font-size: 11px;
font-family: Arial;
background-color: #2a80bd;
padding: 2px 5px 1px 5px;
margin: 0 3px 0 5px;
display: inline-block;
text-transform: uppercase;
color: white; }

/* Note */
.lsuj_type[type*="Note:"]::before {
content: "Note";
font-size: 11px;
font-family: Arial;
background-color: #7c94a5;
padding: 2px 5px 1px 5px;
margin: 0 3px 0 5px;
display: inline-block;
text-transform: uppercase;
color: white; }

/* - - - - PERSONNALISATION DE CHAQUE RECTANGLE DE STATUT (NV. MSG., RIEN, VERROUILLÉ) - - - - */

/* pour les sujets avec aucun nouv. message */
.lsuj_folder {
background-color: #eaeaea; }

.lsuj_folder[folder-state="Nouveaux messages"] {
background: linear-gradient(280deg, #3240b2, #0fd2a0);
background-size: 400% 400%;
animation: NvMsgSuj 4s ease infinite;
-webkit-animation: NvMsgSuj 4s ease infinite;
-moz-animation: NvMsgSuj 4s ease infinite; }

.lsuj_folder[folder-state="Ce sujet est verrouillé, vous ne pouvez pas éditer les messages ou faire de réponses."] {
background-color: #464646; }

/* pour les sujets verrouillés mais ayant un nouveau message:
>> changer le lien de l'image par celle correspondante à votre forum si vous l'avez changée */
.lsuj_folder[folder-state-alt="https://2img.net/i/fa/modernbb/topic_unread_locked.png"] {
background: linear-gradient(146deg, #464646, #205974);
background-size: 400% 400%;
animation: NvMsgSuj 4s ease infinite;
-webkit-animation: NvMsgSuj 4s ease infinite;
-moz-animation: NvMsgSuj 4s ease infinite; }

@-webkit-keyframes NvMsgSuj {
0% {background-position:87% 0%}
50% {background-position:14% 100%}
100% {background-position:87% 0%} }
@-moz-keyframes NvMsgSuj {
0% {background-position:87% 0%}
50% {background-position:14% 100%}
100% {background-position:87% 0%} }
@keyframes NvMsgSuj {
0% {background-position:87% 0%}
50% {background-position:14% 100%}
100% {background-position:87% 0%} }




/* - - - - GESTION DES MINI-IMAGES (.LSUJ_PRE_IMGS) - - - - */

/* déplacement du block pour aligner au titre - peut être changé au cas par cas */
.lsuj_pre_imgs {
   position: relative;
   top: 2px; }

/* on espace les mini-images avant le titre d'un sujet */
.lsuj_pre_imgs img {
   margin: 0 1px; }

/* on aligne ces mêmes images (le deuxième est fait via le lien) */
.lsuj_pre_imgs > img, .lsuj_pre_imgs a {
   vertical-align: top; }

/* on insert un margin-right au dernier élément pour décoller le tout du titre du sujet */
.lsuj_pre_imgs *:last-child {
   margin-right: 5px; }

/* on met l'image du lien 'Voir le message le plus récent' au même placement et à la même hauteur + largeur que l'image précédente
>> peut être changé selon les forums (dans ce code, par défaut, on se base sur les images de base sur FA) */
.lsuj_pre_imgs a {
   height: 11px;
   display: inline-block;
   width: 11px;
   box-sizing: border-box;
   padding-top: 3px; }

/* - - - - AUTRES CODES NÉCÉSSAIRES - - - - */

/* on met un 'display: inline-block' par défaut à toutes les div du code */
.lsuj_sujet div {
display: inline-block; }

/* on fait flotter à gauche les mini-images du sujet et le type du sujet pour que le titre aille à la ligne si trop long */
.lsuj_pre_imgs, .lsuj_type {
float: left; }

/* on recalibre les flèches imagées dans le pagination (peut dépendre des forums et nécessiter une modification */
.lsuj_pagin img, .lsuj_pagin_bottom img  {
transform: scale(0.7);
position: relative;
top: 3px; }

/* on cache bien le lien "Marquer tous les sujets comme lus" et son style si l'utilisateur n'est qu'un visiteur (non-enregistré)
(on évite l'apparition inutile des borders du 'a' vu que FA affiche quand même le 'a' même s'il y enlève le lien) */
.lsuj_options a[href=""] {
display: none !important; }

/* on met tous les titres des sujets au même placement horizontal, qu'ils soient ou non précédés des mini-images */
/* >> enlever cette ligne et le étoile-slash à la fin du code pour appliquer cette modification
.lsuj_pre_imgs {
   text-align: right;
   min-width: 33px;
   min-height: 1px; }
*/

/************************************************** PRESENTATION DU SUJET ******************************************/
/* BLOC TITRE SUJET */
#tlePOST {
margin:5px auto; padding:10px 0;
text-transform:uppercase; text-align:center; font-family:Arial;
background:black; /* MODIFIABLE */
}
/* TITRE SUJET */
#tlePOST h1 {
display:block; font-size:32px;
color:#94b5b5; /* MODIFIABLE */
}
/* NAVIGATION */
.navPOST {
display:block; margin:5px auto 0; width:98%;
padding:2px 0; font-size:10px;
background:#FFFFFF; color:#89adad; /* MODIFIABLE */
}
/* LIENS NAVIGATION */
.navPOST a {
color:#89adad; /* MODIFIABLE */
}
/* BLOC DATE & OUTILS DE MODERATION */
.datePOST {
margin-bottom:10px; padding:10px; font-size:11px;
background:#89adad; color:white; /* MODIFIABLE */
}
/* APPARENCE MESSAGE */
div.postbody {
max-width:730px; min-height:470px; padding:10px;
background:#E9E9E9; color:black; /* MODIFIABLE */
text-align:justify;
}
div.postbody img {
max-width:100%;
}
.signPOST br:nth-of-type(1) {
display:none;
}
/* PROFIL JOUEUR */
#boxPOST {
position:absolute; margin-left:10px; margin-top:5px; margin-right:-50px;
}
/* PSEUDONYME */
.namePOST {
position:absolute; z-index:3; margin-left:20px; margin-top:190px;
width:400px; padding:5px;
text-align:left; text-transform:uppercase; font-family:Arial; line-height:14px;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
}
.namePOST a {
display:inline-block; vertical-align:middle;
}
/* TEXTE RANG */
.rankPOST {
display:inline-block; vertical-align:middle; padding-left:5px;
text-transform:uppercase; text-align:center; font-size:11px;
color:black; /* MODIFIABLE */
}
/* BLOC AVATAR & INFORMATIONS JOUEUR */
.boxPOST {
padding:5px 0;
font-size:10px; font-family:Arial;
background:#E9E9E9; color:black;  /* MODIFIABLE */
}
/* BLOC AVATAR */
.avaPOST {
margin:0 5px; width:200px;
}
.avaPOST img {
width:200px;
}
/* BLOC IMAGES CONTACT JOUEUR */
.ktactPOST {
margin:5px auto;
width:200px; padding:5px 0; text-align:center;
background:grey; /* MODIFIABLE - COULEUR PAR DEFAUT */
}
.ktactPOST img {
margin:0 2px; max-height:20px;
filter:grayscale(1); -webkit-filter:grayscale(1);
}
/* INFORMATIONS JOUEUR */
.abtPOST {
margin:auto; width:200px;
}
/* INTITULES INFORMATIONS JOUEUR */
.abtPOST .label {
text-transform:uppercase; font-weight:bold; /* MODIFIABLE */
}
/* IMAGES INFORMATIONS JOUEUR */
.abtPOST img {
margin:auto; max-width:200px;
}
/* FEUILLE DE PERSONNAGE */
.rpgPOST {
margin:5px auto 0; width:200px;
}
.rpgPOST a:nth-of-type(1) {
display:none;
}
.rpgPOST br:nth-of-type(1) {
display:none;
}
.rpgPOST br:nth-of-type(2) {
display:none;
}
/* LOSANGE GROUPE */
.grpPOST {
position:absolute; margin-top:-25px; margin-left:-8px;
width:15px; height:15px;
background:grey; /* MODIFIABLE - COULEUR PAR DEFAUT */
transform:rotate(45deg); -webkit-transform:rotate(45deg);
}
/* TRIANGLE BAS PROFIL */
.triPOST {
width:0; height:0; border-style:solid; border-width:30px 105px 0 105px; border-color:transparent;
border-top-color:#E9E9E9; /* MODIFIABLE */
}

/**** QEEL ****/
body{background:white;}

.QEEL_v2_bloc {width:800px;height:390px;padding:5px;background-color:d0e8f5;margin:auto;}

/********* QEEL V2 GAUCHE **/
.QEEL_v2_gauche {height:380px;width:100px;padding:5px;float:left;}
.QEEL_v2_gauche_cadre {border:1px solid #fde1b1;height:80px;width:81px;margin:auto;margin-bottom:5px;padding:5px;}

/** images villes + hover etc.. **/
.QEEL_v2_gauche_image {border:1px solid grey;height:80px;width:80px;overflow:hidden;}
.QEEL_v2_gauche_image img {-webkit-filter: grayscale(100%); filter: grayscale(100%);transition:all 0.8s ease;}
.QEEL_v2_gauche_image img:hover {-webkit-filter: grayscale(0%); filter: grayscale(0%);transition:all 0.8s ease;}

/** QEEL V2 CENTRE **/

.QEEL_v2_centre {box-shadow: inset 0px 0px 5px 1px rgba(75,75,75,0.5); width:595px; height:380px;margin-left:120px;padding:5px;}
.QEEL_v2_top_connectes {background-color:#fde1b1;width:600px; height: 24px;margin-top:-5px;margin-left:-5px;padding-left:5px;color:#A0C3D6;padding-top:5px;font-family:Philosopher;font-size:13px;text-transform:lowercase;}

.QEEL_v2_centre_cadre_inscrit {border:1px solid #4b4b4b;height:200px;padding:4px;margin-top:7px;margin-left:5px;}
.QEEL_v2_centre_cadre_inscrit img {border:1px solid white;;height:200px;-webkit-filter: brightness(100%); /* Safari 6.0 - 9.0 */ filter: brightness(100%);transition:all 0.5s ease}
.QEEL_v2_centre_cadre_inscrit img:hover {-webkit-filter: brightness(130%); /* Safari 6.0 - 9.0 */ filter: brightness(130%);transition:all 0.5s ease}

.QEEL_v2_centre_bvn {border-bottom:1px solid rgba(75,75,75,0.5);width:100px;margin-left:-8px;padding-left:10px;margin-top:5px;font-family:Philosopher;font-size:15px;color: #4b4b4b}
.QEEL_v2_centre_nomcadre {border:1px solid rgba(240,111,111,0.6);margin-top:5px;padding:5px;margin-left:5px;}
.QEEL_v2_centre_nominscrit {background-color:#fde1b1;text-align:center;padding-top:3px;padding-bottom:3px;font-family:Philosopher;font-size:13px;text-transform:lowercase;}


.QEEL_v2_centre_bloc_mess_co {box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.2);margin-left:15px;}
.QEEL_v2_centre_bloc_messages {height:150px;width:350px;}
.QEEL_v2_centre_bloc_messages table {margin-left:55px;}
.QEEL_centre_messages_cadre {border:1px solid #fde1b1; padding:5px;}
.QEEL_v2_centre_messages {height:90px;width:90px;padding:5px;text-align:center;background-color:#fde1b1;}

qeelv2top {color:black;display:block;margin-top:22px;font-weight:bold;}
qeelv2bottom {font-style:italic;font-family:lobster two;color:white;text-shadow: 1px 1px 2px #000000, 0 0 0.2em black, 0 0 0.2em rgba(255,0,0,0.3);}
qeelv2bottom:hover {text-shadow: 1px 1px 2px lightblue, 0 0 0.2em black, 0 0 0.2em blue;}

.QEEL_v2_centre_connectes {border:2px solid #c2c2c2 ;font-family: 'Cormorant Garamond', serif;font-size:14px;color:white;height:130px;padding:5px;width:338px;text-align:justify;background-color:#fde1b1}

/********* cadre lieu à droite **/

.QEEL_v2_bloc_droite {height:190px;width:130px;padding:5px;padding-top:20px;}
.QEEL_v2_lieu_bloc {background-color:#A0C3D6;width:120px;padding:3px;text-align:center;height:25px;padding-top:9px;
font-family: 'Vollkorn SC', serif;letter-spacing:-2px;font-size:15px;transition:all 0.5s ease;border:3px solid rgba(75,75,75,0.;text-transform:lowercase;}
.QEEL_v2_lieu_bloc:hover {letter-spacing:3px;transition:all 0.8s ease;border:3px solid rgba(255,255,255,0.4);color:white;background-color:#4b4b4b}

.QEEL_v2_anniversaires {background-color:#fde1b1;height:35px;padding:5px;}
/**** FIN QEEL ****/


/************************************** PRESENTATION INTERFACE EDITION MESSAGE POUR RP + PROFIL JOUEUR ***********************************/
/* BLOC TITRE SUJET */
#tlePOST {
margin:5px auto; padding:10px 0;
text-transform:uppercase; text-align:center; font-family:Arial;
background:FFFFFF; /* MODIFIABLE */
}
/* TITRE SUJET */
#tlePOST h1 {
display:block; font-size:32px;
color:#e3e371; /* MODIFIABLE */
}
/* NAVIGATION */
.navPOST {
display:block; margin:5px auto 0; width:98%;
padding:2px 0; font-size:10px;
background:#FFFFFF; color:#94b5b5; /* MODIFIABLE */
}
/* LIENS NAVIGATION */
.navPOST a {
color:#94b5b5; /* MODIFIABLE */
}
/* BLOC DATE & OUTILS DE MODERATION */
.datePOST {
margin-bottom:10px; padding:10px; font-size:11px;
background:#89adad; color:white; /* MODIFIABLE */
}
/* APPARENCE MESSAGE */
div.postbody {
max-width:730px; min-height:470px; padding:10px;
background:#FFFFFF; color:black; /* MODIFIABLE */
text-align:justify;
}
div.postbody img {
max-width:100%;
}
.signPOST br:nth-of-type(1) {
display:none;
}
/* PROFIL JOUEUR */
#boxPOST {
position:absolute; margin-left:10px; margin-top:5px; margin-right:-50px;
}
/* PSEUDONYME */
.namePOST {
position:absolute; z-index:3; margin-left:20px; margin-top:190px;
width:400px; padding:5px;
text-align:left; text-transform:uppercase; font-family:Time new roman; line-height:14px;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
}
.namePOST a {
display:inline-block; vertical-align:middle;
}
/* TEXTE RANG */
.rankPOST {
display:inline-block; vertical-align:middle; padding-left:5px;
text-transform:uppercase; text-align:center; font-size:11px;
color:#6ca6a6; /* MODIFIABLE */
}
/* BLOC AVATAR & INFORMATIONS JOUEUR */
.boxPOST {
padding:5px 0;
font-size:10px; font-family:Arial;
background-image:url('https://zupimages.net/up/21/11/0azn.png'); border:1px solid #FBE677; color:black;  /* MODIFIABLE */
}
/* BLOC AVATAR */
.avaPOST {
margin:0 5px; width:200px;
}
.avaPOST img {
width:200px;
}
/* BLOC IMAGES CONTACT JOUEUR */
.ktactPOST {
margin:5px auto;
width:200px; padding:5px 0; text-align:center;
background:#ebf5f5; /* MODIFIABLE - COULEUR PAR DEFAUT */
}
.ktactPOST img {
margin:0 2px; max-height:20px;
filter:grayscale(1); -webkit-filter:grayscale(1);
}
/* INFORMATIONS JOUEUR */
.abtPOST {
margin:auto; width:200px;
}
/* INTITULES INFORMATIONS JOUEUR */
.abtPOST .label {
text-transform:uppercase; font-weight:bold; /* MODIFIABLE */
}
/* IMAGES INFORMATIONS JOUEUR */
.abtPOST img {
margin:auto; max-width:200px;
}
/* FEUILLE DE PERSONNAGE */
.rpgPOST {
margin:5px auto 0; width:200px;
}
.rpgPOST a:nth-of-type(1) {
display:none;
}
.rpgPOST br:nth-of-type(1) {
display:none;
}
.rpgPOST br:nth-of-type(2) {
display:none;
}
/* LOSANGE GROUPE */
.grpPOST {
position:absolute; margin-top:-25px; margin-left:-8px;
width:15px; height:15px;
background:grey; /* MODIFIABLE - COULEUR PAR DEFAUT */
transform:rotate(45deg); -webkit-transform:rotate(45deg);
}
/* TRIANGLE BAS PROFIL */
.triPOST {
width:0; height:0; border-style:solid; border-width:30px 105px 0 105px; border-color:transparent;
border-top-color:#FFFFFF; ; border:1px solid #88bdb8; /* MODIFIABLE */
}


/******************************************** FOND LISTE DES MEMBRES *******************************************/
.bgLMBER {
background:rgba(255,255,255,0.7); /* MODIFIABLE */
line-height:16px;
}
/* TITRE LISTE DES MEMBRES */
.tleLMBER {
margin-bottom:25px; width:auto; padding:20px 0;
font-family:Arial; text-transform:uppercase; font-size:32px; text-align:center; line-height:normal;
background:#191919; color:white; /* MODIFIABLE */
}
#LMBER {
width:690px; margin:auto;
}
/* BLOC MEMBRE */
.MBER {
float:left; margin:5px;
width:220px; height:150px; font-family:Arial;
background:rgba(0,0,0,0.; /* MODIFIABLE */
}
/* BLOC PSEUDONYME */
.nameLMBER {
margin-bottom:5px; width:210px; height:15px; padding:5px 10px 5px 0; overflow:hidden;
text-align:right; text-transform:uppercase; font-size:10px;
background:grey; color:white; /* MODIFIABLE - COULEURS PAR DEFAUT */
}
/* PSEUDONYME */
.nameLMBER strong {
color:white; /* MODIFIABLE */
}
/* BLOC INFORMATIONS */
.abtLMBER {
display:inline-block; vertical-align:top;
width:105px;
}
/* INFORMATIONS */
.abtLMBER div {
margin-bottom:5px;
height:15px; padding:5px 0; overflow:hidden; font-size:10px;
background:lightgrey; color:black; /* MODIFIABLE */
}
.abtLMBER div:nth-of-type(3) {
font-size:9px; text-transform:uppercase;
}
.abtLMBER div:nth-of-type(4) {
font-size:9px; line-height:16px;
}
/* AVATAR / IMAGES MP & WWW */
.imgLMBER {
display:inline-block; vertical-align:top; margin-left:5px;
width:100px; height:115px; overflow:hidden;
}
/* AVATAR */
.avaLMBER {
position:relative; z-index:3; margin-top:-115px;
width:100px; height:115px; overflow:hidden;
transition:all 0.85s linear; -webkit-transition:all 0.85s linear;
}
.avaLMBER img {
width:100px;
}
.imgLMBER:hover .avaLMBER {
transform:translateX(100px); -webkit-transform:translateX(100px);
}
/* IMAGES MP & WWW */
.btnLMBER {
width:100px; height:115px; overflow:hidden;
text-align:center; line-height:10px;
background:rgba(0,0,0,0.6); /* MODIFIABLE */
transform:translateX(-100px); -webkit-transform:translateX(-100px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
.btnLMBER img {
max-width:80px;
}
.imgLMBER:hover .btnLMBER {
transform:translateX(0px); -webkit-transform:translateX(0px);
}
/* NAVIGATION LISTE DES MEMBRES */
.pageLMBER {
margin:auto; width:680px;
color:black; /* MODIFIABLE */
text-align:left; text-transform:uppercase; font-size:10px; font-family:Arial;
}
.pageLMBER a {
color:black; /* MODIFIABLE */
font-family:Arial;
}
/* FORMULAIRE RECHERCHE LISTE DES MEMBRES */
.btmLMBER {
margin-top:25px; padding:15px 0;
background:#212121; /* MODIFIABLE */
text-align:center;
}
/* INTITULES FORMULAIRE RECHERCHE LISTE DES MEMBRES */
.formLMBER span {
display:inline-block; vertical-align:bottom; margin-top:1px;
height:17px; padding:2px 5px 0;
background:lightgrey; color:black; /* MODIFIABLE */
text-transform:uppercase; font-size:10px; text-align:center; font-family:Arial;
}
.formLMBER input, select {
border:none !important;
height:19px; padding:0;
text-transform:uppercase; font-size:10px; font-family:Arial;
}
/* BOUTON OK LISTE DES MEMBRES */
.formLMBER .liteoption {
padding:0 5px 0 2px;
background:lightgrey; color:black; /* MODIFIABLE */
text-transform:uppercase; font-weight:bold;
}

/* FICHE ADMINISTRATION */
.ficheAdm {background: #FFFFFF ;width:450px; height:auto;text-align:justify;padding:10px;font-size:11px;line-height:12px;border-radius: 5px;}
.entete {text-align:center;font-family: 'Nixie One', cursive;text-transform:lowercase;width:450px;height:50px;
background-image: url('https://zupimages.net/up/21/11/jr7c.png') !important ;color:#7F924B;font-size:11px;text-shadow: 0 0 10px #fff, 0 0 10px #fff;}
.titreadm {font-family: 'Reem kufi', cursive;color:#9fbdbd; font-size:28px;  text-align:center;padding-top:20px;}
.entetebas {text-align:center;font-family: 'Mulish', sans-serif;text-transform:lowercase;width:450px;height:20px;
background:#9fbdbd;color:#FAF7F7;font-size:10px; line-height:20px;text-shadow: 0 0 10px #fff, 0 0 10px #fff; letter-spacing:2px;}
.imgAdm{
position:center;width:160px;
}

/* FICHE VALIDATION */
.valid {text-align:justify;background-color:#fffdf5;width:350px; border: 1px solid #DFE5D2;padding:11px; font-family: 'Mulish', sans-serif;line-height:12px;}
.titreval {text-shadow: 0 0 3px #fff, 0 0 3px #fff;font-family: 'Remm Kufi', cursive;color:#9fbdbd; font-size:18px;  text-align:center;padding-bottom:2px;font-weight:bold;}
.partie1 {text-align:justify; background-color:#ffffff;width:340px; height:110px; border: 1px solid #DFE5D2;padding:5px;overflow:auto;font-family: 'Mulish', sans-serif;}
.partie2  {text-align:justify;background-color:#ffffff;width:340px;overflow:auto;height:110px;padding:5px;border: 1px solid #DFE5D2;}
.imgval{
position:center;width:300px;
}
.entetebasval {text-align:center;font-family: 'Mulish', sans-serif;text-transform:lowercase;width:350px;height:20px;
background:#9fbdbd;color:#FAF7F7;font-size:10px; line-height:20px;text-shadow: 0 0 10px #fff, 0 0 10px #fff; letter-spacing:2px;}


/* --------------------------------- PA --------------------------------- */


.paMM{
 width:400px;
}

.paMM span{
 width:400px;
 height:15px;
 background:var(--bleu);
 border:2px solid var(--grisBlanc);
 padding:70px;
 text-align:center;
 color:var(--blanc);
 margin-bottom:5px;
 text-transform:uppercase;
 letter-spacing:1.5px;
 font-size:11px;
}
.paMM img{
 object-fit:cover;
 width:100px;
 height:100px;
 margin:2px;
}

div {
 text-align: center;
}

/* Fond de la PA */
.fond_PA {
 padding:10px;
 background-color:#dee7ec ;
 width:850px;
 position:relative;
}

/* Contexte */
.contexte_PA {
 margin-right:10px;
 background-color:#dee7ec ;
 width:370px;
 height:115px;
 padding:15px;
 color:#ffffff ;
 text-align:justify;
 font-size:12px;
 overflow:auto;
}

/* Liens */
.nema {
 height:40px;
 width:150px;
 display:inline-block;
}

.nema a {
 display:inline-block;
 background-color:#fde1b1;
 color:#000000;
 font-family:'Dosis',sans-serif;
 font-size:15px;
 height:20px;
 text-align:center;
 width:145px;
 transition:all 1s ease;
 -webkit-transition:all 1s ease;
}

.nema a:hover {
 background-color:#eed2a3 ;
 color:#000000;
}

.nema_2 {
 height:22px;
 width:250px;
 display:block;
 margin-bottom:5px;
 background-color:#fde1b1;
 color:#000000 !important;
 font-family:'Dosis',sans-serif;
 font-size:16px;
 text-align:center;
 transition:all 1s ease;
 -webkit-transition:all 1s ease;
}

.nema_2:hover {
 background-color:#eed2a3 ;
 color:#fff;
}

/*Titre Staff*/
.nema_title {
 display:inline-block;
 color:#000000;
 font-family:'Dosis',sans-serif;
 font-size:25px;
 height:30px;
 text-align:center;
 margin-bottom:5px;
 margin-top:10px;
}

/* Effets staff + predef */
.stafef {
 width:100px;
 height:100px;
 background:#F9BFB3;
 opacity:0;
 transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
}

.stafef:hover {
 opacity:1;
 -webkit-transform:rotate(-360deg);
 transform:rotate(-360deg);
}

.stafefico {
 width:100px;
 height:100px;
 display:inherit;
 background:#F9BFB3;
 opacity:0;
 transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
}

.stafefico:hover {
 opacity:1;
 transform:rotate(-360deg);
 -webkit-transform:rotate(-360deg);
}

.predef {
 width:60px;
 height:100px;
 display:inherit;
 background:#ACCDB5 ;
 opacity:0;
 transition:all 1s ease-in-out;
 -webkit-transition:all 1s ease-in-out;
}

.predef:hover {
 opacity:1;
 transform:rotate(-360deg);
 -webkit-transform:rotate(-360deg);
}

/* --------------------------------- FIN PA --------------------------------- */

.fond_liste_sujets {
   background: #e8e8e8;
   padding: 5px;
   margin-bottom: 15px;
   box-shadow: 0 1px 6px rgba(0,0,0,0.15);
 display:flex;
 flex-wrap:wrap;
}
.iconnn {
   width: 92px;
   height: 85px;
}
.firsty_blok {
   width: 480px;
   padding-left: 20px;
}
.titretopic {
   width: 380px;
   border-bottom: #cdb65c solid 1px;
   padding-top: 20px;
}
.titretopic a {
   font: 13px calibri;
   color: black;
   text-transform: uppercase;
}
.againimg {
   position: absolute;
   margin: -18px 0px 0px 380px;
}
.descriptionsujet {
   text-align: justify;
   padding-top: 4px;
   font: 10px calibri;
   color: #565656;
   width: 330px;
   display: inline-block;
}
.entoureimg {
   margin: 4px 0px 0px 10px;
   position: absolute;
   vertical-align: top;
   height: 24px;
   display: inline-block;
}
.imgmess {
   width: 60px;
   height: 24px;
}
.secondblok {
   width: 160px;
   font: 10px calibri;
   text-transform: uppercase;
   padding: 20px 00px 0px 20px;
}
.secondblok span {
   color: #cdb65c;
}
.thirdblok {
   width: 180px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}
.statssujets {
   text-align: center;
   font: 13px calibri;
   text-transform: uppercase;
   padding: 20px 20px 0px 0px;
   line-height: 22px;
}
.statssujets span {
   color: #cdb65c;
   text-shadow: 1px 1px 0px #888888;
}
.statssujets em {
   border-top: solid 1px #cdb65c;
}
.modomisenepage {
   width: 100%;
   background-image: url(https://imgur.com/T12cuzT.png);
   background-position: top center;
   background-size: 100% auto;
   background-repeat: no-repeat;
   padding: 5px;
   color: #cdb65c;
   text-transform: uppercase;
   font: 11px calibri;
   letter-spacing: 2px;
}
.perishmisenepage {
   width: 100%;
   background-image: url(https://imgur.com/T12cuzT.png);
   background-position: top center;
   background-size: 100% auto;
   background-repeat: no-repeat;
   padding: 5px;
   color: #cdb65c;
   text-transform: uppercase;
   text-align: center;
   font: 11px calibri;
   letter-spacing: 2px;
}
.sousnavsujets br {
 display:none;
}
.sousnavsujets {
   width: 100%;
   background-image: url(https://imgur.com/T12cuzT.png);
   background-position: top center;
   background-size: 100% auto;
   background-repeat: no-repeat;
   padding: 5px;
   text-align: center;
   display: inline-flex;
   justify-content: center;
   color: #cdb65c;
}
.sousnavsujets a {
   color: #cdb65c;
   padding-top: 3px;
   text-shadow: 1px 1px 2px black;
   text-transform: uppercase;
   font: 12px calibri;
   font-weight: bold;
}
.zut {
   padding-top: 3px;
}
]


/*                F I C H E      D E      P R É S E N T A T I O N
                               par bird box.                                        */


.bird {
     background-color : #FCFCFC ; /* couleur du fond */
     border-top : 4px solid #9fbdbd ; /* couleur du bord haut */
     border-left : 1px solid #9fbdbd ; /* couleur du bord gauche */
     border-right : 1px solid #9fbdbd ; /* couleur du bord droit */
     border-bottom : 4px solid #9fbdbd ; /* couleur du bord haut */
     width : 460px ;            
     font-size : 10px ;  
     text-align : justify ;
     border-radius : 10px ;
     padding : 5px;                                            }

.aigle {
     background-color : #F9BFB3 ; /* couleur du fond prénom nom */
     width : 203px ;            
     font-size : 10px ;        
     color : #454545 ; /* couleur du texte */
     text-align : center ;      
     padding : 2px ;
     margin-left:-80px;
     -ms-transform: rotate(-90deg) ;
     -webkit-transform: rotate(-90deg) ;
     transform: rotate(-90deg) ;
     transition : 1s ;                                          }

.aigle:hover {
     transition : 1s ;
     -ms-transform: rotate(0deg) ;
     -webkit-transform: rotate(0deg) ;
     transform: rotate(0deg) ;                                  }

royal {
     font-family : times new roman ;
     font-size : 10px ;
     text-transform : uppercase ;                              }

.eider {
     border : 3px solid #FADBD8 ; /* couleur bordure avatar */
     height : 200px ;                                          }

.faucon {
     background-color : #FAFAFA ; /* couleur fond informations */
     color : #454545 ; /* couleur du texte */
     width : 250px ;
     border-radius : 5px ;
     margin-left:-80px ;
     padding : 5px ;
     text-align : justify ;
     line-height : 1.5em ;                                      }

pie {
     font-family :  arial ;
     font-weight : bold ;
     color : #F9BFB3 ; /* couleur du texte */
     font-size : 10px ;
     text-transform : uppercase ;                              }

.espace {
     margin-right:5px ;                                        }

.roselin {
     overflow: auto ;
     height: 196px ;                                            }

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

.roselin::-webkit-scrollbar-track {
     background-color: #FAFAFA ; /* couleur fond scrollbar */  }

.roselin::-webkit-scrollbar-thumb {
     background-color: #ACCDB5  ; /* couleur scrollbar active */ }


.mouette {
     background-color : #F9BFB3 ; /* couleur du fond "ainsi va la vie" */
     width : 185px ;            
     font-size : 10px ;        
     color : #454545 ; /* couleur du texte */
     text-align : center ;      
     padding : 2px ;
     margin-left:-80px;
     -ms-transform: rotate(90deg) ;
     -webkit-transform: rotate(90deg) ;
     transform: rotate(90deg) ;
     transition : 1s ;                                          }

.mouette:hover {
     transition : 1s ;
     -ms-transform: rotate(0deg) ;
     -webkit-transform: rotate(0deg) ;
     transform: rotate(0deg) ;                                  }

.hirondelle {
     background-color : #FAFAFA ; /* couleur fond anecdotes */
     color : #454545 ; /* couleur du texte */
     width : 395px ;
     border-radius : 5px ;
     margin-left:5px ;
     padding : 5px ;
     text-align : justify ;
     line-height : 1.5em ;                                      }

.alouette {
     background-color : #FCFCFC ; /* couleur du fond */
     border-top : 4px solid #ACCDB5  ; /* couleur du bord haut */
     border-left : 1px solid #ACCDB5  ; /* couleur du bord gauche */
     border-right : 1px solid #ACCDB5  ; /* couleur du bord droit */
     border-bottom : 4px solid #ACCDB5  ; /* couleur du bord haut */
     width : 300px ;
     font-size : 10px ;  
     text-align : justify ;
     border-radius : 30px ;
     margin-left : 200px ;
     margin-top : -50px ;
     padding : 5px;                                            }

.monticole {
     background-color : #FAFAFA ; /* couleur fond hors-jeu */
     color : #454545 ; /* couleur du texte */
     border-radius : 30px ;
     margin-left:5px ;
     padding : 5px ;
     text-align : justify ;
     line-height : 1.5em ;                                      }

.albatros {
     background-color : #E9F7EF ; /* couleur du fond "ainsi va la vie" */
     width : 450px ;            
     font-size : 10px ;        
     color : #454545 ; /* couleur du texte */
     text-align : center ;      
     padding : 2px ;
     margin-left:-80px ;
     -ms-transform: rotate(90deg) ;
     -webkit-transform: rotate(90deg) ;
     transform: rotate(90deg) ;
     transition : 1s ;                                          }

.albatros:hover {
     transition : 1s ;
     -ms-transform: rotate(0deg) ;
     -webkit-transform: rotate(0deg) ;
     transform: rotate(0deg) ;                                  }

.fauvette {
     background-color : #FAFAFA ; /* couleur fond informations */
     color : #454545 ; /* couleur du texte */
     width : 395px ;
     border-radius : 5px ;
     margin-left:0px ;
     margin-right : -125px ;
     padding : 5px ;
     text-align : justify ;
     line-height : 1.5em ;                                      }

.grisette {
     overflow: auto ;
     height: 443px ;                                            }

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

.grisette::-webkit-scrollbar-track {
     background-color: #FAFAFA ; /* couleur fond scrollbar */  }

.grisette::-webkit-scrollbar-thumb {
     background-color: #FADBD8 ; /* couleur scrollbar active */ }

.credits {
     font-family : arial ;
     margin-left : 60px ;
     margin-bottom : 10px ;
     margin-top : 10px ;
     font-size: 8px ;
     letter-spacing : 1px ;
     color : #E5E8E8 ; /* couleur du crédit */                  }


/*                F I N      F I C H E      D E      P R É S E N T A T I O N
                                     par bird box.                                        */                                       */

/*      FICHE DE SCENARIO*/

:root{
  --bordure:cd8c96; /*gris*/
 --gris:#fafafa; /*gris*/
 --color1:#ACCDB5
; /*violet*/
 --color2:#FDE872; /*rose*/
}

.fondFicheU{
 font-family: 'times new roman', serif;
 width:550px;
 background:var(--fond);
 border-radius:5px;
 display:flex;
 justify-content:space-between;
 box-sizing: border-box;
 flex-wrap:wrap;
 padding:5px;
 text-align:justify;
 position:relative;
 z-index:2;
 margin:0 auto;
}

.fondFicheU b{
 color:var(--color1);
}

.fondFicheU i{
 color:var(--color2);
}


.enTeteU{
 font-family: 'Reem kufi', cursive;
 text-align:center;
 width:90%;
 height:50px;
 padding:10px;
 background:linear-gradient(45deg,var(--color1),var(--color2));
 border:3px double var(--bordure);
 border-radius:5px;
 text-shadow: 2px 2px rgba(0, 0, 0, 0.1);
 font-size:25px;
 line-height:35px;
 color:var(--gris);
 z-index:2;
}

.enTeteU span{
 font-family: 'Cormorant Upright', serif;
 font-size:12px;
 color:black;
 display:block;
 border-top:1px solid var(--fond);
 line-height:15px;
 color:var(--bordure);
}

.wrapColumn{
 display: flex;
 flex-direction: column;
 justify-content:space-between;
 box-sizing: border-box;
 align-items: center;
}

titreFicheU{
 background: linear-gradient(45deg,var(--color1), var(--color2));
 border: 4px double var(--bordure);
 border-radius: 5px;
 font-size:15px;
 letter-spacing:2px;
 display:block;
 text-align:center;
 padding:3px;
 margin-bottom:7px;
}

.imagePersoU{
 border: 2px solid var(--gris);
 border-radius:10px;
 height: 280px;
 width: 400px;
 object-fit:cover;
 margin:15px;
 z-index:2;
}

.identiteU{
 background:var(--gris);
 width:375px;
 height:100px;
 border-radius:10px;
 margin-top:15px;
 padding:5px;
 font-size:11px;
 border:1px solid var(--bordure);
 z-index:2;
}

.identiteU p{
 height:290px;
 overflow:auto;
}

.histoireU{
 background:var(--gris);
 width:70%;
 min-height:100px;
 border-radius:10px;
 margin:15px;
 margin-right:-2px;
 padding:15px;
 font-size:11px;
 border:1px solid var(--bordure);
 z-index:2;
}
.scroller {
 width: 400px;
 height: 500px;
 overflow-y: scroll;
 scrollbar-color: rebeccapurple green;
 scrollbar-width: thin;
}
.avatarU{
 border: 0px solid var(--gris);
 border-radius: 3px;
 height: 145px;
 padding: 4px;
 width: 285px;
 object-fit:cover;
 z-index:2;
 margin-left:30px;
}

.presentationJoueurU{
 background:var(--gris);
 padding:2px;
 width:350px;
 height:100px;
 border-radius:10px;
 font-size:12px;
 border-bottom:1px solid var(--bordure);
 margin-right:0px;
}

.presentationJoueurU p{
 height:80px;
 overflow:auto;
}

.gifU{
 border: 0px solid var(--gris);
 border-radius: 3px;
 height: 145px;
 padding: 10px;
 width: 285px;
 object-fit:cover;
 z-index:2;
 margin-left:30px;
}

.presentationJoueurU{
 background:var(--gris);
 padding:2px;
 width:350px;
 height:100px;
 border-radius:10px;
 font-size:12px;
 border-bottom:1px solid var(--bordure);
 margin-right:0px;
}

.presentationJoueurU p{
 height:80px;
 overflow:auto;
}
.credit {
 font-size: 6px;
 text-transform: uppercase;
 opacity: 0.3;
 text-align: center;
}

/* FIN SCENARIO*/

positionnement barre de navigation + fusion avec les notifications

Probleme de notifications dans la barre de nav modernBB

Spoiler:

$(function(){

 function majNotification(){
   // On récupére le contenu des notifications de la toolbar
   var contentNotif = $('#fa_notifications')[0].outerHTML;
   contentNotif += $('#fa_notifications + #notif_list')[0].outerHTML;

   if(firstTime){
     // Si on arrive sur la page la première fois,
     // on ajoute une classe sur le li qui contient le lien des notifs
     // Et on remplace le contenu par celui récupéré plus haut
     $('.navbar.navlinks').find('a.mainmenu[href="/profile?mode=editprofile&page_profil=notifications"]').parent('li').addClass('link-notifs').html(contentNotif);

     // On indique qu'on a déjà vérifié la toolbar une fois
     firstTime = false;
   }else{
     // Si on a déjà vérifié la toolbar une fois
     // dans ce cas, on se contente de mettre les notifs à jour
     $('.navbar.navlinks').find('.link-notifs').html(contentNotif);
   }

 }

 // Au chargement de la page, on indique qu'on n'a pas encore vérifié la toolbar
 var firstTime = true;

 // Au chargement de la page, on attend 1 seconde (1500 ms), on appelle notre fonction
 setTimeout(function(){
   majNotification();
 }, 1000);
 // Puis, toutes les 30 secondes (30000 ms) on appelle à nouveau notre fonction
 setInterval(function(){
   majNotification();
 }, 30000);

 $('body')
   // Au clic sur le lien des notifications dans la barre de navigation
   // On lui ajoute une classe pour déplier la liste des notifs
   .on('click', '.navbar .link-notifs #fa_notifications', function(evt){
     evt.preventDefault();
     $(this).parent().toggleClass('notification');
   });

});

Spoiler:

body{
margin-top:0 !important;
}

.headerbar{
 overflow: inherit;
}

.is-sticky#headerbar-top.w-toolbar {
   top: 0px !important;
}
#fa_toolbar,
#fa_toolbar_hidden{
 display:none;
}

.navbar > li{
 position: relative;
}

.navbar #fa_notifications {
   color: #fff;
   cursor: pointer;
   line-height: 30px;
   padding: 0 5px
}

.navbar #fa_notifications.unread{
 color: red;
}

.navbar #fa_notifications:hover{
 color: #000;
}

.navbar #notif_list{
 background-color: #fdfdfd;
   border: none;
   border-radius: 5px;
   box-shadow: 0 0 9px rgba(0,0,0,0.3), 0 0 1px 1px rgba(0,0,0,0.2);
   color: #333;
   display: none;
   font-size: 1.3rem;
   list-style-type: none;
   margin: 0;
   padding: 10px;
   position: absolute;
   text-align: left;
   top: 42px;
   width: 200px;
   z-index: 999;
}

.navbar #notif_list li{
 margin: 4px 0;
 opacity: .5!important;
}

.navbar .notification #notif_list {
   display: block;
}

.navbar #notif_list .content a{
 color: #000;
 font-weight: bold;
 padding: 0;
}

.navbar #notif_list .see_all a{
 background: #333;
 border: 1px solid #333;
 color: #fdfdfd;
}

.navbar #notif_list .see_all a:hover{
 background: #fdfdfd;
 color: #333;
}

.navbar #notif_list li.see_all{
   opacity: 1!important;
}

.navbar #notif_list li.see_all,
.navbar #notif_list li.unread {
   opacity: 1!important;
}

Dissocier les notifications de la toolbar

Don Vito Corleone a écrit:Pas de soucis je vais vous donner la solution(Gizmo m'en veux pas)

Il faudrait par contre utiliser du javascript et du css...
A mettre dans la gestion des codes javascript sur toutes les pages:

Code:

$(function(){ $(function(){

          $('a#fa_notifications').insertBefore('#page-body'); // Choisir où placer le lien Notifications
          $('body').removeAttr('style');

}); });

Et à mettre dans la feuille de style css de votre forum:

Code:

#notif_list { /* Menu déroulant des notifications */
    top: 250px;
    visibility: visible !important;
}
#fa_toolbar {
visibility: hidden !important;
}
#fa_left a {
pointer-events: none !important;
opacity: 0 !important;
}
#fa_notifications.unread #notif_unread {
    display: inline !important;
}
#fa_notifications #notif_unread {
    display: none;
}

Si vous avez quelques notions ça va rouler...Suffit de choisir l'emplacement dans le code javascript où vous voulez que le lien "Notifications" s'affiche et dans le code css la partie pour le menu déroulant est : #notif_list
J'ai mis des commentaires on sait jamais si ça peut aider.
edit : j'ai rien dit (ai supprimé la portion de js)

Code:

 $('a#fa_notifications').insertBefore('#page-body');

Dissocier les notifications de la toolbar

Code:

$(function(){ $(function(){

          $('a#fa_notifications').insertBefore('#page-body'); // Choisir où placer le lien Notifications
          $('body').removeAttr('style');

}); });

Code:

#notif_list { /* Menu déroulant des notifications */
    top: 250px;
    visibility: visible !important;
}
#fa_toolbar {
visibility: hidden !important;
}
#fa_left a {
pointer-events: none !important;
opacity: 0 !important;
}
#fa_notifications.unread #notif_unread {
    display: inline !important;
}
#fa_notifications #notif_unread {
    display: none;
}

Personnaliser entièrement la toolbar via CSS

L’astuce qui suit vous permettra de connaître les différents identifiants CSS utilisés sur la toolbar de votre forum Forumactif. Vous pourrez ainsi personnaliser l’apparence de cette barre et adapter son style au reste de votre forum. Un libre service est également disponible en fin de tutoriel !  Si vous débutez dans la personnalisation en CSS, il est fortement recommandé de vous fier au tutoriel qui suit : Le CSS : Comment ça marche ? afin de pouvoir manipuler correctement les diverses propriétés du langage. L’ensemble des codes sont à insérer dans : Panneau d'administration  Affichage  Images et Couleurs - Couleurs :: Feuille de style CSS Les éléments CSS de la Toolbar div#fatoolbar Barre complète div#fa_search / div#fa_textarea #fa_magnifier div#fa_share span#fa_share_text a#fa_fb a#fa_twitter a#fa_mail a#fa_rss div#fa_right a#fa_welcome a#fa_notifications span#notif_unread a#fa_hide a#fa_show ul#fa_menulist #fa_usermenu #fa_ranktitle ul#notif_list li.see_all li.unread #notif_list li .contentText #notif_list li a.delete div.fa_notification div.fa_notification .content Différentes astuces en termes de personalisation Supprimer des éléments Supprimer la barre de recherche Code: div#fa_search {display:none!important;} Supprimer les boutons de partage Code: span#fa_share {display:none!important;} Supprimer le lien "Bienvenue [X]" Code: a#fa_welcome {display:none!important;} Supprimer la flèche "Cacher la toolbar" Code: a#fa_hide {display: none!important;} Modifier des éléments Mettre une image de fond Code: #fa_toolbar, #fa_toolbar_hidden {background-image: url('http://url_de_mon_image');} Modifier les boutons de partage - Modifier le bouton "Facebook" : Code: a#fa_fb { background:url('adresse_de_votre_image')no-repeat!important; } - Modifier le bouton "Twitter" : Code: a#fa_twitter { background:url('adresse_de_votre_image')no-repeat!important; } - Modifier le bouton "Mail" : Code: a#fa_mail { background:url('adresse_de_votre_image')no-repeat!important; } - Modifier le bouton "Flux RSS" : Code: a#fa_rss { background:url('adresse_de_votre_image')no-repeat!important; } Remplacez adresse_de_votre_image par l'adresse de votre image. Libre service Nous vous proposons quelques thèmes afin d'agrémenter votre toolbar. Il suffit de copier/coller le code correspondant au thème de votre choix : Panneau d'administration  Affichage  Images et Couleurs - Couleurs :: Feuille de style CSS Thème 1 Code: div#fa_toolbar {     background-color: #24384c;  /* Couleur de fond */     border-radius: 0 0 50px 50px;  /* Arrondis les bords de la toolbar */     box-shadow: 0 0 5px #000000;  /* Affiche une ombre */     margin: auto;  /* Centre la toolbar */     width: 98%;  /* Modifie la longueur de la toolbar */ }   div#fa_toolbar div, div#fa_toolbar span {     margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */ } Thème 2 Code: div#fa_toolbar {     background-color: #657488;  /* Couleur de fond */     border: 2px solid white;  /* Ajoute une bordure de 2px de couleur blanche */     border-radius: 50px;  /* Arrondis les bords de la toolbar */     margin: auto;  /* Centre la toolbar */     position: relative;  /* Permet de décaler la toolbar */     top: 10px;  /* Décale la toolbar du haut */     width: 98%;  /* Modifie la longueur de la toolbar */ }   a#fa_hide {     display: none!important;  /* Supprime la flèche "Cacher la toolbar" : Conseillé de le laisser ! */ }   div#fa_toolbar div, div#fa_toolbar span {     margin: 0 15px;  /* Repositionne correctement le contenu de la toolbar */ } Thème 3 Code: #fa_toolbar {     background-color: transparent !important;  /* Rend transparent le fond principal */ } #fa_right {     background-color: #000000;  /* Couleur de fond */     border-radius: 0 0 40px 40px;  /* Arrondis les bords */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */     position: relative;  /* Permet de décaler la toolbar */     right: 20px;  /* Décale la toolbar de la droite */ }   #fa_left {     background-color: #000000;  /* Couleur de fond */     border-radius: 0 0 0 40px;  /* Arrondis les bords */     position: relative;  /* Permet de décaler la toolbar */     left: 20px;  /* Décale la toolbar de la gauche */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_search {     background-color: #000000;  /* Couleur de fond */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_share {     background-color: #000000;  /* Couleur de fond */     border-radius: 0 0 40px;  /* Arrondis les bords */     position: relative;  /* Permet de décaler la toolbar */     left: -20px;  /* Décale la toolbar de la gauche */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ } Thème 4 Code: #fa_toolbar {     background-color: transparent !important;  /* Rend transparent le fond principal */ }   #fa_right {     background-color: #b3b3b3;  /* Couleur de fond */     border-radius: 0 0 0 40px;  /* Arrondis les angles */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_left {     background-color: #b3b3b3;  /* Couleur de fond */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */ }   #fa_search {     background-color: #b3b3b3;  /* Couleur de fond */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */     position: relative;  /* Permet de décaler la toolbar */     left: -20px;  /* Décale la toolbar de la gauche */ }   #fa_share {     background-color: #b3b3b3;  /* Couleur de fond */     border-radius: 0 0 40px;  /* Arrondis les angles */     left: -40px;  /* Décale la toolbar de la gauche */     margin-top: -1px;  /* Petite correction d'1px - Peut dépendre de votre forum (peut être retirée) */     padding-left: 10px;  /* Règle la marge intérieure gauche */     padding-right: 10px;  /* Règle la marge intérieure droite */     position: relative;  /* Permet de décaler la toolbar */ } Si vous souhaitez proposer d'autres thèmes, n'hésitez pas à envoyer un MP à un aidactif ou à un modéractif.