Accueil
Calendrier
FAQ
Rechercher
Dernières images
Membres
Groupes
S'enregistrer
Connexion
profils différents avec wombat
Invité
Bonjour, ou bonsoir. 
La base du Blank Theme est une merveille, pour commencer. Je n'ai que du positif à dire, c'est si simple de coder et faire exactement ce dont j'ai envie.
Ceci dit, j'éprouve un petit problème avec le profil, surtout la section wombat. J'ai suivi les instructions pour avoir deux profils séparés, mais la balise "hidden" semble cacher mon profil wombat et ne l'active pas?
Lorsque je clique sur un nom d'utilisateur, le fond change en opacity, mais le profil ne s'affiche pas.
Je mets les templates concernés et le css actuel.
Merci énormément d'avance. (Je passerai sur le Ko-Fi en début septembre
)
profile_view_body
css
La base du Blank Theme est une merveille, pour commencer. Je n'ai que du positif à dire, c'est si simple de coder et faire exactement ce dont j'ai envie.
Ceci dit, j'éprouve un petit problème avec le profil, surtout la section wombat. J'ai suivi les instructions pour avoir deux profils séparés, mais la balise "hidden" semble cacher mon profil wombat et ne l'active pas?
Lorsque je clique sur un nom d'utilisateur, le fond change en opacity, mais le profil ne s'affiche pas.
Je mets les templates concernés et le css actuel.
Merci énormément d'avance. (Je passerai sur le Ko-Fi en début septembre
)profile_view_body
- Spoiler:
- Code:
<!-- IMPORTANT!!-->
<!-- ACTIVATE SIMPLE PROFILE: Users & Groups › Profiles › General options › Activate advanced profile: no -->
<!-- Profil dans une page seule -->
<div class="userProfile">
<center><div class="pfilfond">
<div class="pfil-vava">{AVATAR_IMG}</div>
<div class="pfil-infotop">
<div class="pfil-pseudo">Invité</div>
<!-- BEGIN switch_show_status -->
<div class="pfil-visit">{LAST_VISIT_TIME}</div>
<!-- END switch_show_status -->
<!-- Message" field contents -->
<div class="pfil-sujsuj">
<a rel="nofollow" href="/st/{PUSERNAME}" id="opentopics">sujets ouverts</a> <!-- topics opened by -->
<a rel="nofollow" href="/sta/{PUSERNAME}" id="alltopics">sujets</a> <!-- all topics -->
<a rel="nofollow" href="/spa/{PUSERNAME}" id="allposts">messages</a><!-- all posts --></div>
<div class="pfil-avava"><div id="user_avatar">{AVATAR_IMG}</div></div>
</div>
<div class="pfil-profil"> <!-- BEGIN profile_field -->
<div class="profile_field" id="field_id{profile_field.ID}">
<label>{profile_field.LABEL}</label>
<field>{profile_field.CONTENT}</field>
</div>
<!-- END profile_field -->
</div></div>
<div class="pfil-contact"><a rel="nofollow" href="/privmsg?mode=post&u={CUR_USER_ID}" target="_blank">envoyer un message privé</a></div>
<!-- BEGIN switch_awards -->
<div class="awards_block_simple_wrapper">
<div class="badgetitre">badges</div>
<div class="awards_block simple">{switch_awards.AWARDS_LIST}</div>
</div>
<!-- END switch_awards -->
<fieldset class="submit-buttons">{U_ADMIN_RPG_NEW}</fieldset>
</center>
</div>
<!-------------------------- LE PROFIL WOMBAT JUST ICI --------------------------------------------------
----------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------->
<div class="userProfile-wombat" id="wombat" hidden>
<center><div class="containerprofil">
<div class="wombtop"> <div class="profile_name">Invité</div>
<div class="profile_rank"><wpt>{POSTER_RANK}</wpt></div></div>
<!-- Contenu du profil -->
<div class="user_profile">
<!-- Avatar -->
<div class="profile_avatar">{AVATAR_IMG}
<!-- Statut : en ligne -->
<!-- BEGIN switch_show_status -->
<div class="profile_online">{USER_ONLINE}</div>
<!-- END switch_show_status -->
<!-- Lien-image de contact -->
<div class="profile_contact">
<!-- Lien-image de contact -->
<center> <form action="{S_PROFILE_ACTION}" method="post" name="post">
<!-- BEGIN contact_field -->
<div id="field_id{contact_field.ID}"><center>{contact_field.CONTENT}</center></div>
<!-- END contact_field -->
</form>
</center>
</div>
</div>
<!-- Pseudo de l'utlisateur -->
<!-- Contenu du profil -->
<div class="profile_infos">
<!-- CHAMPS DE PROFIL -->
<div class="profile_content">
<!-- Autre champs -->
<!-- BEGIN profile_field -->
<div class="profile_field" id="field_id{profile_field.ID}">
<label>{profile_field.LABEL}</label>
<field>{profile_field.CONTENT}</field>
</div>
<!-- END profile_field -->
<!-- Feuille de personnage -->
<!-- BEGIN switch_rpg -->
<!-- BEGIN rpg_fields -->
<div class="profile_field">
<label>{switch_rpg.rpg_fields.F_NAME} :</label>
<field>{switch_rpg.rpg_fields.F_VALUE_NEW}</field>
</div>
<!-- END rpg_fields -->
<fieldset class="submit-buttons">{U_ADMIN_RPG_NEW}</fieldset>
<!-- END switch_rpg -->
</div>
<!-- Fin des champs de profil -->
</div>
</div>
<div class="wombottom"><!-- BEGIN switch_show_status -->
<div class="profile_visit"> {LAST_VISIT_TIME}</div>
<!-- END switch_show_status -->
<div class="profile_sujopen">
<!-- Message" field contents -->
<a rel="nofollow" href="/st/{PUSERNAME}" id="opentopics">sujets ouverts</a> <!-- topics opened by -->
<a rel="nofollow" href="/sta/{PUSERNAME}" id="alltopics">sujets</a> <!-- all topics -->
<a rel="nofollow" href="/spa/{PUSERNAME}" id="allposts">messages</a><!-- all posts -->
</div>
</div>
</div>
</center></div>
<script src="{JQUERY_ROOT}json/jquery.json-1.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('[id^=field_id]').each(function() {
if ($(this).find('.field_editable').is('span, div')) {
$(this).hover(function() {
if ($(this).find('.field_editable.invisible').is('span, div')) {
$(this).find('.field_editable').prev().addClass('ajax-profil_hover').parent().addClass('ajax-profil_parent').append('<div class="ajax-profil_edit"><img src="{AJAX_EDIT_IMG}" /></div>');
$(this).find('.ajax-profil_edit').attr({
alt: "{L_FIELD_EDIT_VALUE}",
title: "{L_FIELD_EDIT_VALUE}"
}).click(function() {
$(this).prev().prev().removeClass('ajax-profil_hover').addClass('invisible').next().removeClass('invisible').append('<img src="{AJAX_VALID_IMG}" class="ajax-profil_valid" />').find('input,select');
$(this).prev().find('.ajax-profil_valid').attr({
alt: "{L_VALIDATE}",
title: "{L_VALIDATE}"
}).click(function() {
var content = new Array();
$(this).parent().find('[name]').each(function() {
var type_special = $(this).is('input[type=radio],input[type=checkbox]');
if ((type_special && $(this).is(':checked')) || !type_special) {
content.push(new Array($(this).attr('name'), $(this).attr('value')));
}
});
var id_name = $(this).parents('[id^=field_id]').attr('id');
var id = id_name.substring(8, id_name.length);
$.post(
"{U_AJAX_PROFILE}", {
id: id,
user: "{CUR_USER_ID}",
active: "{CUR_USER_ACTIVE}",
content: $.toJSON(content),
tid: "{TID}"
},
function(data) {
$.each(data, function(i, item) {
$('[id=field_id' + i + ']').find('.field_uneditable').html(item).end().find('.ajax-profil_valid').remove().end().find('.field_editable').addClass('invisible').end().find('.field_uneditable').removeClass('invisible');
});
},
"json"
);
});
$(this).remove();
});
}
}, function() {
if ($(this).find('.field_editable.invisible').is('span, div')) {
$(this).find('.field_editable').prev().removeClass('ajax-profil_hover');
$(this).find('.ajax-profil_edit').remove();
}
});
}
});
});
//]]>
</script>
css
- Spoiler:
- Code:
/****** STRUCTURE DU FORUM -----------------------------------------------------------
****** Elements du forum qui définissent sa structure et sa hiérachie sur toutes les pages
****** (ne les RENOMMEZ PAS, ils sont généraux aux pages Web ou à Forumactif) ------- ******/
/*** ROOT
*** Tutoriel : geniuspandalab.tumblr.com/post/634694343906689024/cssroot ***/
/* VARIABLE DU MODE DE BASE (ici clair) */
:root {
--black:#000000;
--white:#ffffff;
--transback:#00000010;
--background2: #ffffff;
--backgroundimage2: url('https://i.ibb.co/XF0Zy5J/fond1.png');
--imgfilter:brightness(1);
--partimg:invert(0%);
--insidefo:#f4f4f4;
--outsidefo:#ececec;
--sousfonew:linear-gradient(90deg, rgba(253,176,219,0.4576681014202556) 0%, rgba(244,244,244,1) 100%);
--sousfoback:#f4f4f4;
--profcont:linear-gradient(rgba(255, 255, 255, 0.001), #f4f4f4);
--backheader:#f5e8d8;
--boutton:#ffffff;
--neutral: #f4f4f4;
--neutralLight:#ffffff;
--neutralDark: #ececec60;
--neutralDarker: #d6d6d6;
--neutralmess:#ececec80;
--bordava:#cccccc;
--switchcircle:#c4c4c460;
--contrast: #171938;
--contrastLight: #444444;
--contrastLighter: #c3c8f3;
--accentClr: #888888;
--accentClrDark: #333c92;
--textColor: #414141;
--textColorAccent: #000;
--border: 1px solid #e5e5e5;
--shadowBox: 0 0 20px #23265730;
--little-size: 12px;
--normal-size: 14px;
--medium-size: 16px;
--large-size: 18px;
--title-size: 22px;
--font: 'Inter';
/* VARIABLES MESSENGER */
--FAM-pluginBackground: #fafbfc;
--FAM-chatBackground: #f2f4f9;
--FAM-textareaBackground: #fafbfc;
--FAM-msgBackground: #dce3f4;
--FAM-myMsgBackground: #fafbfc;
--FAM-quoteBackground: #8a9fd236;
--FAM-gradient: linear-gradient(-90deg, rgba(250, 251, 252,1) 20%, rgba(250, 251, 252,0) 100%);
--FAM-gradientTop: linear-gradient(180deg, rgba(242, 244, 249,1) 20%, rgba(242, 244, 249,0) 100%);
--FAM-gradientBot: linear-gradient(0deg, rgba(242, 244, 249,1) 20%, rgba(242, 244, 249,0) 100%);
--FAM-border: 1px solid #dce3f4;
--FAM--shadowBox: 0 0 20px var(--contrastLight);
--FAM-sleepModeBackground: rgba(255, 255, 255, 0.6);
--FAM-newMsgAnimation: rgb(0, 0, 0,.3);
--FAM-accentClr: #4B57C5;
--FAM-secondClr: #333c92;
--FAM-fontClr: #232657;
--FAM-fontLightClr: #484a65;
--FAM-linkClr: #4B57C5;
--FAM-titleClr: #171938;
--FAM-buttonsClr: #171938;
--FAM-fontSize: 14px;
--FAM-titleFont: 'Open Sans';
--FAM-titleSize: 24px;
--FAM-light: white;
--FAM-dark: black;
--FAM-windowSize: 750px;
}
/* VARIABLES DU MODE INVERSE (ici sombre) */
[data-color-scheme="dark"] {
--black:#ffffff;
--white:#000000;
--transback:#00000015;
--header: url('https://images2.imgbox.com/1b/a5/4bb6Hgju_o.png');
--background2:#000000;
--imgfilter:brightness(0.70);
--partimg:invert(90%);
--insidefo:#2e2e2e;
--outsidefo:#252525;
--sousfonew:linear-gradient(90deg, rgba(253,176,219,0.4576681014202556) 0%, rgba(46,46,46,1) 100%);
--sousfoback:#2e2e2e;
--profcont:linear-gradient(rgba(255, 255, 255, 0.001), #2e2e2e);
--backheader:#9e9386;
--boutton:#232323;
--neutral: #2e2e2e;
--neutralLight:#111111;
--neutralDark: #25252560;
--neutralDarker: #353535;
--neutralmess:#25252580;
--bordava:#212121;
--switchcircle:#25252560;
--contrast: #e5e5f0;
--contrastLight: #aaaaaa;
--contrastLighter: #40485e;
--accentClr: #6b6b6b;
--accentClrDark: #333c92;
--textColor: #c7c5cd;
--textColorAccent: #e5e5f0;
--border: 1px solid #373737;
--shadowBox: 0 0 20px var(--neutralDark);
/* VARIABLES MESSENGER */
--FAM-pluginBackground: #1e212a;
--FAM-chatBackground: #181a21;
--FAM-textareaBackground: #1e212a;
--FAM-msgBackground: #0B0E17;
--FAM-myMsgBackground: #1e212a;
--FAM-quoteBackground: rgba(255,255,255,0.04);
--FAM-gradient: linear-gradient(-90deg, rgba(30,33,42,1) 20%, rgba(30,33,42,0) 100%);
--FAM-gradientTop: linear-gradient(180deg, rgba(24, 26, 33,1) 20%, rgba(24, 26, 33,0) 100%);
--FAM-gradientBot: linear-gradient(0deg, rgba(24, 26, 33,1) 20%, rgba(24, 26, 33,0) 100%);
--FAM-border: 1px solid #313543;
--FAM-shadow: 0 0 20px var(--neutralDark);
--FAM-sleepModeBackground: rgba(0, 0, 0, 0.5);
--FAM-newMsgAnimation: rgb(255, 255, 255,.5);
--FAM-accentClr: #7583ff;
--FAM-secondClr: #333c92;
--FAM-fontClr: #c7c5cd;
--FAM-fontLightClr: #9a96a3;
--FAM-linkClr: #7583ff;
--FAM-titleClr: #f0f0f8;
--FAM-buttonsClr: #E5E5E5;
}
@media (prefers-color-scheme: dark) {
[data-color-scheme=dark] {
--black:#ffffff;
--white:#000000;
--transback:#00000015;
--background2:#000000;
--backheader:#9e9386;
--boutton:#232323;
--imgfilter:brightness(0.70);
--partimg:invert(90%);
--insidefo:#2e2e2e;
--outsidefo:#252525;
--sousfonew:linear-gradient(90deg, rgba(253,176,219,0.4576681014202556) 0%, rgba(46,46,46,1) 100%);
--sousfoback:#2e2e2e;
--profcont:linear-gradient(rgba(255, 255, 255, 0.001), #2e2e2e);
--neutral: #2e2e2e;
--neutralLight:#111111;
--neutralDark: #25252560;
--neutralDarker: #353535;
--neutralmess:#25252580;
--bordava:#212121;
--switchcircle:#25252560;
--contrast: #e5e5f0;
--contrastLight: #aaaaaa;
--contrastLighter: #40485e;
--accentClr: #6b6b6b;
--accentClrDark: #333c92;
--textColor: #c7c5cd;
--textColorAccent: #e5e5f0;
--border: 1px solid #373737;
--shadowBox: 0 0 20px var(--neutralDark);
/* VARIABLES MESSENGER */
--FAM-pluginBackground: #1e212a;
--FAM-chatBackground: #181a21;
--FAM-textareaBackground: #1e212a;
--FAM-msgBackground: #0B0E17;
--FAM-myMsgBackground: #1e212a;
--FAM-quoteBackground: rgba(255,255,255,0.04);
--FAM-gradient: linear-gradient(-90deg, rgba(30,33,42,1) 20%, rgba(30,33,42,0) 100%);
--FAM-gradientTop: linear-gradient(180deg, rgba(24, 26, 33,1) 20%, rgba(24, 26, 33,0) 100%);
--FAM-gradientBot: linear-gradient(0deg, rgba(24, 26, 33,1) 20%, rgba(24, 26, 33,0) 100%);
--FAM-border: 1px solid #313543;
--FAM-shadow: 0 0 20px var(--neutralDark);
--FAM-sleepModeBackground: rgba(0, 0, 0, 0.5);
--FAM-newMsgAnimation: rgb(255, 255, 255,.5);
--FAM-accentClr: #7583ff;
--FAM-secondClr: #333c92;
--FAM-fontClr: #c7c5cd;
--FAM-fontLightClr: #9a96a3;
--FAM-linkClr: #7583ff;
--FAM-titleClr: #f0f0f8;
--FAM-buttonsClr: #E5E5E5;
}
}
/* S'applique à TOUS les éléments du forum*/
* {
box-sizing: border-box; /*évite que les éléments soient agrandis par le padding*/
/* SCROLLBAR CUSTOM POUR MOZILLA */
scrollbar-color: var(--contrastLight);
scrollbar-width: thin;
}
/*** ------------------------------- ***/
/*** TOUTES LES PAGES --------------- ***/
/* FOND DU FORUM ---*/
body {
background: var(--neutralDark);
font-family: var(--font);
font-size: var(--normal-size);
color: var(--textColor);
margin: 0 !important;
}
/* SCROLLBAR --- */
/* Scrollbar entière */
::-webkit-scrollbar {}
/* Rail */
::-webkit-scrollbar-track {}
/* Poignée */
::-webkit-scrollbar-thumb {}
/* STRUCTURE PRINCIPALE ---*/
.main_forum {
width: 940px;
/*largeur forum*/
margin: 20px auto;
padding: 20px;
background: #00000010;
border-radius: 5px;
}
/* BANNIERE ---*/
/* Mettre la bannière en fond permet de la changer selon le thème clair ou sombre */
#header {
}
/* Conteneur de toutes les sous-sections
* comme les encadrés d'options, de rappel, etc... */
.panel {
background: var(--neutral);
border: var(--border);
border-radius: 5px;
padding: 10px;
margin: 25px 0;
}
/* Conteneur de l'ascenseur
* Sert essentiellement à définir où le placer dans la page */
.sidebar_bottom {
width: 35px;
z-index: 999;
display: flex;
flex-direction: column;
gap: 10px;
bottom: 20px;
position: absolute;
}
/* Lien de renvoi haut/bas */
.sidebar_bottom > a {
border-radius: 5px;
text-align: center;
margin-left: -10px;
}
/* BOUTON CHANGEMENT DE THEME ---*/
@media (prefers-color-scheme: dark) {.color-scheme-toggle .dark{display: none}}
@media (prefers-color-scheme: light) {.color-scheme-toggle .light{display: none}}
.color-scheme-toggle,
[data-color-scheme="light"] .color-scheme-toggle .dark,
[data-color-scheme="dark"] .color-scheme-toggle .light {display: block;width: 100%;}
[data-color-scheme="dark"] .color-scheme-toggle .dark,
[data-color-scheme="light"] .color-scheme-toggle .light {display: none}
.color-scheme-toggle {
background: none;
font-size: 36px;
text-align: center;
color: var(--textColor);
margin-left: -5px;
}
.color-scheme-toggle:hover {
color: var(--accentClr);
}
/****** ------------------------------------------------------------------------------
****** GÉNÉRALITÉS ------------------------------------------------------------------
****** Sélecteurs généraux s'appliquant à plusieurs reprises sur tout le forum ******/
/*** ----------------------------------- ***/
/*** LIENS ET TEXTE -------------------- ***/
/* LIENS DU FORUM --- */
a {
font-weight: 600;
text-decoration: none;
color: var(--textColorAccent);
}
/*liens au survol*/
a:hover {
color: var(--accentClr);
}
/* Emoji mis par défaut de FA
* Les réduire les rend moins horribles à voir */
.emojione {
width: 19px !important
}
/* TITRES DES PAGES --- ***/
/* Utilisé pour des titres de pages */
h1 {
}
h1.page-title {
color: var(--black);
margin: 20px 0 5px 0px;
font-size: var(--title-size);
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
/* Utilisé pour des titres de sujets, blogs... */
h2,
.h2 {
margin: 0;
font-size: var(--large-size);
font-weight: 700;
}
/* Utilisé pour des titres de sous-sections, petit encadré, ...*/
h3,
.h3 {
color: var(--contrastLight);
padding-bottom: 10px;
margin: 0;
font-size: var(--medium-size);
font-weight: bold;
}
.top-navigation {
margin-bottom: 20px;
}
/*** --------------------------------------- ***/
/*** BOUTONS D'INTERACTION ET BARRE DE TEXTE ***/
/* BARRE DE TEXTE ---*/
input[type="text"],
input[type="password"],
input.inputbox {
border: none;
border-radius: 5px;
background: var(--transback);
font-size: var(--normal-size);
color: var(--contrastLight);
padding: 2px 6px;
}
/* BOUTONS D'INTERACTION --- *
* Envoyer, prévisualiser, sauvegarder, aller,... */
input[type="submit"],
input[type="button"],
input[type="hidden"],
input[type="reset"] {
font-size: var(--normal-size);
padding: 2px 8px !important;
border-radius: 5px;
background: var(--boutton);
color: var(--contrastLight);
font-weight: 600;
border: none;
}
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="hidden"]:hover,
input[type="reset"]:hover {
color: var(--accentClr)
}
.submit-buttons {text-align: center;}
.quickmod {margin-bottom: 20px;}
/* MENUS DEROULANTS --- */
select {
background: transparent;
border: var(--border);
border-radius: 5px;
font-size: var(--normal-size);
padding: 1px 4px;
color: var(--textColor);
}
option {
background: var(--neutral);
border: var(--border);
}
/*** ------------------------------- ***/
/*** EDITEUR DE TEXTE -------------- ***/
/* Editeur de texte */
.sceditor-container {
border: var(--border)!important
}
/* Barre d'outils de l'éditeur de texte*/
div.sceditor-toolbar {
background: var(--neutral)!important;
border-bottom: var(--border)!important;
}
/* Conteneur des groupes d'outils */
div.sceditor-group {
background: var(--neutralDark)!important;
border-bottom: var(--border)!important;
}
/* Bouton d'un outil */
a.sceditor-button {
height: 26px !important;
/*ne pas retirer*/
width: 26px !important;
/*ne pas retirer*/
}
/* Conteneur de la zone de texte */
.sceditor-container iframe,
.sceditor-container textarea {
background-color: var(--neutral)!important;
/*ne pas supprimer*/
width: 100% !important;
margin: 0 !important;
padding: 5px !important;
/*ne pas supprimer*/
min-height: 250px !important;
}
/*Boîte Smiley*/
body#sce_smilies_body {
background: transparent!important;
}
/* Autre champs de texte */
textarea {
background: var(--neutralDark);
border: var(--border);
color: var(--textColor)!important;
}
/*** ------------------------------- ***/
/*** PAGINATIONS -------------------- ***/
.pagination {
background: var(--neutralDark);
padding: 5px 8px;
margin-right: 5px;
border-radius: 5px;
font-size: 13px;
text-transform: uppercase;
font-family: 'Inter';
font-weight: 700;}
/*lien unique vers les pages numérotées*/
.pagination span a {
font-weight: 500;
}
/*lien actif : page sur laquelle vous vous trouvez */
.pagination span strong {
font-weight: 900;
text-decoration: underline;
}
/*suppression de l'image-lien "aller à la page suivante" */
.page-topic span a:last-child,
.pag-img {
display: none;
}
/*** ------------------------------- ***/
/*** ELEMENTS ESTHETIQUES ---------- ***/
/* Contenur général qui sert généralement de fond et/ou de contour*/
.container {
padding: 10px;
}
/* Barre de séparation */
.separator {
padding-bottom: 5px;
margin-bottom: 5px;
border-bottom: 1px solid var(--neutralDark);
clear: both;
height: 1px;
width: 100%;
}
/* Conteneur moins large (les historiques des messages essentiellement) */
.wrapped {
width: 80%;
margin: 10px auto;
clear: both;
}
/* Image/avatar réduit */
.mini_img img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 5px;
margin-right: 10px;
background: var(--neutralDark);
}
/* Permet d'aligner un élément à droite ou à gauche */
.right {
float: right
}
.left {
float: left
}
.clear {
clear: both
}
/* Barre de gestion
* Contient des boutons ou des liens spéciaux */
.links_bar {
padding: 10px;
margin: 20px 0;
clear: both;
}
/* supprime si vide */
.links_bar:empty {
display: none
}
/* Lien spécial mis en avant */
.specials_links,
a.specials_links {
background: var(--neutral);
padding: 2px 6px;
border-radius: 5px;
}
/* Suppression des liens vides */
.specials_links a:empty,
a.specials_links:empty {
display: none
}
.specials_links.adminlink {
background: none;
}
/****** ------------------------------------------------------------------------------
****** ENTETE DU FORUM --------------------------------------------------------------
****** Tous les éléments qui s'affichent en tête de toutes les pages ---------------- ******/
/****** ------------------------------------------------------------------------------
****** PAGE PRINCIPALE, INDEX ------------------------------------------------------- ******/
/* PAGE D'ACCUEIL ---*/
.introduction {}
/*** ------------------------------- ***/
/*** CATEGORIES -------------------- ***/
.category {
background: var(--neutralDark);
border-radius: 10px;
padding: 10px;
margin-bottom: 25px;
}
/* Titre d'une catégorie */
.cate_title h2 {
display: block;
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
margin: 10px 0 20px;
}
/* conteneur d'un forum*/
.forum {
margin-bottom: 10px;
background: var(--insidefo);
padding: 30px 30px 40px 30px;
border-radius: 5px;
}
.forum:last-child {
margin-bottom: 0
}
a.forumtitle {
font-size: 30px;
font-family: 'Gelica';
font-weight: 500;
text-transform: lowercase;
}
.forum_content {
display: flex;
gap: 10px;
align-items: center;
margin-top: 10px;
justify-content:flex-end;
}
.forum_envelopp {backgrouund:var(--outsidefo);
border-radius:10px;
padding:10px;}
/*image statut du forum */
.forum-img {
width: 70px;
height: 70px;
background-color: var(--neutralDark);
}
/*description du forum*/
.forum_desc {
max-height: 51px;
margin-left: 10px;
width: 530px;
text-align: justify;
margin-top: 8px;
padding-bottom: 10px;
}
.forum_desc img {
width: 65px;
height: 157px;
object-fit: cover;
margin-top: -87px;
border-radius: 5px 0px 0px 5px;
filter: grayscale(1) brightness(0.5);
margin-left: -92px;
position: absolute;
}
/* POUR UNE IMAGE INSERER L'ID DE LA CATEGO POUR L'IMAGE! */
div#IDICI {
padding-left: 82px;
}
div#VIDICI .forum_desc {
width: 490px;
}
/*conteneur avatar du dernier posteur*/
.forum_avatar {
width: 60px;
margin-top: -197.1px;
margin-left: -50px;
margin-right: 30px;
}
.forum_avatar img {
width: 60px;
height: 82.3px;
object-fit: cover;
object-position: center;
border-radius: 0px 10px 10px 0px;
}
/* dernier message*/
.forum_lastpost {
margin-top: -200px;
text-align: right;
margin-right: 40px;
background: var(--outsidefo);
width: fit-content;
padding: 10px;
border-radius: 10px 0px 0px 10px;
line-height: 21px;
}
.forum_details {
border-top: 1px solid var(--neutralDark);
padding-top: 10px;
margin-top: 10px;
display: flex;
justify-content: space-between;
}
/* liens des sous forums */
#subforum {
font-size: 0 /*permet de retirer la virgule*/
}
#subforum a {
font-size: var(--little-size);
margin-right: 10px;
}
.forumstats {
margin-left: 5px;
margin-bottom: 8px;
font-size: 13px;
text-transform: uppercase;
}
.forum_stats {
font-weight: 600;
padding: 10px;
}
/*** ------------------------------- ***/
/*** QUI EST EN LIGNE -------------- ***/
.qeel {
background: var(--neutralDark);
border-radius: 5px;
padding: 10px;
display: grid;
grid-template-columns: 30% 40% 30%;
grid-gap: 1px;
margin-bottom: 10px;
}
.qeel > div {
background: var(--neutral);
padding: 15px 10px;
}
.qeel-left {
border-radius: 5px 0 0 5px;
}
/* Dernier inscrit */
#last_user {
display: flex;
align-items: center;
}
#lastuser_avatar img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 5px;
margin-right: 10px;
}
/* groupes*/
a.groups {
display: block;
background: var(--neutralDark);
border-radius: 5px;
text-align: center;
padding: 2px 0;
margin-bottom: 5px;
opacity: 1;
}
a.groups:hover {
opacity: .7;
}
a.groups:last-child {margin-bottom: 0}
.qeel-middle {}
/*X connectés :: 1 membre, 0 invisible, 0 invité*/
#total_users {}
/*Connectés en ce moment*/
#online_users {
height: 95px;
overflow: auto;
}
/*ne pas supprimer*/
#online_users br {
display: none
}
.credits {
font-size: var(--little-size);
border: var(--border);
border-radius: 5px;
padding: 5px;
margin-top: 5px;
}
.qeel-right {
border-radius: 0 5px 5px 0;
text-align: justify;
}
/****** ------------------------------------------------------------------------------
****** LISTE DES SUJETS ------------------------------------------------------------- ******/
/*** ------------------------------- ***/
/*** ENTETE ET FOOTER DE LA LISTE DES SUJETS ***/
/* Chaîne de navigation et pagination
* (réutilisé dans l'affichage d'un sujet (viewtopic_body)) */
.navigation_links {
margin: 10px 0px 20px 0px;
text-align: center;
}
/* chaîne de lien de navigation : catégorie > forum > sous-fo */
.navigation_chain {
font-size: 0;
/*retire les :: de séparation */
}
.navigation_chain a {
margin-right: 8px;
font-size: 14px;
text-transform: uppercase;
font-family: 'poppins';
}
.navigation_chain a:before {
content: '\F138';
/*symbole ou texte modifiable*/
margin-right: 5px;
font-family:'bootstrap-icons';
font-size:11px;
}
.navigation_chain a.nav:first-of-type:before {
display: none;
}
/* BOUTONS DE MESSAGE : Répondre, Nouveau,... ---*
* (réutilisé dans l'affichage d'un sujet (viewtopic_body) et les MP (privmsgs_body) */
.buttons {
background: var(--neutral);
padding: 5px 8px;
margin-right: 5px;
border-radius: 5px;
opacity: 1;
font-size: 14px;
text-transform: uppercase;
font-family: 'Inter';
font-weight: 700;
}
/* BOUTONS : modérer les sujets de ce forum */
#moderation_forum_tools,
#moderation_forum_tools strong {
font-size: 0px;
}
#moderation_forum_tools a {
background: var(--neutralDark);
border-radius: 5px;
padding: 2px 8px;
font-size: var(--normal-size);
}
/*** ------------------------------- ***/
/*** LISTE DES SUJETS -------------- ***/
/* Bloc de description du forum */
.forum-page_desc {
margin: 0 0 20px;
background: var(--neutral);
border-radius: 5px;
padding: 10px;
}
/* Conteneur sujet dans la liste */
.topicslist_row {
background: var(--neutral);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.topicslist_row:last-child {
margin-bottom: 0
}
/* Image du sujet */
.topicslist-img {
display:none;
}
.topicslist_infos {
flex-grow: 100;
margin-left:20px;
}
/*titre du sujet*/
.topictitle {
font-size: var(--medium-size);
/* permet de raccourir les titres trop long ainsi : "Titre du suj..." */
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 430px;
white-space: nowrap;
vertical-align: bottom;
text-transform: lowercase;
}
/* icône de type de message ( exemple : -18 ans, sujet résolu, ... ) */
.topic_msgicon {
margin-right: 5px
}
.topic_msgicon:empty {
display: none;
}
.topiclist-infos img {
margin-right: 3px
}
.topicslist-stats {
text-align: right;
}
.topicslist-avatar-lastpost img {
object-fit: cover;
object-position: center;
width: 55px;
height: 55px;
background: var(--neutralDark);
border-radius:100%;
border: 7px solid var(--bordava);
}
.topicslist-lastpost {
width: 180px;
text-align:right;
}
.topicslist-description {
width: 100%;
}
/* ligne qui séparent les annonces et les notes des autres sujets (à activer dans "message > configuration") */
.topic_separator {
height: 5px;
background: var(--neutral);
margin-bottom: 10px;
border-radius: 5px;
}
/* Bouton "trier les sujets" */
#sort-topics {
position: relative;
display: inline;
background: var(--neutralDark);
margin: 10px 0;
border-radius: 5px;
padding: 5px;
}
.sort-form {
width: max-content;
background: var(--neutral);
border: 1px solid var(--neutralDarker);
border-radius: 5px;
padding: 10px;
position: absolute;
top: 110%;
right: 0;
display: none
}
.expanded ~ .sort-form {
display: block;
}
/****** ------------------------------------------------------------------------------
****** AFFICHAGE D'UN SUJET --------------------------------------------------------- ******/
/* PARTICIPANTS DU SUJET ---*/
/* Conteneur de la liste des participants au sujet */
.poster-list {
display: flex;
align-items: center;
justify-content: center;
margin-top: -10px;
margin-bottom: 20px;
}
/* Avatar du participant*/
.poster {
background: var(--poster-avatar);
height: 30px;
width: 30px;
border-radius: 100%;
margin-left: -8px;
border: 2px solid var(--neutralDark);
background-size: cover;
background-position: center;
}
/* Lien de renvoi vers son profil */
.poster a {
display: block;
height: 100%;
}
/* Nombre de participants */
.poster-count {
margin-left: 8px;
}
.poster-more-list {
display: none;
}
.poster-more {
display: grid;
place-items: center;
position: relative;
}
.poster-more:hover .poster-more-list {
display: block;
position: absolute;
top: 29px;
width: 150px;
background: var(--neutralDarker);
padding: 10px;
border-radius: 5px;
}
/****** ------------------------------------------------------------------------------
****** AFFICHAGE D'UN SUJET --------------------------------------------------------- ******/
/* PARTICIPANTS DU SUJET ---*/
/* Conteneur de la liste des participants au sujet */
.poster-list {
display: flex;
align-items: center;
justify-content: center;
margin-top: -10px;
margin-bottom: 20px;
}
/* Avatar du participant*/
.poster {
background: var(--poster-avatar);
height: 30px;
width: 30px;
border-radius: 100%;
margin-left: -8px;
border: 2px solid var(--neutralDark);
background-size: cover;
background-position: center;
}
/* Lien de renvoi vers son profil */
.poster a {
display: block;
height: 100%;
}
/* Nombre de participants */
.poster-count {
margin-left: 8px;
}
.poster-more-list {
display: none;
}
.poster-more {
display: grid;
place-items: center;
position: relative;
}
.poster-more:hover .poster-more-list {
display: block;
position: absolute;
top: 29px;
width: 150px;
background: var(--neutralDarker);
padding: 10px;
border-radius: 5px;
}
/*** ------------------------------- ***/
/*** SUJET ------------------------- ***/
.post_row {
display: grid;
grid-template-rows: max-content auto;
grid-template-columns: min-content 1fr;
margin-bottom: 20px;
border-radius: 10px 10px 10px 10px !important;
background: var(--neutralDark);
}
div.post_row:nth-of-type(2) {
}
div.post_row:last-of-type {
}
.post_details {
grid-column: 1 / span 2;
padding: 10px;
display: flex;
align-items: center;
width: 100%;
background: var(--outsidefo);
border-radius: 10px 10px 0px 0px;
}
.post_date {
flex-grow: 100;
}
/* BOUTONS D'EDITION DU MESSAGE --- */
/* Conteneur boutons d'édition */
ul.profile-icons {
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
/*UN SEUL bouton d'édition */
ul.profile-icons li {
padding: 2px 4px;
border-radius: 5px;
}
/*hover d'un bouton d'édition*/
ul.profile-icons li:hover {
background: var(--neutralDark);
}
/* BOUTON LIKE --- */
/* Conteneur du bouton like */
.like_button {
float: right;
margin-left: 10px;
flex-grow: 1;
cursor: pointer;
background:none;
}
/* Bouton like */
.rep-button,
.rep-button:active,
.rep-button:focus {
color: var(--textColor);
border: none;
padding: 3px 5px;
border-radius: 5px;
font-weight: 600;
background:none;
}
/*Bouton au survol*/
.rep-button:hover {
background:none;
}
button.rep-button.fa_liked {color:red;}
/* Texte "j'aime" */
button.rep-button .like_text {
padding-right: 15px;
font-size: 16px;
}
/*compteur de like*/
button.rep-button .rep-nb {
background: var(--black);
border-radius: 100%;
color: var(--white);
font-size: 9px;
font-weight: bold;
line-height: 16px;
width: 16px;
position: absolute;
text-align: center;
padding: 0px;
margin-top: -25px;
margin-left: 15px;
display:block;
}
button.rep-button.fa_liked .rep-nb { }
.post_profile {
padding: 8px 0px 14px 10px;
}
.post_pseudo {
font-weight: bold;
}
/* Lien "@" de mention */
a.fa-mention {font-size:13px !important; }
/* Mention "en ligne" */
.online {
position: absolute;
background-color: var(--neutralDarker);
border-radius: 100%;
padding: 5px 8px;
margin-top: -335px;
margin-left: -110px;
font-size: 20px;
color: #ffffff;
}
/* RECOMPENSES --- */
/* Conteneur des récompenses */
#list_awards {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
/* Récompense */
.award {
width: 40px;
height: 40px;
position: relative;
background-image: var(--award-image);
background-size: cover;
background-position: center;
border-radius: 100%;
pointer: cursor;
}
.award:hover .award_tooltiptext {
display: block;
}
/* Bloc description de la récompenses */
.award_tooltiptext {
width: max-content;
display: none;
position: absolute;
top: 25%;
left: 25px;
background-color: var(--neutral);
border: 1px solid var(--neutralDark);
padding: 5px;
border-radius: 5px;
text-align: center;
font-size: 11px;
}
/* titre de la récompenses*/
.award_tooltiptext_title {
font-weight: 600;
}
.online:empty {display: none}
.post_message {
padding: 8px;
margin-top: -50px;
}
/* REPONSE RAPIDE --- */
/*supression de la mention "réponse rapide" */
.quickreply div.h3 {display: none}
/*centrer la réponse rapide*/
.quickreply {
display: flex;
justify-content: center;
}
/* Retire le cadre de la réponse rapide pour les invités */
#quickreply_content:empty {display: none}
/*** ------------------------------- ***/
/*** SONDAGE ----------------------- ***/
.poll {
background: var(--neutral);
border-radius: 5px;
margin-bottom: 10px;
}
.head_poll {
padding: 10px;
border-bottom: 1px solid var(--neutralDark);
display: flex;
justify-content: space-between;
align-items: center;
}
.poll_list {
display: grid;
grid-template-columns: 220px auto;
}
.poll_option {
padding: 10px 20px 0 10px;
border-right: 1px solid var(--neutralDark);
text-align: right;
}
.poll_vote {
padding: 10px 10px 0 20px;
display: flex;
align-items: center;
}
.poll_send {
margin-left: 220px;
padding: 20px 10px 20px 20px;
border-left: 1px solid var(--neutralDark);
}
.poll_vote:nth-child(2),
.poll_option:first-child {
padding-top: 20px;
}
.votes-users-list {
justify-content: start;
margin: 20px 0 0;
}
/*** ------------------------------- ***/
/*** TEXTES, BALISES, ETC ---------- ***/
/* Lien-tag des utilisateurs */
.mentiontag {}
/* BALISES DE MESSAGE : spoiler, code, quote... */
/* Balise code, spoiler et hide*/
.codebox {
display: block;
width: 90%;
margin: 0 auto;
position: relative;
}
/* Contenu code, spoiler et hide*/
.codebox dd {
background: var(--neutralDark);
border-radius: 5px;
padding: 5px
}
/* Nom de balise "code, spoiler" */
.codebox dt {
font-weight: 700;
font-size: var(--little-size);
}
/*retire la mention "code" du bloc*/
#codeBox dt {
height: 0;
font-size: 0;
}
/* bouton "copier" */
.copyCode {
font-size: 12px;
font-weight: normal;
position: absolute;
top: 5px;
right: 13px;
font-family: monospace;
text-transform: uppercase;
cursor: pointer;
}
div.cont_code {
clear: right;
}
/* Spoiler */
.hidebox.spoiler {}
/* spoiler fermé */
.spoiler_content {
display: none;
}
/* spoiler ouvert */
.spoiler_content.hidden {
display: block;
}
/* Citation contenu */
blockquote div {
padding-left: 20px;
}
/* Citation mention "... a écrit" */
blockquote cite {
display: block;
margin-left: -20px;
font-style: normal;
}
/* Citation pseudo */
blockquote cite a {
text-decoration: none !important
}
/* Hide */
.codebox.hidecode dd {
background: transparent;
opacity: 0.8;
}
/****** ------------------------------------------------------------------------------
****** MEMBRES ------------------------------------------------------ ******/
.profile_admin {
text-align: center;
margin: 10px 0 0;
}
/* Bouton "suivre le membre" */
.followBtn {
background: var(--neutral);
border: 1px solid var(--neutralDark);
border-radius: 5px;
font-weight: 600;
margin: 0;
font-size: 14px;
}
.followBtn::before {
top: 1px;
position: relative;
color: var(--accentClr);
margin-right: 5px;
}
/* Bouton édition d'un champ de profil */
.ajax-profil_edit {
cursor: pointer;
position: absolute;
top: 0;
left: 0px;
}
/* Bouton édition d'un champ de profil */
.ajax-profil_edit {
cursor: pointer;
position: absolute;
top: 0;
left: -15px;
}
/* Bouton validation des modifications */
.ajax-profil_valid {
cursor: pointer;
margin-left: 4px;
vertical-align: middle;
}
/*** ------------------------------- ***/
/*** WOMBAT PROFILS EN POP UP ---- ***/
/* Fond atténué */
.wombat-overlay {
position: fixed;
z-index: 990;
inset: 0;
opacity: 0;
visibility: hidden;
width: 100%;
height: 100%;
transition: 0.2s opacity ease;
background: var(--neutral);
}
/* effet de transition du fond atténué */
.wombat-overlay.open {
opacity: .5;
visibility: visible !important;
}
/* Fenêtre du popup */
.wombat-aside {
position: fixed;
inset: 0;
margin: auto;
z-index: 999;
transition: 0.2s all ease;
visibility: hidden;
opacity: 0;
width: 60%;
max-width: 800px;
box-shadow: var(--shadowBox);
border-radius: 10px;
height: max-content;
transform: translateX(-20%);
top: -25px;
}
/* effet de transition pour la fenêtre */
.wombat-aside.open {
opacity: 1;
transform: translateX(0);
visibility: visible !important;
}
/*** ------------------------------- ***/
/*** PROFILS SIMPLIFIÉS DES TAGS ---- ***/
/* Supression de la flèche peu esthétique*/
.tooltipster-arrow {}
.tooltipster-default {}
.preview_content {
display: flex;
}
.preview_avatar img {
object-fit: cover;
object-position: center;
width: 70px;
height: 70px;
border-radius: 5px;
margin-right: 10px;
}
.preview_infos {
width: 100%;
padding-top: 3px
}
.preview_pseudo,
.preview_pseudo strong {
font-size: var(--medium-size);
}
.preview_contacts {
position: absolute;
bottom: 8px;
right: 10px;
display: flex;
align-items: center;
}
.preview_contacts a {
margin-left: 5px
}
.tooltipster-arrow {
display: none
}
/*** ------------------------------- ***/
/*** LISTE DES MEMBRES ------------- ***/
.userlist {
display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
}
.userlist_profil {
display: grid;
grid-template-columns: 95px auto;
grid-gap: 10px;
padding: 10px;
background: var(--neutral);
border-radius: 5px;
}
.userlist_avatar {}
.userlist_avatar img {
width: 75px;
height: 120px;
object-fit: cover;
object-position: center;
}
.userlist_details {}
.userlist_pseudo {
font-size: var(--medium-size);
}
.userlist_infos {}
.userlist_contact {}
/****** ------------------------------------------------------------------------------
****** MESSAGES PRIVES -------------------------------------------------------------- ******/
/*** ------------------------------- ***/
/*** LISTE DES MPs ----------------- ***/
/* Menu des MPS */
#privmsgs-menu {
display: flex;
justify-content: center;
gap: 20px;
margin: 20px auto;
}
#privmsgs-menu li {
display: flex;
align-items: center;
gap: 5px;
}
/* Affichage d'un MP dans la liste */
.mp_row {
background: var(--neutral);
border-radius: 5px;
display: grid;
grid-template-columns: 55px auto;
grid-gap: 10px;
align-items: center;
margin-bottom: 10px;
padding: 10px;
}
/*** ------------------------------- ***/
/*** AFFICHAGE D'UN MESSAGE PRIVÉ -- ***/
.message {
background: var(--neutral);
border-radius: 5px;
display: grid;
grid-template-rows: max-content auto;
grid-template-columns: 220px auto;
}
.message_infos {
grid-column: 1 / span 2;
border-bottom: 1px solid var(--neutralDark);
padding: 10px;
display: flex;
justify-content: space-between;
}
.mp-icons {
display: flex;
float: right;
}
.message_profil {
padding: 10px;
border-right: 1px solid var(--neutralDark);
text-align: center;
}
.message_content {
padding: 25px;
}
/****** ------------------------------------------------------------------------------
****** PAGES ANNEXES ---------------------------------------------------------- ******/
/*** ------------------------------- ***/
/*** PAGE D'ENVOI D'UN MESSAGE ----- ***/
.message-edition {
display: flex;
flex-direction: row;
/* flex-direction: row-reverse; -- pour smileys à droite */
gap: 15px;
/*espace entre la zone de texte et la boîte à smileys*/
}
/* Prévisualisation d'un message */
#preview {
background: var(--neutral);
padding: 10px;
border: var(--border);
border-radius: 5px;
}
/*** ------------------------------- ***/
/*** EDITION DE PROFIL ------------- ***/
/* Onglets dans la modification de profil */
#tabs ul {
display: flex;
justify-content: space-between;
margin: 20px 0 10px
}
/*onglet*/
#tabs li {
padding: 5px 10px;
border: 1px solid transparent;
}
/* Onglet selectionné */
#tabs li.activetab {
background: var(--neutralDark);
border: var(--border);
border-radius: 5px;
}
/* onglet au survol */
#tabs li:hover {
background: var(--neutralDark);
border-radius: 5px;
border: var(--border);
}
/* Suppression de l'onglet "amis et ignorés" */
div#tabs li:nth-child(5) {
display: none;
}
.profil_preferences dl,
.profil_editavatar dl {
grid-template-columns: 40% auto;
}
.profil_preferences .italic {
font-size: var(--little-size);
}
/* EDITER SIGNATURE ---*/
#parent_editor_simple > #smiley-box {
float: left;
/* float: right; -- pour smileys à droite */
}
#parent_editor_simple #message-box {
margin-left: 240px;
/* margin-right: XXXpx -- pour smileys à droite */
}
#parent_editor_simple #message-box > br {
display: none
}
#parent_editor_simple #message-box > #textarea_content {
width: 100% !important;
}
.panel.row2.sig {
text-align: center;
margin-top: 10px;
}
/*** ------------------------------- ***/
/*** PAGES DE RECHERCHES ----------- ***/
/* RECHERCHE DE MESSAGE -----*/
/* Conteneur d'un message*/
.post_search {
display: grid;
grid-template-columns: 200px auto;
border-radius: 5px;
margin: 10px 0;
background: var(--neutral);
}
.post_search > div {
padding: 10px;
}
/* Colonne d'information du message */
.postsearch_infos {
border-right: var(--border);
font-size: var(--little-size);
}
/* RECHERCHE DE SUJET -----*/
/* Même CSS que la liste des sujets dans un forum */
/*** ------------------------------- ***/
/*** PAGE DE CONNEXION ------------- ***/
/* Centrer les pages de connexion */
form[name=form_login],
form[name=form_login] ~ .panel {
text-align: center;
}
form[name=form_login] .content {
display: grid;
justify-content: center;
justify-items: center;
}
/*** ------------------------------- ***/
/*** ELEMENTS FLOTTANTS ------------ ***/
/* Fenêtre popup "recherche" */
.overview {
background: var(--neutral);
border-radius: 5px;
border: var(--border);
padding: 10px;
position: fixed !important;
top: 50% !important;
}
/* Bouton rechercher */
.overview button[type="submit"] {
width: 26px;
height: 26px;
margin-left: 5px;
}
.overview div {
margin-bottom: 5px
}
.overview a {
float: right;
}
/* Boîte "recherche un utilisateur" */
#find_username {
display: none;
position: fixed;
left: 50%;
width: 450px;
margin-left: -225px;
top: 50%;
margin-top: -125px;
background-color: var(--neutral);
padding: 10px;
border: var(--border);
border-radius: 5px;
}
/****** ------------------------------------------------------------------------------
****** BLOGS ------------------------------------------------------------------------ ******/
/*** ------------------------------- ***/
/*** LISTE DES BLOGS --------------- ***/
.bloglist {
background: var(--neutral);
border-radius: 5px;
display: grid;
grid-template-columns: 65px auto;
grid-template-rows: 60px auto;
margin-bottom: 10px;
}
.bloglist_date {
grid-row: 1 / span 2;
padding: 10px;
border-right: 1px solid var(--neutralDark);
line-height: 22px;
text-align: center;
}
.blog_daymonth {
font-size: 16px;
font-weight: 700;
}
.blog_year {
font-size: 18px;
}
.bloglist_infos {
display: flex;
justify-content: space-between;
padding: 10px;
}
.bloglist_details {
text-align: right
}
.bloglist_resum {
padding: 0 10px 10px;
}
/*** ------------------------------- ***/
/*** AFFICHAGE D'UN BLOG ---------- ***/
.blog_post {
background: var(--neutral);
display: grid;
grid-template-rows: auto auto;
border-radius: 5px;
}
.blog_details {
padding: 10px;
display: flex;
align-items: center;
border-bottom: 1px solid var(--neutralDark);
}
.blog_author {
flex-grow: 100;
}
/*** ------------------------------- ***/
/*** COMMENTAIRES D'UN BLOG -------- ***/
.blog_comment {
border: var(--border);
padding: 10px;
border-radius: 5px;
margin: 5px auto 10px;
}
.comment_avatar {
margin-right: 10px;
float: left;
}
.comment_avatar img {
object-fit: cover;
object-position: center;
border-radius: 5px;
width: 40px;
height: 40px;
margin: 0;
}
.comment_details {
height: 40px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
.comment_details .left {
flex-grow: 100;
}
.comment_content {
margin-left: 50px;
}
span.topic-author {font-size: 13px;
text-transform: uppercase;
font-weight: 600;
}
tpr {padding-left:5px;
padding-right:5px;}
.focontainer {margin-bottom:20px;}
.particip img {width:11px;
filter:var(--partimg);}
.fleche img {filter:var(--partimg);}
.topicslist_row.row.folder_new.post_new {background:var(--sousfonew);
}
fieldset dt { font-weight: 600;
text-align: right;}
fieldset dt span {color:var(--black) !important;}
span.italic {
opacity: 0.7;
}
.sousfo_cat {
position: absolute;
margin-top: 20px;
text-align: right;
display: flex;
gap: 8px;
}
a.sofo {
padding: 5px 11px;
border-radius: 10px;
background: var(--bordava);
}
.inbetween_profile {
grid-column: 1 / span 2;
padding: 10px;
display: flex;
align-items: center;
width: 100%;
justify-content: center;
height: 123px;
margin-bottom: 35px;
margin-top: -12px;
}
.pseupost {
width: 400px;
max-height: 100px;
margin-top: -12px;
}
.pfrank {
line-height: 12px;
}
.post_pseudo a strong {
font-weight: 500;
font-family: 'Gelica';
font-size: 30px;
text-transform: LOWERCASE;
}
.profil_edition {
background: var(--outsidefo);
border-radius: 10px 10px 0px 0px;
padding: 6px;
text-align: right;
font-size: 13px;
}
.containerpfil {
background: var(--outsidefo);
padding: 70px 15px 15px 15px;
margin-top: -50px;
border-radius: 10px;
}
p.fa_like_list {
margin-block-start: auto;
margin-block-end: auto;
font-size: 12px;
text-transform: uppercase;
background: var(--outsidefo);
border-radius: 5px;
padding: 5px 15px 5px 15px;
line-height: 15px;
margin-top: -11px;
}
div#other {
margin-top: 70px;
}
.user_field.field-messages span.field_content {
font-size: 20px !important;
position: absolute;
text-align: center;
}
.user_field.field-messages span.field_content:after {
content: 'messages';
display: grid !important;
align-content: center;
justify-content: center;
font-size: 13px;
text-transform: lowercase;
font-family: 'roboto mono';
}
.user_field.field-messages span.field_label {
display: none;
}
.user_field.field-points span.field_label {
display: none;
}
.user_field.field-points span.field_content {
font-family: 'Roboto Mono';
font-size: 20px !important;
position: absolute;
text-align: center;
}
.user_field.field-points span.field_content:after {
content: "points";
display: grid !important;
align-content: center;
justify-content: center;
font-size: 13px;
text-transform: lowercase;
font-family: 'roboto mono';
}
.pfmesspts {
display: flex;
align-content: end;
flex-wrap: wrap;
justify-content: space-between;
width: 100px;
margin: 0 !important;
position: fixed;
left: 20%;
height: 22px;
}
.pfilfond {
background: var(--neutralmess);
padding: 10px 10px;
border-radius: 5px;
width: fit-content;
padding-bottom: 60px;
}
.pfil-vava {}
.pfil-vava img {
max-width: 1000px!important;
width: 400px;
height: 200px;
object-fit: cover;
filter: grayscale(1) brightness(0.5);
opacity: 0.8;
border-radius: 10px;
}
.pfil-infotop {
margin-top: -180px;
position: absolute;
margin-left: 152px;
}
.pfil-pseudo {
font-family: gelica;
font-weight: 700;
font-size: 35px;
text-transform: lowercase;
}
.pfil-visit {
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin-top: 10px;
}
.pfil-sujsuj {
margin-top: 10px;
display: flex;
gap: 11px;
margin-bottom: 17px;
}
.pfil-sujsuj a {
text-transform: uppercase;
font-size: 13px;
background-color: var(--outsidefo);
padding: 5px 15px;
color: var(--black);
border-radius: 5px;
}
.pfil-avava img {
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 100%;
border: 8px solid var(--bordava);
}
.pfil-profil div#field_id7 {
display: none;
}
.pfil-profil {
width: 650px;
padding: 10px;
column-count: 3;
text-align: center;
margin-top: 76px;
background: var(--outsidefo);
border-radius: 10px;
}
.pfil-profil .profile_field {
width: auto !important;
margin-bottom: 32px;
}
.pfil-profil .profile_field label {
font-size: 0px;
}
.pfil-profil .profile_field label > span {
font-size: 14px;
}
.pfil-profil div#field_id-8 {
position: absolute;
display: inline-flex;
font-weight: 600;
font-size: 17px;
margin-top: 121px;
margin-left: -108px;
background: var(--insidefo);
border-radius: 10px;
width: 650px !important;
text-align: center;
padding: 5px;
}
.pfil-contact {
position: relative;
align-content: center;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
top: 17px;
margin-right: 9px;
}
.pfil-profil div#field_id5 label {
display: block;
height: 19px;
position: absolute;
margin-top: 51px;
margin-left: 17px;
transform: rotate(-90deg);
}
.pfil-profil div#field_id5 {
margin-left: 225px;
position: absolute;
width: 50px !important;
margin-top: -400px;
}
.pfil-profil div#field_id5 img {
width: 50px;
height: 50px;
object-fit: cover;
filter: grayscale(1);
border-radius:100%;
}
Invité
Après avoir posté, j'ai décidé de tenter de mettre ce code au lieu du "hidden", en tant que dernier effort.
Et tout fonctionne à merveille.
Donc si jamais ça peut aider quelqu'un.
- Code:
.userProfile-wombat {visibility:hidden;}
.wombat-aside.open .userProfile-wombat {visibility: visible;}
Et tout fonctionne à merveille.
Donc si jamais ça peut aider quelqu'un.
Pronoun(s) : Elle/she
Messages : 159
Heyooo, super si t'as réussi à trouver une solution rapidement ! Je peinais à voir le problème au premier coup d'oeil donc je craignais ne pas avoir le temps de me poser plus en détail 
Donc tout est bien qui fini bien 
Merci pour ton message et d'avoir pensé à mon KoFi <3
Hésite pas à venir me montrer le résultat de ton travail et bonne continuation !
Donc tout est bien qui fini bien Merci pour ton message et d'avoir pensé à mon KoFi <3
Hésite pas à venir me montrer le résultat de ton travail et bonne continuation !
|
|
|