Affichage boîte MP
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Affichage boîte MP
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 24/04/2024
Lien du forum : https://mydearjane.forumactif.com/
Description du problème
Bonjour,Je reviens vous ennuyer avec le dernier codage qui me pose souci. J'ai tenté de contacter le/la créatrice/créateur mais en vain.
Comme vous pouvez le voir, la boîte est immense et je n'arrive pas à changer la largeur.
Pour le coup, je ne sais pas du tout où est le souci.
Je vous fourni donc le template et vous remercie d'avance.
privmsgs_read_body
- Code:
<ul id="privmsgs-menu" style="text-align:center;">
<li><i class="ion-archive"></i>{INBOX}<div class="active"></div></li>
<li><i class="ion-paper-airplane"></i>{SENTBOX}<div class="active"></div></li>
<li><i class="ion-share"></i>{OUTBOX}<div class="active"></div></li>
<li><i class="ion-bookmark"></i>{SAVEBOX}<div class="active"></div></li>
</ul>
<div class="clear"></div>
<form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list">
<div class="panel">
<div class="inner"><span class="corners-top"><span></span></span>
<!-- BEGIN switch_box_size_notice -->
<p class="left-box">{BOX_SIZE_STATUS}</p>
<!-- END switch_box_size_notice -->
<p class="right-box">
{L_DISPLAY_MESSAGES}: <select name="msgdays">
{S_SELECT_MSG_DAYS}
</select> <input class="button2" type="submit" name="submit_msgdays" value="{L_GO}" />
</p>
<div class="clear"></div>
<span class="corners-bottom"><span></span></span></div>
</div>
<div class="mp_bouton">
<a href="/privmsg?mode=post">Envoyer un nouveau message</a>
</div>
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
</ul>
<ul class="topiclist pmlist bg_none">
<!-- BEGIN listrow -->
<div class="total_liste_mp">
<div class="icon_mp" style="background-image: url({listrow.PRIVMSG_FOLDER_IMG});"></div>
<div class="title_mp"><a href="{listrow.U_READ}" class="topictitle">{listrow.SUBJECT}</a></div>
<div class="blok_mp">
<div class="from_mp">envoyé par : {listrow.FROM}</div>
<div class="date_mp">envoyé le : {listrow.DATE}</div>
</div>
<dd class="markyy"><input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" /></dd>
</div>
<!-- END listrow -->
<!-- BEGIN switch_no_messages -->
<li class="row row1">
<dl class="icon">
<dt>
<strong>{L_NO_MESSAGES}</strong>
</dt>
<dd class="mark"> </dd>
</dl>
</li>
<!-- END switch_no_messages -->
</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
<p class="right-box" style="margin: 0;"><a href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: <a href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a></p>
<div class="clear"></div>
<p><span class="pagination">{PAGINATION}{PAGE_NUMBER}</span><br/></p>
<div class="clear"></div>
<div class="pm-actions bottom">
<div class="pm-actions-buttons">
{S_HIDDEN_FIELDS}
<!-- BEGIN switch_save -->
<input class="button1" type="submit" name="save" value="{L_SAVE_MARKED}" />
<!-- END switch_save -->
<!-- BEGIN switch_move_profile -->
<input class="button1" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />
<!-- END switch_move_profile -->
<input class="button2" type="submit" name="delete" value="{L_DELETE_MARKED}" />
<input class="button2" type="submit" name="deleteall" value="{L_DELETE_ALL}" />
</div>
</div>
</form>
<div class="clear"></div>
<div class="jumpjump" style="width: 430px;float: right;margin-top: -50px;">{JUMPBOX}</div>
<br style="clear:both" />
Re: Affichage boîte MP
Bonjour,
La largeur de la boîte est a priori automatique, égale à celle du forum.
Si vous souhaitez la réduire, vous pouvez essayer en ajoutant ce code css à votre feuille de style :
Si ce n'est pas le résultat souhaité, pourriez-vous également partager le votre css, et repréciser le résultat attendu ?
La largeur de la boîte est a priori automatique, égale à celle du forum.
Si vous souhaitez la réduire, vous pouvez essayer en ajoutant ce code css à votre feuille de style :
- Code:
/*largeur liste mp*/
form[name="privmsg_list"] .forabg {
max-width: 800px;
margin: auto;
}
Si ce n'est pas le résultat souhaité, pourriez-vous également partager le votre css, et repréciser le résultat attendu ?
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Affichage boîte MP
Bonjour,
Merci, du coup mon problème ne vient pas de la largeur. Comment mettre les icones du coup sur la gauche ?
Merci, du coup mon problème ne vient pas de la largeur. Comment mettre les icones du coup sur la gauche ?
Re: Affichage boîte MP
N'auriez vous pas à un endroit un élément qui élargit la page ? je n'arrive pas reproduire sur mon forum test (et impossible bien sûr d'avoir accès à une boîte mp sans compte sur le votre)
Voici ce que j'ai sur mon forum test avec le template donné (qui est privmsgs_body et non privmsgs_read_body) et le css que j'ai pu récupérer :
Je ne comprends pas bien ce que vous voulez dire par "mettre les icones sur la gauche" ? Mais avec un schéma, il est possible de retravailler le template oui, et le css si vous le fournissez comme proposé dans mon message précédent. Vous semblez y avoir des codes en double d'ailleurs.
EDIT : Est-ce quelque chose comme ça que vous souhaitez ?
Voici ce que j'ai sur mon forum test avec le template donné (qui est privmsgs_body et non privmsgs_read_body) et le css que j'ai pu récupérer :
Je ne comprends pas bien ce que vous voulez dire par "mettre les icones sur la gauche" ? Mais avec un schéma, il est possible de retravailler le template oui, et le css si vous le fournissez comme proposé dans mon message précédent. Vous semblez y avoir des codes en double d'ailleurs.
EDIT : Est-ce quelque chose comme ça que vous souhaitez ?
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Affichage boîte MP
Bonsoir,
Désolée de m'être mal exprimée. J'aimerai effectivement que la boite mp ressemble à ce que vous montrez sur votre dernière image.
Désolée de m'être mal exprimée. J'aimerai effectivement que la boite mp ressemble à ce que vous montrez sur votre dernière image.
Re: Affichage boîte MP
Alors il faut effectivement corriger le css. Qu'il faudrait donc fournir, comme déjà demandé dans mes messages précédent :
pourriez-vous également partager votre css
le css si vous le fournissez comme proposé dans mon message précédent
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Affichage boîte MP
Bonjour,
Autant pour moi, sa longueur dépassant la limite autorisée, je cherchai un site qu'on m'avait donné pour les codages mais du coup je vais le séparer en deux.
Autant pour moi, sa longueur dépassant la limite autorisée, je cherchai un site qu'on m'avait donné pour les codages mais du coup je vais le séparer en deux.
- Code:
/*largeur liste mp*/
form[name="privmsg_list"] .forabg {
max-width: 800px;
margin: auto;
}
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
#wrap {
box-sizing: content-box;
}
:root {
--acc1: #000;
--acc2:#DD9F8C;
--acc3:#fff;
--white: #fff;
--black: #000;
--border: #ededed;
--border1: 1px solid #ededed;
--background1: #f1f1f1;
--background2: #ffffff;
--background3: #000000;
--degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
--degrag: #ccc9c7;
}
/*********** FICHE DE PREDEFINIS - ARTEMIS - POUR EPICODE ET ARTIFICES ***********/
.presentation-artemis {
--police-texte: "Roboto", sans-serif;
--couleur-foncee-a: #090402;
--couleur-pastel: #ccaf9b;
--fond-fiche: #f2f2f2;
--fond-avatar: #fbfafa;
width: 85%;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 45px 285px 210px 180px 1fr;
gap: 10px;
margin: 0 auto 15px;
background: var(--fond-fiche);
border: 1px solid rgba(0, 0, 0, 0.2);
box-sizing: border-box;
padding: 10px;
font: 13px var(--police-texte);
position: relative;
}
.avatar-infos {
grid-column: 1/2;
grid-row: 1/3;
background: var(--fond-avatar);
padding: 10px;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 0;
position: relative;
overflow: hidden;
}
.presentation-artemis > .avatar-infos img,
.icone-lien img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: ease-in-out 0.8s;
}
.avatar-infos:after {
content: " ";
background: linear-gradient(to bottom, transparent, 70%, var(--couleur-pastel));
width: calc(100% - 20px);
height: calc(100% - 20px);
position: absolute;
bottom: 10px;
right: 10px;
mix-blend-mode: multiply;
transition: all 0.8s;
}
.presentation-artemis > .avatar-infos:hover:after {
opacity: 0;
transition: all 0.8s;
}
.presentation-artemis > .avatar-infos:hover img {
transform: scale(1.7) rotate(10deg);
-webkit-filter: none;
filter: none;
transition: ease-in-out 0.8s;
}
.avatar-infos span {
background: var(--couleur-pastel);
color: var(--couleur-foncee-a);
display: inline-block;
padding: 3px 10px;
position: absolute;
top: 20px;
left: 20px;
text-transform: uppercase;
font-size: 9px;
font-weight: 700;
}
.presentation-artemis > h1 {
margin: 0;
padding: 0;
grid-column: 2/3;
grid-row: 1/2;
background: var(--couleur-foncee-a);
border-top: 2px solid var(--couleur-pastel);
border-bottom: 2px solid var(--couleur-pastel);
color: var(--couleur-pastel);
text-align: center;
display: grid;
place-content: center;
font-family: "Yeseva One", serif;
font-weight: normal;
font-size: 18px;
}
.presentation-artemis > dl {
grid-column: 2/3;
grid-row: 2/3;
margin: -10px 0 0 0;
display: flex;
flex-wrap: wrap;
}
.presentation-artemis > dl > dd {
border: 1px solid var(--couleur-pastel);
margin: 0;
padding: 15px 5px 10px 10px;
height: 44px;
width: 100%;
overflow: auto;
font-size: 11px;
text-align: justify;
box-sizing: border-box;
}
.presentation-artemis > dl dt {
background: var(--fond-fiche);
position: relative;
top: 7px;
left: 5px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.caractere-arte {
grid-column: 1/2;
grid-row: 3/4;
background: var(--couleur-pastel);
padding: 10px;
}
.caractere-arte h2,
.infos-arte h2 {
text-align: right;
font-weight: bold;
margin: 0;
padding: 0;
font-size: 13px;
text-transform: uppercase;
position: relative;
border: none;
}
.caractere-arte h2 {
color: var(--couleur-foncee-a);
}
.infos-arte h2 {
color: var(--couleur-pastel);
}
.caractere-arte h2:after,
.infos-arte h2:after {
content: " ";
width: 70px;
height: 3px;
position: absolute;
right: 0;
bottom: -5px;
}
.caractere-arte h2:after {
background: var(--couleur-foncee-a);
}
.infos-arte h2:after {
background: var(--couleur-pastel);
}
.caractere-arte p,
.infos-arte p {
font-family: var(--police-texte);
font-weight: 100;
text-align: justify;
height: 80%;
overflow: auto;
margin: 20px auto;
font-size: 12px;
line-height: 16px;
padding: 0 5px;
}
.caractere-arte p {
color: var(--couleur-foncee-a);
}
.infos-arte p {
color: var(--couleur-pastel);
}
.infos-arte {
grid-column: 2/3;
grid-row: 3/4;
background: var(--couleur-foncee-a);
padding: 10px;
}
.histoire-arte {
grid-column: 1/3;
grid-row: 4/5;
border: 1px solid var(--couleur-pastel);
padding: 15px 15px;
text-align: justify;
font-weight: 100;
font-size: 12px;
line-height: 16px;
color: rgba(0, 0, 0, 0.9);
max-height: 180px;
overflow: auto;
}
.histoire-arte span {
background: var(--couleur-pastel);
padding: 2px 5px;
text-transform: uppercase;
font-weight: 700;
color: var(--couleur-foncee-a);
}
.liens-predefinis {
display: grid;
gap: 10px;
grid-column: 1/3;
grid-template-columns: 30px 1fr;
grid-template-rows: 1fr;
}
.liens-predefinis > h3 {
all: unset;
grid-column: 1/2;
grid-row: 1/2;
background: var(--couleur-pastel);
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
display: grid;
place-content: center;
text-transform: uppercase;
}
.un-lien-arte {
width: 100%;
display: flex;
gap: 0px 10px;
justify-content: space-between;
overflow: hidden;
grid-column: 2/3;
margin-bottom: 10px;
}
.un-lien-arte:last-child {
margin: 0;
}
.icone-lien {
width: 120px;
height: 120px;
margin: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
background: var(--fond-avatar);
padding: 10px;
box-sizing: border-box;
overflow: hidden;
}
.bloc-droite {
width: calc(100% - 120px);
}
.pseudo-lien {
margin: 0;
border-bottom: 4px solid var(--couleur-pastel);
width: 100%;
font-size: 18px;
text-transform: uppercase;
color: var(--couleur-foncee-a);
font-weight: 700;
}
.bloc-droite p {
height: 58px;
overflow: auto;
font-size: 11px;
margin: 8px 0;
text-align: justify;
}
.bloc-droite > span {
background: var(--couleur-foncee-a);
color: var(--fond-fiche);
font-size: 10px;
text-transform: uppercase;
height: 20px;
display: grid;
place-content: center;
}
.credit-artemis {
position: absolute;
text-align: center;
bottom: -15px;
font-size: 10px;
}
.credit-artemis a {
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
}
/* CATÉGORIES */
/*liens voir nouveaux messages, supp cookies (en haut et en bas des catés*/
.liens_pa {
background: var(--background2);
padding: 5px 0 7px;
border-radius: 7px;
margin-top: 9px;
text-align: center;
}
.liens_pa a {
background: var(--background1);
border-radius: 7px;
padding: 1px 10px;
margin: 0 10px;
text-transform: uppercase;
font-size: 10px;
}
/*Titre de la catégorie*/
.cat_titre { background: var(--background3);
border-radius: 7px 7px 0 0;
color: #fff;
font-weight: 300;
letter-spacing: 3px;
margin-top: 14px;
padding: 9px 20px;
text-transform: uppercase;}
.cat_titre h2 {color: #fff;
font-size: 14px;
font-weight: 300;
margin: 0;}
/*Rassemblement de balises répétitives*/
#cate {margin: 0 7px 0 0;
border-radius: 7px;}
.liensforums, .imgnew, .txt_derniermess {
border: var(--border1); }
/*Corps des catégories*/
.cat_container { background: var(--background2);
border-radius: 7px;
height: 114px;/*à modifier seulement si vous la voulez plus haute*/
padding: 10px;
margin: 0 0 4px;
display: flex;
font-size:14px;}
/*Partie liens forums*/
.liensforums { font-size: 0px;
overflow: auto;
width: 18%;
padding: 5px;
text-align: left;}
#liensforums2 a {
display: block;
text-transform: lowercase;
font-size: 14px;
}
#liensforums2 a::before {
color: #DD9F8C;
content: " ● ";
}
/*Partie image new, no new etc.*/
.imgnew { padding: 3px;
width: 5%;}
.imgnew img { border-radius: 7px;
height: 100%;
object-fit: cover;
width: 100%;}
/*Partie titre du forum et description*/
.titredescriforum {
width: 65%;}
/*titre forum*/
.titreforum { background: var(--background1);
border-radius: 7px;
padding-left: 13px;
text-transform: lowercase;
text-align: left;}
.titreforum a { font-size: 15px;
font-weight: 700;
color: #000;}
/*description*/
.descricat { height: 67px; /*à modifier si vous changer la height de .cat_container*/
margin-top: 4px;
text-align: justify;
overflow: auto;
line-height: 20px;
border-top: var(--border1);}
/*Partie nb de sujets et messages*/
.nbsujnotes { display: flex;
flex-wrap: wrap;
max-width: 60px;}
.nbsujnotes2 { background: var(--background1);
border-radius: 4px;
color: var(--acc1);
font-size: 11px;
font-weight: 500;
text-align: center;
min-width: 60px;
display: flex;
justify-content: center;
align-items: center;}
.nbsujnotes2:nth-child(2) {margin-top:7px;
color:var(--acc2);}
/*Partie dernier message posté*/
.derniermess {
max-width: 164px;}
/* titre avec écrit last song*/
.ti_derniermess { background-image: var(--degrade);
border-radius: 4px;
color: var(--acc3);
font-size: 11px;
margin: 0 0 0 21px;
text-align: center;
min-width: 140px;}
/*dernier avatar*/
.avatarcat { background: var(--background2);
border: var(--border1);
border-radius: 50px;
margin-top: -18px;
padding: 2px;
position: absolute;
}
.avatarcat img { border-radius: 50px;
width: 39px;
height: 39px;
object-fit: cover;}
/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
border-radius: 7px;
margin: 5px 0 0;
padding: 6px 0 7px 32px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
text-transform: lowercase;
height: 73px; /*à modifier si vous changer la height de .cat_container*/
display: flex;
line-height: 13px;
flex-wrap: wrap;
align-items: center;
}
.txt_derniermess a { font-size: 14px;}
.txt_derniermess br {
content: "";
margin: 2em 0 0 4em;
display: block;
font-size: 24%;
}
Re: Affichage boîte MP
- Code:
/*QEEL*/
/*balise qui contient tout le QEEL*/
.qeel_container { background: var(--background2);
margin: 10px 0 0;
border-radius: 10px;
padding: 10px 10px 7px;
display: flex;
flex-wrap: wrap;}
/*BALISE QUI CONTIENT LES MEMBRES CO 24 HEURES / NOUVEAU MEMBRE / TEXTE CRÉDITS / PARTIE GROUPES*/
.qeel1 { margin-right: 7px;
width: 70%;}
/*balise qui contient membres co 24 heures / nouveau membre et txt credits*/
.qeel4 { display: flex;
margin:0 0 7px 0;}
/*balise connectes dernieres 24 heures*/
.qeel_dc { width: 57%;
margin: 0 7px 0 0;
height: 98px;
border-top: var(--border1);
margin-right: 7px;
padding: 5px;
font-size: 14px;
text-align: justify;
overflow: auto;}
/*balise nouveau inscrit et txt credits*/
.qeel_nmcred {width: 43%;}
/*balise nouveau inscrit*/
.qeel_nm { border: var(--border1);
border-radius: 7px 7px 7px 28px;
padding: 4px;
display: flex;
flex-wrap: wrap;}
/*balise avatar nouveau inscrit*/
.qeel_avatar { width: 50px;
z-index: 100;
height: 50px;
padding: 4px;
border-radius: 10px 100% 100%;
background: var(--background2);
border: var(--border1);
box-sizing: border-box;}
/*avatar nouveau inscrit*/
.qeel_avatar img { width: 40px;
object-fit: cover;
height: 40px;
border-radius: 10px 100% 100%;}
/*balise pseudo nouveau inscrit*/
.qeel_nouvmembre { text-align: center;
text-transform: lowercase;
font-size: 16px;
line-height: 31px;
min-height: 30px;
margin: 0 0 0 20px;}
.qeel_nouvmembre strong {font-weight:500;}
/*balise titre bienvenue sur forum*/
.qeel_bienvenue { width: 100%;
text-align: right;
background: var(--background1);
text-transform: lowercase;
font-weight: 600;
font-size: 12px;
padding: 0 10px 0 0;
margin: -17px 0 0 24px;
border-radius: 4px;
color: var(--acc1);}
/*balise txt libre/credits*/
.qeel_cred { text-align: justify;
height: 45px;
overflow: auto;
margin-top: 4px;
font-size: 12px;}
/*balise contenant groupes*/
.qeel_groups { display: flex;
width: 100%;
border-top: var(--border1);
padding: 7px 0 0;}
/*balise des groupes*/
.group { background: var(--background1);
padding: 3px 10px 2px;
border-radius: 4px;
width: 100%;
text-align: center;
text-transform: uppercase;margin:0 7px 0 0;
font-size: 12px;
font-weight: 600;}
.group:last-child {margin:0;}
/*BALISE QUI CONTIENT NB CONNECTES ET INVITES, MEMBRES CONNECTES ET NB INSCRITS/MESSAGES*/
.qeel2 { width: 29%;}
/*balise nb utilisateurs en ligne*/
.qeel_stats { text-align: center;
text-transform: uppercase;
font-size: 9px;
border-bottom: var(--border1);
padding: 0 0 4px;
letter-spacing: 1px;}
.qeel_stats strong {
font-weight:500;}
/*balise nb inscrits/messages et membres connectes*/
.qeel5 { display: flex;
margin: 7px 0 0;}
/*balise nb inscrits/messages*/
.qeel_sujmess { margin: 0 7px 0 0;
max-width: 85px;}
/*nb inscrits/messages*/
.qeel_sujmess2 { background: var(--background1);
text-align: center;
font-size: 11px;
padding: 0 10px;
border-radius: 7px;
font-weight: 700;
height: 52px;
display: flex;
justify-content: center;
align-items: center; color: var(--acc2);}
.qeel_sujmess2:nth-child(1) {margin: 0 0 5px;
color: var(--acc1);}
/*balise membres connectes*/
.qeel_mc { border: var(--border1);
border-radius: 7px;
padding: 5px;
text-align: justify;
text-transform: lowercase;
width: 100%;}
.qeel_mc br {display:none!important;}
/*balise titre membres co*/
.qeel_mc2 { text-align: center;
background: var(--acc2);
text-transform: uppercase;
font-size: 11px;
color: var(--acc3);
border-radius: 4px;}
/*balise contenant les pseudos des membres co*/
.qeel_mc3 {font-size: 0px;
height: 76px;
margin: 4px 0 0;
border-top: var(--border1);
overflow: auto;}
.qeel_mc3 a {font-size:14px;}
/*balise credits, surtout ne SUPPRIMEZ PAS*/
.qeel_iaf { width: 100%;
border-top: 1px solid #ededed;
margin: 7px 0 0;
padding: 7px 0 0;
text-align: center;
font-size: 7px;
text-transform: uppercase;
letter-spacing: 1px;
color: #d1d1d1;}
/**************** CORPS DE LA PA AVEC GRID *****************/
.pa_1 {
background-color: var(--white);
border-radius: 10px;
display: grid;
text-align: center;
grid-gap: 7px;
grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
padding: 10px;
height: 250px;
}
/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/
/* CONTAINER ACTUALITÉ */
.item_13 { border: 1px solid var(--border);
border-radius: 4px;
grid-area: 1 / 1 / span 3 /span 1;
padding: 4px 4px 0;
text-align: justify;}
.texte_4 { height: 69px;
line-height: 15px;
overflow: auto;}
/* PARTIE STAFF ET ONGLETS */
/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}
/*container des onglets*/
.onglets_pa { display: flex;
flex-direction: column;
height: 75px;
position: relative;
text-align: justify;
width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}
/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
align-items: center;
display: flex;
justify-content: center;
margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}
/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff { border-radius: 50px;
width: 28px;
height: 28px;
padding: 2px;
border: 1px solid var(--border);
object-fit: cover;}
/*décide de la largeur de la séparation entre les images*/
.lab { cursor: pointer;
margin-left: 8px;
}
.lab:hover {
opacity:0.8;
}
/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
box-sizing: border-box;
margin-top: 5px;
opacity: 0;
padding: 4px 0;
position: absolute;
scrollbar-width: none;
text-align: center;
visibility: hidden;
width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
height: 36px;
}
.contenu.visible {
opacity: 1;
visibility: visible;
}
/*balise déco du prénom, nom*/
h { color: var(--accc1);
font-weight: 600;
letter-spacing: 1px;
font-size: 12px;}
/*balise de la partie admin / profil*/
.sous_titre { font-size: 9px;
letter-spacing: 1px;}
/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}
/*container déco de la partie optimisée pour*/
.titre_3 {
background-color: var(--background);
border-radius: 4px;
color: var(--accc1);
font-size: 9px;
font-weight: 500;
margin-bottom: 3px;
padding: 3px 0;
}
/**************** PARTIE CENTRALE (contexte, liens navigation, règles *****************/
/*CONTEXTE ET HOVER*/
/* corps du contexte (container en gros qui tient tout*/
.gif_pa { border: 1px solid var(--border);
border-radius: 7px;
display: inline-block;
grid-area: 1 / 2 / span 5 /span 2;
height: 192px;
line-height: 110%;
overflow: auto;
padding: 3px;
width: 216px; } /* à modifier si vous modifiez la largeur de la grid */
/*container de l'image du contexte*/
.img_pa {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius:7px;
}
/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
height: 192px;
object-fit: cover;
width: 216px; /* même largeur que gif_pa*/
}
/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt { background-color: var(--white);
height: 192px;
left: 108px;
line-height: 16px;
overflow: hidden auto;
position: relative;
padding: 5px;
scrollbar-width: none;
text-align: justify;
top: 96px;
transform: translate(-50%,-50%);
width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */
/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background);
bottom: 0;
height: 0;
left: 0;
overflow: hidden auto;
position: absolute;
scrollbar-width:none;
right: 0;
transition: .5s ease;
width: 100%;
}
.img_pa:hover .overflow {
height: 100%}
/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar {width:0px;height:0px;}
/*PARTIE NAVIGATION / LIENS*/
.item_1 { grid-area: 1 / 4 / span 5 /span 1;}
/*liens navigation*/
.link_pa { background-color: var(--background);
border-radius: 4px;
font-size: 10px;
font-weight: 400;
letter-spacing: 2px;
text-transform:uppercase;
margin-bottom: 6px;
line-height: 10px;
padding: 1px 0;}
/*container avec les règles*/
.item_5 { border: 1px solid var(--border);
border-radius: 4px;
height: 77px;
line-height: 15px;
overflow: auto;
padding: 5px 7px 3px;
text-align: justify;
margin: 8px 0;}
/* PA */
:root {
--accc1: #000;
--accc2:#DD9F8C;
--white: #fff;
--black: #000;
--border: #ededed;
--background: #f1f1f1;
--degrag: #ccc9c7;
}
/**************** CORPS DE LA PA AVEC GRID *****************/
.pa_1 { background-color: var(--white);
border-radius: 10px;
display: grid;
text-align:center;
grid-gap: 7px;
grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
padding: 10px;}
/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/
/* CONTAINER ACTUALITÉ */
.item_13 { border: 1px solid var(--border);
border-radius: 4px;
grid-area: 1 / 1 / span 3 /span 1;
padding: 4px 4px 0;
text-align: justify;}
.texte_4 { height: 69px;
line-height: 15px;
overflow: auto;}
/* PARTIE STAFF ET ONGLETS */
/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}
/*container des onglets*/
.onglets_pa { display: flex;
flex-direction: column;
height: 75px;
position: relative;
text-align: justify;
width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}
/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
align-items: center;
display: flex;
justify-content: center;
margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}
/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff { border-radius: 50px;
width: 28px;
height: 28px;
padding: 2px;
border: 1px solid var(--border);
object-fit: cover;}
/*décide de la largeur de la séparation entre les images*/
.lab { cursor: pointer;
margin-left: 8px;
}
.lab:hover {
opacity:0.8;
}
/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
box-sizing: border-box;
margin-top: 5px;
opacity: 0;
padding: 4px 0;
position: absolute;
scrollbar-width: none;
text-align: center;
visibility: hidden;
width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
height: 36px;
}
.contenu.visible {
opacity: 1;
visibility: visible;
}
/*balise déco du prénom, nom*/
h { color: var(--accc1);
font-weight: 600;
letter-spacing: 1px;
font-size: 12px;}
/*balise de la partie admin / profil*/
.sous_titre { font-size: 9px;
letter-spacing: 1px;}
/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}
/*container déco de la partie optimisée pour*/
.titre_3 {
background-color: var(--background);
border-radius: 4px;
color: var(--accc1);
font-size: 9px;
font-weight: 500;
margin-bottom: 3px;
padding: 3px 0;
}
/**************** PARTIE DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) *****************/
/*TIMELINE*/
/*container timeline*/
.item_8 { border: 1px solid var(--border);
border-radius: 5px;
grid-area: 1 / 5 / span 2 /span 2;
height: 57px;
padding: 2px 5px;
text-align: justify;}
/*container texte timeline*/
.texte_1 { height: 43px;
line-height: 13px;
overflow: auto;
text-align: justify;}
/*partie premiere version signée xx*/
.titre_4 { background-color: var(--background);
border-radius: 4px;
color: var(--accc1);
font-size: 9px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;}
/*PARTIE PÉRIODE DE JEU*/
/*container période de jeu*/
.item_9 { border-bottom: 1px solid var(--border);
color: var(--accc1);
font-size: 11px;
font-weight: 600;
grid-area: 3 / 5 / span 1 /span 2;
letter-spacing: 1px;
margin-top: -2px;
text-transform: uppercase;}
/*déco de texte pour rendre rose*/
j {color:var(--accc2);
font-style: italic;
}
/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/
/*container du tout*/
.item_10 { grid-area: 4 / 5 / span 2 /span 2;}
/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}
/*container des membres du mois (colonne gauche)*/
.float_pa1 { float: left;
width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
height: 56px;}
/*style des images des membres du mois*/
.mdm1, .mdm2 {
border: 1px solid var(--border);
border-radius: 10px;
height: 30px;
object-fit: cover;
padding: 3px;
width: 21px;
}
.mdm2 {margin:0 5px;}
/*container de la partie nous soutenir*/
.float_pa2 {float: left;
height: 56px;
margin-left: 4px;
line-height: 12px;
width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}
/*icons discord et tumblr*/
.discord_pa { width: 21px;}
/*PARTIE PARTENARIATS*/
/*container de la partie partenariats*/
.item_11 { border-top: 1px solid var(--border);
margin-top: 5px;
padding-top: 3px;}
/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
border-width: 1px;
border-radius: 5px;
border: 1px solid var(--border);
width: 175px;
letter-spacing: 1px;
font-size: 8px;
text-transform: uppercase;}
/*LES TITRES AVEC DÉGRADES ROSE ET NOIR ET LES DÉCOS TEXTE*/
.titre_1, .titre_2 {
border-radius: 4px;
color: var(--white);
font-size: 9px;
letter-spacing: 1px;
margin-bottom: 4px;
text-align: center;
text-transform: uppercase;
}
.titre_1 {margin-bottom: 5px;background-image: linear-gradient(-45deg,var(--degrag),var(--accc2))!important;} /*dégradé rose*/
.titre_2 {background-image: linear-gradient(-45deg,var(--degrag),var(--accc1))!important;} /*dégradé noir*/
w,y {font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform:uppercase;
}
w { color: var(--accc2);}
y { color: var(--accc1);}
/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 {
grid-area: 6 / 1 / span 1 /span 6;
font-size: 7px;
border-top: 1px solid var(--border);
letter-spacing: 1px;
padding-top: 5px;
color: #d1d1d1;
margin-top: 16px;
}
/************************* LISTE DES SUJETS *************************/
/***********PARTIE AU-DESSUS ET EN-DESSOUS LISTE DES SUJETS***********/
/*Boutons nouv/rep et navigation*/
.pro_nav { display: flex;
font-size: 0;
margin: 15px 0;
align-items:center;}
/*liens dans navigation*/
.pro_nav a { font-size: 12px;
text-transform: uppercase;
margin: 0 10px 0 0;
font-weight: 600;
padding: 1px 0 0;}
/*styling bouton nouv/rep*/
.pro_nouvrep a { background: var(--background3);
color: var(--acc3)!important;
padding: 2px 10px;
border-radius: 6px;
font-weight: 700;
letter-spacing: 1px;
font-size: 14px; transition: .5s ease;}
.pro_nouvrep { margin: 0 10px 0 0;
}
.pro_nouvrep a:nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.pro_nouvrep a:nth-child(1):hover {background: var(--background3); transition: .5s ease;
color: var(--acc3)!important;}
/*liens navigation à côté de bouton rep/nouv*/
.liens_suj { background: var(--background2);
padding: 2px 10px 3px;
border-radius: 7px;
display: flex;
justify-content: flex-start;
font-size: 0;
align-items: center;}
.liens_suj a {
margin: 0 15px 0 0;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;}
/*la pagination*/
.pagination { float: none;
display: flex;
justify-content: flex-end;
font-size: 0px;
margin:0;}
.pagination2 {
text-transform: uppercase;
}
.pagination a, .pagination span {font-size:12px;}
.pagination a { padding: 0 10px 0;}
.pagination a strong {font-weight:500;}
.pagination span strong { background: var(--acc2);
padding: 0 5px;
border: none;
color: var(--acc3);
font-size: 10px;
border-radius: 3px;
line-height: 16px;
width: auto;}
.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active
{ color: var(--acc1);
background: var(--background1);
padding: 0 5px;
border: none;
font-size: 10px;
border-radius: 3px;
line-height: 16px;
width: auto;}
.pagination span a.pag-img {vertical-align: baseline;}
.pagination span a.pag-img img { height: 9px;
margin-top: 0;}
/*titre de liste des sujets*/
.cat_titre { background: var(--background3);
border-radius: 7px 7px 0 0;
color: #fff;
font-weight: 300;
letter-spacing: 3px;
margin-top: 14px;
padding: 9px 20px;
text-transform: uppercase;}
/*********** LES SUJETS ***********/
/*Div qui contient toutes les balises*/
.af_suj1 { display: flex;
background: var(--background2);
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
height: 74px;
margin: 0 0 7px;}
/*partie image new/no new*/
.af_suj2 { width: 57px;
margin: 0 7px 0 0;}
.af_suj2 img { width: 57px;
height: 54px;
object-fit: cover;
border-radius: 10px;}
/*partie réponses / vues*/
.af_suj3 { width: 9%;
margin: 0 7px 0 0}
.suj_stat {background: var(--background1);
border-radius: 7px;
display: flex;
height: 25px;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
color: var(--acc2);}
.suj_stat:nth-child(1) {
margin:0 0 4px;
color:var(--acc1);}
/*partie titre du sujet, auteur, pagination & description*/
.af_suj4 {width: 58%;}
/*titre du sujet*/
.suj_titre { border-bottom: var(--border1);
padding: 0 0 4px;
margin: 0 0 4px;}
a.topictitle { color: var(--acc1);
font-weight: 600;
font-size: 15px;
text-transform: lowercase;
line-height: 13px;}
a.topictitle:hover {
text-decoration:none;}
ba { color: var(--acc2);
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 13px;}
.suj_titre img {margin:0 5px 0 0;}
/*partie auteur et pagination*/
.af_suj5 { display: flex;}
.suj_auteur { width: 50%;
font-size: 11px;
text-transform: uppercase;}
.suj_pagination { text-transform: uppercase;
font-size: 0px;
width: 50%;
text-align: right;
}
.suj_pagination a { font-size: 11px;
background: var(--background1);
padding: 0 9px;
border-radius: 4px;
margin: 0 3px 0 0;}
.suj_pagination br, .suj_pagination img {display:none!important;}
.suj_pagination .gensmall {font-size:0px!important;}
/*description du sujet*/
.suj_description { color: var(--acc1);
font-style: italic;
font-size: 13px;}
/*partie avatar dernier posteur*/
.af_suj6 { border: var(--border1);
padding: 3px;
width: 50px;
height: 50px;
border-radius: 60px;
box-sizing: border-box;
margin: auto 7px;}
.af_suj6 img {width: 41px;
height: 42px;
border-radius: 51px;
object-fit: cover;}
/*partie dernier message et dernier posteur pseudo*/
.af_suj7 {width: 17%;
display: flex;
flex-wrap: wrap;
font-size: 14px;
align-items: center;
text-transform: lowercase;
margin: auto 0;}
.af_suj7 span {
padding:0 10px 0 0;
}
.af_suj7 img {margin:0 0 0 3px;}
/*********** AFFICHAGE SUJETS SI PAS DE SUJETS ***********/
li.row {
border: none;
text-align: center;
list-style: none;
padding: 9px;
text-transform: uppercase;
color: var(--acc1);
letter-spacing: 1px;
border-radius: 0 0 10px 10px;
font-size:14px;
background:var(--background2);
}
li.row:hover {
background-color: var(--background2);
}
:root {
--acc1: #000;
--acc2:#DD9F8C;
--acc3:#fff;
--white: #fff;
--black: #000;
--border: #ededed;
--border1: 1px solid #ededed;
--background1: #f1f1f1;
--background2: #ffffff;
--background3: #000000;
--degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
--degrag: #ccc9c7;
--gr1: #000;
--gr2: #DD9F8C;
--gr3:#6CB29F;
--gr4: #74ABB6;
--gr5: #D7A329;
}
/***************************** AFFICHAGE DUN PROFIL *****************************/
/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/
.spro_1 {
background: var(--background2);
padding: 10px;
border-radius: 10px;
display: flex;
margin:20px 0;
}
/***** AFFICHAGE À GAUCHE (rang et avatar) *****/
/*Div à gauche qui contient avatar et rang*/
.spro_2 {
background: var(--background1);
padding: 10px;
border-radius: 10px;
width: 232px;
box-sizing: border-box;
}
/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
background: var(--background2);
flex-wrap: wrap;
margin: 0 0 7px;
border-radius: 10px 30px 30px 10px;
}
/*Div qui contient le pseudo*/
.spro_username { padding: 4px 0 0 12px;
border-bottom: var(--border1);
text-align: left;
font-size: 15px;
height: 31px;
box-sizing: border-box;
width: 100%;}
/*Div contenant le rang et limage*/
.spro_rang2 {
display: flex;
width: 100%;
justify-content: flex-end;
font-size: 12px;
line-height: 28px;
}
/*Styling de limage*/
.spro_rang2 img { width: 60px;
height: 60px;
border-radius: 100%;
padding: 5px;
box-sizing: border-box;
background: var(--background2);
border: var(--border1);
margin: -31px 0 0 7px;
}
/*Div contenant lavatar*/
.spro_avatar {
background: var(--background2);
padding: 6px;
border-radius: 10px;
box-sizing: border-box;
}
/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
max-width: 200px;}
/***** AFFICHAGE À DROITE (derniere visite, images contact, infos, feuille perso) *****/
/*Div contenant le tout*/
.spro_3 {
margin: 0 0 0 7px;
width: 100%;
}
/*Div contenant les infos et la feuille de perso*/
.spro_5 {display: flex;}
/*Div contenant lastvisit, infos, etc.*/
.spro_6 {
width: 70%;
margin: 0 7px 0 0;
}
/*Div de la derniere connexion*/
.spro_lastvisit { margin: 0 0 7px;
background: var(--background1);
text-align: center;
text-transform: uppercase;
color: var(--acc2);
font-weight: 600;
letter-spacing: 1px;
line-height: 24px;
border-radius: 6px;
font-size: 14px;
}
/*Div contenant contact et les infos*/
.spro_profile { border: var(--border1);
padding: 10px;
border-radius: 10px;
}
/*Div contenant le en ligne et les images contact*/
.spro_contact { border-bottom: var(--border1);
padding: 0 0 7px;
margin: 0 0 7px;
display: flex;
text-transform: uppercase;
justify-content: space-evenly;
font-weight: 600;
color: var(--acc1);
font-size: 14px;
align-items: center;
}
/*Styling images contact*/
.spro_contact img {
width: 23px;
background: var(--background1);
padding: 3px;
box-sizing: border-box;
border-radius: 5px;
}
/*Div contenant toutes les infos*/
.spro_info { height: 292px;
overflow: auto;}
.spro_info img {
max-width:200px;
border-radius:10px;
}
/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}
dl.details dt {
text-align: left;
width: 12em;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
color: var(--acc2);
}
dl.details dd {
margin: 0 0 .5em 12em;
font-size:14px;
line-height:22px;
}
/*Div contenant la feuille de personnage*/
.spro_4 { width: 30%;
border: var(--border1);
padding: 10px;
box-sizing: border-box;
border-radius: 10px;}
/*Div contenant les liens en bas*/
.spro_links { display: flex;
margin: 7px 0 0;
}
/*Styling des liens*/
.spro_links a {
width: 100%;
line-height: 29px;
background: var(--background1);
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
border-radius: 10px;
font-size: 12px;
}
.spro_links a:nth-child(2) {
margin:0 7px;
}
/*Div contenant feuille de personnage*/
.spro_4 { width: 30%;
border: var(--border1);
padding: 10px;
box-sizing: border-box;
border-radius: 10px;}
/*Div titre feuille de personnage*/
.spro_frpgtitle {
background-image: var(--degrade);
color: var(--acc3);
font-size: 12px;
text-align: center;
font-weight: 600;
border-radius: 4px;
}
/*Div avec scroll pour feuille personnage*/
.spro_frpg {
margin: 7px 0 0;
height: 335px;
overflow: auto;
border-top: var(--border1);
box-sizing: border-box;
padding: 10px 0 0;
}
/*Styling des champs*/
frpg {font-weight: 700;
letter-spacing: 1px;
color: var(--acc1);
text-transform: uppercase;
font-size: 13px;}
/*Styling où le texte se trouve*/
.spro_frpg textarea {
width: 100%!important;
height: 93px!important;
border: var(--border1);
border-radius: 10px;
margin: 10px 0 12px;
overflow: auto;
box-sizing: border-box;
}
.inputbox:hover {
border: var(--border1);
}
.memberlist_t {
width: 850px !important;
height: 50px;
background: #cbcbcb;
border-radius: 10px;
margin: auto !important;
text-align: center;
color: white !important;
font: 11px roboto !important;
text-transform: uppercase;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 20px;
margin-bottom: 10px;
}
.panelarte {
-webkit-box-shadow: none;
box-shadow: none;
width: 850px;
margin: auto;
background: none;
}
.panelarte h2 {
border: none;
color: #cbcbcb;
}
.memberlist_arte {
width: 850px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: auto;
padding: 0;
}
.one_member {
width: 275px;
height: 120px;
background: #95b8d9;
border-radius: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
position: relative;
margin-bottom: 12px;
overflow: hidden;
}
.one_member a, .one_member a:hover {
text-decoration: none;
color: white !important;
}
.one_member:before {
content: " ";
width: 120px;
height: 180px;
position: absolute;
top: 0;
left: 0;
background: rgba(251,251,251,0.2);
z-index: 0;
-webkit-clip-path: circle(50% at 29% 22%);
clip-path: circle(50% at 29% 22%);
}
.avatar_member_list {
width: 70px;
height: 70px;
z-index: 99;
}
.avatar_member_list img {
width: 70px;
height: 70px;
border-radius: 50%;
border: 5px solid white;
-o-object-fit: cover;
object-fit: cover;
}
.pseudo_memberlist {
margin: 0;
width: 155px;
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 99;
}
.pseudo_memberlist > h2 {
color: white;
font: 12px roboto;
text-transform: uppercase;
font-weight: 500;
border-left: 2px solid white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 5px;
width: 100%;
}
.pseudo_memberlist div {
color: white;
font: 9px roboto;
font-weight: 400;
margin-top: -40px;
font-style: oblique;
margin-bottom: -5px;
text-transform: lowercase;
}
.pseudo_memberlist > h2 strong {
color: white;
font-weight: 500;
}
.stats_link_members {
width: 155px;
margin-left: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: -5px;
}
.stats_link_members span {
display: block;
font: 9px source code pro;
color: white;
text-transform: uppercase;
margin: 0 0px;}
.one_member a[href^="/privmsg"]:before{
content:'MP';
}
.stats_link_members a[href^="/privmsg"] img{
display: none;
}
.stats_link_members span:after {
content: "|";
margin: 0 3px;
}
.stats_link_members span:last-child:after {
content: " ";
}
/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */
#wrap-topic {
width: 800px;
margin: auto;
display: flex;
flex-flow: wrap;
}
#header-topic {
background-color: #f1f0f4;
width: 100%;
color: #c07c59;
font-size: 11px;
font-style: italic;
line-height: 27px;
height: 80px;
display: flex;
align-content: center;
flex-flow: wrap;
justify-content: center;
}
#header-topic .sousligne {
font: 11px 'Roboto', sans-serif;
font-style: italic;
padding: 0;
margin: 0;
text-transform: uppercase;
display: inline-block;
}
#header-topic a:not(:first-of-type) {
color: #c07c59;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
text-transform: uppercase;
font-size: 11px;
letter-spacing: -0.5px;
}
#header-topic a:first-of-type {
color: #262929;
font-family: 'DM Serif Display', serif;
font-size: 23px;
text-transform: uppercase;
font-style: normal;
line-height: 30px;
width: 100%;
text-align: center;
}
.new-reply-topic,
.topic-pagination {
display: flex;
align-content: center;
flex-flow: wrap;
}
.topic-pagination,
#pagination_memberlist {
margin-left: auto;
text-transform: uppercase;
font-family: initial;
font: 11px 'Roboto', sans-serif;
letter-spacing: -1px;
color: transparent;
}
.topic-pagination>div,
#pagination_memberlist>div {
margin: 20px 0 5px;
}
.topic-pagination>div a,
#pagination_memberlist>div a {
color: #c07c59;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
text-transform: lowercase;
font-style: italic;
letter-spacing: -0.5px;
}
.new-reply-topic a {
padding: 28px 17px 28px 25px;
}
.topic-pagination span strong,
#pagination_memberlist strong {
padding: 0 0 0 5px;
}
.topic-pagination span,
#pagination_memberlist span {
color: #262929;
}
.topic-pagination strong,
#pagination_memberlist strong {
color: #c07c59;
padding: 0 2px;
}
.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
display: none;
}
.header-message {
width: 100%;
height: 86px;
display: flex;
flex-flow: wrap;
justify-content: flex-end;
align-content: center;
position: relative;
padding: 0 50px 0 0;
color: #f6f5f8;
font: 10px 'Roboto', sans-serif;
font-weight: lighter;
font-style: italic;
background-color: #262929;
}
.header-message div {
position: absolute;
left: 35px;
bottom: 22px;
}
.header-message span,
.header-message a[href*="/u"] {
width: 100%;
text-align: right;
}
.header-message span {
font: 20px 'DM Serif Display', serif;
font-style: normal;
margin-right: -20px;
}
.header-message span,
.header-message>a {
width: 100%;
}
.header-message strong {
color: #f6f5f8;
font-weight: 100;
}
.header-message>div img {
padding: 0 2px;
}
.wrap-topic-content {
background-color: #F1F0F4;
display: flex;
flex-flow: wrap;
justify-content: space-evenly;
width: 100%;
padding: 19px 0;
}
.topic-content {
width: 538px;
display: flex;
flex-flow: wrap;
justify-content: space-between;
align-content: flex-start;
padding-top: 6px;
}
.topic-content,
.topic-content>a {
color: #C3C3C3;
font: 10px 'Roboto', sans-serif;
font-weight: lighter;
font-style: italic;
}
.topic-content>div a {
font-weight: bold !important;
}
.topic-content>div {
color: #262929;
font-style: normal;
text-align: justify;
font-weight: normal;
font-size: 12px;
border-top: 1px solid #C3C3C3;
padding: 18px 0;
margin-top: 8px;
width: 100%;
}
.topic-content>div img {
max-width: 100%;
}
.topic-avatar {
border: 2px solid #F6F5F8;
overflow: hidden;
width: 200px;
height: 320px;
position: relative;
}
.topic-avatar>div img {
max-width: 100%;
}
.topic-avatar>a img {
width: 200px;
}
.topic-avatar>div {
position: absolute;
top: 396px;
background-color: #ffffffe0;
width: 200px;
height: 320px;
transition: all 1s;
padding: 5px 20px 10px;
font: 11px 'Roboto', sans-serif;
letter-spacing: -0.5px;
overflow-y: auto;
overflow-x: hidden;
}
.topic-avatar:hover>div {
top: 0;
}
.feuille-de-perso a[href*="/u"],
.title-profil {
font: 30px 'Hamilton', cursive;
color: #c07c59;
text-align: right;
display: block;
height: 32px;
text-transform: lowercase;
white-space: nowrap;
}
.topic-avatar .label {
text-transform: uppercase;
font-weight: bold;
line-height: 15px;
color: #262929
}
.topic-avatar>div .label span,
.feuille-de-perso {
color: #262929 !important;
}
.feuille-de-perso textarea {
min-width: 100%;
max-width: 100%;
display: block;
height: 50px;
background-color: #F6F5F8;
padding: 6px;
overflow: auto;
margin-bottom: 10px;
font-size: 10px;
text-align: justify;
line-height: 12px;
}
/*.feuille-de-perso br { display: none; }*/
.topic-avatar .contact_link_p {
position: sticky;
bottom: 5px;
margin: 10px -10px 0 0;
font-size: 0;
text-align: right;
}
.topic-avatar .contact_link_p a:first-child {
padding-right: 7px;
}
.separation {
width: 555px;
margin: auto;
height: 1px;
background-color: #C3C3C3;
margin: 15px 0 2px;
}
.signature-topic {
width: 100%;
max-height: 280px;
padding: 5px;
overflow: auto;
}
.signature-topic img {
max-width: 100%;
}
#wrap-topic a[name="quickreply"]+.h3 {
display: none;
}
#wrap-topic form#quick_reply {
width: 100%;
}
#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
background-color: #F1F0F4 !important;
width: 100% !important;
font-family: 'Roboto', sans-serif;
}
#wrap-topic #quick_reply #textarea_content {
box-shadow: none;
}
#wrap-topic #quick_reply #textarea_content+div input {
background-color: #ECEBF0;
box-shadow: none;
border-radius: 0;
font: 15px 'DM Serif Display', serif;
color: #c07c59;
text-transform: uppercase;
margin: 0px 10px 10px 10px;
height: 35px;
padding: 0 15px;
}
#topic-form label {
font-size: 0;
}
#topic-form select {
background-color: #F1F0F4;
border: none;
font-size: 10px;
padding: 3px 5px;
}
#topic-form fieldset {
margin: 55px 0 28px;
}
#topic-form input {
background-color: #ECEBF0;
box-shadow: none;
border-radius: 0;
font: 12px 'DM Serif Display', serif;
color: #c07c59;
text-transform: uppercase;
margin: 0 5px;
height: 21px;
padding: 0 5px;
}
/* Affichage du bloc des permissions */
.permissions {
width: 100%;
background-color: #F1F0F4;
padding: 20px 25px;
font: 11px 'Roboto', sans-serif;
}
.permissions a {
color: #c07c59;
}
.permissions .h3 {
border: none;
font: 13px 'DM Serif Display', serif;
text-transform: uppercase;
margin-bottom: 5px;
}
/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
margin: 0 0 20px;
background: none;
font: 12px 'Roboto', sans-serif;
padding: 0;
border: none;
}
blockquote {
padding: 10px 30px;
}
dl.codebox code,
.spoiler dd,
.hidecode {
background-color: #F6F5F8 !important;
padding: 10px 30px !important;
}
.hidecode dt,
dl.codebox::before,
blockquote::before {
display: none !important;
}
dl.codebox dt,
cite {
border: none;
color: #C38567;
font: 11px 'Roboto', sans-serif;
text-transform: uppercase;
margin: 5px 0 8px 11px;
font-weight: 500;
}
.spoiler dt {
margin-bottom: 3px !important;
}
dl.codebox code {
font-size: 12px;
}
/* --------- FIN AFFICHAGE MESSAGES --------- */
/********************************************************* NAVIGATION ET HEADER *********************************************************/
/* NAVIGATION */
.navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f4f4f4;
border-bottom: 2px solid #475944;
z-index: 99;
padding: 1rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
color: #8f8a9e;
text-transform: uppercase;
}
.navigation img {
display: none;
}
.barre_nav {
display: flex;
margin: auto;
}
.barre_nav li {
list-style-type: none;
padding: 0 .5rem;
}
.barre_nav .mainmenu {
font-weight: bold;
font-size: 10px;
color: #8f8a9e;
}
/* BOUTONS HAUT BAS */
.up_down {
color: #8f8a9e;
font-size: 10px;
font-weight: 700;
padding: 0 2rem 0 0;
position: absolute;
right: 0;
}
.up_down a:first-child {
color: #429679;
}
.up_down a:last-child {
color: #b88749;
}
/* CACHER LA DESCRIPTION */
#site-desc {
display: none;
}
/* HEADER */
.heabder_bann {
text-align:center;
}
.heabder_bann img {
width:100%;
}
ul.topiclist.bg_none {
background: #e2e2e2;
}
#privmsgs-menu {
float: none !important;
padding: 0 9px;
}
#picture_legend, #privmsgs-menu {
border-radius: 3px;
box-shadow: none !important;
font-size: 1.3rem;
margin-bottom: 24px;
overflow: hidden;
}
#privmsgs-menu a {
color:black;
text-transform:uppercase;
font:11px calibri;
letter-spacing:1px;
}
.mp_bouton{
background: #cdb65c;
width: 49%;
margin: 0px 5px 0px 0px;
outline: 1px solid #9e8b3e;
outline-offset: -4px;
padding: 4px;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #e8e8e8;
font: 11px calibri;
text-transform: uppercase;
text-align: center;
}
.mp_bouton a {
color: #1e1e1e;
display: block;
}
.total_liste_mp {
background: #e8e8e8;
padding: 10px;
height: 69px;
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.title_mp {
width: 500px;
height: 18px;
border-bottom: solid 1px #cdb65c;
padding: 10px 0px 15px 0px;
}
.title_mp a {
color:black;
font:10px calibri;
text-transform:uppercase;
}
.blok_mp {
width: 286px;
padding: 10px 30px 0px 30px;
font: 10px calibri;
text-transform: uppercase;
height: 30px;
}
.icon_mp {
width: 100px;
margin-top: -10px;
}
.heabder_bann {
text-align:center;
}
.heabder_bann img {
width:100%;
}
:root{
--main-color:#555;
--snd-color:#fff;
--third-color:#888;
--four-color:#FCC5A0;
--five-color:#F28977;
--five-v-color:#FAC0B6;
--six-color:#B9919A;
--six-v-color:#DAC5CA;
--font1: 'Source Sans Pro', sans-serif;
--font2:'Playfair Display', serif;
--fontjournal:'Alfa Slab One', cursive;
}
.degr, .fondgen h3, .fondgen.bottin strong{ background: var(--five-color);
background: -webkit-gradient(left top, right top, color-stop(0%, var(--five-color)), color-stop(100%, var(--six-color)));
background: -webkit-linear-gradient(left, var(--five-color) 0%, var(--six-color) 100%);
background: linear-gradient(to right, var(--five-color) 0%, var(--six-color) 100%);
position:relative; z-index:20;
}
/* Fiche Générale du forum par KoalaVolant */
.gengen{ width:80%; margin:0 auto; padding:5px; }
.gengen *{ box-sizing:border-box; }
/* Image de la fiche + Titre */
.entgen{ position:relative; width:100%; height:200px; }
.entgen img{ width:100%; height:200px; object-fit:cover; border:double 7px var(--snd-color); }
.entgen h1{ font-family:var(--font2); font-size:22px; text-align:center; line-height:25px; padding:13px; color:var(--main-color);
width:80%; text-align:center; padding:5px; background-color:var(--snd-color); position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.entgen h1 strong{ font-size:12px; line-height:13px; font-family:var(--font1); letter-spacing:1px; color:var(--six-color); }
/* Reste */
.fondgen{ background-color:#fff;text-align:justify; color:var(--main-color); padding:20px; font-size:12px; line-height:1.4em; }
.fondgen h3{ text-align:center; padding:5px; font-family:var(--font1); color:var(--snd-color); width:85%; position:relative; left:50%; transform:translateX(-50%); margin:5px 0px;
font-size:15px; letter-spacing:2px; font-weight:normal; line-height:18px; }
.fondgen img{ width:80%; max-height:200px; object-fit:cover; border:3px solid var(--six-color); padding:2px; position:relative; left:50%; transform:translateX(-50%); }
/* Liste */
.gengen ul{ margin:0px; padding:0px; }
.gengen ul li{ list-style-type : none !important; margin:5px 0px;}
.gengen li:before{ content:'•'; padding-right:5px; color:var(--five-color) !important; }
/* Presentation Staff */
.debstaff{ display:flex; justify-content:space-between; align-items:center; }
.fondgen.staff h2{ font-family:var(--font2); font-size:18px; text-transform:uppercase; margin:0px;}
.fondgen.staff h3{ width:100%; font-size:13px; position:initial; transform:none; margin:0px; }
.debstaff img{ width:100%; height:100px; position:initial; transform:none;}
.sta-left{ width:59%; }
.sta-right{ width:40%; }
.debstaff.reverse{ flex-direction:row-reverse; }
.debstaff.reverse h2{ text-align:right; }
}
Re: Affichage boîte MP
Voici une correction, si le bloc est toujours d'une largeur supérieure aux 900px demandés, c'est qu'il s'agit d'un autre souci : un élément sur la page qui l'élargit, à l'intérieur ou à l'extérieur de la boîte des mp. A défaut pour les invités d'y avoir accès, peut être pourriez-vous faire une capture de la page entière pour qu'on tente de l'identifier à l'oeil.
partie 1 :
partie 1 :
- Code:
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }
#wrap {
box-sizing: content-box;
}
:root {
--acc1: #000;
--acc2:#DD9F8C;
--acc3:#fff;
--white: #fff;
--black: #000;
--border: #ededed;
--border1: 1px solid #ededed;
--background1: #f1f1f1;
--background2: #ffffff;
--background3: #000000;
--degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
--degrag: #ccc9c7;
}
/*********** FICHE DE PREDEFINIS - ARTEMIS - POUR EPICODE ET ARTIFICES ***********/
.presentation-artemis {
--police-texte: "Roboto", sans-serif;
--couleur-foncee-a: #090402;
--couleur-pastel: #ccaf9b;
--fond-fiche: #f2f2f2;
--fond-avatar: #fbfafa;
width: 85%;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 45px 285px 210px 180px 1fr;
gap: 10px;
margin: 0 auto 15px;
background: var(--fond-fiche);
border: 1px solid rgba(0, 0, 0, 0.2);
box-sizing: border-box;
padding: 10px;
font: 13px var(--police-texte);
position: relative;
}
.avatar-infos {
grid-column: 1/2;
grid-row: 1/3;
background: var(--fond-avatar);
padding: 10px;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 0;
position: relative;
overflow: hidden;
}
.presentation-artemis > .avatar-infos img,
.icone-lien img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: ease-in-out 0.8s;
}
.avatar-infos:after {
content: " ";
background: linear-gradient(to bottom, transparent, 70%, var(--couleur-pastel));
width: calc(100% - 20px);
height: calc(100% - 20px);
position: absolute;
bottom: 10px;
right: 10px;
mix-blend-mode: multiply;
transition: all 0.8s;
}
.presentation-artemis > .avatar-infos:hover:after {
opacity: 0;
transition: all 0.8s;
}
.presentation-artemis > .avatar-infos:hover img {
transform: scale(1.7) rotate(10deg);
-webkit-filter: none;
filter: none;
transition: ease-in-out 0.8s;
}
.avatar-infos span {
background: var(--couleur-pastel);
color: var(--couleur-foncee-a);
display: inline-block;
padding: 3px 10px;
position: absolute;
top: 20px;
left: 20px;
text-transform: uppercase;
font-size: 9px;
font-weight: 700;
}
.presentation-artemis > h1 {
margin: 0;
padding: 0;
grid-column: 2/3;
grid-row: 1/2;
background: var(--couleur-foncee-a);
border-top: 2px solid var(--couleur-pastel);
border-bottom: 2px solid var(--couleur-pastel);
color: var(--couleur-pastel);
text-align: center;
display: grid;
place-content: center;
font-family: "Yeseva One", serif;
font-weight: normal;
font-size: 18px;
}
.presentation-artemis > dl {
grid-column: 2/3;
grid-row: 2/3;
margin: -10px 0 0 0;
display: flex;
flex-wrap: wrap;
}
.presentation-artemis > dl > dd {
border: 1px solid var(--couleur-pastel);
margin: 0;
padding: 15px 5px 10px 10px;
height: 44px;
width: 100%;
overflow: auto;
font-size: 11px;
text-align: justify;
box-sizing: border-box;
}
.presentation-artemis > dl dt {
background: var(--fond-fiche);
position: relative;
top: 7px;
left: 5px;
padding: 0 5px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
}
.caractere-arte {
grid-column: 1/2;
grid-row: 3/4;
background: var(--couleur-pastel);
padding: 10px;
}
.caractere-arte h2,
.infos-arte h2 {
text-align: right;
font-weight: bold;
margin: 0;
padding: 0;
font-size: 13px;
text-transform: uppercase;
position: relative;
border: none;
}
.caractere-arte h2 {
color: var(--couleur-foncee-a);
}
.infos-arte h2 {
color: var(--couleur-pastel);
}
.caractere-arte h2:after,
.infos-arte h2:after {
content: " ";
width: 70px;
height: 3px;
position: absolute;
right: 0;
bottom: -5px;
}
.caractere-arte h2:after {
background: var(--couleur-foncee-a);
}
.infos-arte h2:after {
background: var(--couleur-pastel);
}
.caractere-arte p,
.infos-arte p {
font-family: var(--police-texte);
font-weight: 100;
text-align: justify;
height: 80%;
overflow: auto;
margin: 20px auto;
font-size: 12px;
line-height: 16px;
padding: 0 5px;
}
.caractere-arte p {
color: var(--couleur-foncee-a);
}
.infos-arte p {
color: var(--couleur-pastel);
}
.infos-arte {
grid-column: 2/3;
grid-row: 3/4;
background: var(--couleur-foncee-a);
padding: 10px;
}
.histoire-arte {
grid-column: 1/3;
grid-row: 4/5;
border: 1px solid var(--couleur-pastel);
padding: 15px 15px;
text-align: justify;
font-weight: 100;
font-size: 12px;
line-height: 16px;
color: rgba(0, 0, 0, 0.9);
max-height: 180px;
overflow: auto;
}
.histoire-arte span {
background: var(--couleur-pastel);
padding: 2px 5px;
text-transform: uppercase;
font-weight: 700;
color: var(--couleur-foncee-a);
}
.liens-predefinis {
display: grid;
gap: 10px;
grid-column: 1/3;
grid-template-columns: 30px 1fr;
grid-template-rows: 1fr;
}
.liens-predefinis > h3 {
all: unset;
grid-column: 1/2;
grid-row: 1/2;
background: var(--couleur-pastel);
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
display: grid;
place-content: center;
text-transform: uppercase;
}
.un-lien-arte {
width: 100%;
display: flex;
gap: 0px 10px;
justify-content: space-between;
overflow: hidden;
grid-column: 2/3;
margin-bottom: 10px;
}
.un-lien-arte:last-child {
margin: 0;
}
.icone-lien {
width: 120px;
height: 120px;
margin: 0;
border: 1px solid rgba(0, 0, 0, 0.2);
background: var(--fond-avatar);
padding: 10px;
box-sizing: border-box;
overflow: hidden;
}
.bloc-droite {
width: calc(100% - 120px);
}
.pseudo-lien {
margin: 0;
border-bottom: 4px solid var(--couleur-pastel);
width: 100%;
font-size: 18px;
text-transform: uppercase;
color: var(--couleur-foncee-a);
font-weight: 700;
}
.bloc-droite p {
height: 58px;
overflow: auto;
font-size: 11px;
margin: 8px 0;
text-align: justify;
}
.bloc-droite > span {
background: var(--couleur-foncee-a);
color: var(--fond-fiche);
font-size: 10px;
text-transform: uppercase;
height: 20px;
display: grid;
place-content: center;
}
.credit-artemis {
position: absolute;
text-align: center;
bottom: -15px;
font-size: 10px;
}
.credit-artemis a {
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
}
/********************************************************************* CATÉGORIES */
/*liens voir nouveaux messages, supp cookies (en haut et en bas des catés)*/
.liens_pa {
background: var(--background2);
padding: 5px 0 7px;
border-radius: 7px;
margin-top: 9px;
text-align: center;
}
.liens_pa a {
background: var(--background1);
border-radius: 7px;
padding: 1px 10px;
margin: 0 10px;
text-transform: uppercase;
font-size: 10px;
}
/*Titre de la catégorie*/
.cat_titre { background: var(--background3);
border-radius: 7px 7px 0 0;
color: #fff;
font-weight: 300;
letter-spacing: 3px;
margin-top: 14px;
padding: 9px 20px;
text-transform: uppercase;}
.cat_titre h2 {color: #fff;
font-size: 14px;
font-weight: 300;
margin: 0;}
/*Rassemblement de balises répétitives*/
#cate {margin: 0 7px 0 0;
border-radius: 7px;}
.liensforums, .imgnew, .txt_derniermess {
border: var(--border1); }
/*Corps des catégories*/
.cat_container { background: var(--background2);
border-radius: 7px;
height: 114px;/*à modifier seulement si vous la voulez plus haute*/
padding: 10px;
margin: 0 0 4px;
display: flex;
font-size:14px;}
/*Partie liens forums*/
.liensforums { font-size: 0px;
overflow: auto;
width: 18%;
padding: 5px;
text-align: left;}
#liensforums2 a {
display: block;
text-transform: lowercase;
font-size: 14px;
}
#liensforums2 a::before {
color: #DD9F8C;
content: " ● ";
}
/*Partie image new, no new etc.*/
.imgnew { padding: 3px;
width: 5%;}
.imgnew img { border-radius: 7px;
height: 100%;
object-fit: cover;
width: 100%;}
/*Partie titre du forum et description*/
.titredescriforum {
width: 65%;}
/*titre forum*/
.titreforum { background: var(--background1);
border-radius: 7px;
padding-left: 13px;
text-transform: lowercase;
text-align: left;}
.titreforum a { font-size: 15px;
font-weight: 700;
color: #000;}
/*description*/
.descricat { height: 67px; /*à modifier si vous changer la height de .cat_container*/
margin-top: 4px;
text-align: justify;
overflow: auto;
line-height: 20px;
border-top: var(--border1);}
/*Partie nb de sujets et messages*/
.nbsujnotes { display: flex;
flex-wrap: wrap;
max-width: 60px;}
.nbsujnotes2 { background: var(--background1);
border-radius: 4px;
color: var(--acc1);
font-size: 11px;
font-weight: 500;
text-align: center;
min-width: 60px;
display: flex;
justify-content: center;
align-items: center;}
.nbsujnotes2:nth-child(2) {margin-top:7px;
color:var(--acc2);}
/*Partie dernier message posté*/
.derniermess {
max-width: 164px;}
/* titre avec écrit last song*/
.ti_derniermess { background-image: var(--degrade);
border-radius: 4px;
color: var(--acc3);
font-size: 11px;
margin: 0 0 0 21px;
text-align: center;
min-width: 140px;}
/*dernier avatar*/
.avatarcat { background: var(--background2);
border: var(--border1);
border-radius: 50px;
margin-top: -18px;
padding: 2px;
position: absolute;
}
.avatarcat img { border-radius: 50px;
width: 39px;
height: 39px;
object-fit: cover;}
/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
border-radius: 7px;
margin: 5px 0 0;
padding: 6px 0 7px 32px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
text-transform: lowercase;
height: 73px; /*à modifier si vous changer la height de .cat_container*/
display: flex;
line-height: 13px;
flex-wrap: wrap;
align-items: center;
}
.txt_derniermess a { font-size: 14px;}
.txt_derniermess br {
content: "";
margin: 2em 0 0 4em;
display: block;
font-size: 24%;
}
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Affichage boîte MP
partie 2 :
- Code:
/******************************************************************************* QEEL*/
/*balise qui contient tout le QEEL*/
.qeel_container { background: var(--background2);
margin: 10px 0 0;
border-radius: 10px;
padding: 10px 10px 7px;
display: flex;
flex-wrap: wrap;}
/*BALISE QUI CONTIENT LES MEMBRES CO 24 HEURES / NOUVEAU MEMBRE / TEXTE CRÉDITS / PARTIE GROUPES*/
.qeel1 { margin-right: 7px;
width: 70%;}
/*balise qui contient membres co 24 heures / nouveau membre et txt credits*/
.qeel4 { display: flex;
margin:0 0 7px 0;}
/*balise connectes dernieres 24 heures*/
.qeel_dc { width: 57%;
margin: 0 7px 0 0;
height: 98px;
border-top: var(--border1);
margin-right: 7px;
padding: 5px;
font-size: 14px;
text-align: justify;
overflow: auto;}
/*balise nouveau inscrit et txt credits*/
.qeel_nmcred {width: 43%;}
/*balise nouveau inscrit*/
.qeel_nm { border: var(--border1);
border-radius: 7px 7px 7px 28px;
padding: 4px;
display: flex;
flex-wrap: wrap;}
/*balise avatar nouveau inscrit*/
.qeel_avatar { width: 50px;
z-index: 100;
height: 50px;
padding: 4px;
border-radius: 10px 100% 100%;
background: var(--background2);
border: var(--border1);
box-sizing: border-box;}
/*avatar nouveau inscrit*/
.qeel_avatar img { width: 40px;
object-fit: cover;
height: 40px;
border-radius: 10px 100% 100%;}
/*balise pseudo nouveau inscrit*/
.qeel_nouvmembre { text-align: center;
text-transform: lowercase;
font-size: 16px;
line-height: 31px;
min-height: 30px;
margin: 0 0 0 20px;}
.qeel_nouvmembre strong {font-weight:500;}
/*balise titre bienvenue sur forum*/
.qeel_bienvenue { width: 100%;
text-align: right;
background: var(--background1);
text-transform: lowercase;
font-weight: 600;
font-size: 12px;
padding: 0 10px 0 0;
margin: -17px 0 0 24px;
border-radius: 4px;
color: var(--acc1);
}
/*balise txt libre/credits*/
.qeel_cred { text-align: justify;
height: 45px;
overflow: auto;
margin-top: 4px;
font-size: 12px;
}
/*balise contenant groupes*/
.qeel_groups { display: flex;
width: 100%;
border-top: var(--border1);
padding: 7px 0 0;
}
/*balise des groupes*/
.group { background: var(--background1);
padding: 3px 10px 2px;
border-radius: 4px;
width: 100%;
text-align: center;
text-transform: uppercase;margin:0 7px 0 0;
font-size: 12px;
font-weight: 600;
}
.group:last-child {margin:0;}
/*BALISE QUI CONTIENT NB CONNECTES ET INVITES, MEMBRES CONNECTES ET NB INSCRITS/MESSAGES*/
.qeel2 { width: 29%;}
/*balise nb utilisateurs en ligne*/
.qeel_stats { text-align: center;
text-transform: uppercase;
font-size: 9px;
border-bottom: var(--border1);
padding: 0 0 4px;
letter-spacing: 1px;}
.qeel_stats strong {
font-weight:500;}
/*balise nb inscrits/messages et membres connectes*/
.qeel5 { display: flex;
margin: 7px 0 0;}
/*balise nb inscrits/messages*/
.qeel_sujmess { margin: 0 7px 0 0;
max-width: 85px;}
/*nb inscrits/messages*/
.qeel_sujmess2 { background: var(--background1);
text-align: center;
font-size: 11px;
padding: 0 10px;
border-radius: 7px;
font-weight: 700;
height: 52px;
display: flex;
justify-content: center;
align-items: center; color: var(--acc2);}
.qeel_sujmess2:nth-child(1) {margin: 0 0 5px;
color: var(--acc1);}
/*balise membres connectes*/
.qeel_mc { border: var(--border1);
border-radius: 7px;
padding: 5px;
text-align: justify;
text-transform: lowercase;
width: 100%;}
.qeel_mc br {display:none!important;}
/*balise titre membres co*/
.qeel_mc2 { text-align: center;
background: var(--acc2);
text-transform: uppercase;
font-size: 11px;
color: var(--acc3);
border-radius: 4px;}
/*balise contenant les pseudos des membres co*/
.qeel_mc3 {font-size: 0px;
height: 76px;
margin: 4px 0 0;
border-top: var(--border1);
overflow: auto;}
.qeel_mc3 a {font-size:14px;}
/*balise credits, surtout ne SUPPRIMEZ PAS*/
.qeel_iaf { width: 100%;
border-top: 1px solid #ededed;
margin: 7px 0 0;
padding: 7px 0 0;
text-align: center;
font-size: 7px;
text-transform: uppercase;
letter-spacing: 1px;
color: #d1d1d1;}
/**************** CORPS DE LA PA AVEC GRID *****************/
.pa_1 {
background-color: var(--white);
border-radius: 10px;
display: grid;
text-align: center;
grid-gap: 7px;
grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
padding: 10px;
height: 250px;
}
/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/
/* CONTAINER ACTUALITÉ */
.item_13 { border: 1px solid var(--border);
border-radius: 4px;
grid-area: 1 / 1 / span 3 /span 1;
padding: 4px 4px 0;
text-align: justify;}
.texte_4 { height: 69px;
line-height: 15px;
overflow: auto;}
/* PARTIE STAFF ET ONGLETS */
/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}
/*container des onglets*/
.onglets_pa { display: flex;
flex-direction: column;
height: 75px;
position: relative;
text-align: justify;
width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}
/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
align-items: center;
display: flex;
justify-content: center;
margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}
/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff { border-radius: 50px;
width: 28px;
height: 28px;
padding: 2px;
border: 1px solid var(--border);
object-fit: cover;}
/*décide de la largeur de la séparation entre les images*/
.lab { cursor: pointer;
margin-left: 8px;
}
.lab:hover {
opacity:0.8;
}
/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
box-sizing: border-box;
margin-top: 5px;
opacity: 0;
padding: 4px 0;
position: absolute;
scrollbar-width: none;
text-align: center;
visibility: hidden;
width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
height: 36px;
}
.contenu.visible {
opacity: 1;
visibility: visible;
}
/*balise déco du prénom, nom*/
h { color: var(--accc1);
font-weight: 600;
letter-spacing: 1px;
font-size: 12px;}
/*balise de la partie admin / profil*/
.sous_titre { font-size: 9px;
letter-spacing: 1px;}
/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}
/*container déco de la partie optimisée pour*/
.titre_3 {
background-color: var(--background);
border-radius: 4px;
color: var(--accc1);
font-size: 9px;
font-weight: 500;
margin-bottom: 3px;
padding: 3px 0;
}
/**************** PARTIE CENTRALE (contexte, liens navigation, règles *****************/
/*CONTEXTE ET HOVER*/
/* corps du contexte (container en gros qui tient tout*/
.gif_pa { border: 1px solid var(--border);
border-radius: 7px;
display: inline-block;
grid-area: 1 / 2 / span 5 /span 2;
height: 192px;
line-height: 110%;
overflow: auto;
padding: 3px;
width: 216px; } /* à modifier si vous modifiez la largeur de la grid */
/*container de l'image du contexte*/
.img_pa {
width: 100%;
margin: 0 auto;
position: relative;
overflow: hidden;
border-radius:7px;
}
/*taille de l'image dans le container, à modifier seulement si vous modifiez la taille de gif_pa*/
.paimg {
display: block;
height: 192px;
object-fit: cover;
width: 216px; /* même largeur que gif_pa*/
}
/*container du contexte, si vous modifiez la taille, alors n'oubliez pas de modifier le left et le top*/
.container_txt { background-color: var(--white);
height: 192px;
left: 108px;
line-height: 16px;
overflow: hidden auto;
position: relative;
padding: 5px;
scrollbar-width: none;
text-align: justify;
top: 96px;
transform: translate(-50%,-50%);
width: 206px;} /*à modifier si vous modifiez la largeur de gif_pa */
/*ce qui déclenche le hover qui part vers le haut, ne pas toucher*/
.overflow {
background-color: var(--background);
bottom: 0;
height: 0;
left: 0;
overflow: hidden auto;
position: absolute;
scrollbar-width:none;
right: 0;
transition: .5s ease;
width: 100%;
}
.img_pa:hover .overflow {
height: 100%}
/*pas de scroll dans la partie contexte // ne supprimez pas le overflow*/
.container_txt::-webkit-scrollbar,.overflow::-webkit-scrollbar {width:0px;height:0px;}
/*PARTIE NAVIGATION / LIENS*/
.item_1 { grid-area: 1 / 4 / span 5 /span 1;}
/*liens navigation*/
.link_pa { background-color: var(--background);
border-radius: 4px;
font-size: 10px;
font-weight: 400;
letter-spacing: 2px;
text-transform:uppercase;
margin-bottom: 6px;
line-height: 10px;
padding: 1px 0;}
/*container avec les règles*/
.item_5 { border: 1px solid var(--border);
border-radius: 4px;
height: 77px;
line-height: 15px;
overflow: auto;
padding: 5px 7px 3px;
text-align: justify;
margin: 8px 0;}
/* PA */
:root {
--accc1: #000;
--accc2:#DD9F8C;
--white: #fff;
--black: #000;
--border: #ededed;
--background: #f1f1f1;
--degrag: #ccc9c7;
}
/**************** CORPS DE LA PA AVEC GRID *****************/
.pa_1 { background-color: var(--white);
border-radius: 10px;
display: grid;
text-align:center;
grid-gap: 7px;
grid-template: 18px 40px 20px 75px 18px 10px / 220px 102px 115px 132px 110px 110px;
padding: 10px;}
/**************** PARTIE À GAUCHE (actualité/intrigue, staff, forum optimisé) *****************/
/* CONTAINER ACTUALITÉ */
.item_13 { border: 1px solid var(--border);
border-radius: 4px;
grid-area: 1 / 1 / span 3 /span 1;
padding: 4px 4px 0;
text-align: justify;}
.texte_4 { height: 69px;
line-height: 15px;
overflow: auto;}
/* PARTIE STAFF ET ONGLETS */
/*container de la partie staff, ne pas toucher*/
.item_14 {grid-area: 4 / 1 / span 1 /span 1;}
/*container des onglets*/
.onglets_pa { display: flex;
flex-direction: column;
height: 75px;
position: relative;
text-align: justify;
width: 220px; /*à ne modifier que si vous changez la largeur du grid / votre forum n'a pas la même largeur que le mien*/
}
/*les boutons de la PA, ne pas toucher*/
.onglets_pa .boutons_pa {
align-items: center;
display: flex;
justify-content: center;
margin-left: -8px; /*éventuellement à modifier si vous ajoutez des images*/
}
/*les images du staff, à modifier si vous voulez changer la largeur des images et/ou ajouter une image*/
.staff { border-radius: 50px;
width: 28px;
height: 28px;
padding: 2px;
border: 1px solid var(--border);
object-fit: cover;}
/*décide de la largeur de la séparation entre les images*/
.lab { cursor: pointer;
margin-left: 8px;
}
.lab:hover {
opacity:0.8;
}
/*la partie avec prénom, nom, en gros les informations du staff*/
.contenu {
border-bottom: 1px solid var(--border);
border-top: 1px solid var(--border);
box-sizing: border-box;
margin-top: 5px;
opacity: 0;
padding: 4px 0;
position: absolute;
scrollbar-width: none;
text-align: center;
visibility: hidden;
width: 220px; /*à modifier que si vous changez la largeur de onglets_pa / doit avoir la même largeur */
height: 36px;
}
.contenu.visible {
opacity: 1;
visibility: visible;
}
/*balise déco du prénom, nom*/
h { color: var(--accc1);
font-weight: 600;
letter-spacing: 1px;
font-size: 12px;}
/*balise de la partie admin / profil*/
.sous_titre { font-size: 9px;
letter-spacing: 1px;}
/*CONTAINER FORUM OPTIMISÉ*/
.item_15 {grid-area: 5 / 1 / span 1 /span 1;}
/*container déco de la partie optimisée pour*/
.titre_3 {
background-color: var(--background);
border-radius: 4px;
color: var(--accc1);
font-size: 9px;
font-weight: 500;
margin-bottom: 3px;
padding: 3px 0;
}
/**************** PARTIE DROITE (timeline, periode de jeu, mdm, soutenir, partenariats) *****************/
/*TIMELINE*/
/*container timeline*/
.item_8 { border: 1px solid var(--border);
border-radius: 5px;
grid-area: 1 / 5 / span 2 /span 2;
height: 57px;
padding: 2px 5px;
text-align: justify;}
/*container texte timeline*/
.texte_1 { height: 43px;
line-height: 13px;
overflow: auto;
text-align: justify;}
/*partie premiere version signée xx*/
.titre_4 { background-color: var(--background);
border-radius: 4px;
color: var(--accc1);
font-size: 9px;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;}
/*PARTIE PÉRIODE DE JEU*/
/*container période de jeu*/
.item_9 { border-bottom: 1px solid var(--border);
color: var(--accc1);
font-size: 11px;
font-weight: 600;
grid-area: 3 / 5 / span 1 /span 2;
letter-spacing: 1px;
margin-top: -2px;
text-transform: uppercase;}
/*déco de texte pour rendre rose*/
j {color:var(--accc2);
font-style: italic;
}
/*PARTIE MEMBRES DU MOIS, NOUS SOUTENIR, PARTENARIATS*/
/*container du tout*/
.item_10 { grid-area: 4 / 5 / span 2 /span 2;}
/*CONTAINER MEMBRES DU MOIS ET NOUS SOUTENIR*/
.float_pa {height: 56px;}
/*container des membres du mois (colonne gauche)*/
.float_pa1 { float: left;
width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa2*/
height: 56px;}
/*style des images des membres du mois*/
.mdm1, .mdm2 {
border: 1px solid var(--border);
border-radius: 10px;
height: 30px;
object-fit: cover;
padding: 3px;
width: 21px;
}
.mdm2 {margin:0 5px;}
/*container de la partie nous soutenir*/
.float_pa2 {float: left;
height: 56px;
margin-left: 4px;
line-height: 12px;
width: 111px; /*à modifier si vous modifiez la largeur de la pa / a la même largeur que float_pa1*/}
/*icons discord et tumblr*/
.discord_pa { width: 21px;}
/*PARTIE PARTENARIATS*/
/*container de la partie partenariats*/
.item_11 { border-top: 1px solid var(--border);
margin-top: 5px;
padding-top: 3px;}
/*partie où y a les top sites dedans*/
.select_pa {margin-top: 3px;
border-width: 1px;
border-radius: 5px;
border: 1px solid var(--border);
width: 175px;
letter-spacing: 1px;
font-size: 8px;
text-transform: uppercase;}
/*LES TITRES AVEC DÉGRADES ROSE ET NOIR ET LES DÉCOS TEXTE*/
.titre_1, .titre_2 {
border-radius: 4px;
color: var(--white);
font-size: 9px;
letter-spacing: 1px;
margin-bottom: 4px;
text-align: center;
text-transform: uppercase;
}
.titre_1 {margin-bottom: 5px;background-image: linear-gradient(-45deg,var(--degrag),var(--accc2))!important;} /*dégradé rose*/
.titre_2 {background-image: linear-gradient(-45deg,var(--degrag),var(--accc1))!important;} /*dégradé noir*/
w,y {font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform:uppercase;
}
w { color: var(--accc2);}
y { color: var(--accc1);}
/*PARTIE CRÉDITS / NE PAS TOUCHER */
.item_12 {
grid-area: 6 / 1 / span 1 /span 6;
font-size: 7px;
border-top: 1px solid var(--border);
letter-spacing: 1px;
padding-top: 5px;
color: #d1d1d1;
margin-top: 16px;
}
/****************************************************************** LISTE DES SUJETS *************************/
/***********PARTIE AU-DESSUS ET EN-DESSOUS LISTE DES SUJETS***********/
/*Boutons nouv/rep et navigation*/
.pro_nav { display: flex;
font-size: 0;
margin: 15px 0;
align-items:center;}
/*liens dans navigation*/
.pro_nav a { font-size: 12px;
text-transform: uppercase;
margin: 0 10px 0 0;
font-weight: 600;
padding: 1px 0 0;}
/*styling bouton nouv/rep*/
.pro_nouvrep a { background: var(--background3);
color: var(--acc3)!important;
padding: 2px 10px;
border-radius: 6px;
font-weight: 700;
letter-spacing: 1px;
font-size: 14px; transition: .5s ease;}
.pro_nouvrep { margin: 0 10px 0 0;
}
.pro_nouvrep a:nth-child(1) {margin:0 10px 0 0;background:var(--acc2);color:var(--acc3);}
.pro_nouvrep a:nth-child(1):hover {background: var(--background3); transition: .5s ease;
color: var(--acc3)!important;}
/*liens navigation à côté de bouton rep/nouv*/
.liens_suj { background: var(--background2);
padding: 2px 10px 3px;
border-radius: 7px;
display: flex;
justify-content: flex-start;
font-size: 0;
align-items: center;}
.liens_suj a {
margin: 0 15px 0 0;
text-transform: uppercase;
font-size: 12px;
font-weight: 600;}
/*la pagination*/
.pagination { float: none;
display: flex;
justify-content: flex-end;
font-size: 0px;
margin:0;}
.pagination2 {
text-transform: uppercase;
}
.pagination a, .pagination span {font-size:12px;}
.pagination a { padding: 0 10px 0;}
.pagination a strong {font-weight:500;}
.pagination span strong { background: var(--acc2);
padding: 0 5px;
border: none;
color: var(--acc3);
font-size: 10px;
border-radius: 3px;
line-height: 16px;
width: auto;}
.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active
{ color: var(--acc1);
background: var(--background1);
padding: 0 5px;
border: none;
font-size: 10px;
border-radius: 3px;
line-height: 16px;
width: auto;}
.pagination span a.pag-img {vertical-align: baseline;}
.pagination span a.pag-img img { height: 9px;
margin-top: 0;}
/*titre de liste des sujets*/
.cat_titre { background: var(--background3);
border-radius: 7px 7px 0 0;
color: #fff;
font-weight: 300;
letter-spacing: 3px;
margin-top: 14px;
padding: 9px 20px;
text-transform: uppercase;}
/*********** LES SUJETS ***********/
/*Div qui contient toutes les balises*/
.af_suj1 { display: flex;
background: var(--background2);
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
height: 74px;
margin: 0 0 7px;}
/*partie image new/no new*/
.af_suj2 { width: 57px;
margin: 0 7px 0 0;}
.af_suj2 img { width: 57px;
height: 54px;
object-fit: cover;
border-radius: 10px;}
/*partie réponses / vues*/
.af_suj3 { width: 9%;
margin: 0 7px 0 0}
.suj_stat {background: var(--background1);
border-radius: 7px;
display: flex;
height: 25px;
justify-content: center;
align-items: center;
font-size: 10px;
font-weight: 700;
color: var(--acc2);}
.suj_stat:nth-child(1) {
margin:0 0 4px;
color:var(--acc1);}
/*partie titre du sujet, auteur, pagination & description*/
.af_suj4 {width: 58%;}
/*titre du sujet*/
.suj_titre { border-bottom: var(--border1);
padding: 0 0 4px;
margin: 0 0 4px;}
a.topictitle { color: var(--acc1);
font-weight: 600;
font-size: 15px;
text-transform: lowercase;
line-height: 13px;}
a.topictitle:hover {
text-decoration:none;}
ba { color: var(--acc2);
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 13px;}
.suj_titre img {margin:0 5px 0 0;}
/*partie auteur et pagination*/
.af_suj5 { display: flex;}
.suj_auteur { width: 50%;
font-size: 11px;
text-transform: uppercase;}
.suj_pagination { text-transform: uppercase;
font-size: 0px;
width: 50%;
text-align: right;
}
.suj_pagination a { font-size: 11px;
background: var(--background1);
padding: 0 9px;
border-radius: 4px;
margin: 0 3px 0 0;}
.suj_pagination br, .suj_pagination img {display:none!important;}
.suj_pagination .gensmall {font-size:0px!important;}
/*description du sujet*/
.suj_description { color: var(--acc1);
font-style: italic;
font-size: 13px;}
/*partie avatar dernier posteur*/
.af_suj6 { border: var(--border1);
padding: 3px;
width: 50px;
height: 50px;
border-radius: 60px;
box-sizing: border-box;
margin: auto 7px;}
.af_suj6 img {width: 41px;
height: 42px;
border-radius: 51px;
object-fit: cover;}
/*partie dernier message et dernier posteur pseudo*/
.af_suj7 {width: 17%;
display: flex;
flex-wrap: wrap;
font-size: 14px;
align-items: center;
text-transform: lowercase;
margin: auto 0;}
.af_suj7 span {
padding:0 10px 0 0;
}
.af_suj7 img {margin:0 0 0 3px;}
/*********** AFFICHAGE SUJETS SI PAS DE SUJETS ***********/
li.row {
border: none;
text-align: center;
list-style: none;
padding: 9px;
text-transform: uppercase;
color: var(--acc1);
letter-spacing: 1px;
border-radius: 0 0 10px 10px;
font-size:14px;
background:var(--background2);
}
li.row:hover {
background-color: var(--background2);
}
:root {
--acc1: #000;
--acc2:#DD9F8C;
--acc3:#fff;
--white: #fff;
--black: #000;
--border: #ededed;
--border1: 1px solid #ededed;
--background1: #f1f1f1;
--background2: #ffffff;
--background3: #000000;
--degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
--degrag: #ccc9c7;
--gr1: #000;
--gr2: #DD9F8C;
--gr3:#6CB29F;
--gr4: #74ABB6;
--gr5: #D7A329;
}
/***************************************************** AFFICHAGE DUN PROFIL *****************************/
/***** DIV PRINCIPAL CONTENANT LE PROFIL *****/
.spro_1 {
background: var(--background2);
padding: 10px;
border-radius: 10px;
display: flex;
margin:20px 0;
}
/***** AFFICHAGE À GAUCHE (rang et avatar) *****/
/*Div à gauche qui contient avatar et rang*/
.spro_2 {
background: var(--background1);
padding: 10px;
border-radius: 10px;
width: 232px;
box-sizing: border-box;
}
/*Div qui contient le pseudo et le rang*/
.spro_rang {
display: flex;
background: var(--background2);
flex-wrap: wrap;
margin: 0 0 7px;
border-radius: 10px 30px 30px 10px;
}
/*Div qui contient le pseudo*/
.spro_username { padding: 4px 0 0 12px;
border-bottom: var(--border1);
text-align: left;
font-size: 15px;
height: 31px;
box-sizing: border-box;
width: 100%;}
/*Div contenant le rang et limage*/
.spro_rang2 {
display: flex;
width: 100%;
justify-content: flex-end;
font-size: 12px;
line-height: 28px;
}
/*Styling de limage*/
.spro_rang2 img { width: 60px;
height: 60px;
border-radius: 100%;
padding: 5px;
box-sizing: border-box;
background: var(--background2);
border: var(--border1);
margin: -31px 0 0 7px;
}
/*Div contenant lavatar*/
.spro_avatar {
background: var(--background2);
padding: 6px;
border-radius: 10px;
box-sizing: border-box;
}
/*Styling de lavatar*/
.spro_avatar img {border-radius: 10px;
max-width: 200px;}
/***** AFFICHAGE À DROITE (derniere visite, images contact, infos, feuille perso) *****/
/*Div contenant le tout*/
.spro_3 {
margin: 0 0 0 7px;
width: 100%;
}
/*Div contenant les infos et la feuille de perso*/
.spro_5 {display: flex;}
/*Div contenant lastvisit, infos, etc.*/
.spro_6 {
width: 70%;
margin: 0 7px 0 0;
}
/*Div de la derniere connexion*/
.spro_lastvisit { margin: 0 0 7px;
background: var(--background1);
text-align: center;
text-transform: uppercase;
color: var(--acc2);
font-weight: 600;
letter-spacing: 1px;
line-height: 24px;
border-radius: 6px;
font-size: 14px;
}
/*Div contenant contact et les infos*/
.spro_profile { border: var(--border1);
padding: 10px;
border-radius: 10px;
}
/*Div contenant le en ligne et les images contact*/
.spro_contact { border-bottom: var(--border1);
padding: 0 0 7px;
margin: 0 0 7px;
display: flex;
text-transform: uppercase;
justify-content: space-evenly;
font-weight: 600;
color: var(--acc1);
font-size: 14px;
align-items: center;
}
/*Styling images contact*/
.spro_contact img {
width: 23px;
background: var(--background1);
padding: 3px;
box-sizing: border-box;
border-radius: 5px;
}
/*Div contenant toutes les infos*/
.spro_info { height: 292px;
overflow: auto;}
.spro_info img {
max-width:200px;
border-radius:10px;
}
/*Styling et mise en page des infos*/
.left-box {
width: 100%;
}
dl.details dt {
text-align: left;
width: 12em;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
color: var(--acc2);
}
dl.details dd {
margin: 0 0 .5em 12em;
font-size:14px;
line-height:22px;
}
/*Div contenant la feuille de personnage*/
.spro_4 { width: 30%;
border: var(--border1);
padding: 10px;
box-sizing: border-box;
border-radius: 10px;}
/*Div contenant les liens en bas*/
.spro_links { display: flex;
margin: 7px 0 0;
}
/*Styling des liens*/
.spro_links a {
width: 100%;
line-height: 29px;
background: var(--background1);
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
border-radius: 10px;
font-size: 12px;
}
.spro_links a:nth-child(2) {
margin:0 7px;
}
/*Div contenant feuille de personnage*/
.spro_4 { width: 30%;
border: var(--border1);
padding: 10px;
box-sizing: border-box;
border-radius: 10px;}
/*Div titre feuille de personnage*/
.spro_frpgtitle {
background-image: var(--degrade);
color: var(--acc3);
font-size: 12px;
text-align: center;
font-weight: 600;
border-radius: 4px;
}
/*Div avec scroll pour feuille personnage*/
.spro_frpg {
margin: 7px 0 0;
height: 335px;
overflow: auto;
border-top: var(--border1);
box-sizing: border-box;
padding: 10px 0 0;
}
/*Styling des champs*/
frpg {font-weight: 700;
letter-spacing: 1px;
color: var(--acc1);
text-transform: uppercase;
font-size: 13px;}
/*Styling où le texte se trouve*/
.spro_frpg textarea {
width: 100%!important;
height: 93px!important;
border: var(--border1);
border-radius: 10px;
margin: 10px 0 12px;
overflow: auto;
box-sizing: border-box;
}
.inputbox:hover {
border: var(--border1);
}
.memberlist_t {
width: 850px !important;
height: 50px;
background: #cbcbcb;
border-radius: 10px;
margin: auto !important;
text-align: center;
color: white !important;
font: 11px roboto !important;
text-transform: uppercase;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 20px;
margin-bottom: 10px;
}
.panelarte {
-webkit-box-shadow: none;
box-shadow: none;
width: 850px;
margin: auto;
background: none;
}
.panelarte h2 {
border: none;
color: #cbcbcb;
}
.memberlist_arte {
width: 850px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: auto;
padding: 0;
}
.one_member {
width: 275px;
height: 120px;
background: #95b8d9;
border-radius: 10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
position: relative;
margin-bottom: 12px;
overflow: hidden;
}
.one_member a, .one_member a:hover {
text-decoration: none;
color: white !important;
}
.one_member:before {
content: " ";
width: 120px;
height: 180px;
position: absolute;
top: 0;
left: 0;
background: rgba(251,251,251,0.2);
z-index: 0;
-webkit-clip-path: circle(50% at 29% 22%);
clip-path: circle(50% at 29% 22%);
}
.avatar_member_list {
width: 70px;
height: 70px;
z-index: 99;
}
.avatar_member_list img {
width: 70px;
height: 70px;
border-radius: 50%;
border: 5px solid white;
-o-object-fit: cover;
object-fit: cover;
}
.pseudo_memberlist {
margin: 0;
width: 155px;
height: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
z-index: 99;
}
.pseudo_memberlist > h2 {
color: white;
font: 12px roboto;
text-transform: uppercase;
font-weight: 500;
border-left: 2px solid white;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-left: 5px;
width: 100%;
}
.pseudo_memberlist div {
color: white;
font: 9px roboto;
font-weight: 400;
margin-top: -40px;
font-style: oblique;
margin-bottom: -5px;
text-transform: lowercase;
}
.pseudo_memberlist > h2 strong {
color: white;
font-weight: 500;
}
.stats_link_members {
width: 155px;
margin-left: 80px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: -5px;
}
.stats_link_members span {
display: block;
font: 9px source code pro;
color: white;
text-transform: uppercase;
margin: 0 0px;}
.one_member a[href^="/privmsg"]:before{
content:'MP';
}
.stats_link_members a[href^="/privmsg"] img{
display: none;
}
.stats_link_members span:after {
content: "|";
margin: 0 3px;
}
.stats_link_members span:last-child:after {
content: " ";
}
/* --------- AFFICHAGES MESSAGES (C) SUNHAE --------- */
#wrap-topic {
width: 800px;
margin: auto;
display: flex;
flex-flow: wrap;
}
#header-topic {
background-color: #f1f0f4;
width: 100%;
color: #c07c59;
font-size: 11px;
font-style: italic;
line-height: 27px;
height: 80px;
display: flex;
align-content: center;
flex-flow: wrap;
justify-content: center;
}
#header-topic .sousligne {
font: 11px 'Roboto', sans-serif;
font-style: italic;
padding: 0;
margin: 0;
text-transform: uppercase;
display: inline-block;
}
#header-topic a:not(:first-of-type) {
color: #c07c59;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
text-transform: uppercase;
font-size: 11px;
letter-spacing: -0.5px;
}
#header-topic a:first-of-type {
color: #262929;
font-family: 'DM Serif Display', serif;
font-size: 23px;
text-transform: uppercase;
font-style: normal;
line-height: 30px;
width: 100%;
text-align: center;
}
.new-reply-topic,
.topic-pagination {
display: flex;
align-content: center;
flex-flow: wrap;
}
.topic-pagination,
#pagination_memberlist {
margin-left: auto;
text-transform: uppercase;
font-family: initial;
font: 11px 'Roboto', sans-serif;
letter-spacing: -1px;
color: transparent;
}
.topic-pagination>div,
#pagination_memberlist>div {
margin: 20px 0 5px;
}
.topic-pagination>div a,
#pagination_memberlist>div a {
color: #c07c59;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
text-transform: lowercase;
font-style: italic;
letter-spacing: -0.5px;
}
.new-reply-topic a {
padding: 28px 17px 28px 25px;
}
.topic-pagination span strong,
#pagination_memberlist strong {
padding: 0 0 0 5px;
}
.topic-pagination span,
#pagination_memberlist span {
color: #262929;
}
.topic-pagination strong,
#pagination_memberlist strong {
color: #c07c59;
padding: 0 2px;
}
.topic-pagination .pag-img,
#pagination_memberlist .pag-img {
display: none;
}
.header-message {
width: 100%;
height: 86px;
display: flex;
flex-flow: wrap;
justify-content: flex-end;
align-content: center;
position: relative;
padding: 0 50px 0 0;
color: #f6f5f8;
font: 10px 'Roboto', sans-serif;
font-weight: lighter;
font-style: italic;
background-color: #262929;
}
.header-message div {
position: absolute;
left: 35px;
bottom: 22px;
}
.header-message span,
.header-message a[href*="/u"] {
width: 100%;
text-align: right;
}
.header-message span {
font: 20px 'DM Serif Display', serif;
font-style: normal;
margin-right: -20px;
}
.header-message span,
.header-message>a {
width: 100%;
}
.header-message strong {
color: #f6f5f8;
font-weight: 100;
}
.header-message>div img {
padding: 0 2px;
}
.wrap-topic-content {
background-color: #F1F0F4;
display: flex;
flex-flow: wrap;
justify-content: space-evenly;
width: 100%;
padding: 19px 0;
}
.topic-content {
width: 538px;
display: flex;
flex-flow: wrap;
justify-content: space-between;
align-content: flex-start;
padding-top: 6px;
}
.topic-content,
.topic-content>a {
color: #C3C3C3;
font: 10px 'Roboto', sans-serif;
font-weight: lighter;
font-style: italic;
}
.topic-content>div a {
font-weight: bold !important;
}
.topic-content>div {
color: #262929;
font-style: normal;
text-align: justify;
font-weight: normal;
font-size: 12px;
border-top: 1px solid #C3C3C3;
padding: 18px 0;
margin-top: 8px;
width: 100%;
}
.topic-content>div img {
max-width: 100%;
}
.topic-avatar {
border: 2px solid #F6F5F8;
overflow: hidden;
width: 200px;
height: 320px;
position: relative;
}
.topic-avatar>div img {
max-width: 100%;
}
.topic-avatar>a img {
width: 200px;
}
.topic-avatar>div {
position: absolute;
top: 396px;
background-color: #ffffffe0;
width: 200px;
height: 320px;
transition: all 1s;
padding: 5px 20px 10px;
font: 11px 'Roboto', sans-serif;
letter-spacing: -0.5px;
overflow-y: auto;
overflow-x: hidden;
}
.topic-avatar:hover>div {
top: 0;
}
.feuille-de-perso a[href*="/u"],
.title-profil {
font: 30px 'Hamilton', cursive;
color: #c07c59;
text-align: right;
display: block;
height: 32px;
text-transform: lowercase;
white-space: nowrap;
}
.topic-avatar .label {
text-transform: uppercase;
font-weight: bold;
line-height: 15px;
color: #262929
}
.topic-avatar>div .label span,
.feuille-de-perso {
color: #262929 !important;
}
.feuille-de-perso textarea {
min-width: 100%;
max-width: 100%;
display: block;
height: 50px;
background-color: #F6F5F8;
padding: 6px;
overflow: auto;
margin-bottom: 10px;
font-size: 10px;
text-align: justify;
line-height: 12px;
}
/*.feuille-de-perso br { display: none; }*/
.topic-avatar .contact_link_p {
position: sticky;
bottom: 5px;
margin: 10px -10px 0 0;
font-size: 0;
text-align: right;
}
.topic-avatar .contact_link_p a:first-child {
padding-right: 7px;
}
.separation {
width: 555px;
margin: auto;
height: 1px;
background-color: #C3C3C3;
margin: 15px 0 2px;
}
.signature-topic {
width: 100%;
max-height: 280px;
padding: 5px;
overflow: auto;
}
.signature-topic img {
max-width: 100%;
}
#wrap-topic a[name="quickreply"]+.h3 {
display: none;
}
#wrap-topic form#quick_reply {
width: 100%;
}
#wrap-topic .sceditor-container,
#wrap-topic .sceditor-container iframe,
#wrap-topic .sceditor-container textarea,
#wrap-topic .sceditor-toolbar {
background-color: #F1F0F4 !important;
width: 100% !important;
font-family: 'Roboto', sans-serif;
}
#wrap-topic #quick_reply #textarea_content {
box-shadow: none;
}
#wrap-topic #quick_reply #textarea_content+div input {
background-color: #ECEBF0;
box-shadow: none;
border-radius: 0;
font: 15px 'DM Serif Display', serif;
color: #c07c59;
text-transform: uppercase;
margin: 0px 10px 10px 10px;
height: 35px;
padding: 0 15px;
}
#topic-form label {
font-size: 0;
}
#topic-form select {
background-color: #F1F0F4;
border: none;
font-size: 10px;
padding: 3px 5px;
}
#topic-form fieldset {
margin: 55px 0 28px;
}
#topic-form input {
background-color: #ECEBF0;
box-shadow: none;
border-radius: 0;
font: 12px 'DM Serif Display', serif;
color: #c07c59;
text-transform: uppercase;
margin: 0 5px;
height: 21px;
padding: 0 5px;
}
/* Affichage du bloc des permissions */
.permissions {
width: 100%;
background-color: #F1F0F4;
padding: 20px 25px;
font: 11px 'Roboto', sans-serif;
}
.permissions a {
color: #c07c59;
}
.permissions .h3 {
border: none;
font: 13px 'DM Serif Display', serif;
text-transform: uppercase;
margin-bottom: 5px;
}
/** CITATION CODE SPOILER **/
blockquote,
dl.codebox {
margin: 0 0 20px;
background: none;
font: 12px 'Roboto', sans-serif;
padding: 0;
border: none;
}
blockquote {
padding: 10px 30px;
}
dl.codebox code,
.spoiler dd,
.hidecode {
background-color: #F6F5F8 !important;
padding: 10px 30px !important;
}
.hidecode dt,
dl.codebox::before,
blockquote::before {
display: none !important;
}
dl.codebox dt,
cite {
border: none;
color: #C38567;
font: 11px 'Roboto', sans-serif;
text-transform: uppercase;
margin: 5px 0 8px 11px;
font-weight: 500;
}
.spoiler dt {
margin-bottom: 3px !important;
}
dl.codebox code {
font-size: 12px;
}
/* --------- FIN AFFICHAGE MESSAGES --------- */
/********************************************************* NAVIGATION ET HEADER *********************************************************/
/* NAVIGATION */
.navigation {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f4f4f4;
border-bottom: 2px solid #475944;
z-index: 99;
padding: 1rem;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
color: #8f8a9e;
text-transform: uppercase;
}
.navigation img {
display: none;
}
.barre_nav {
display: flex;
margin: auto;
}
.barre_nav li {
list-style-type: none;
padding: 0 .5rem;
}
.barre_nav .mainmenu {
font-weight: bold;
font-size: 10px;
color: #8f8a9e;
}
/* BOUTONS HAUT BAS */
.up_down {
color: #8f8a9e;
font-size: 10px;
font-weight: 700;
padding: 0 2rem 0 0;
position: absolute;
right: 0;
}
.up_down a:first-child {
color: #429679;
}
.up_down a:last-child {
color: #b88749;
}
/* CACHER LA DESCRIPTION */
#site-desc {
display: none;
}
/* HEADER */
.heabder_bann {
text-align:center;
}
.heabder_bann img {
width:100%;
}
ul.topiclist.bg_none {
background: #e2e2e2;
}
/********************************************************** liste messages privés ***************************/
#privmsgs-menu {
float: none !important;
padding: 0 9px;
}
#picture_legend, #privmsgs-menu {
border-radius: 3px;
box-shadow: none !important;
font-size: 1.3rem;
margin-bottom: 24px;
overflow: hidden;
}
#privmsgs-menu a {
color:black;
text-transform:uppercase;
font:11px calibri;
letter-spacing:1px;
}
.mp_bouton{
background: #cdb65c;
width: 49%;
margin: 0px 5px 0px 0px;
outline: 1px solid #9e8b3e;
outline-offset: -4px;
padding: 4px;
box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8);
border-bottom: 1px solid #e8e8e8;
font: 11px calibri;
text-transform: uppercase;
text-align: center;
}
.mp_bouton a {
color: #1e1e1e;
display: block;
}
.total_liste_mp {
background: #e8e8e8;
margin-top: 1rem;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.title_mp {
border-bottom: solid 1px #ac8b68;
flex-grow: 1;
padding-bottom: 0.5rem;
}
.title_mp a {
color:black;
font:10px calibri;
text-transform:uppercase;
}
.blok_mp {
font: 10px calibri;
text-transform: uppercase;
flex-shrink: 0;
}
.icon_mp {
height: 50px;
width: 100px;
flex-shrink: 0;
}
/*selection mp*/
ul.topiclist.pmlist dd {
padding: 1rem;
}
/********************************************** FIN liste messages privés ***************************/
.heabder_bann {
text-align:center;
}
.heabder_bann img {
width:100%;
}
:root{
--main-color:#555;
--snd-color:#fff;
--third-color:#888;
--four-color:#FCC5A0;
--five-color:#F28977;
--five-v-color:#FAC0B6;
--six-color:#B9919A;
--six-v-color:#DAC5CA;
--font1: 'Source Sans Pro', sans-serif;
--font2:'Playfair Display', serif;
--fontjournal:'Alfa Slab One', cursive;
}
.degr, .fondgen h3, .fondgen.bottin strong{ background: var(--five-color);
background: -webkit-gradient(left top, right top, color-stop(0%, var(--five-color)), color-stop(100%, var(--six-color)));
background: -webkit-linear-gradient(left, var(--five-color) 0%, var(--six-color) 100%);
background: linear-gradient(to right, var(--five-color) 0%, var(--six-color) 100%);
position:relative; z-index:20;
}
/* Fiche Générale du forum par KoalaVolant */
.gengen{ width:80%; margin:0 auto; padding:5px; }
.gengen *{ box-sizing:border-box; }
/* Image de la fiche + Titre */
.entgen{ position:relative; width:100%; height:200px; }
.entgen img{ width:100%; height:200px; object-fit:cover; border:double 7px var(--snd-color); }
.entgen h1{ font-family:var(--font2); font-size:22px; text-align:center; line-height:25px; padding:13px; color:var(--main-color);
width:80%; text-align:center; padding:5px; background-color:var(--snd-color); position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); }
.entgen h1 strong{ font-size:12px; line-height:13px; font-family:var(--font1); letter-spacing:1px; color:var(--six-color); }
/* Reste */
.fondgen{ background-color:#fff;text-align:justify; color:var(--main-color); padding:20px; font-size:12px; line-height:1.4em; }
.fondgen h3{ text-align:center; padding:5px; font-family:var(--font1); color:var(--snd-color); width:85%; position:relative; left:50%; transform:translateX(-50%); margin:5px 0px;
font-size:15px; letter-spacing:2px; font-weight:normal; line-height:18px; }
.fondgen img{ width:80%; max-height:200px; object-fit:cover; border:3px solid var(--six-color); padding:2px; position:relative; left:50%; transform:translateX(-50%); }
/* Liste */
.gengen ul{ margin:0px; padding:0px; }
.gengen ul li{ list-style-type : none !important; margin:5px 0px;}
.gengen li:before{ content:'•'; padding-right:5px; color:var(--five-color) !important; }
/* Presentation Staff */
.debstaff{ display:flex; justify-content:space-between; align-items:center; }
.fondgen.staff h2{ font-family:var(--font2); font-size:18px; text-transform:uppercase; margin:0px;}
.fondgen.staff h3{ width:100%; font-size:13px; position:initial; transform:none; margin:0px; }
.debstaff img{ width:100%; height:100px; position:initial; transform:none;}
.sta-left{ width:59%; }
.sta-right{ width:40%; }
.debstaff.reverse{ flex-direction:row-reverse; }
.debstaff.reverse h2{ text-align:right; }
MlleAlys- Membre actif
- Messages : 5900
Inscrit(e) le : 12/09/2012
Re: Affichage boîte MP
C'est tout bon du coup ^^
Je vous remercie sincèrement.
Je vous remercie sincèrement.
Sujets similaires
» Problème affichage boîte réponse (cadrage)
» Affichage nouveaux messages boite de réception
» Problème affichage lien et titre boite de réception
» Déplacement de l'affichage des smiley, de la gauche de la boite de saisie vers la droite
» Oter le texte "boîte de réception... boîte d'envoi..." etc sur en forum en PHPBB3
» Affichage nouveaux messages boite de réception
» Problème affichage lien et titre boite de réception
» Déplacement de l'affichage des smiley, de la gauche de la boite de saisie vers la droite
» Oter le texte "boîte de réception... boîte d'envoi..." etc sur en forum en PHPBB3
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum