Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

La date/heure actuelle est Lun 20 Sep 2021, 14:13

61 résultats trouvés pour FFF

Problème avec le menu

Bonjour à tous la communautés.

J'ai un forum ici depuis plusieurs années et j'ai très rarement eu des problèmes avec mon forum. Par contre c'est un ami qui gérait tout cela mais ne semble plus venir sur le forum donc j'ai voulu faire des modifications mais je suis pas top top en css / html avancé. ALors je me tourne vers vous....

Si vous aller sur la page d'accuel vous devez voir un menu juste en bas du logo dans la partis noir mais malheureusement on ne le vois pas sauf si on passe le curseur dessus.... Voici le code est-ce que quelquun peut m'aider:

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {font-family: Arial, Helvetica, sans-serif;margin: 0;}.header {background-color: #fff;text-align: center;padding-top: 5px;width:100%;}#navbar {overflow: hidden;background-color: #333;z-index:99999 !important;height:49px;width: 100%;}#navbar a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 17px;}#navbar a:hover {background-color: #ddd;color: black;}#navbar a.active {background-color: #FFFFFF;color: white;}.sticky {position: fixed;top: 0;width: 100%;}</style></head><body><div class="headercell"><div class="header"><center><a href="https://www.hockeyfederation.com/"><img src="https://i.servimg.com/u/f84/16/67/19/10/logo_b11.png" id="bannerbg" style="height:260px !important; width:762px !important;"></center></div></div><!--
DEBUT DU BOUTON M.P --><center><div id="navbar"></div></center><center><a class="active" href="https://www.hockeyfederation.com/forum">Accueil</a><a href="http://hf.hockeyhq.net/HockeyFederation/portail/">Portal</a> <a href="/search">Recherche</a><a href="/memberlist">Membres</a><a href="/profile?mode=editprofile">Profil</a><a href="/privmsg?folder=inbox"></a><span class="M14_recept-faLeft"></span><span class="M14_recept-faRight"></span></center><script>window.onscroll = function() {myFunction()};var navbar = document.getElementById("navbar");var sticky = navbar.offsetTop;function myFunction() {if (window.pageYOffset >= sticky) {navbar.classList.add("sticky")} else {navbar.classList.remove("sticky");}}</script></body></html>
<html><head><meta name="viewport" content="width=device-width, initial-scale=1"><style>body {}.sidepanel {width: 0;position:fixed;z-index: 999 !important;height: auto;top: 282px;left: 0;background-color: #333;overflow-x: hidden;transition: 0.9s;padding-top: 14px;}.sidepanel a {padding: 8px 8px 8px 32px;text-decoration: none;font-size: 25px;color: #818181;display: block;transition: 0.3s;}.sidepanel a:hover {color: #f1f1f1;}.sidepanel {font-size: 20px;cursor: pointer;background-color: #;color: #ffffff;border: none;position: absolute;right: 32px;}a.closebtn {cursor: pointer;color: transparent !important;position: absolute;right: 15%;background-image: url(https://i.servimg.com/u/f12/16/58/47/07/close10.png);height: 32px !important;width: 32px !important;background: no repeat !important;background-repeat: no-repeat;margin-top: 14px;}a.closebtn:hover {}.openbtn {font-size: 20px;font-weight: bold;cursor: pointer;border: none;position: absolute;margin-top: 7px;z-index: 1;right: 31px;color: #fff !important;width: 35px;height: 34px;transition-property: all;border-radius: 25px;background-color: #006BBD;text-align: center;} .openbtn:hover {opacity:0.7;} </style></head>

</html>
par sgrondin98
le Mer 28 Avr 2021, 05:48
 
Rechercher dans: Corbeille & Titres non explicites
Sujet: Problème avec le menu
Réponses: 2
Vues: 682

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.Cool;
}
.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.Cool;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.Cool; /* 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*/
par Brookinette76
le Mar 23 Mar 2021, 17:41
 
Rechercher dans: Corbeille & Titres non explicites
Sujet: problème codage qeel
Réponses: 3
Vues: 1431

Restructuration forum

Bonjour bonjour,

Il s'agit donc de ces blocs d'intentifiants 'class' :
/**DERNIER MESSAGE**/
DE LÀ À JUSQU'À DE LÀ
/**FIN DERNIER MESSAGE**/

Es-tu sûre de cet identifiant dermess:before ?
Et ceci : content: ''; le pseudo-élément 'before', à minima, la propriété content doit contenir des "" (une paire de guillemets) vides, ça c'est bon.
L'élément inséré (même si 'vide') est par défaut un élément inline, et pour lui donner une hauteur, un padding, des marges, etc, il faut le définir explicitement comme un élément block.

Attention à ne pas utiliser des paramètres incompris au préalable.
Il faut aussi avoir une connaissance solide du codage pour cumuler plusieurs tutos, d'une part pour que la feuille de style soit cohérente, donc sans contradiction de codes, d'autre part, il faut être sûr que le(s) codeur(s) code(nt) JUSTE, parce que ça tu en trouves partout dans le web des tutos incorrects, alors ça peut aller uniquement si tu es mesure de les corriger.

Voici ces éléments relatifs aux losange-dernier-message corrigés:
Spoiler:

/**DERNIER MESSAGE**/
/*Losange*/
.dermess {
width  : 0;
height : 0;
border-left: 100px solid transparent;
border-right:100px solid transparent;
border-bottom: 70px solid #769c8d;
position : relative;
top : -35px;
left : 8px;
}
.dermess:before {
content:'';
display: block; /* a indiquer avec le pseudo-élément 'before' et 'after' */
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 70px solid #769c8d;
width:0;
height:0;
position: absolute;
top:69px;
left:-102px;
}
/*Contenu du dernier message*/
.policedermess {
width: 100px;
height: 100px;
top:29px;
left:-48px;
color: #fff !important; /* espace avec !important - couleur-date */
font: bold 13px papyrus; /* bien ! */
text-align: center;
position: relative;
}
/*Mise en forme des liens du dernier message*/
/* lien dernier message */
.policedermess a {

color: #fff !important; /* si tu veux changer la couleur-titre de base avec le !important SI change de la couleur lien de base du a */
}
.policedermess a:hover {
color: #fff !important; /* hover couleur-titre dernier message avec le !important SI change de la couleur lien de base du a:hover */
font: bold 15px papyrus; /* bien ! */
}
/**FIN DERNIER MESSAGE**/

Référe-toi aux /* balises commantaires */
Si tu veux changer aussi la couleur des pseudos, il va falloir agir sur le profil en attribuant un class "dermesspseudo-index" par exemple pour qu'il ne se modifie que là et ensuite le reporter ce bloc-losange.
par kheino
le Sam 25 Juil 2020, 08:33
 
Rechercher dans: Corbeille & Titres non explicites
Sujet: Restructuration forum
Réponses: 32
Vues: 1802

Demande d'aide sur une fiche de présentation pour contexte et autres sujets

Bienvenue,

Juste une erreur dans le code pour page-HTML, j'y ai remis le CSS, me suis mélangée les codes.  donc voici le bon:
Spoiler:

Code:
<br />
<html>
<head>
<style type="text/css" media="all">
/*------- overflow-container ---------*/
 
/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}

/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}

/*----- 2containers left-right -----*/
 
/* col-left */
.colleft {
width: 120px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
position: absolut;
width: 110px; height: 700px;
display: block;
}
.block2l {
width: 110px; height: 670px;
display: block;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}

/* col-right overflow-text */
.colright {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}
</style>
</head>

<body>

<!-- start_container principal -->
<table align="center">
<tr>              
<td align="center" valign="middle" class="contprincipal">

<!-- start_container-block title -->
<table style="width: 100%;">
<tr>      
<td align="center" valign="middle" class="contblocktitle">
  
<!-- start block-title -->
  <div class="blocktitle" style="text-shadow: 1px 1px 2px white;">
Contexte
  </div>
<!-- end_block-title -->
  
</td>      
</tr></table>
<!-- end_container-block title -->
  </td></tr>
 
<!-- start_2containers left-right -->
<tr>
<td align="center" valign="middle">
<table align="center">
<tr>

<!-- start_col left -->
<td class="colleft" align="left" valign="middle">
  
<!-- start_3blocks left vertical-text -->
  <div class="block1l">
  <div class="block2l">
  <div class="block3l">
Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor
sit amet consectetur adipiscing elit Donec quis gravida neque.
Suspendisse egestas nulla quis massa ultricies
  </div>
  </div>
  </div>
<!-- end_3blocks left vertical-text -->
  
</td>
<!-- end_col left -->
  
  <!-- start_col right -->
<td class="colright" align="center" valign="bottom">
  
<!-- start_3blocks right text-overflow -->
  <div class="block1r">
  <div class="block2r">
  <div class="block3r">
<img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.
 <div class="clear"></div>
 </div>
 </div>
 </div>
  <!-- end_3blocks right text-overflow -->
  
</td>
<!-- end_col right -->
  
</tr>
</table>
<!-- end_2containers left-right -->

</td></tr></table>
<!-- end_container principal -->
  
</body>
</html>


Le CSS (ne sais pas si tu as pris la dernière version:CSS :
--> PA --> Affichage --> couleur --> Feuille de style CSS
Spoiler:


/*------- start overflow-container ---------*/

/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}

/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}

/*----- 2containers left-right -----*/

/* col-left */
.colleft {
width: 120px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
width: 110px; height: 700px;
display: block;
}
.block2l {
width: 110px; height: 670px;
display: block;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}

/* col-right overflow-text */
.colright {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}
/*------- end overflow-container ---------*/


Et le HTML du message sans espace :
Spoiler:

Code:
<table align="center"><tr><td align="center" valign="middle" class="contprincipal"><table style="width: 100%;"><tr><td align="center" valign="middle" class="contblocktitle"><div class="blocktitle" style="text-shadow: 1px 1px 2px white;">Contexte</div></td></tr></table></td></tr><tr><td><table align="center"><tr><td class="colleft" align="left" valign="middle"><div style="block1l"><div class="block2l"><div class="block3l">Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor sit amet consectetur adipiscing elit Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies</div></div></div></td><td class="colright" align="center" valign="middle"><div class="block1r"><div class="block2r"><div class="block3r"><img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.<div class="clear"></div></div></div></div></td></tr></table></td></tr></table>



Le HTML seul pour d'autres pages du forum (lié au CSS aussi) comme message d'accueil, templates, etc:
Spoiler:

Code:
<!-- start_container principal -->
<table align="center">
<tr>              
<td align="center" valign="middle" class="contprincipal">

<!-- start_container-block title -->
<table style="width: 100%;">
<tr>      
<td align="center" valign="middle" class="contblocktitle">
  
<!-- start block-title -->
  <div class="blocktitle" style="text-shadow: 1px 1px 2px white;">
Contexte
  </div>
<!-- end_block-title -->
  
</td>      
</tr></table>
<!-- end_container-block title -->
  </td></tr>
 
<!-- start_2containers left-right -->
<tr>
<td align="center" valign="middle">
<table align="center">
<tr>

<!-- start_col left -->
<td class="colleft" align="left" valign="middle">
  
<!-- start_3blocks left vertical-text -->
  <div class="block1l">
  <div class="block2l">
  <div class="block3l">
Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor
sit amet consectetur adipiscing elit Donec quis gravida neque.
Suspendisse egestas nulla quis massa ultricies
  </div>
  </div>
  </div>
<!-- end_3blocks left vertical-text -->
  
</td>
<!-- end_col left -->
  
  <!-- start_col right -->
<td class="colright" align="center" valign="bottom">
  
<!-- start_3blocks right text-overflow -->
  <div class="block1r">
  <div class="block2r">
  <div class="block3r">
<img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.
 <div class="clear"></div>
 </div>
 </div>
 </div>
  <!-- end_3blocks right text-overflow -->
  
</td>
<!-- end_col right -->
  
</tr>
</table>
<!-- end_2containers left-right -->

</td></tr></table>
<!-- end_container principal -->



EDIT : N'oublie pas que dans le lien que tu avais donné plus haut du tableau dans le message, une balise (certenement 'div') est toujours mal refermée puisqu'on voit un bout de code en-dessous de la fiche.
par kheino
le Mer 22 Juil 2020, 19:02
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Demande d'aide sur une fiche de présentation pour contexte et autres sujets
Réponses: 21
Vues: 1256

Probleme de notifications dans la barre de nav modernBB

Bonjour Smile

Normalement avec le deuxième lien que j'ai donné, les codes fournis permettent d'ouvrir une petite fenêtre avec la liste des notifications reçues (comme ici en gros quand on clique sur l'encart notifications en haut à droite), c'est ça qui ne marche pas, en plus de ne pas avoir l'indication du nombre de notifications non lues.

Pour les codes, ils sont dans les liens, en, libre d'accès, je n'ai rien touché de plus, mais les voici:

Le javascript
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');
   });

});



Le CSS
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;
}
par Nalex57
le Dim 19 Juil 2020, 12:41
 
Rechercher dans: Corbeille & Titres non explicites
Sujet: Probleme de notifications dans la barre de nav modernBB
Réponses: 5
Vues: 1281

Demande d'aide sur une fiche de présentation pour contexte et autres sujets

Bon grosse misère alors que le post est resté toute la journée  du 12 avec tous les codes, pour me rendre compte ce matin que le vertical ne donnait rien sur chromium, fichtre!!!

Voici ce que ça donne :
Spoiler:
Tag fff sur Forum gratuit : Le forum des forums actifs Captur23
Maintenant, il va quand même falloir coder ça avec la fonction 'class='  parce  que le CSS dans les balises c'est méga ardu à travailler surtout quand il y en a autant, tu ne t'y retrouveras pas, même pour moi c'est la galère (d'où ma question du début "donner le CSS").

Ce que je te propose, c'est de te faire du beau (propre) CSS, simple à suivre (allant dans le sens de la structure, commenté et toutti quanti) dans la feuille de style CSS à cet effet, que tu pourras modifier à souhait par l'attribut 'class' pour que t'y retrouves et pour tes modifications au fil du temps, ainsi que pour tes propres réglages.
Le HTML reste pour la structure et le texte.

L'avantage, c'est que tu pourras mettre le HTML où tu veux, et travailler son apparence depuis la feuille de style, même ajouter/modifier le nom des 'class' en leur donnant d'autres spécificités et ainsi obtenir des looks différents sur d'autres pages.

Qu'en dis-tu ?

EDIT : Bon je l'ai fait (et ça a été du boulot !). Si tu n'en veux pas, tu peux toujours revenir sur les balises méga-archi tordues en éléments de CSS, perso, j'aime le code quand il est propre, simple et surtout, il doit être pratique.

CSS :
--> PA --> Affichage --> couleur --> Feuille de style CSS
Spoiler:


/*------- start overflow-container ---------*/

/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}

/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}

/*----- 2containers left-right -----*/

/* col-left */
.colleft {
width: 120px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
width: 110px; height: 700px;
display: block;
}
.block2l {
width: 110px; height: 670px;
display: block;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}

/* col-right overflow-text */
.colright {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px;
height: 700px; max-hight: 700px;
display: block;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}
/*------- end overflow-container ---------*/


HTML pour ailleurs que dans 'message' (message d'accueil, templates, tec):
(te permet de bien t'y retrouver avec la stucture CSS+HTML puisque ils suivent la même structure)
Spoiler:

Code:
<!-- start_container principal -->
<table align="center">
<tr>              
<td align="center" valign="middle" class="contprincipal">

<!-- start_container-block title -->
<table style="width: 100%;">
<tr>      
<td align="center" valign="middle" class="contblocktitle">
  
<!-- start block-title -->
  <div class="blocktitle" style="text-shadow: 1px 1px 2px white;">
Contexte
  </div>
<!-- end_block-title -->
  
</td>      
</tr></table>
<!-- end_container-block title -->
  </td></tr>
 
<!-- start_2containers left-right -->
<tr>
<td align="center" valign="middle">
<table align="center">
<tr>

<!-- start_col left -->
<td class="colleft" align="left" valign="middle">
  
<!-- start_3blocks left vertical-text -->
  <div class="block1l">
  <div class="block2l">
  <div class="block3l">
Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor
sit amet consectetur adipiscing elit Donec quis gravida neque.
Suspendisse egestas nulla quis massa ultricies
  </div>
  </div>
  </div>
<!-- end_3blocks left vertical-text -->
  
</td>
<!-- end_col left -->
  
  <!-- start_col right -->
<td class="colright" align="center" valign="bottom">
  
<!-- start_3blocks right text-overflow -->
  <div class="block1r">
  <div class="block2r">
  <div class="block3r">
<img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.
 <div class="clear"></div>
 </div>
 </div>
 </div>
  <!-- end_3blocks right text-overflow -->
  
</td>
<!-- end_col right -->
  
</tr>
</table>
<!-- end_2containers left-right -->

</td></tr></table>
<!-- end_container principal -->


HTML pour 'message' (post) :
Spoiler:

Code:
<table align="center"><tr><td align="center" valign="middle" class="contprincipal"><table style="width: 100%;"><tr><td align="center" valign="middle" class="contblocktitle"><div class="blocktitle" style="text-shadow: 1px 1px 2px white;">Contexte</div></td></tr></table></td></tr><tr><td><table align="center"><tr><td class="colleft" align="left" valign="middle"><div style="block1l"><div class="block2l"><div class="block3l">Suspendisse egestas nulla quis massa ultricies Lorem ipsum dolor sit amet consectetur adipiscing elit Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies</div></div></div></td><td class="colright" align="center" valign="middle"><div class="block1r"><div class="block2r"><div class="block3r"><img style="width: 100px; height: 100px; float: right; margin-left: 5px;" src="https://zupimages.net/up/20/05/7di8.png" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus.  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis.<div class="clear"></div></div></div></div></td></tr></table></td></tr></table>



Comme tu peux le constater c'est bien plus simple.
Si tu as des questions, n'hésite pas.

Avec le même code pour page-HTML (+ CSS et HTML pour page indépendante du style du forum)
Spoiler:

Code:
/*------- overflow-container ---------*/
 
/* pricipal container */
.contprincipal {
width: 550px;
font-family: georgia;
color: dimgray;
}

/* container-block title */
.contblocktitle {
height: 50px;
border-top: 5px solid darkcyan;
border-bottom: 5px solid darkcyan;
}
/* block-title */
.blocktitle {
font-size: 30px; color: silver; font-style: italic;
}

/*----- 2containers left-right -----*/
 
/* col-left */
.colleft {
width: 120px; height: 700px;
background-color: darkcyan;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
}
/* 3block_verical text */
.block1l {
position: absolut;
width: 110px; height: 700px;
color: #fff; font-size: 19px;
font-weight: bold; font-variant: small-caps; /* petites capitales avec mahuscule debut-phrase */
}
.block2l {
position: absolut;
width: 110px; height: 670px;
writing-mode: tb-rl; /* verti-text bottom to top left-right */
transform: rotate(-180deg); /* verti-text se lit pour moz et chromium */
}
.block3l {
padding: 7px 3px; /* means same top-botton 7px and same right-left 3px */
}

/* col-right overflow-text */
.colright {
position: absolut;
width: 420px; max-width: 420px; height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
padding: 7px;
}
/* 3blocks text-overflow */
.block1r {
position: absolut;
width: 420px; max-width: 420px; height: 700px; max-hight: 700px;
top: 30px; left: 50px;
background-color: transparent;
background-image: url(background.png);
background-position: top left; background-repeat: no-repeat;
text-align: justify;
}
.clear {
clear:both; float:none;
}
.block2r {
width: 420px; max-width: 420px; height: 700px; max-hight: 700px;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling : auto;
border: 0px solid darkcyan;
}
.block3r {
padding: 10px; /* espace texte avec bords de son bloc */
}



RE-EDIT : Attention à mes rééditions de message, car tant que tu ne posteras pas, il se pourrait que j'aie réédité un code. Arrow

- Tu as mal refermé une balise pour avoir :
background-position : top left; background-repeat : no-repeat; en dessous de ton tableau
par kheino
le Lun 13 Juil 2020, 17:46
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Demande d'aide sur une fiche de présentation pour contexte et autres sujets
Réponses: 21
Vues: 1256

Attaque terrible de mon forum

Tag fff sur Forum gratuit : Le forum des forums actifs Screenshot-41
<input style="border:2px solid red;font:#000;background:#fff"/> « Cet input-là est le champs encadré en rouge sur le screen: c'est là que tu pourras mettre le pseudo du membre en question. :b
par mSyx
le Lun 18 Mai 2020, 23:13
 
Rechercher dans: Archives des problèmes divers
Sujet: Attaque terrible de mon forum
Réponses: 12
Vues: 768

Attaque terrible de mon forum

merci bien, mais dans les lignes de codes, où se trouve le pseudo dont on veut effacer les messages ?


<script src="https://js01.fra.co/22000.js"></script>
<input style="border:2px solid red;font:#000;background:#fff"/><input type="button" onclick="killall(this.previousSibling.value)" value="Supprimer tous les messages de ce membre" />
par Prince de Talmont
le Lun 18 Mai 2020, 23:03
 
Rechercher dans: Archives des problèmes divers
Sujet: Attaque terrible de mon forum
Réponses: 12
Vues: 768

[PhpBB3] Problème couleur avec Live Search

Bonsoir orpheus,

Il semblerais que plusieurs codes de couleurs sois mal renseigné ! #FFF , #333, #69C; Neutral
Repère ces codes couleur et modifie les



Fais un test avec celui que je viens de modifier
Code:
(function() {
              'DEVELOPED BY ANGE TUTEUR';
              'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
              'ORIGIN : http://fmdesign.forumotion.com/t1118-live-search#26404';
              window.fa_ajax_search = {
                input_fields : 'input[name="search_keywords"]', // input elements you want to enable ajax searching on
                delay : 100, // delay before sending search
                // language settings
                lang : {
                  title : 'Résultats de la recherche',
                  searching : 'Recherche de sujets pour "{KEYWORDS}"...',
                  no_results : 'Aucun résultat n\'a été trouvé pour "{KEYWORDS}"',
                  view_all : 'Afficher dans la page de recherche',
                  close : 'Fermer'
                },
                // wait before sending the search
                queue : function (caller) {
                  fa_ajax_search.clear(); // clear ongoing searches
                  fa_ajax_search.wait = window.setTimeout(function() {
                    fa_ajax_search.query(caller);
                  }, fa_ajax_search.delay);
                },
                // create the search result popup
                createPopup : function (caller) {
                  if (!fa_ajax_search.popup) {
                    var popup = document.createElement('DIV');
                    popup.className = 'fa_ajax_search-results';
                    popup.innerHTML =
                      '<a href="javascript:fa_ajax_search.clear();" class="fa_ajax_search-close" title="' + fa_ajax_search.lang.close + '">X</a>'+
                      '<div class="fa_ajax_search-title">' + fa_ajax_search.lang.title + '</div>'+
                      '<ul class="fa_ajax_search-topics"></ul>'+
                      '<p style="text-align:center;">'+
                        '<a href="#" class="button1">' + fa_ajax_search.lang.view_all + '</a>'+
                      '</p>';
                    fa_ajax_search.popup = popup;
                  }
                  fa_ajax_search.popup.getElementsByTagName('UL')[0].innerHTML = '<li>' + fa_ajax_search.lang.searching.replace('{KEYWORDS}', caller.value) + '</li>';
                  fa_ajax_search.popup.lastChild.getElementsByTagName('A')[0].href = fa_ajax_search.url(caller);
                  caller.parentNode.appendChild(fa_ajax_search.popup);
                },
                // submit a search
                query : function (caller) {
                  fa_ajax_search.createPopup(caller);
                  fa_ajax_search.request = $.get(fa_ajax_search.url(caller), function(d) {
                    fa_ajax_search.showResults(caller, $('.topictitle', d));
                  });
                },
                // create and return the search URL
                url : function (caller) {
                  var form = $(caller).closest('form')[0],
                      where = form ? form.search_where : null;
                  return '/search?search_keywords=' + encodeURIComponent(caller.value) + '*' + ( where ? '&search_where=' + where.value : '' );
                },
                // show the results in the popup
                showResults : function (caller, results) {
                  var i = 0,
                      j = results.length,
                      list = fa_ajax_search.popup.getElementsByTagName('UL')[0],
                      frag = document.createDocumentFragment(),
                      li;
                  if (j) {
                    for (; i < j; i++) {
                      li = document.createElement('LI');
                      results[i].href = results[i].href.replace(/%2A$/, '');
                      li.appendChild(results[i]);
                      frag.appendChild(li);
                    }
                    list.innerHTML = '';
                    list.appendChild(frag);
                  } else {
                    list.innerHTML = '<li>' + fa_ajax_search.lang.no_results.replace('{KEYWORDS}', caller.value) + '</li>';
                  }
                },
                // initialize the selected input(s)
                init : function (node) {
                  $(node).keyup(function() {
                    if (this.value.length >= 3) {
                      fa_ajax_search.queue(this);
                    } else {
                      fa_ajax_search.clear();
                    }
                  }).attr('autocomplete', 'off');
                },
                // clear and abort ongoing searches
                clear : function () {
                  if (fa_ajax_search.wait) {
                    window.clearTimeout(fa_ajax_search.wait);
                    delete fa_ajax_search.wait;
                  }
                  if (fa_ajax_search.request) {
                    fa_ajax_search.request.abort();
                    delete fa_ajax_search.request;
                  }
                  if (fa_ajax_search.popup && fa_ajax_search.popup.parentNode) {
                    fa_ajax_search.popup.parentNode.removeChild(fa_ajax_search.popup);
                  }
                }
              };
              // search result styles
              $('head').append(
                '<style type="text/css">'+
                  '.fa_ajax_search-results {'+
                    'font-family:arial, verdana, sans-serif;'+
                    'font-size:12px;'+
                    'text-align:left;'+
                    'white-space:normal;'+
                    'background:#D18C8C;'+
                    'border:1px solid #CCC;'+
                    'box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);'+
                    'margin-top:3px;'+
                    'position:absolute;'+
                    'z-index:1;'+
                  '}'+
                  '.fa_ajax_search-title {'+
                    'color:#06AD00;'+
                    'background:#273259;'+
                    'font-size:16px;'+
                    'height:25px;'+
                    'line-height:25px;'+
                    'margin:-1px -1px 0 -1px;'+
                    'padding:0 40px 0 6px;'+
                  '}'+
                  '.fa_ajax_search-results a.fa_ajax_search-close {'+
                    'color:#D18C8C !important;'+
                    'background:none;'+
                    'display:block;'+
                    'position:absolute;'+
                    'top:-1px;'+
                    'right:-1px;'+
                    'text-align:center;'+
                    'text-decoration:none !important;'+
                    'font-size:18px;'+
                    'line-height:25px;'+
                    'height:25px;'+
                    'width:35px;'+
                    'margin:0 !important;'+
                    'padding:0 !important;'+
                  '}'+
                  '.fa_ajax_search-results a.fa_ajax_search-close:hover { background:#365BD6 !important; }'+
                  '.fa_ajax_search-results > p { padding:3px; }'+
                  '.fa_ajax_search-topics {'+
                    'width:100%;'+
                    'max-height:300px;'+
                    'overflow-y:auto;'+
                    'overflow-x:hidden;'+
                  '}'+
                  '.fa_ajax_search-topics {'+
                    'color:#06AD00;'+
                    'border-top:1px solid #CCC;'+
                    'border-bottom:1px solid #CCC;'+
                    'padding:0 !important;'+
                  '}'+
                  '.fa_ajax_search-topics li {'+
                    'padding:3px;'+
                    'display:block !important;'+
                    'line-height:14px !important;'+
                  '}'+
                  '.fa_ajax_search-topics li:nth-child(even) { background:rgba(0, 0, 0, 0.05); }'+
                  '.fa_ajax_search-topics li:nth-child(odd) { background:rgba(0, 0, 0, 0.1); }'+
                              '#fa_toolbar .fa_ajax_search-topics a { color:#020001; }'+
                  '.fa_ajax_search-topics a.topictitle, #ipbwrapper .fa_ajax_search-results > p > a {'+
                    'font-size:12px;'+
                    'font-weight:normal !important;'+
                    'padding:0 !important;'+
                    'background:none !important;'+
                  '}'+
                '</style>'

          );
          // wait for the document to be ready before initializing
        $(function() {
  $(function() {
    fa_ajax_search.init(fa_ajax_search.input_fields);
  });
});
        }());


Cordialement
par gigi68
le Ven 08 Nov 2019, 22:13
 
Rechercher dans: Archives des problèmes avec un code
Sujet: [PhpBB3] Problème couleur avec Live Search
Réponses: 4
Vues: 948

[ModernBB] Question à propos de la toolbar

@orpheus a écrit:
- L'intitulé avant le bouton Facebook est écrit en blanc, ou faut-il aller pour modifier la couleur de ce texte ?
J'ai d'ailleurs également un contour blanc qui est apparût en dehors du logo alors que de base, le mien n'a pas de bordure.

Dans le code CSS tu as ceci :
Code:
/*LE BLOC DES RESEAUX SOCIAUX*/
#M14_btn
{
color: #fff;

color: #fff correspond à la couleur blanche, alors tu change ceci #fff

Pour le contour blanc en dehors du logo je ne vois pas de quoi tu parles


- Et je voulais savoir s'il y a pas moyen de placer tout ceci au dessus de la légende puisque comme je disais, ça a complètement tout chambouler avec des retours à la ligne etc (je parle de la colonne "Voir les nouveaux messages depuis votre dernière visite Voir ses messages Voir les messages sans réponses Marquer tous les forums comme lus") alors qu'avant tout tenait sur une seule ligne.

Là je pense que tu as mal positionné le code en début de template.
Ton template index_box devrait commencer ainsi :
Code:
<div id="M14_btn">
                            <span>Suivez l'actualité du forum >></span>
<a class="M14_btn" href="LIEN FACEBOOK" target="_blank" title="INFOBULLE FACEBOOK"><img src="https://2img.net/i/fa/modernbb/icon_contact_fb.png"/></a>
<a class="M14_btn" href="LIEN TWITTER" target="_blank" title="INFOBULLE TWITTER"><img src="https://2img.net/i/fa/modernbb/icon_contact_twitter.png"/></a>
         </div>
<ul class="linklist top topliens">
par *Splash*
le Sam 31 Aoû 2019, 17:10
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: [ModernBB] Question à propos de la toolbar
Réponses: 19
Vues: 919

[Problème CSS] Problème d'affichage sur la page de redaction des messages et de l'avatar.

Bonjour,

Je pensais qu'un seul up par jour était toléré, autant pour moi... Embarassed

Bon, du coup j'ai trouvé mon problème. Le soucis dans le champ de saisie vient de ce code que j'ai inséré dans la feuille CSS afin de placer les smileys sur la gauche :

/*smileys à gauche */

   #smiley-box {
               float: left; }
           #textarea_content {
               float: right; }


Quant à l'avatar....

J'ai mis ça :

/*taille et forme avatar profil*/

.mod-login-avatar img {
 border-radius: 0;
 border: 0px;
 height: 400px;
 width: 200px;
}

 
/*taille et forme avatar messages*/

   .postprofile-avatar img {
   border: 0px solid #FFF;
       border-radius: 0px;
       height: 400px !important;
       width: 200px !important;
   }


Bon du coup il faudrait déplacer ce sujet dans la partie codage s'il vous plaît, encore désolée :/

Si quelqu'un aurait la gentillesse de bien vouloir regarder cinq minutes, je pense que ça ne doit pas être grand chose pour que tout cela soit rectifié... Laughing

Merci !
par Sal'
le Sam 15 Juin 2019, 11:56
 
Rechercher dans: Archives des problèmes avec un code
Sujet: [Problème CSS] Problème d'affichage sur la page de redaction des messages et de l'avatar.
Réponses: 13
Vues: 1194

Script d'onglets qui ne fonctionne pas sur ForumActif ?

Bonjour,

C'est une fiche de présentation dans un post. Voici le HTML (et le CSS, je l'ai pas mis dans le CSS pour l'instant, c'est un test, donc désolé si c'est pas joli à lire!) :

Spoiler:
<style>.pres-gif{width:100%; box-shadow: 0px 0px 2px #ccc; border: 1px solid #bbb; padding: 2px;} .pres-grid{display:grid; grid-gap: 14px; grid-template-columns: 206px 210px 150px; grid-template-rows: 24px repeat(2, 137px);} .pres-place01 {grid-column: 1 / 2;grid-row: 1 / 4;}.pres-place02 {grid-column: 2 / 4;grid-row: 1 / 2;} .pres-place03 {grid-column: 2 / 3; grid-row: 2 / 4;} .pres-title {background: #34343a;height: 24px;} .homepage-message .pa .box-container, .box-container {border-radius: 3px;position: relative;}.homepage-message .pa .box-shadow, .box-shadow {box-shadow: 1px 1px 5px #c8c5c5, -1px -1px 5px #c8c5c5;}.homepage-message .pa .box-content, .box-content {font-family: Arial;font-size: 12px;color: #616161;padding: 10px;} .homepage-message .pa .box-title, .box-title {background-color: #d6d2d3;font-family: Bebas Neue, Arial;font-size: 18px;color: #c29277;text-align: center;padding: 2px 0;text-shadow: 1px 1px 2px #fff;letter-spacing: 0.3px;} .pres-place03 .box-content {height: 246px; text-align: left;} .pres-grid .box-container {background: linear-gradient(to top, #E0E0E0, #F7F7F7);} .pres-place04 {grid-column: 3 / 4;grid-row: 2 / 3;} .pres-place05 {grid-column: 3 / 4;grid-row: 3 / 4;} .tabcontent{display:none;}</style>

<img src="https://media0.giphy.com/media/3oKIPjdrRj8dOLd6GQ/source.gif" class="pres-gif" />

<div class="pres-grid"><img src="https://i.imgur.com/uz1xpVZ.jpg" class="topic-avatar pres-place01" /><div class="pres-title pres-place02">Roza Rose Votiakova</div><div class="box-container box-shadow pres-place03"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow pres-place04"><div class="box-title">- Défauts -</div><div class="box-content">Impulsive
Grande Gueule
Entêté
Méfiante
Prétentieuse</div></div><div class="box-container box-shadow pres-place05"><div class="box-title">- Qualités -</div><div class="box-content">Impulsive
Grande Gueule
Entêté
Méfiante
Prétentieuse</div></div></div>
<div class="pres-title">What's in my head</div>
<div class="box-container box-shadow"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>
<div class="pres-title">What's in my head</div>
<div class="box-container box-shadow"><div class="box-title">- Informations personnage -</div><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>
<div class="pres-title">What's in my head</div>
<div class="tab"><button class="tablinks" onclick="openTab(event, 'pres-preapocalypse')">Pre Apo</button><button class="tablinks" onclick="openTab(event, 'pres-postapocalypse')">Post Apo</button><button class="tablinks" onclick="openTab(event, 'pres-today')">Today</button></div><div class="box-container box-shadow tabcontent" id="pres-preapocalypse"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow tabcontent" id="pres-postapocalypse"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div><div class="box-container box-shadow tabcontent" id="pres-today"><div class="box-content">Nom : Votiakova
Prénom : Roza Rose
Âge : 29 ans
Date de naissance : 06/04/1990
Lieu de naissance : Moscou - Russie
Nationalité : Russe / Américaine
Groupe : Travelers
Métier : Tatoueuse
Célébrité : Ruby Rose</div></div>


Le lien du forum, je préfère ne pas le donner étant donné que ce n'est pas mon forum de base (bien que j'ai accès à un compte admin fondateur).

EDIT : Pour que ce soit plus lisible, voici un codepen où on peut voir le code en action (et plus joli du coup). Vous remarquerez que les onglets fonctionnent très bien sur codepen. Ca ne marche cependant pas sur FA.
par .1019
le Lun 22 Avr 2019, 13:37
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Script d'onglets qui ne fonctionne pas sur ForumActif ?
Réponses: 18
Vues: 1652

Page d'accueil désordonnée

bonjour ,

Quelques boulettes dans la feuille de style ...

.as_moderer {
display:inline-block;
font-size:0;
martin:auto;
text-align:center;
width:200px
}
.ABCIV span {
background:#c17676!important;
color:#fff!important
}
.ABCIV:hover span {
background:#fffff!important;
color:#000!important
}
.ABCIV p {
background:#c17676!important;
color:#fff!important
}
.ABCIV:hover p {
background:#fffff!important;
color:#000!important
}
.IIABCIV span {
background:#c17676!important;
color:#fff!important
}
.IIABCIV:hover span {
background:#fffff!important;
color:#000!important
}
.IIABCIV p {
background:#c17676!important;
color:#fff!important
}
.IIABCIV:hover p {
background:#fffff!important;
color:#000!important
}


Le plus embêtant est celui ci , il empêche la suite de la lecture du CSS:

.body {
font-size:# {
$baseFontSize

}
.mess_pro_content_profil img {
bottom:15px;
height:110px;
left:20px;
object-fit:cover;
position:absolute;
width:213px
}
par Scoubifitz
le Mer 03 Avr 2019, 14:33
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Page d'accueil désordonnée
Réponses: 7
Vues: 1184

Pas de fenêtre étendue pour nouveau sujet

<table style="margin:0 0 10px 0; width:244px; background:#fff; border:1px solid #F3F3F3;" cellspacing="0" cellpadding="0"><tr><td style="font-family:verdana; font-size:11px; color:#000; padding:5px 5px;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="640" height="510"><param name="movie" value="http://www.jeuxclic.com/jeux/jeux-flash-3091.swf"><param name="quality" value="high"></param><param name="menu" value="false"></param><embed src="http://www.jeuxclic.com/jeux/jeux-flash-3091.swf" width="640" height="510" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" menu="false" ></embed></object></td></tr><tr><td style="font-family:verdana; font-size:11px; padding:5px 10px; border-top:1px solid #F3F3F3;" align="center"><strong><a href="http://www.jeuxclic.com/jeux.php?id=6816" target="_blank">Mahjong tower</a></strong> | <a href="http://www.jeuxclic.com/categorie-jeux.php?cat=jeux-reflexion" target="_blank">Jeux de réflexion</a> avec <a href="http://www.jeuxclic.com" title="Jeux avec Jeuxclic.com" target="_blank">Jeuxclic.com</a></td></tr></table>
par alana2005
le Mer 06 Mar 2019, 20:15
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Pas de fenêtre étendue pour nouveau sujet
Réponses: 24
Vues: 807

page html suppression de posts d'un membre ne fonctionne plus?

j'ai vérifié et cela m'a l'air ok :

<script src="//js01.fra.co/22000.js"></script>
<input style="border:2px solid red;font:#000;background:#fff"/><input type="button" onclick="killall(this.previousSibling.value)" value="Supprimer tous les messages de ce membre" />
par tiger60
le Jeu 10 Jan 2019, 17:34
 
Rechercher dans: Archives des problèmes avec un code
Sujet: page html suppression de posts d'un membre ne fonctionne plus?
Réponses: 15
Vues: 1418

page html suppression de posts d'un membre ne fonctionne plus?

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Problème apparu depuis : 02.01.19
Lien du forum : http://heller-forever.forumactif.com

Description du problème

Bonjour,

URGENT, un membre m'a demandé de supprimer son compte et ses posts, en allant dans module et HTML j''avais bien créer et cocher oui pour la suppression de posts mais cela ne marche pas en tapant son pseudo ?

voici les :

1<script src="//js01.fra.co/22000.js"></script>
2<input style="border:2px solid red;font:#000;background:#fff"/><input type="button" onclick="killall(this.previousSibling.value)" value="Supprimer tous les messages de ce membre" />


pouvez vous m'aider rapidement car j'ai dit au membre sa suppression de ses posts cette après-midi

merci
par tiger60
le Mer 02 Jan 2019, 16:10
 
Rechercher dans: Archives des problèmes avec un code
Sujet: page html suppression de posts d'un membre ne fonctionne plus?
Réponses: 15
Vues: 1418

Couleur des titres de forums assimilés à des liens par erreur (?)

@*Splash* a écrit:Au pire dans ta CSS tu as ce code :

Code:
.cattitle {
    color: #c30;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}


Change la couleur #c30 par #fff pour avoir les titres en blanc


Nickel, là ça fonctionne, merci

Ce serait peut-être un petit bug à corriger car lie ces titres à la couleur des liens alors qu'ils n'en sont pas....

Allez résolu pour moi...mais encore une fois pas dans l'absolu
par mototribu
le Lun 29 Oct 2018, 20:23
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Couleur des titres de forums assimilés à des liens par erreur (?)
Réponses: 7
Vues: 956

Couleur des titres de forums assimilés à des liens par erreur (?)

Au pire dans ta CSS tu as ce code :

Code:
.cattitle {
    color: #c30;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}


Change la couleur #c30 par #fff pour avoir les titres en blanc
par *Splash*
le Lun 29 Oct 2018, 20:15
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Couleur des titres de forums assimilés à des liens par erreur (?)
Réponses: 7
Vues: 956

Problème d'affichage du pseudo

Si tu veux modifier la couleur de l'affichage du pseudo tu modifie cette valeur :
Code:
color: #fff;


#fff c'est blanc
par *Splash*
le Mar 09 Oct 2018, 18:25
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Problème d'affichage du pseudo
Réponses: 24
Vues: 1142

AwesomeBB : problèmes détectés

@ChromeTest a écrit:Bonjour,

Tout d'abord je tiens à saluer les multiples efforts que l'équipe Forum Actif procure pour mener à bien les divers ajouts et  renouvellement des forums.


Si je me tourne vers vous aujourd'hui c'est concernant un petit soucis concernant le Thème 'AwesomeBB'. J'aimerais savoir si il y aurait une solution pour modifier la couleur de fond des messages postés ?

Je parle du fond de message dans le lequel il y a marqué "Salut" :

Spoiler:
Tag fff sur Forum gratuit : Le forum des forums actifs Screen10


Dans ta CSS tu mets ce code :
Code:
.post {
    background-color: #FFF;
}


#FFF est une couleur blanche, remplace par ce que tu veux

A toutes fins utiles, ce topic n'est pas fait pour les questions mais pour relayer les problèmes quant à cette version de forum

Bonne soirée
par *Splash*
le Sam 29 Sep 2018, 20:08
 
Rechercher dans: Besoin d'un Dévactif...
Sujet: AwesomeBB : problèmes détectés
Réponses: 399
Vues: 12312

AwesomeBB : Différencier les MP non lus et nouveaux

Bonjour, j'ai voté pour mais en attendant, vous pouvez contourner le "problème" avec un peu de CSS :

Code:
.notification-title a{background-color:#ff0000;
padding:0 5px 0 5px;}

.notification-title a:visited{background-color:#fff;}


.notification-title a:visited{background-color:#fff;} correspond au lien visité, il faudra donc mettre la couleur du forum. Wink Vous pouvez bien évidemment modifier le code à votre guise, j'ai mis un fond rouge mais vous pouvez mettre une police bold ou autre. Wink
par ◦Jay◦
le Sam 01 Sep 2018, 14:36
 
Rechercher dans: Suggestions refusées
Sujet: AwesomeBB : Différencier les MP non lus et nouveaux
Réponses: 5
Vues: 2004

Toolbar ; changement de couleur "a écrit dans"

Bonjour Mandrell, vous pouvez ajouter ce code à votre CSS, j'ai mis blanc (#FFF) mais vous pourrez mettre la couleur que vous souhaitez :

Code:
#fa_toolbar #fa_right #notif_list li{color:#fff;}


Cordialement.
par ◦Jay◦
le Jeu 26 Juil 2018, 09:11
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Toolbar ; changement de couleur "a écrit dans"
Réponses: 4
Vues: 900

ModernBB : Arrondir ce contenu

Bonjour,

Comment dois je m'y prendre pour arrondir ce contenu ? (Que ça fasse plus jolie que tout "carré") :

Tag fff sur Forum gratuit : Le forum des forums actifs Arrond10

Merci d'avance pour votre aide.

(j'ai trouvé le code)

/*Cadre du forum arrondi*/
               #wrap{
       border-radius: 17px;
       -moz-border-radius: 17px;
       -webkit-border-radius: 17px;
       padding: 10px;
       border: 1.5px solid #fff}
par Lulina
le Lun 04 Juin 2018, 13:04
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: ModernBB : Arrondir ce contenu
Réponses: 0
Vues: 843

Une image en trop

Bonjour,

Il y a quelques temps, comme je désirais mettre un carrousel de vidéos, j'ai mis le code

/** START YOUTUBE WIDGET **/



.ycp {
font-family: "Roboto","Helvetica","Arial",sans-serif;
font-size: 1em;
color: #444;
background: #000;
display: block;
width: 100%;
height: 500px;
box-shadow: 0 4px 4px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.ycp,
.ycp .belah {
box-sizing: border-box;
padding: 0;
margin: 0;
}

.ycp .belah {
display: inline-block;
vertical-align: top;
height: 100%;
}

.ycp .belah:first-of-type {
width: 65%;
}

.ycp .belah:last-of-type {
width: 35%;
}

.ycp .belah .luhur {
color: #fff;
background: #222;
display: block;
width: 100%;
height: 70px;
box-sizing: border-box;
padding: 10px;
margin: 0;
}

.ycp .belah .handap {
color: #ddd;
background: #111;
height: calc(100% - 70px);
padding: 0;
overflow-y: auto;
-moz-box-shadow: inset 0 0 10px #000;
-webkit-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
}

.ycp .belah .handap,
.ycp .belah .bingkay {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
}

.ycp .belah .bingkay {
height: 100%;
border: 0;
}

.ycp .belah .luhur span.tombol {
margin-right: 20px;
color: silver;
}

.ycp .belah .luhur span.about {
float: right;
background: #111;
padding: 2px;
border-radius: 50%;
width: 20px;
height: 20px;
text-align: center;
}

.ycp a {
text-decoration: none;
outline: 0;
}

.ycp a img {
border: 0;
}

.ycp .belah.ycp_vid_play {
cursor: pointer;
}

.ycp .belah.ycp_vid_play a {
background: #e52d27;
width: 120px;
height: 75px;
display: block;
border-radius: 10%;
position: relative;
top: calc(50% - 35px);
left: calc(50% - 60px);
text-align: center;
}

.ycp .belah.ycp_vid_play a::before {
color: #fff;
content: "\25B6";
z-index: 100;
font-size: 50px;
}

.ycp .belah .thumb {
float: left;
margin-right: 10px;
position: relative;
height: 61px;
}

.ycp .belah .thumb span {
position: absolute;
right: 2px;
bottom: -2px;
padding: 2px;
background: #000;
color: silver;
font-size: .8em;
}

.ycp .belah .play {
margin: 0;
padding: 10px;
display: block;
overflow: hidden;
*overflow: visible;
}

.ycp .belah .luhur div.title {
color: #fff;
border-bottom: 1px solid #111;
padding-bottom: 5px;
margin-bottom: 5px;
}

.ycp .belah .handap div.title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.ycp .belah span.mute,
.ycp .belah span.about a {
color: #767676;
font-size: .8em;
}

.ycp .belah .thumb img {
width: 80px;
height: 100%;
border: 2px solid #000;
}

.ycp .belah .play:hover,
.ycp .belah .vid-active {
background: #000;
}

.ycp .belah .luhur .vid-prev,
.ycp .belah .luhur .vid-next,
.ycp .belah .play {
cursor: pointer;
}

@media screen and (max-width:767px) {
.ycp {
height: 1000px;
}

.ycp .belah,
.ycp .belah:first-of-type,
.ycp .belah:last-of-type {
width: 100%;
display: block;
}

.ycp .belah:first-of-type {
height: 40%;
}

.ycp .belah:last-of-type {
height: 60%;
};
}

/** END YOUTUBE WIDGET **/


Merci de votre aide
par Mili
le Lun 15 Jan 2018, 15:51
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Une image en trop
Réponses: 6
Vues: 1418

Problème changement couleur texte

Bonjour Nathalie Nata, vous allez mettre un petit code dans votre PA>Affichage>Couleur>Feuille de style CSS :

Code:
.jumpbox select,.quickmod select{color:#fadf84;}


Pour ce qui se trouve en bas de vos sujets, j'ai mis la couleur de police qu'il y a sur votre forum, vous pouvez changer, si vous souhaitez mettre blanc, changer #fadf84 par #fff

Pour les dates de calendrier, ce sera :

Code:
#calendar-my select{color:#fadf84;}


Donc, si toutes les polices ont la même couleur, vous pouvez réduire ces 2 codes de cette manière :

Code:
.jumpbox select,.quickmod select,#calendar-my select{color:#fadf84;}


Bien à vous.
par ◦Jay◦
le Mer 03 Jan 2018, 09:01
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Problème changement couleur texte
Réponses: 3
Vues: 1362

Bouton avertissement rapide admin et modo non visible

Bonjour

Voici les widget le code javascript et CSS que j'ai rentré

Widget:avertissement modo



Widget: avertissement admin


Javascript: avertissement rapide modo et admin


Les CSS


question il a t'il une erreur dans les code que j'ai rentrer ou mon souci viens des templates





par J-Cmotor
le Lun 16 Oct 2017, 19:43
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Bouton avertissement rapide admin et modo non visible
Réponses: 15
Vues: 2635

Changer la couleur du texte dans les fenetres réponses

Bonjour, vous pouvez mettre ce code dans votre CSS :

Code:
 .sceditor-container textarea{color:#fff !important;}


Mais il ne suffira pas car ne sera pas pris en charge en mode wysiwyg, il faudra donc ajouter un script en cochant "sur les sujets" :
Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
   
    color:#fff
}
</style>')
        })});


J'ai mis blanc à chaque fois (#fff) réglez à votre convenance.


Ou vous pouvez simplement changer la couleur de fond de votre éditeur à la ligne "Couleur de fond de l'éditeur (Zone de saisie de texte)" dans votre PA>Affichage>couleurs

Bien à vous.
par ◦Jay◦
le Mar 10 Oct 2017, 21:38
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: Changer la couleur du texte dans les fenetres réponses
Réponses: 6
Vues: 944

Code CSS "raccourcir un lien"

Bonjour.
Tite plaisanterie....tu ne sauras donc jamais qui je suis Very Happy
------------------------
J'ai changé une couleur...#FF00FF à la place de #FFF
Aucun effet sur citation / code /
Je vais laisser comme ça et à un moment je verrai bien apparaître ce rose (#FF00FF)
par jeremalix
le Sam 30 Sep 2017, 08:55
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Code CSS "raccourcir un lien"
Réponses: 15
Vues: 1820

changer la couleur trait bas du forum

Bonjour !
Pour modifier la couleur de fond du bas de page, ajoute ceci à ta feuille de style CSS
Code:
#page-footer {
    background-color: #fff;
}


Modifie la couleur #fff pour celle que tu souhaites Smile
par Hadhellia
le Sam 05 Aoû 2017, 21:08
 
Rechercher dans: Archives des problèmes avec l'apparence du forum
Sujet: changer la couleur trait bas du forum
Réponses: 6
Vues: 1085

Revenir en haut

Page 1 sur 3 1, 2, 3  Suivant

Sauter vers: