Accueil
Créer un forumLe Dark mode cache le design
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
Le Dark mode cache le design
par floraison. Sam 8 Juil 2023 - 12:16
Détails techniques
Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://welcometonewyork.forumactif.com/
Description du problème
Bonjour,J'espère que vous allez bien Smile
Je ne sais pas pourquoi le mode sombre cache mon design, alors que ce que je voudrais c'est que le design s'assombrisse aussi. Est ce que je dois préparer un deuxième design ou y a t'il un code particulier ?
Merci pour votre aide !
Le code Dark Mode est installé dans le template overall_footer_end
- Code:
<!-- Switch thème button -->
<div data-theme-controls>
<button class="color-scheme-toggle" title="Activer le mode sombre" aria-describedby="theme-controls-focus-text">
<!-- Light theme -->
<div class="icon light"><i class="ion-ios-sunny"></i></div>
<!-- Dark theme -->
<div class="icon dark"><i class="ion-ios-moon"></i></div>
</button>
</div>
</body>
</html>
Voici ma feuille CSS si besoin :
- Spoiler:
- Code:
/* VARIABLE DU MODE PAR DEFAUT */
:root {
--neutral: #FFF
--accentClr: blue;
}
/* VARIABLE DU MODE INVERSE (ici mode sombre) */
[data-color-scheme="dark"] {
--neutral: #000;
--accentClr: red;
}
@media (prefers-color-scheme: dark) {
[data-color-scheme=dark] {
--neutral: #000;
--accentClr: red;
}
}
#headerbar-top .navbar.navlinks
{
position: fixed;
top: -20px;
z-index: 99999 !important;
left: 0px;
}
#fa_left,#fa_search,#fa_share{display:none!important;}
/*TEXTE MENU*/
a.mainmenu {
font-family: 'mulish', sans-serif;
font-size: 12px;
font-weight: 400;
letter-spacing: 2px;
text-transform: lowercase;
color: #000000(--color-text);
}
a.mainmenu img {
display:none;
}
.maintitle{
margin-top:-20px;
}
/*toolbar*/
div#fa_search {display:none!important;}
span#fa_share {display:none!important;}
#fa_toolbar {
background-color: # !important; /* Rend transparent le fond principal */}
color: #000000; /* Couleur de fond */
#fa_right {
background-color: #; /* Couleur de fond */
border-radius: 0 0 0 0px; /* Arrondis les angles */
padding-left: 10px; /* Règle la marge intérieure gauche */
padding-right: 12px; /* Règle la marge intérieure droite */
text-transform: lowercase;
font-family: 'arial', sans-serif;
font-size: 15px;}
span#fa_left {
display: none!important;
text-decoration: none!important;
visibility: hidden!important;
}
.post-head {
border-color: transparent!important;
}
.postprofile-avatar img {
border-radius: 0!important;
}
.postprofile-avatar img{width:150px;
height:320px;
width: 200px;}
.postprofile {
width: 236px;
margin-top: 65px;
}
/**SWITCHEROO**/
/*** ------------------------------- ***/
/*** SWITCHEROO - Par Monomer ------ ***/
/*** Gestionnaire de multicompte --- ***/
:root {
--text: #333;
--red: #D31141;
--link: #000;
--light: #FFF;
--lighter: #fafafa;
--grey: #F4F4F4;
--greyer: #;
--border: 1px solid #;
--font: 'Open Sans';
--gap-size: 16px;
--ease: cubic-bezier(0.4, 0.0, 0.2, 1);
--ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
}
/* BARRE SWITCHEROO --- */
.switcheroo {}
.switcheroo[position="static"] {
position: relative;
}
/* si barre EN HAUT */
.switcheroo[position="top"] {
position: fixed;
top: 60px;
left: 0;
z-index: 100;
}
/* si barre EN BAS */
.switcheroo[position="bottom"] {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
}
/* si barre A L'HORIZONRAL */
.switcheroo[direction="horizontal"] {
width: 0%;
}
/* si barre A LA VERTICAL */
.switcheroo[direction="vertical"] {
height: 0%;
}
/* Positionnement des ronds */
.switcheroo__squircles {
display: flex;
margin: 0;
padding: 0;
list-style: none;
padding: var(--gap-size);
gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
flex-direction: column;
}
/* BARRE --- */
.switcheroo {
color: var(--color-text);
background-color: var(--light);
border: var(--border);
font-size: 16px;
}
/* AFFICHAGE DES COMPTES ---*/
/* Rond */
.switcheroo__squircle {
position: relative;
display: grid;
place-items: center;
background-color: var(--grey);
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
transition: border-radius 128ms var(--ease);
}
/* Rond au survol */
.switcheroo__squircle:hover {
border-radius: 6px;
background: var(--greyer)
}
/* Contenenur de l'avatar */
.switcheroo__avatar {}
/* Image de l'avatar */
.switcheroo__avatar img {
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-radius: 50%;
transition: border-radius 128ms var(--ease);
position: relative;
}
/* Image de l'avatar au survol */
.switcheroo__avatar img:hover {
border-radius: 5px;
}
/* Avatar du compte connecté */
.switcheroo__squircle.active,
.switcheroo__squircle.active img {
border-radius: 6px;
cursor: default;
}
/* Indicateur de l'avatar survolé */
.switcheroo__squircle:before {
content: "";
display: block;
background-color: var(--grey);
border: var(--border);
border-radius: 50%;
height: 48px;
width: 48px;
opacity: 0;
pointer-events: none;
position: absolute;
top: -5px;
bottom: 0;
right: 0;
left: -5px;
z-index: -1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* Indicateur du compte sélectionné/actif */
.switcheroo__squircle.active:before {
opacity: 1;
border-radius: 8px;
}
.switcheroo__squircle:hover:before {
border-radius: 8px;
opacity: 1;
transform 128ms var(--ease), opacity 64ms var(--ease);
}
/* Bouton de suppression */
.switcheroo__delete {
display: grid;
place-items: center;
position: absolute;
width: 16px;
height: 16px;
top: -7px;
right: -7px;
border-radius: 50%;
background-color: var(--red);
transform: scale(0);
opacity: 1;
transition: transform 128ms var(--ease), opacity 64ms var(--ease);
cursor: pointer;
color: var(--light);
}
.switcheroo__squircle:hover .switcheroo__delete {
opacity: 1;
transform: scale(1);
}
/* TOOLTIP - INFOBULLE DU PSEUDO ---*/
/* Conteneur du pseudo */
.switcheroo__popper {
background-color: var(--text);
padding: 0.68rem 1rem;
position: absolute;
width: -webkit-max-content;
width: max-content;
border-radius: 4px;
z-index: 0;
opacity: 0;
transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
pointer-events: none;
color: #fff;
}
/* Conteneur du pseudo: si vertical */
.switcheroo[direction="vertical"] .switcheroo__popper {
left: 155%;
top: 50%;
transform-origin: left;
transform: translateY(-50%) scale(0.98);
}
/* Conteneur du pseudo : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper {
top: 155%;
left: 50%;
transform-origin: top;
transform: translateX(-50%) scale(0.98);
}
/* Flèche tooltip */
.switcheroo__popper:before {
content: "";
position: absolute;
width: 24px;
height: 24px;
background-color: var(--text);
z-index: -1;
}
/* Flèche tooltip : si vertical */
.switcheroo[direction="vertical"] .switcheroo__popper:before {
left: -2px;
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
/* Flèche tooltip : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
left: 50%;
top: -2px;
transform: translateX(-50%) rotate(-45deg);
}
/* Positionnement tooltip au survol */
.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
opacity: 1;
transform: translateX(-50%) scale(1);
}
/* LOGO --- */
.switcheroo__logo {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
}
/* DIVIDER : barre de séparation --- */
.switcheroo__divider {
/* display: none */
/* à ajouter si vous voulez supprimer le logo*/
background-color: var(--greyer);
border-radius: 3px;
transform: scale(0.8);
}
/* Divider : si vertical */
.switcheroo[direction="vertical"] .switcheroo__divider {
width: 100%;
height: 2px;
}
/* Divider : si horizontal */
.switcheroo[direction="horizontal"] .switcheroo__divider {
width: 2px;
}
/* AJOUTER UN COMPTE ---*/
/* button : ajouter un compte */
.switcheroo__squircle--button {
transition: border-radius 128ms var(--ease);
color: var(--text);
}
.switcheroo__squircle--button:hover {
color: var(--light);
font-weight: bold;
}
/* MODAL : FENETRE DE CONNEXION --- */
/* Fond de l'afficage connexion */
.monomer-overlay {
position: fixed;
z-index: 999;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
transition: 0.2s opacity ease;
background: rgba(255, 255, 255, 0.6);
}
/* Boîte de connexion */
.monomer-modal {
position: fixed;
z-index: 999;
top: 50%;
left: 50%;
opacity: 0;
width: 94%;
padding: 24px 20px;
transition: 0.2s opacity ease;
transform: translate(-50%, -50%);
border-radius: 5px;
background: var(--grey);
border: var(--border);
color: var(--text);
}
/* Formulaire */
.switcheroo__form {
padding: 48px;
background: var(--light);
border-radius: 5px;
}
/* Champs à remplir */
.switcheroo__form-row {
display: flex;
flex-flow: column;
align-items: flex-start;
margin-bottom: 16px;
}
/* Nom du champs */
.switcheroo__form-label {
margin-bottom: 8px;
font-size: 14px;
text-transform: uppercase;
font-weight: 600;
}
/* Zone de texte */
.switcheroo__form-input {
padding: 6px;
font-size: 16px;
border-radius: 4px;
width: 100%;
background-color: var(--light);
border: var(--border)!important;
border-bottom: 3px solid var(--greyer)!important;
color: var(--text);
cursor: text;
}
/* Bouton de connexion */
.switcheroo__form-button {
border-radius: 8px;
padding: 4px 6px;
border: none;
outline: none;
box-shadow: none;
text-transform: uppercase;
font-size: 14px;
align-self: flex-end;
background-color: var(--light);
border: var(--border);
cursor: pointer;
}
.switcheroo__form-button:hover {
border: 1px solid transparent;
background: var(--text);
color: var(--light);
}
.monomer-modal.monomer-open, .monomer-overlay.monomer-open {
opacity: 1;
}
/* Fermer la boîte de connexion */
.monomer-close {
font-size: 20px;
display: grid;
place-items: center;
width: 24px;
height: 24px;
position: absolute;
top: -7px;
right: -7px;
padding: 5px;
cursor: pointer;
color: #fff;
border: 0;
outline: none;
background: var(--red);
border-radius: 50%;
padding: 0;
}
.monomer-close:hover {
background: var(--text);
font-weight: 700;
}
/**RETIRER LE HEADER NOIR**/
.headerbar {background-color: transparent!important;}
/*SUPPRESSION DU BORDER RADIUS DE L AVATAR*/
.postprofile-avatar img {border-radius:0 !important;
width:largeur en px;
height:hauteur en px;}
/**BANDEAUX DU BAS**/
.statistics {background-color: transparent!important;}
#page-footer {background-color: transparent!important;}
#modernbb > .statistics{
display: none;
}
/**COULEUR DES TITRES DES CATEGORIES**/
a.forumtitle:link,a.forumtitle:visited {
color: #8ECC31;
}
/**FORME CATEGORIES**/
.forumline td {
border-left : 1px solid #ff0000;
}
.forumline {
margin-bottom: 20px;
}
.topiclist.forums .lastpost {
padding-top: 5px!important;
padding-bottom: 0px!important
}
Merci pour votre aide
Dernière édition par floraison. le Sam 8 Juil 2023 - 19:55, édité 1 fois
floraison.- Nouveau membre
- Messages : 10
Inscrit(e) le : 09/01/2022 -
Re: Le Dark mode cache le design
par Toryudo Sam 8 Juil 2023 - 13:56
Bonjour !
Alors, n'oubliez pas de donner un maximum de précisions à chaque fois ; je devine après recherches que vous utilisez ce tuto pour votre mode sombre : https://blankthemerpg.forumactif.com/t77-install-edison
Vous avez un (ou plusieurs) script qui commence par ce code :
Il suffit de supprimer .conteneur_minwidth_IE,#wrap{background-color:#121212;color:grey} (attention à bien garder le reste) : c'est cette partie qui ajoute le fond noir.
Alors, n'oubliez pas de donner un maximum de précisions à chaque fois ; je devine après recherches que vous utilisez ce tuto pour votre mode sombre : https://blankthemerpg.forumactif.com/t77-install-edison
Vous avez un (ou plusieurs) script qui commence par ce code :
- Code:
var versionForo = 'ModernBB';
var posicionBotonModoNoche = 'toolbar';
var css = '.conteneur_minwidth_IE,#wrap{background-color:#121212;color:grey}.inner,.icon,.module,.content,.post,.row{background-color:#1c1c1c;color:grey}.block-footer{background-color:#1d262c}a{color:grey!important}p{color:grey}.block{background-color:#1d262c;color:grey}#picture_legend,#privmsgs-menu{background-color:#1d262c}.inner,.icon,.module,.content,.post,.row:hover{background-color:#1c1c1c!important}li.row{border-color:grey!important}.panel{background-color:#1c1c1c}.row3{background-color:#1c1c1c}#cp-main.panel.sig{background-color:#1c1c1c}.h3,h3{border-color:#1c1c1c}.button,.button1,.button2,input[type="submit"]{background-color:#1d262c}';
Il suffit de supprimer .conteneur_minwidth_IE,#wrap{background-color:#121212;color:grey} (attention à bien garder le reste) : c'est cette partie qui ajoute le fond noir.
Toryudo- Aidactif
-
Messages : 1384
Inscrit(e) le : 31/03/2020 -
Re: Le Dark mode cache le design
par floraison. Sam 8 Juil 2023 - 19:54
Bonjour,
Merci ça a fonctionné, et promis pour le prochain coup je ferai en sorte de donner plus d'info (et j'en ai encore pas mal des questions
)
Encore merci
Merci ça a fonctionné, et promis pour le prochain coup je ferai en sorte de donner plus d'info (et j'en ai encore pas mal des questions
)Encore merci
floraison.- Nouveau membre
- Messages : 10
Inscrit(e) le : 09/01/2022 -
Sujets similaires» Le Dark mode cache le design
» dark mode / mode sombre
» Bannières aléatoires dans dark mode
» Zones blanches dans mon blog en dark mode
» Changer le header en mode Dark/sombre
» dark mode / mode sombre
» Bannières aléatoires dans dark mode
» Zones blanches dans mon blog en dark mode
» Changer le header en mode Dark/sombre
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