Header de fond en darkmode

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 16:05

Détails techniques


Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 09/10/2022
Lien du forum : https://testlvr.forumactif.com/

Description du problème

Bonjour, je reviens vers vous car sur un forum test nous essayons de passer les headers de fond de la version normal avec d'autres header de fond en mode dark mais on a tout essayé ça ne fonctionne pas. On aimerai au moins un header en mode sombre.

Est-ce que cela est possible ?

voici le template :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}"
  xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head><link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Oswald:wght@200&display=swap" rel="stylesheet"><link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet"><script src="https://kit.fontawesome.com/c44767ad25.js" crossorigin="anonymous"></script>
 <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lora&display=swap" rel="stylesheet">
  <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
 <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
 <meta http-equiv="content-script-type" content="text/javascript"/>
 <meta http-equiv="content-style-type" content="text/css"/>
 <!-- BEGIN switch_compat_meta -->
 <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}"/>
 <!-- END switch_compat_meta -->
 <!-- BEGIN switch_canonical_url -->
 <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}"/>
 <!-- END switch_canonical_url -->
 {META_FAVICO}
 {META}
 {META_FB_LIKE}
 <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}"/>
 {T_HEAD_STYLESHEET}
 {CSS}
 <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}"/>
 <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}"/>
 <script src="{JQUERY_PATH}" type="text/javascript"></script>
 <!-- BEGIN switch_recent_jquery -->
 <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
 <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
 <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
 <!-- END switch_recent_jquery -->
 <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
 {RICH_SNIPPET_GOOGLE}

 <!-- BEGIN switch_fb_login -->
 <script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
 <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
 <!-- END switch_fb_login -->

 <!-- BEGIN switch_ticker -->
 <link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css"/>
 <script src="{JQUERY_DIR}/ticker/ticker.js" type="text/javascript"></script>
 <!-- END switch_ticker -->

 <!-- BEGIN switch_ticker_new -->
 <script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
 <script type="text/javascript">//<![CDATA[
 /* Definir le sens de direction en fonction du panneau admin */
 var tickerDirParam = "{switch_ticker.DIRECTION}";
 var slid_vert = false;
 var auto_dir = 'next';
 var h_perso = parseInt({switch_ticker.HEIGHT});

 switch (tickerDirParam) {
 case 'top' :
 slid_vert = true;
 break;
 case 'left':
 break;
 case 'bottom':
 slid_vert = true;
 auto_dir = 'prev';
 break;
 case 'right':
 auto_dir = 'prev';
 break;
 default:
 slid_vert = true;
 }

 $(document).ready(function () {
 var w_cont = $('#fa_ticker_container').width();

 if (w_cont > 0) {
 $('#fa_ticker_container').width(w_cont);

 /* Affichage de la liste */
 $('#fa_ticker_content').css('display', 'block');

 /* Calcul des dimensions du conteneur et des elements */
 var width_max = $('ul#fa_ticker_content').width();
 var width_item = Math.floor(width_max / {switch_ticker.SIZE});
 var height_max = h_perso;

 /* Calcul de la hauteur maximale du conteneur en fonction des elements et de la hauteur personnalisee dans l'admin */
 $('ul#fa_ticker_content li').each(function () {
 if ($(this).height() > height_max) {
 height_max = $(this).height();
 }
 });

 /* Redimensionnement des elements et des images trop larges */
 $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
 if ($(this).width() > width_item) {
 var ratio = $(this).width() / width_item;
 var new_height = Math.round($(this).height() / ratio);
 $(this).height(new_height).width(width_item);
 }
 });

 /* Redimensionnement et centrage du conteneur en mode vertical */
 if (slid_vert) {
 $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
 }

 /* Initialisation du caroussel */
 $('#fa_ticker_content').jcarousel({
 vertical: slid_vert,
 wrap: 'circular',
 auto: {switch_ticker.STOP_TIME},
 auto_direction: auto_dir,
 scroll: 1,
 size: {switch_ticker.SIZE},
 height_max: height_max,
 animation: {switch_ticker.SPEED}
 });
 } else {
 $('ul#fa_ticker_content li:not(:first)').css('display', 'none');
 $('ul#fa_ticker_content li:first').css('list-style', 'none').css('text-align', 'center');
 }
 });
 //]]>
 </script>
 <!-- END switch_ticker_new -->

 <script type="text/javascript">//<![CDATA[
 $(document).ready(function () {
 <!-- BEGIN switch_enable_pm_popup -->
 pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
 if (pm != null) {
 pm.focus();
 }
 <!-- END switch_enable_pm_popup -->
 <!-- BEGIN switch_report_popup -->
 report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
 if (report != null) {
 report.focus();
 }
 <!-- END switch_report_popup -->
 <!-- BEGIN switch_ticker -->
 $(document).ready(function () {
 Ticker.start({
 height: {switch_ticker.HEIGHT},
 spacing: {switch_ticker.SPACING},
 speed: {switch_ticker.SPEED},
 direction: '{switch_ticker.DIRECTION}',
 pause: {switch_ticker.STOP_TIME}
 });
 });
 <!-- END switch_ticker -->
 });

 <!-- BEGIN switch_login_popup -->
 var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
 logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
 <!-- END switch_login_popup -->
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
   <table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_POPUP_HEIGHT}" border="0" cellspacing="1"
         cellpadding="0">
      <tr height="25">
         <td class="catLeft">
            <span class="genmed module-title">{SITENAME}</span>
         </td>
      </tr>
      <tr height="{LIKE_POPUP_MSG_HEIGHT}">
         <td class="row1" align="left" valign="top">
            <div id="like_popup_buttons">
               <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}"/>
                  <input type="button" class="mainoption" value="{L_REGISTER}"
                        onclick="parent.location='{U_REGISTER}';"/>
                  <input id="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
               </form>
            </div>
            <span class="genmed">{LIKE_POPUP_MSG}</span>
         </td>
      </tr>
   </table>
</div>
<!-- END switch_like_popup -->
 <!-- BEGIN switch_login_popup -->
 $(document).ready(function () {
 $(window).resize(function () {
 var windowWidth = document.documentElement.clientWidth;
 var popupWidth = $("#login_popup").width();
 var mypopup = $("#login_popup");

 $("#login_popup").css({
 "left": windowWidth / 2 - popupWidth / 2
 });
 });
 });
 <!-- END switch_login_popup -->
 //]]>
 </script>
 {GREETING_POPUP}
 <!-- BEGIN switch_ticker_new -->
 <style>
 .jcarousel-skin-tango .jcarousel-item {
 text-align: center;
 width: 10px;
 }

 .jcarousel-skin-tango .jcarousel-item-horizontal {
 margin-right: {switch_ticker.SPACING}px;
 }

 .jcarousel-skin-tango .jcarousel-item-vertical {
 margin-bottom: {switch_ticker.SPACING}px;
 }
 </style>
 <!-- END switch_ticker_new -->
 {HOSTING_JS}

 <!-- BEGIN google_analytics_code -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script>
 <script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());
 gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- BEGIN google_analytics_code_bis -->
 gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});
 <!-- END google_analytics_code_bis -->
 </script>
 <!-- END google_analytics_code -->
 <!-- html dark mode -->
<div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox" />
        <div class="slider round"></div>
  </label>
  <em>thème sombre</em>
</div>
  
  <!--fin html dark mode -->
  
  <!-- début script dark mode -->
  <script>
  const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    document.documentElement.setAttribute('data-theme', currentTheme);
  
    if (currentTheme === 'dark') {
        toggleSwitch.checked = true;
    }
}

function switchTheme(e) {
    if (e.target.checked) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('theme', 'dark');
    }
    else {        document.documentElement.setAttribute('data-theme', 'light');
          localStorage.setItem('theme', 'light');
    }    
}

toggleSwitch.addEventListener('change', switchTheme, false);</script>
  <!-- fin dark mode -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}"
  vlink="{T_BODY_VLINK}">
            <div class="hautbas"><a href="#top"><img src="https://i.imgur.com/W8vtRQG.png" alt="Revenir en haut"></a> <a href="#bottom"><img src="https://i.imgur.com/EMyBf2h.png" alt="Aller en bas"></a></div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
 <h1><img src="https://2img.net/i/fa/hitskin/hitskin_logo.png" alt=""/> <em>Hit</em>skin.com</h1>
 <div class="content">
 <p>
 {hitskin_preview.L_THEME_SITE_PREVIEW}
 <br/>
 <span>{hitskin_preview.U_INSTALL_THEME}<a
 href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
 </p>
 </div>
</div>
<!-- END hitskin_preview -->

<!-- BEGIN inactive_users_modal -->
<div id="inactive_popup" style="z-index: 10000 !important;">
 <table class="forumline" style="padding: 0px; width: 480px;" border="0" cellspacing="1"
   cellpadding="0">
 <tr height="25">
 <td class="catLeft">
 <span class="genmed module-title">{inactive_users_modal.L_MODAL_TITLE}</span>
 </td>
 </tr>
 <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
 <td class="row1" align="left" valign="top">
 <span class="genmed">{inactive_users_modal.L_MODAL_BODY}</span>
 <div id="inactive_popup_buttons">
 <input type="button" id="inactive_popup_url" class="mainoption"  value="{inactive_users_modal.L_MODAL_BUTTON}">
 <input type="button" id="inactive_popup_close" class="button" value="{inactive_users_modal.L_CLOSE}">
 </div>
 </td>
 </tr>
 </table>
</div>
<script type="text/javascript">
 $('#inactive_popup #inactive_popup_close').on('mouseup', function () {
 document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
 $('#inactive_popup').hide(50);
 });
 $('#inactive_popup #inactive_popup_url').on('mouseup', function () {
 document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;";
 location.href = '{inactive_users_modal.U_MODAL}'
 })
</script>
<!-- END inactive_users_modal -->

<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
 <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1"
   cellpadding="0">
 <tr height="25">
 <td class="catLeft">
 <span class="genmed module-title">{SITENAME}</span>
 </td>
 </tr>
 <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
 <td class="row1" align="left" valign="top">
 <div id="login_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="mainoption" value="{L_LOGIN}"/>
 <input type="button" class="mainoption" value="{L_REGISTER}"
   onclick="parent.location='{U_REGISTER}';"/>
 <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}"/>
 </form>
 </div>
 <span class="genmed">{LOGIN_POPUP_MSG}</span>
 </td>
 </tr>
 <!-- BEGIN switch_quick_login -->
 <tr>
 <td class="row1" align="left" valign="top">
 <div class="social_btn">
 <!-- BEGIN fb_quick_connect -->
 <div class="fb-login-button"></div>
 <!-- END fb_quick_connect -->
 &nbsp;
 <!-- BEGIN topicit_quick_connect -->
 <div class="ti-connect"></div>
 <!-- END topicit_quick_connect -->
 </div>
 </td>
 </tr>
 <!-- END switch_quick_login -->
 </table>
</div>
<!-- END switch_login_popup -->

<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
 <table class="forumline" width="{LIKE_POPUP_WIDTH}" height="{LIKE_POPUP_HEIGHT}" border="0" cellspacing="1"
   cellpadding="0">
 <tr height="25">
 <td class="catLeft">
 <span class="genmed module-title">{SITENAME}</span>
 </td>
 </tr>
 <tr height="{LIKE_POPUP_MSG_HEIGHT}">
 <td class="row1" align="left" valign="top">
 <div id="like_popup_buttons">
 <form action="{S_LOGIN_ACTION}" method="get">
 <input type="submit" class="mainoption" value="{L_LOGIN}"/>
 <input type="button" class="mainoption" value="{L_REGISTER}"
   onclick="parent.location='{U_REGISTER}';"/>
 <input id="like_popup_close" type="button" class="button" value="{L_LIKE_CLOSE}"/>
 </form>
 </div>
 <span class="genmed">{LIKE_POPUP_MSG}</span>
 </td>
 </tr>
 </table>
</div>
<!-- END switch_like_popup -->

<a name="top"></a>
{JAVASCRIPT}

<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
 <tr>
 <td class="bodyline">
 <table width="100%" cellspacing="0" cellpadding="0" border="0">
 <tr>
 <!-- BEGIN switch_logo_left -->
               <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
               </td>
               <!-- END switch_logo_left -->
               <td align="center" width="100%" valign="middle">
                  <!-- BEGIN switch_logo_center -->
                                <a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
                  <br/>
                  <!-- END switch_logo_center -->
                  <div class="maintitle">{MAIN_SITENAME}</div>
                  <br/>
                  <span class="gen">{SITE_DESCRIPTION}<br/>&nbsp; </span>
               </td>
               <!-- BEGIN switch_logo_right -->
               <td><a href="{U_INDEX}"><img loading="lazy" src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1"/></a>
               </td>
               <!-- END switch_logo_right -->
 </tr>
 </table>

 <table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
 <tr>
 <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
 </tr>
 </table>

 <div style="clear: both;"></div>

 <!-- BEGIN switch_ticker_new -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
 <tr>
 <td align="left" class="row1">
 <div id="fa_ticker_container">
 <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
 <!-- BEGIN ticker_row -->
 <li>{switch_ticker.ticker_row.ELEMENT}</li>
 <!-- END ticker_row -->
 </ul>
 </div>
 </td>
 </tr>
 </table>
 </div>
 <!-- END switch_ticker_new -->

 <!-- BEGIN switch_ticker -->
 <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
 <tr>
 <td align="left" class="row1">
 <div id="fa_ticker_container">
 <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
 <div class="fa_ticker_content">
 <!-- BEGIN ticker_row -->
 <div>{switch_ticker.ticker_row.ELEMENT}</div>
 <!-- END ticker_row -->
 </div>
 </div>
 </div>
 </td>
 </tr>
 </table>
 </div>
 <!-- END switch_ticker -->

 <div id="page-body">
 <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
 <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
 <tbody>
 <tr>
 <td valign="top" width="{C1SIZE}">
 <div id="{ID_LEFT}">
 <!-- BEGIN giefmod_index1 -->
 {giefmod_index1.MODVAR}
 <!-- BEGIN saut -->
 <div style="height:{SPACE_ROW}px"></div>
 <!-- END saut -->
 <!-- END giefmod_index1 -->
 </div>
 </td>
 <td valign="top" width="100%">
 <!-- BEGIN html_validation -->
 </td>
 </tr>
 </tbody>
 </table>
 </div>
 </div>
 </td>
 </tr>
</table>
</body>
</html>
<!-- END html_validation -->

Merci à vous


Dernière édition par sueki le Lun 10 Oct 2022 - 18:09, édité 1 fois
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 16:07

Voici le css du darkthème :

Code:
:root{
/*ici vous devez rentrer tout vode codes de couleur, mais vraiment pour TOUT pour votre code par défaut*/
    --az: #db844b;
  --ae:#eec4a6;
--ar:#f3e8da;
--aq:#dee6e9;
--as:#5c2d0e;
--ad:#c271a1;
--aw:#44563c;
--ax:#e74c3c;
--ac:#f5f5f7;
--af:#bfd1db;
--za:#8eaab3;
--zq:#fafdfb;
--zs:#fdf4f9;
  --ag:#f3e8da;
--color-font01:#5c2d0e;
--color-font02:#f3e8da;
--color-font03:#621503;
--color-font04:#eec4a6
--color-font05:#db844b;
--color-font06:#ff7e00;
--color-font07:#3c2219;
--color-font08:#594f3c;
--color-font09:#dee6e9;
--color-font10:#d96d28;
--color-font11:#ef8735;
--color-font12:#b79947;
--color-font13:#9597aa;
  --color-font14:#994E1D;
--white:#fff;
--black:#000;
  --gris1:url('https://i.imgur.com/qZpkvi8.png');
    --gris2:url('https://i.imgur.com/NU3rITi.png');
--qeel:url('https://i.imgur.com/hq6gFOs.png');

}

/*dark mode*/

[data-theme="dark"]{
/*ici vous devez rentrer tout vode codes de couleur, mais vraiment pour TOUT, pour le dark mode (donc les équivalents du premier root mais dans les couleurs qui vont changer en activant le toggle*/
    --az: #5c3921;
--ae:#827063;
--ar:#2e2c2a;
--aq:#2d2e2e;
--as:#f2e7d9;
--ad:#3d2433;
--aw:#b4e49e;
--ax:#4b1914;
--ac:#5c5c5c;
--af:#626b70;
--za:#30393c;
--zq:#0f0f0f;
--zs:#7a2b09;
  --ag:#70350d;
--color-font01:#f2e7d9;
--color-font02:#2e2c2a;
--color-font03:#946a34;
--color-font04:#827063;
--color-font05:#984311;
--color-font06:#dc8632;
--color-font07:#a3551b;
--color-font08:#9f6f11;
--color-font09:#2d2e2e;
--color-font10:#e18852;
--color-font11:#90511e;
--color-font12:#52441f;
--color-font13:#eac9bb;
    --color-font14:#b57146;
--white:#000;
--black:#fff;
  --gris1:url('https://i.imgur.com/zKEnRIH.png');
      --gris2:url('https://i.imgur.com/xRbk2vB.png');
--qeel:url('https://i.imgur.com/hC0nnmv.png');
 
}


/*toggle*/
.theme-switch-wrapper {
    display: inline-block;
    align-items: center;
    position: fixed;
    z-index: 99;
    right: 0;}

.theme-switch-wrapper em {
    font-size: 10px;
          text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.6;}
.theme-switch {
  display: inline-block;
  height: 10px;
  position: relative;
  width: 20px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #D69B71;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: var(--blanc);
  bottom: 4px;
  content: "";
  height: 12px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 12px;
}

input:checked + .slider {
  background-color: #fbe2a7;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

/*fin dark mode*/

nos headers de base :
Code:

/***************HEADER************/
.ban1 { background-image: url('https://i.imgur.com/97AuaUX.gif'); }
.ban2 { background-image: url('https://i.imgur.com/GsBG6RO.gif'); }
.ban3 { background-image: url('https://i.imgur.com/3iwFU0n.gif'); }
.ban4 { background-image: url('https://i.imgur.com/VoWXB0j.gif'); }
.ban5 { background-image: url('https://i.imgur.com/8zybZrw.gif'); }
.ban6 { background-image: url('https://i.imgur.com/Jg9rYlA.gif'); }

et le script dans la description du site :
Code:
<script type=text/javascript> var banListe=['1','2','3','4','5','6']; document.write('<body class=ban' + banListe[Math.floor(Math.random()*banListe.length)] +'>'); </script>

Merci de votre aide
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par 'Christa Lun 10 Oct 2022 - 16:32

Hellow !

Tu devrais pouvoir résoudre ton problème simplement en rajoutant de nouvelles bannières pour le mode sombre, comme ceci :
Code:

[data-theme="dark"] .ban1 { background-image: url('https://i.imgur.com/97AuaUX.gif'); }
[data-theme="dark"] .ban2 { background-image: url('https://i.imgur.com/GsBG6RO.gif'); }
[data-theme="dark"] .ban3 { background-image: url('https://i.imgur.com/3iwFU0n.gif'); }
[data-theme="dark"] .ban4 { background-image: url('https://i.imgur.com/VoWXB0j.gif'); }
[data-theme="dark"] .ban5 { background-image: url('https://i.imgur.com/8zybZrw.gif'); }
[data-theme="dark"] .ban6 { background-image: url('https://i.imgur.com/Jg9rYlA.gif'); }

Le script se contente de changer la classe de la bannière (de ban1 à ban6), donc si on change l'image de fond associée à ces classes pour le mode sombre, ça devrait faire l'affaire (pensez à rafraichir le cache !).

Voilà voilà Smile
'Christa

'Christa
***

Féminin
Messages : 134
Inscrit(e) le : 04/06/2009

https://lostmindy-test.forumactif.com/
'Christa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 17:07

Bonjour, je viens de tester et ça ne fonctionne pas, ça me fait planter tous les codes :/
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par 'Christa Lun 10 Oct 2022 - 17:37

Plop !

Est-ce que tu as bien mis ce fragment de code que j'ai donné dans ton CSS ? Est-ce que tu peux partager ta feuille de style complète ?

Qu'est-ce qui plante exactement ?
'Christa

'Christa
***

Féminin
Messages : 134
Inscrit(e) le : 04/06/2009

https://lostmindy-test.forumactif.com/
'Christa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 17:39

Oui j'avais tout mis au début du code pour le retrouver

Code:
:root{
/*ici vous devez rentrer tout vode codes de couleur, mais vraiment pour TOUT pour votre code par défaut*/
    --az: #db844b;
   --ae:#eec4a6;
--ar:#f3e8da;
  --arr:#f3e8da;
--aq:#dee6e9;
--as:#5c2d0e;
  --ass:#5c2d0e;
--ad:#c271a1;
--aw:#44563c;
--ax:#e74c3c;
--ac:#f5f5f7;
--af:#bfd1db;
--za:#8eaab3;
--zq:#fafdfb;
--zs:#fdf4f9;
  --ag:#f3e8da;
  --am:#f3e8da;
    --fr:#f3e8da;
  --tr:#f3e8da;
--color-font01:#5c2d0e;
--color-font02:#f3e8da;
--color-font03:#621503;
--color-font04:#eec4a6
--color-font05:#db844b;
--color-font06:#ff7e00;
--color-font07:#3c2219;
--color-font08:#594f3c;
--color-font09:#dee6e9;
--color-font10:#d96d28;
--color-font11:#ef8735;
--color-font12:#b79947;
--color-font13:#9597aa;
  --color-font14:#994E1D;
--white:#fff;
--black:#000;
  --gris1:url('https://i.imgur.com/qZpkvi8.png');
    --gris2:url('https://i.imgur.com/NU3rITi.png');
--qeel:url('https://i.imgur.com/hq6gFOs.png');

}

/*dark mode*/

[data-theme="dark"]{
/*ici vous devez rentrer tout vode codes de couleur, mais vraiment pour TOUT, pour le dark mode (donc les équivalents du premier root mais dans les couleurs qui vont changer en activant le toggle*/
    --az: #5c3921;
--ae:#827063;
--ar:#2e2c2a;
  --arr:#a24c1c;
--aq:#2d2e2e;
--as:#f2e7d9;
  --ass:#611705;
--ad:#3d2433;
--aw:#b4e49e;
--ax:#4b1914;
--ac:#5c5c5c;
--af:#626b70;
--za:#30393c;
--zq:#0f0f0f;
--zs:#7a2b09;
  --ag:#70350d;
  --am:#000;
    --fr:#984311;
    --tr:#000;
--color-font01:#f2e7d9;
--color-font02:#2e2c2a;
--color-font03:#946a34;
--color-font04:#827063;
--color-font05:#984311;
--color-font06:#dc8632;
--color-font07:#a3551b;
--color-font08:#9f6f11;
--color-font09:#2d2e2e;
--color-font10:#e18852;
--color-font11:#90511e;
--color-font12:#52441f;
--color-font13:#eac9bb;
    --color-font14:#b57146;
--white:#000;
--black:#fff;
  --gris1:url('https://i.imgur.com/zKEnRIH.png');
      --gris2:url('https://i.imgur.com/xRbk2vB.png');
--qeel:url('https://i.imgur.com/hC0nnmv.png');
  
}


/*toggle*/
.theme-switch-wrapper {
    display: inline-block;
    align-items: center;
    position: fixed;
    z-index: 99;
    right: 0;}

.theme-switch-wrapper em {
    font-size: 10px;
          text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    opacity: 0.6;}
.theme-switch {
  display: inline-block;
  height: 10px;
  position: relative;
  width: 20px;
}

.theme-switch input {
  display:none;
}

.slider {
  background-color: #D69B71;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
}

.slider:before {
  background-color: var(--blanc);
  bottom: 4px;
  content: "";
  height: 12px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 12px;
}

input:checked + .slider {
  background-color: #fbe2a7;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 20px;
}

.slider.round:before {
  border-radius: 50%;
}

/*fin dark mode*/

::-webkit-scrollbar {        background: transparent;        border: 0;         width: 3px;}
::-webkit-scrollbar-thumb {        background: transparent;        border: 1px transparent ; margin:1px; height:1px; }


#frame_chatbox {
width: 750px;
  margin-left: -50px;
}

.sprite-icon_reply {    background: url(https://2img.net/i/fa/sprite_icons.png) no-repeat top left;    background-position: -887px 0;    height: 9px;    width: 18px;display:none;}
.hautbas img { max-height:150px; max-width:80px;}.hautbas{    position: fixed;    bottom: 25px;    right:25px;    z-index: 999;}
/* liens header */
.liens_header_categories a {
      
        -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--az), var(--ae))!important;
    font-family: "Lora";
    font-style: normal;
    font-variant: normal;
    font-weight: bold ;
    letter-spacing: 1px;
    text-shadow: 0 0 0px rgba(0,0,0,0.4)!important;
    text-transform: uppercase;
        letter-spacing: 3px;
        margin: 0 2%;
        display: inline-block;

}
.liens_header_categories {
    text-align: center;
    margin:1% 0;
}



/**************PROFIL ET SUJET************/
.nouveau_repondre{width:800px;margin:2% auto}
.nouveau_repondre img{margin:0 2% 0 0}
.fil_ariane a{color:#5c2d0e;text-shadow: 0 0 2px #eec4a6; font-weight:normal;
    letter-spacing:2px;font-size:13px;font-family:imbue;text-transform:uppercase}
.fil_ariane{width:800px;margin:2% auto;font-size:13px}
.pagination_affichage_sujet img{display:none}
.pagination_affichage_sujet{float:right;font-family:imbue;text-transform:uppercase}
table.affichage_sujets{background:var(--ar);border:0 solid transparent;width:800px;margin:auto;border-radius:0;border-spacing:0;
    font-size:12px;font-family:imbue;color:var(--color-font01);}
.header_sujet h1{background:var(--ae);text-align:center;display:block;color:var(--color-font01);letter-spacing:5px;color:var(--color-font01);
    font-weight:normal;font-size:16px;padding:2%;margin:0;text-transform:uppercase;font-family:imbue}
.as_infos{font-size:12px;letter-spacing:2px;margin:2% 1% 2%;color:var(--color-font01);text-transform:lowercase;font-family:Cormorant Garamond}
.as_profil{display:block;letter-spacing:2px;padding:0 1%;text-align:center;width:210px;margin:0 0 0 4%}
.as_profil_content{background:var(--ae);border-radius:0;border:1px solid var(--ae);padding:5% 2%}
.as_pseudo{background:var(--ar);padding:3%;font-size:14px;margin:1% 0 5%;text-transform:uppercase;font-family:imbue}
.as_pseudo a span strong{font-weight:normal}
.as_rang{margin:5% 1%;background:var(--ar);border-radius:10px;padding:2%;text-transform:uppercase;font-family:imbue}
.as_rang::before,.as_rang::after{content:"  "}
.as_avatar img{display:block}.as_contenu_profil{text-align:left;color:(--color-font01);margin:8% 0 0;text-transform:lowercase;font-family:cormorant garamond;font-size:11px}
.as_contenu_profil img{margin:0 2% 0;max-width:180px;max-height:200px;border-radius:0}
.as_contenu_profil .label span{color:var(--color-font02);!important;text-transform:uppercase;font-family:imbue;font-size:12px}
.as_options a::after{content:" • ";color:var(--color-font02);font-size:14px;text-transform:uppercase}
img.i_icon_quote,img.i_icon_edit,img.i_icon_delete{display:none}
.as_options a[href*="mode=quote"]::before,.as_options a[href*="mode=editpost"]::before,.as_options a[href*="mode=ip"]::before,.as_options a[href*="mode=delete"]::before{color:var(color-font03)}
.as_options a[href*="mode=quote"]::before{content:"Citer";text-transform:uppercase;font-family:imbue;font-size:14px}
.as_options a[href*="mode=editpost"]::before{content:"Editer";text-transform:uppercase;font-family:imbue;font-size:14px}
.as_options a[href*="mode=ip"]::before{content:"IP";text-transform:uppercase;font-family:imbue;font-size:14px}
.as_options a[href*="mode=delete"]::before{content:"SUPP";text-transform:uppercase;font-family:imbue;font-size:14px}
.as_options a:last-child::after{content:""}.as_options{margin:2% 0}table.as_content_message{padding:2% 9%}
.content_message{text-align:justify;color:var(color-font01)}.postbody{font-size:12px;line-height:18px;margin:0 5%}
form#quick_reply{margin:2% 0}
table.as_content_message .gensmall{color:(color-font01)}
.signature_div::before{content:"";background:url() no-repeat;width:239px;height:6px;display:block;margin:5% auto 0}
.as_options_sujet a,.reponse_rapide input{background:var(--ar);color:(color-font01);display:inline-block;
    font-size:8px;font-weight:500;line-height:3;margin:0 2%;text-transform:uppercase;width:200px;font-family:Lora;font-size:12px;}
.as_options_sujet a:hover, .reponse_rapide input:hover {background: var(--ar);}
.as_options_sujet { text-align: center;margin: 3% 0;}
.as_moderer {font-size: 0; width: 200px;text-align: center; margin: auto; display: inline-block;}
table.reponse_rapide { margin: 2% 0 0;}
table.reponse_rapide .row2 {background: none;}
.reponse_rapide input {border: 0; line-height: 2.5;margin: 0;cursor: pointer;}
.as_contenu_profil {height: 350px; overflow-y: auto;}
.as_rang img {border:0px;height:60px;width:150px; margin-left: auto; margin-right: auto; }

/*profil*/
.postdetails textarea {width:210px;overflow: auto; }
.fondjustifprofil {text-align : justify; }
.postdetails.poster-profile img { max-width: 200px;z-index:30;border:1px solid var(--ar)}
.nompro {font-family: 'Lora'; font-size: 16px; line-height: normal;
    text-transform: lowercase; text-align : center; padding: -40px;}
.rangpro { font-family: 'Lora'; font-size: 12px; font-weight: 400;
    letter-spacing: 3px;
    line-height: normal; text-transform: uppercase; padding: -20px;text-align : center;}
.dumb{transition-duration: 1s;transition-delay: 0.3s;width:160px;margin-top:-12px;}
.dumb:hover {transition-duration: 1s;transition-delay: 0.3s;transform: rotate(-5deg); /* Équivalent à rotateZ(45deg) */}
.prof {width: 207px; height: auto;background: var(--ar);}
      
.icon_online {z-index: 99;position:absolute;margin-left:-120px;margin-top:-30px;}
.textep {width: 200px;margin-left: 4px; margin-right: 4px; margin-top: 0px;}
.textec {text-align: justify; display: inline-block;padding: 2px; border: 1px solid var(--aq);
    font-size: 9px;margin-bottom: 2px; margin-top: 2px; margin-left: 3px;width: 185px;
    line-height: 10px; background-color: var(--ar);color:var(--color-font01)}
.textec img {width: 180px;}
.titpro {color:var(--color-font01) !important;font-size: 13px; font-family: Lora; text-transform: uppercase; }



.PFIL{margin:auto;width:800px;font-family:caudex}
.namePFIL{margin-bottom:10px;padding:10px;text-transform:uppercase;text-align:left;font-family:caudex;
    background:var(--ar);color:var(--color-font01)}

.namePFIL span strong{color:var(--white);text-transform:uppercase}.avPFIL{display:inline-block;
    vertical-align:top;margin-right:10px;width:200px;height:320px;overflow:hidden}
#adminPFIL{position:absolute;margin-top:130px;margin-left:7px;width:185px;height:0;overflow:hidden;
    font-size:11px;text-align:center;background:rgba(0,0,0,0.8);
    color:var(--color-font01);transition:all .75s;-webkit-transition:all .75s}
.avPFIL:hover #adminPFIL{width:175px;height:43px;padding:5px}
#adminPFIL a{color:var(--white)}.boxPFIL{display:inline-block;vertical-align:top;width:590px}
.sbjPFIL{display:inline-block;vertical-align:top;width:75px;height:27px;padding-top:13px;text-transform:uppercase;
    text-align:center;font-size:10px;
    background:var(--ae);color:var(--color-font01) !important;font-family:caudex}
.msgPFIL{display:inline-block;vertical-align:top;margin:0 10px;width:95px;height:27px;padding-top:13px;
    text-transform:uppercase;text-align:center;
    font-size:10px;background:var(--ar);color:var(--color-font01) !important;font-family:caudex}
.lstPFIL{display:inline-block;vertical-align:top;width:400px;height:27px;
    padding-top:13px;text-align:center;font-size:9px;background:va(--ae);color:var(--color-font01);font-family:caudex}
.lstPFIL span{text-transform:uppercase;color:var(--color-font01);font-family:caudex;
    font-size:10px;}.abtPFIL{display:inline-block;margin-top:10px;margin-right:10px;width:460px;height:250px;
    padding:10px;overflow:auto;font-size:11px;background:transparent;
    color:var(--color-font04);text-shadow:var(--color-font04) 0 0 2px;font-weight:900 ;text-transform:uppercase;font-family:caudex}
.abtPFIL div span{text-transform:uppercase;color:var(--color-font01)}
.abtPFIL div{padding:2px 0;color:var(--color-font01)}
.abtPFIL .field_uneditable{display:inline-block}#ktactPFIL{display:inline-block;vertical-align:top;
    margin-top:10px;width:100px;height:255px;padding-top:15px;text-align:center;background:#f3e8da;
    color:transparent}.ktactPFIL img{margin:auto;margin-bottom:10px;max-width:80px}
.boxRPG{margin:auto;margin-top:10px;width:780px;padding:10px;background:;}
.boxRPG span{text-transform:uppercase;color:var(--color-font01);}.boxRPG div:nth-of-type(1) br{display:none}
.ajax-profil_edit{position:absolute;z-index:15;margin-top:4px;margin-left:7px}
.ajax-profil_edit img{width:7px}


/****************** CODAGE CATEGORIES PAR MAGMA. ***********************/
.imgcate { background-image: var(--gris2) ; margin-top: -5px; width:800px; height: 50px;}
    
    
.lastpost-avatar {
  background-image: url(https://i.imgur.com/awkp1qa.jpg);
  background-size: cover;
  border: 2px double var(--az);
  height: 110px;
  padding: 0px;
  width: 69px;
}

.lastpost-avatar img {
width: 69px;
height: 110px; border: 2px double var(--az); padding: 0px;
     filter: grayscale(0);
    border-radius: 0;
    transition: 1s;
  filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0); border-radius: 0px; -webkit-radius: 0px;  }

.lastpost-avatar img:hover {
padding: 0px;
    filter: grayscale(80%); -webkit-filter: grayscale(80%);
  -moz-filter: grayscale(80%); -ms-filter: grayscale(80%); -o-filter: grayscale(80%);
  opacity: 0.9; -htm-transition:1s; -moz-transition:1s; -o-transition:1s; -webkit-transition:1s;
 filter: grayscale(80%); -webkit-filter: grayscale(80%);
  -moz-filter: grayscale(80%); -ms-filter: grayscale(80%); -o-filter: grayscale(80%);
  opacity: 0.8;    /* l'opacite que vous voulez au depart */
    -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* Hack IE8 */
    filter: alpha(opacity = 25); /* Hack IE 5-7 */
 -htm-transition:1s; -moz-transition:1s; -o-transition:1s; -webkit-transition:1s;
  -webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */
    -moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */
    -o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */
    transition: opacity 0.5s ease-in-out;  }
.nav img {max-width:120px;}
.modifcat { background-color : var(--am); width: 800px; padding-bottom: 10px;} /*** le fond de la catégorie ***/
.catégoz{ background-image:var(--gris1) ;  background-repeat : no-repeat ; width : 800px ; height : 110px; margin-bottom: -2px} /*** l'emplacement des titres catégories ***/
.catégoz h2 { font-size: 20px; font-family: georgia; letter-spacing: 1px; color:var(--color-font05);font-weight: bold;
  text-transform: uppercase; text-shadow: 0 1px 0 var(--ar); position : relative ; top : 40px; left: 13px;} /*** le style des titres des catégories ***/
 
.statdescrip { border-radius: 2px; -webkit-border-radius: 2px; width: 350px; height: 115px;
  background-color: var(--white); border:1px solid var(--fr);  margin-top: -16px; padding-left: 4px;  padding-right: 4px;
  padding-bottom: px;} /*** le style du bloc des descriptions ***/
.descrip_bloc1 { width: 335px; height: 80px; overflow:auto; text-align: justify;  line-height: 11px; padding: 4px;
 font-family: Tahoma; padding-bottom: 6px; font-size: 10px; background-color: var(--am);
    color:var(--color-font05);border:1px solid var(--fr);} /*** le style des descriptions ***/
.statistiques_cat {background-color: var(--am);  width: 135px; height: 115px;
  border-radius: 2px; -webkit-border-radius: 2px; margin-top: -7px; border:1px solid var(--fr);} /** le style des statistiques en général ***/
.stat_general{ width: px; height: 86px; overflow:auto; font-size: 9px; line-height: 13px;
 font-family: 'Roboto Condensed', sans-serif;  font-size: 11px; var(--color-font04);}
.bascat{background-image:var(--gris2);margin-top: -5px; width:800px; height: 50px;}

.sousfofo {

padding-top: -15p; text-align: left; height: 120px;width:160px;
    background-color: var(--white);
overflow:auto;
    border-radius: 2px; -webkit-border-radius: 2px;margin-left: -4px; border:1px solid var(--fr);}
.sousfofo a { overflow: x;
color: var(--color-font05); width: 142px!important; display:inline-block; border-collapse: separate; height : 9px;
font-family: georgia; background-color: var(--tr); line-height: 12px; padding: 2px; margin-left: 2px;
    margin-right: 2px; margin-bottom: 2px;
  margin-top: 1px;  -webkit-transition-property:color letter-spacing; -webkit-transition-duration:0.5s;
  -webkit-transition-timing-function:ease-in; font-weight: bold;
/* Bientôt supporté par Firefox */
  -moz-transition-property:color letter-spacing; -moz-transition-duration:0.5s;
  -moz-transition-timing-function:ease-in;
font-size: 8px; text-transform : lowercase; }

.sousfofo a:hover {
color: var(--color-font01);
 font-family: Arial;
text-shadow: 0px 0px 2px solid #f3e8da; font-size: 8px; text-transform : lowercase; }

.forumutitre { padding-top: -50px!important;}
.forumtitre a { color: var(--color-font05); font-size: 15px; font-family: georgia; letter-spacing: 2px;
text-transform: uppercase; text-shadow: 0 1px 0 var(--ar); padding-top: -20px!important;
  -webkit-transition-property:color letter-spacing; -webkit-transition-duration:0.5s;
  -webkit-transition-timing-function:ease-in; font-weight: bold;
/* Bientôt supporté par Firefox */
  -moz-transition-property:color letter-spacing; -moz-transition-duration:0.5s;
  -moz-transition-timing-function:ease-in;
/* … et lorsque ce sera standardisé */ margin-left: 100px;
  transition-property:color letter-spacing; transition-duration:0.5s; transition-timing-function:ease-in;}

.forumtitre a:hover {color:var(--color-font01) !important; letter-spacing: 2px;}
.stat1 {font-size: 8px; font-family: Tahoma; letter-spacing: 0px; color:var(--color-font05);
    height : 10px; background-color: var(--white);
  text-transform: uppercase;  text-align: center;  }
.forumdesc1 {text-align: center;  font-size: 10px; padding-top: 15px; }
.image_cate {margin-top: 20px;}

/********************* FIN DES CODES CATEGORIES ********************************/

/****************navigation!**********/
#fa_toolbar #fa_right #notif_list li .contenttext a{color:#fafbfd!important;text-decoration:underline !important;vertical-align:baseline}
#fa_right a.rightheaderlink{color:var(--color-font06);line-height:30px;margin-left:10px;vertical-align:top}
.navig{color:var(--color-font06);margin:-110px;height:25px;padding:2px;width:850px;}.navig img{display:none !important}
#fa_menulist :link,#fa_menulist :visited{color:var(--color-font06)!important;font-family:Lora;font-size:16px;}
#fa_menulist :link,#fa_menulist :visited{color:var(--color-font06)!important}
#fa_menulist{background-color:var(--ar);border:1px solid var(--ar);border-top:0 solid var(--ar);
    display:none;line-height:32px;list-style-type:none;
    margin:0;min-width:175px;padding:0 10px 0 150px;
    position:absolute;width:auto;z-index:999;color:red !important;}
a.mainmenu{  font-family:Lora;font-size:16px;font-weight:900;
    text-align:center;text-transform:uppercase;-webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--arr),var(--ass))!important;}
    #fa_right #fa_menu #fa_welcome,#fa_right.notification #fa_menu #fa_welcome{-webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--arr),var(--ass))!important;font-weight:bold;font-family:Lora;font-size:16px;}
#fa_right #fa_notifications,#fa_welcome{margin: 5px; line-height:30px;-webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--arr),var(--ass))!important;padding:0 14px;font-weight:bold;font-size:16px;font-family:Lora}
a.mainmenu img {display:none;}
#fa_menulist :link,#fa_menulist :visited{-webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--arr),var(--ass))!important;font-weight:bold;font-family:Lora;font-size:15px;}

#fa_toolbar #fa_right #notif_list li .contenttext{float:left;height:1.0em;overflow:hidden;background:var(--ar);
    width:23em;
    font-weight:bold;font-family:Lora;var(--color-font01);font-size:18px;}

#fa_menulist :link,#fa_menulist :visited{color:var(--color-font02) !important}

#fa_toolbar #fa_right #notif_list li:first-child{padding-top:.5em;background:var(--ar);color:var(--color-font01);}

#fa_toolbar{background-color:var(--ar)!important;color:var(--color-font02);
    font-size:14px;height:30px;left:0;font-family: 'Lora';z-index:999;text-transform:uppercase}

#fa_toolbar #fa_right #notif_list li{color:var(--color-font01);display:block;font-size:1em;line-height:1.2em;
    margin:0;padding:0 .5em .5em;background:var(--ar);}
#fa_toolbar{background-color:var(--ar)!important;color:var(--color-font01);
    font-family: 'Lora';font-size:15px;height:40px;left:0;text-transform:uppercase;z-index:999}
.fa_fix{position:fixed !important;right:0;top:0}
.fa_toolbar_xl_sized{min-width:980px;width:100%}span#fa_share{display:none !important}
div#fa_search{display:none !important}.fa_tbmainelement#fa_left{display:none !important}a#fa_hide{display:none !important}
#fa_toolbar #fa_right #notif_list li:first-child {    background: var(--ar);    color: 000;    padding-top: .5em;}
#fa_toolbar #fa_right #notif_list{font-family:Lora;background-color:var(--ar);border:1px solid var(--ar);
    border-top:0 solid var(--ar);
    display:none;font-size:16px;list-style-type:none;margin:0;padding:0;position:absolute;z-index:999}
#fa_toolbar #fa_right #notif_list li.see_all{background-color:#fff;padding:.7em !important;text-align:right;
    color:var(--color-font01) !important;}

#fa_toolbar #fa_right #notif_list{color:var(--color-font01);background-color:var(--ar);
    border:1px solid #f3e8da;color:var(--color-font01);border-top:0 solid var(--ar);
    display:none;font-size:12px;list-style-type:none;margin:0;padding:0;position:absolute;z-index:999}
.gen .mainmenu.a:hover{font-family:Lora;color:var(--color-font01);font-size:10px;
    text-shadow:var(--as) 0 0 0px;text-transform:uppercase}
.gensmall{font-family:Lora;color:var(--as);font-size:13px;text-transform:uppercase}
div div div.gen strong a{color:var(--color-font04);text-transform:uppercase;font-size:12px;
  text-shadow:var(--ae) 0 0px}

#fa_toolbar #fa_right .fa_separator {    background-color: var(--ar);    height: 1px;    margin: 0;    padding: 0;    text-align: center;    width: 90%;}
#fa_toolbar #fa_right #notif_list li.see_all a{color:var(--color-font04);width:100%}
#fa_toolbar #fa_right #notif_list{color:var(--color-font01);background-color:var(--ar);border:1px solid var(--ae);colorvar(--color-font04);
    border-top:0 solid #f3e8da;display:none;font-size:14px;list-style-type:none;margin:0;padding:0;position:absolute;z-index:999}
#fa_toolbar #fa_right #notif_list li.unread{background-color:var(--ar);font-weight:700}

#fa_toolbar{font-family:Lora !important;font-size:12px !important}#fa_share{display:none !important}
#fa_icon{opacity:0 !important}a#fa_service{opacity:0 !important}

#fa_search{display:none !important}#fa_hide{display:none !important}#fa_toolbar{position:relative;z-index:99}#fa_right{margin-right:10px}
#fa_toolbar{font-family:caudex !important;font-size:12px !important}
#fa_share{display:none !important}#fa_icon{opacity:0 !important}a#fa_service{opacity:0 !important}
#fa_search{display:none !important}#fa_hide{display:none !important}#fa_toolbar{position:relative;z-index:99}

#fa_right{margin-right:10px}body{overflow-x:hidden}a,a:hover,a:active{text-decoration:none}

.bodylinewidth{margin-top:29px}.bodyline{border:0;background-color:transparent}#i_logo{margin:-10px}
#fa_toolbar #fa_right #notif_list li.unread {    background-color: var(--ar);  color:var(--color-font01);  font-weight: 700;}
a.forumlink:link img{    color: var(--color-font01);height:30px;}
.nav {    color: var(--black);    font-size: 14px;    font-weight: 700;text-transform:uppercase;}
.nav img{    color: var(--black);    font-size: 14px;    font-weight: 700;display:none;text-transform:uppercase;}
table {
    border-collapse: separate;
    text-indent: initial;

}
.liens_header_categories {
        text-align: center;
        margin: 2% 0;
}
.postdetails.poster-profile img {
  max-width:200px; /* largeur */
}

 /* Système de like dans les posts */
.fa_like_list {
  background-color: var(--ae); /* Couleur de fond de la liste */
  font-family:'Rajdhani';
  color:var(--color-font01);
  font-size: 12px; /* Taille de la police d'écriture de la liste */
}

.fa_like {
  color: var(--color-font01);
}

.fa_liked {
  color: var(--color-font01);
}

.rep-button, .rep-button:active, .rep-button:focus {
 
    background: var(--ar); /* Couleur de fond */
  float: right;  color: var(--color-font01);
    border: 1px solid var(--ar); /* Couleur de la bordure du bouton */
    border-radius: 4px; /* Bordure arrondis du bouton */
    box-shadow: 0 -1px 0 var(--ar) inset; /* Ombre de la bordure du bouton */
    font-family: Trebuchet MS; /* Police d'écriture du bouton */
    font-size: 11.4px; /* Taille de la police d'écriture du bouton */
    font-weight: 700; /* Taille de la police grasse du bouton */
    height: 17px; /* Hauteur des boutons */
    text-transform: initial; /* Pour mettre une majuscule aux noms des boutons */
}
.fa_like_div {text-align: right;}


#mp{font-family:Lora;background:transparent}
.mp-header{align-items:center;display:flex;justify-content:space-between;padding:95px;background:transparent;color:var(--color-font01); font-size:15px; }
.mp-links{display:flex}.mp-links div{margin-right:10px;text-transform:uppercase;font-size:19px;font-weight:bold}
.mp-links div:last-child{margin-right:20px}.mp-links div a{font-weight:normal;color:var(--color-font01);transition:color .3s ease-in-out}
.mp-links div a:hover{color:var(--color-font01)}.mp-percent{font-size:10px;width:250px}
.mp-percent>div{background:var(--ae);width:100%;margin-top:15px}
.mp-percent>div>div{background:var(--ar);display:inline-block}.mp-body{padding:15px}
.mp-body-head{display:flex;justify-content:space-between;margin-bottom:10px}
.mp-body-head select{border:1px solid var(--ar)}.mp-body-head input{font-size:12px !important}
#mp a[href="/privmsg?mode=post"]::before{content:"Nouveau";font-family:caudex;font-size:20px;font-weight:900;text-transform:uppercase;transition:color .3s ease-in-out;
    color:var(--color-font01)}#mp a[href="/privmsg?mode=post"]:hover::before{color:var(--color-font01)}
#mp a[href="/privmsg?mode=post"] img{display:none}.mp-item{background:transparent;padding:10px;box-sizing:border-box;position:relative;
    display:flex;justify-content:space-between;border-left:3px solid var(--ar)}.mp-item+.mp-item{margin-top:8px}.mp-item.new-mp{border-left:3px solid var(--ad)}
.mp-item>img{display:none}.mp-item>div>div:first-child{font-size:16px;text-transform:uppercase;margin-bottom:5px}
.mp-item>div>div:first-child>a:first-child{margin-right:5px;color:var(--color-font01);
    font-weight:bold;border-right:1px solid var(--ar);padding-right:5px}.mp-item>div>div:nth-child(2){text-transform:uppercase;color:var(--color-font01);
        font-size:14px;letter-spacing:1px}
.mp-bottom-btn{padding:10px 10px 0;display:flex;justify-content:flex-end}
.mp-bottom-btn input,.mp-body-head input{transition:all .3s ease-in-out;border:1px solid var(--ar);
    font-family:inherit;text-transform:uppercase;font-size:13px;color:var(--color-font01);cursor:pointer;background:var(--ar)}
.mp-bottom-btn input:hover,.mp-body-head input:hover{border:1px solid var(--ar)}.mp-bottom{align-items:center;padding:10px;display:flex;font-size:10px}
.mp-bottom a+div{margin-left:10px}.mp-bottom a+div strong{color:var(--color-font01)}.mp-bottom div:last-of-type{margin-left:auto}.mp-bottom div:last-of-type a{color:var(--color-font01);transition:all .3s ease-in-out}
.mp-bottom div:last-of-type a:hover{color:var(--color-font01)}.mp-bottom div:last-of-type a:last-child{margin-left:10px}.mp-empty{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--color-font01)}
.gensmall{color:var(--color-font01);font-family:'Lora';font-size:9px;text-transform:uppercase}.as_rang img{border:10px;height:50px;width:120px}


/***************HEADER************/
.ban1 { background-image: url('https://i.imgur.com/97AuaUX.gif'); }
.ban2 { background-image: url('https://i.imgur.com/GsBG6RO.gif'); }
.ban3 { background-image: url('https://i.imgur.com/3iwFU0n.gif'); }
.ban4 { background-image: url('https://i.imgur.com/VoWXB0j.gif'); }
.ban5 { background-image: url('https://i.imgur.com/8zybZrw.gif'); }
.ban6 { background-image: url('https://i.imgur.com/Jg9rYlA.gif'); }
       body{  background-position: center 30px;  background-color: var(--white); background-repeat: no-repeat;    height: 480px;    width: 100%; color:var(color-font14);/*adaptation à n'importe quelle résolution d'écran*/}
.bodyline {    border: 0;    background-color: transparent;    padding-top: 100px;}

font-family: 'Lora', sans-serif;
font-family: 'Oswald', sans-serif;

#fa_usermenu {
    color: var(--white);
    font-size: 10px;
    left: 0;
    padding: 5px 20px 10px 10px;
    position: absolute;
    text-align: center;
    width: 120px;
}


/****************LISTING DES SUJETS ! *************/
.blocSBJ {padding:1px;width:750px; margin:9px auto 0 ; }
.modSBJ {position:absolute; z-index:3; margin-left:35px; margin-top:5px;font-size:10px;}
.statSBJ {position:relative; z-index:5;display:inline-block; vertical-align:top;}
.statSBJ div {position:absolute; z-index:3; margin-top:-15px;width:25px; height:45px; padding-top:10px;
    background:var(--ar);
    color:var(--color-font02); font-size:12px; text-align:center; line-height:12px;opacity:0;
    transition:opacity 0.55s ease; -webkit-transition:opacity 0.55s ease;}
.blocSBJ:hover .statSBJ div {opacity:1;}
#boxSBJ {display:inline-block; vertical-align:top;background-color:var(--ar);}
.tleSBJ {width:755px; min-height:15px; max-height:35px; padding:1px 6px 3px 0;
    text-align:justify; background: radial-gradient(var(--ar), var(--ar));}
.tleSBJ a {color:var(--color-font01)!important; margin:10px; font-family:caudex;text-shadow: 1px 0px 0px var(--as); text-transform: uppercase;font-size:13px;
    text-align:justify;}
.descSBJ {margin-left:45px; min-height:5px; padding:5px; padding-left:55px;background:var(--ar); color:transparent ; font-size:8px;}
.nameSBJ {margin-left:10px;height:10px; padding:5px 15px 5px 55px; border-radius:0 0 10px 0;background:var(--white);
    color:var(--color-font01); font-size:9px;text-transform:uppercase;text-align:left;font-family:caudex; }
.gotoSBJ {float:left; margin-top:0px; margin-right:0px;text-align:right; font-size:9px;}
.gotoSBJ br:nth-of-type(1) {display:none;}
.aveSBJ img { height:37px; width:37px; margin-top:px ;padding:1px;border:1px solid #f3e8da;margin:-22px 8px -29px; }
.aveSBJ {padding:1px -15px;width:20px;height:20px;float:left;margin-right:15px;margin-left:-50px;}

.sprite-icon_minipost_participate {display:none;background:transparent;  }


/***************************************************** QUI EST EN LIGNE *****************************************************/
.fond_qeel {
    background-image: var(--qeel);
    box-sizing: border-box;
    font-size: 13px;
    margin: 5% 30% 5% auto;
    padding: 3%;
    width: 800px;
    font-family: georgia;
    color: var(color-font14);
}

/* BLOCS GAUCHE ET DROIT */
.boite_qeel {
    background: var(--white);
    border: 1px solid var(--white);
    padding: 1%;
    float: left;
    width:
    30%;
    height: 150px;
    overflow: auto;text-transform: lowercase;
  text-align:justify;
  color:var(--color-font14);
}

/* BLOC MILIEU */
.qeel_groupes {
    float: left;
    width: 33%;
    margin: 0 1%;
    text-align: center;
}

/* Mise en forme generale des liens */
.qeel_groupes a {
    display: inline-block;
    width: width: 105px;
    margin: 0 2% 2% 0;
       text-transform: uppercase; font-family:caudex
    padding: 1% 0;
    color:  !important;
}

/* Mise en forme de chaque groupe */
.qeel_g1 {background: #584F96 !important; width: 105px;color:#fff;}
.qeel_g2 {background: #EB6CBE !important; width: 105px;color:#ffffff;}
.qeel_g3 {background: #AB1919 !important; width: 105px;color:#ffffff;}
.qeel_g4 {background: #1DA12C !important; width: 105px;color:#ffffff;}


 
/* Texte bienvenu */
.qeel_bienvenu {
    width: 60%;
    float: left;
    text-align: center;
    padding: 18% 0 0;
}

/* Avatar dernier inscrit */
.qeel_avatar img {
    border: 0px solid var(--white);
    height: 97px;
    object-fit: cover;
    width: 100x;
    margin: 7% 0 0;
}

/* TRANSPARENCE DU BLOC 24H */
#kaboum .row1 {
    background-color: transparent;
}

#kaboum .row1 .gensmall {
    font-size: 13px;
    color: #5c2d0e;
    font-family: cormorant garamond;text-transform: lowercase;
}

/***************LISTING DE MEMBRES!**************/

.title_page_memberlist {
    width: 100%;
        background: url('https://i.imgur.com/qZpkvi8.png');!important
    border: solid 1px #f3e8da;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding: 20px;  
    text-align: center; text-shadow:0px 0px 2px transparent;
    text-transform: uppercase;
    font-style:bold;
    font: 22px 'Lora';letter-spacing:2px;color: var(--color-font01);text-shadow:0px 10px 4px var(--aw);
}



p, td, th {
    font-family: Lora;
    font-size: 13px;
    color: var(--color-font01);
}
.sous_titre_member{

    text-align: center;
    font: 12px 'Lora' !important;
    text-transform: uppercase;
    letter-spacing:2px;font-size:15px;color:var(--color-font01);
}
.memberlist_body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.listmember {
    width: 298px;
    margin: 5px;
}
.memberlist_name {
    padding: 2px;
    text-align: center;
    border: solid 1px var(--ar);
    font: 16px 'Lora';
    font-style: bold;    text-transform: uppercase;

  background: var(--ae);}

.infos_memberlist {
    margin-top: 10px;
    border: solid 1px var(--ar);
  background: #f3e8da;    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.vava_memberlist {
    overflow: hidden;
    height: 140px;
    margin-top: 10px;
    width: 200px;
    border: solid 2px #5c2d0e;
}
.vava_memberlist img{
  width:100%;
}
.pasdidees {
    width: 188px;
    height: 150px;
    padding: 10px 10px 0px 10px;
}
.contakt_member{
    width: 100%;
    text-align: center;
    font: 14px 'Lora';
    color: var(--color-font01);
    text-transform: uppercase;
}
.sendmp img {
    width: 200px;
    border-bottom: 1px solid var(--ar);
}
.wwwimg img {
  width:200px;
}
#text_editor_iframe, input, select, textarea {
    border-color: var(--ar);
    color: var(--color-font01);background:var(--ar);
    font-family: 'Lora',sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;}
.lastvisit {
    text-align: center;
    padding-top: 20px;
    font: 14px 'Lora';
    text-transform: uppercase;
    letter-spacing: 1px;-webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--ar),var(--as))!important;
  text-shadow:0px 1px 2px transparent;font-style:bold; font-weight:600;
}

#text_editor_iframe, input.post, select, textarea.inputbox, textarea.post {
    background-color: var(--ar);color:var(--color-font01);
}
.fb_or {
    background-color: var(--ar);
    border: 2px solid var(--ar); color:var(--color-font01);

    display: block;
    font-size: 12px;
    font-weight: 700;
    height: 16px;
    line-height: 16px;
    padding: 5px;
    width: 26px;
}

/*********************SWITCH!!*********/

:root {
  --color-text: var(--color-font01);
  --color-bg: transparent;
  --color-delete: var(--ax);
  --color-tooltip: var(--ae);
  --color-squircle: var(--ae);
  --color-accent: var(--ae);
  --color-button: var(--ae);
  --color-pill: var(--white);
  --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);
}

.switcheroo {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 16px;
}
.switcheroo[position="static"] {
  position: relative;
}
.switcheroo[position="top"] {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.switcheroo[position="bottom"] {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
.switcheroo[direction="horizontal"] {
  width: 100%;
}
.switcheroo[direction="vertical"] {
  height: 100%;
}

.switcheroo__squircles {
  display: flex;
  margin: 50px 5px;
  padding: 0px;
  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;
}

/* squircle */
.switcheroo[theme="discord"] .switcheroo__squircle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-squircle);
}
.switcheroo[theme="discord"] .switcheroo__squircle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-radius 128ms var(--ease);
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover {
  border-radius: 36%;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  top: 50%;
  transform: translate(-100%, -50%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%, -100%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"] .switcheroo__squircle.active {
  border-radius: 36%;
  cursor: default;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-50%, -100%) scale(0.5);
}

.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-85%, -50%) scale(0.2);
  border-radius: 50%;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-50%, -85%) scale(0.2);
  border-radius: 50%;
}


/* tooltip */
.switcheroo__popper {
  background-color: var(--color-tooltip);
  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: #5c2d0e;
}
.switcheroo[direction="vertical"] .switcheroo__popper {
  left: 155%;
  top: 50%;
  transform-origin: left;
  transform: translateY(-50%) scale(0.98);
}
.switcheroo[direction="horizontal"] .switcheroo__popper {
  top: 155%;
  left: 50%;
  transform-origin: top;
  transform: translateX(-50%) scale(0.98);
}
.switcheroo__popper:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--color-tooltip);
  z-index: -1;
}
.switcheroo[direction="vertical"] .switcheroo__popper:before {
  left: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
  left: 50%;
  top: -2px;
  transform: translateX(-50%) rotate(-45deg);
}

.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);
}
.switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}

/* avatar */
.switcheroo[theme="discord"] .switcheroo__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.switcheroo[theme="discord"] .switcheroo__avatar img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* divider */
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__divider {
  width: 100%;
  height: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__divider {
  width: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
/* delete button */
.switcheroo[theme="discord"] .switcheroo__delete {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 16px;
  line-height: 14px;
  height: 16px;
  top: -2px;
  right: -2px;
  border-radius: 50%;
  background-color: var(--color-delete);
  transform: scale(0);
  opacity: 1;
  transition: transform 128ms var(--ease), opacity 64ms var(--ease);
  cursor: pointer;
  font-size: 13px;
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover .switcheroo__delete {
  opacity: 1;
  transform: scale(1);
}
/* logo */
.switcheroo[theme="discord"] .switcheroo__logo {
}
.switcheroo[theme="discord"] .switcheroo__logo img {
  width: 32px;
}
.switcheroo[theme="discord"] .switcheroo__logo:hover {
  background-color: var(--color-accent);
}
/* buttons */
.switcheroo[theme="discord"] .switcheroo__squircle--button {
  transition: border-radius 128ms var(--ease);
  color: #5c2d0e;
}
.switcheroo[theme="discord"] .switcheroo__squircle--button:hover {
  color: #fff;
  background-color: var(--color-button);
}
/* modal */
.switcheroo__form {
  padding: 48px;
}
.switcheroo__form-row {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin-bottom: 16px;
}
.switcheroo__form-label {
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-text) !important;
}
.switcheroo__form-input {
  padding: 6px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  width: 100% !important;
  border-bottom: 2px solid #eec4a6 !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text)  !important;
  cursor: text !important;
}
.switcheroo__form-button {
  border-radius: 8px;
  padding: 8px;
  border: none;
  outline: none;
  box-shadow: none;
  text-transform: uppercase;
  font-size: 14px;
  align-self: flex-end;
  color: var(--color-font01);
  background-color: var(--ar);
}

.monomer-overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s opacity ease;
  background: rgba(0, 0, 0, 0.6);
}

.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: 2px;
  background:var(--color-accent);
  color: var(--color-text);
}

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

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

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

.monomer-close {
  font-family: Lora;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 5px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: var(--color-delete);
  border-radius: 50%;
  padding: 0;
}
.monomer-close:hover {
  opacity: 0.8;
}

/*************AUTRES CODES ! ***********/

.code {
    background-color: var(--white)f;
    border: var(--ac);
    border-bottom-width: 1px;
    border-left-width: 1pxborder-top-width: 1px;
    border-right-width: 1px;
    border-style: solid;
    color: var(--color-font03);
    font-family: Lora;
    font-size: 13px;
}
input.mainoption {
    background-color: var(--ar);
    font-weight: 700;border-color:var(--ar); color:var(--color-font01); text-transform:uppercase;font-family:Lora;

}
.mentiontag {font-family:Lora; font-size:13px; letter-spacing:1px; color:var(--color-font01) }

.mentiontag hover {font-family:Lora; font-size:13px; letter-spacing:1px; color:var(--color-font01); }
h::before { content: \\":clubs:\\"; font-size:15px; color:var(--color-font01); }

.word-counter { color:var(--color-font01);text-transform:uppercase;font-family:Lora;}

/*---  Partie supérieur contenant les outils ---*/
 
div.sceditor-toolbar {
background-color:var(--ar) !important;
}


/*---  Groupe de boutons ---*/
 
div.sceditor-group {
    background-color: var(--ar) !important;color:var(--color-font01); border-bottom-color:transparent!important;
}

partie 1


Dernière édition par sueki le Lun 10 Oct 2022 - 17:41, édité 1 fois
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 17:40

Code:
/*---  Boutons sélectionnés ---*/
 
a.sceditor-button.hover {
background-color: var(--ar) !important;
}

/*---  Partie supérieur contenant les outils ---*/
 
div.sceditor-toolbar {
background-color:var(--ae) !important;
}


/*---  Groupe de boutons ---*/
 
div.sceditor-group {
    background-color: var(--ar) !important;color:var(--color-font01); border-bottom-color:transparent;
}

/*---  Boutons sélectionnés ---*/
 
a.sceditor-button.hover {
background-color: var(--ae) !important;
}
 
/* fond de la zone de saisie de texte */
.sceditor-container{
background-color:var(--ag) !important;
    
}
.sceditor-container iframe, .sceditor-container textarea{
  background-color:var(--ag) !important;
}
 
/* fond de groupe de bouton */
body div.sceditor-group {
background: var(--ar);
}
/* fond d\\\'un bouton survolé ou activé */
 
.sceditor-button.hover, a.sceditor-button:hover {
background: var(--ae);
}
div.sceditor-toolbar {
    -moz-background-clip: padding;
    -moz-border-radius: 3px 3px 0 0 ;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-background-clip: padding-box;
    -webkit-border-radius: 3px 3px 0 0;
    -webkit-user-select: none;
    background: var(--aq);
    background-clip: padding-box;
    border-bottom: 1px solid var(--af);
    border-radius: 3px 3px 0 0;
    line-height: 0;
    overflow: hidden;
    padding: 3px 5px 2px;
    user-select: none;
}



input.liteoption {
    background-color: var(--ar);
    font-weight: 700;border-color:var(--ar); color:var(--color-font01);
    text-transform:uppercase;font-family:Lora;
}

part {text-transform:uppercase;font-family:Lora;
    letter-spacing:10px;font-size:13px;
    background: transparent; -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--za),var(--as))!important;font-style:bold;font-weight:700p; }







.backgroundfiche {background-color: var(--white); width: 480px; padding: 10px; margin: 10px auto;
    display: flex; flex-wrap: wrap; justify-content: space-evenly; border: 2px var(--az) solid;
    outline: 3px var(--az) solid; outline-offset: 10px;}
.titlefiche {font: 25px "Lora", serif;
    background: transparent; -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--ar),var(--ae))!important;
    text-align: center; text-transform: uppercase; font-weight: bold;
    width: 480px; height: 40px; border-bottom: 1px var(--az) solid;}

.textspoil {font: 13px \\\"Lora\\\", sans-serif; color: var(--color-font05);
    text-align: justify; padding: 10px; width: 480px; margin:10px 0; background-color:transparent;}

.sstitrefiche {width: 480px; height: 50px;
    background: -webkit-linear-gradient(-40deg,var(--ar),var(--az));
    font: 18px \\\"Lora\\\", serif; text-align: center; line-height: 50px; color: var(--color-font01); margin:10px 0 0 0;}

.imgcont{width:100px; height:100px; border:1px var(--az) solid; padding:10px; border-radius:100%;margin:10px 0;}

.imgcont2 img{width:100px; height:100px;border-radius:100%; width:100%;}

.imgcont2{width:100px; height:100px; border:1px var(--az) solid; padding:10px; border-radius:100%;margin:10px 0;}

.imgcont img{width:100px; height:100px;border-radius:100%; width:100%;}
.admcredit {font: 8px "Lora", serif; color: var(--color-font05); margin: 10px auto; height: 20px; width: 500px;}

.admcredit a {text-decoration: none; color: var(--color-font05);}

.faq_text{font: 13px "Lora", sans-serif; color: var(--color-font07); text-align: justify;
    padding: 10px; width: 480px; margin:10px 0 10px 0;border-bottom:5px var(--az) solid;}

.contenueadmin {font: 13px "Lora", sans-serif; background-color:var(--ar);
    color: var(--color-font08); text-align: justify; padding: 20px 10px; width: 480px;}

.fiche2 {font: 13px "Lora", sans-serif; color: var(--color-font07);
    text-align: justify; padding: 20px 10px;
    width: 480px;background-color: var(--ar); margin: 10px auto;justify-content: space-evenly;
    border: 5px var(--az) solid; outline: 3px var(--az) solid;
    outline-offset: 10px;}

.textadmin {font: 13px "Lora", sans-serif; color: var(--color-font08);
    text-align: justify; margin: 15px 10px; padding: 20px; width: 480px; border-right: 5px #eec4a6 solid;}
.textadmin1 {font: 13px "Lora", sans-serif; color: var(--color-font08);
    text-align: justify; margin: 15px 10px; padding: 20px; width: 480px; border-left: 5px #eec4a6 solid;}
.admimgint {width:480px; height:100px; border:10px var(--ae) solid; margin:10px 0 0 0; overflow:hidden;}

.bottintext{font: 13px "PT Lora", sans-serif; color: var(--color-font08); text-align: justify;
    padding: 20px; width: 480px; margin:10px 0 0 10px; border-left:8px var(--ae) solid;}
.citstaff{font: 13px "Lora", sans-serif; color: var(--color-font08); text-align: right;
    padding: 10px; width: 480px; border-bottom: 1px #eec4a6 solid;}
.staff_image{width: 80px; height: 80px; border-radius: 100px; padding: 5px; border: 1px #eec4a6 solid; margin: 10px;}
.staff_image img{ border-radius: 100%;width: 100%; height:100%;object-position:auto;object-fit: cover;}

.staff_text{font: 13px "Lora", sans-serif; color: var(--color-font08); text-align: justify; padding-top: 5px;
    width: 340px; height: 80px; margin: 10px 0 0 0; overflow: auto; border-bottom: 5px var(--az) solid;}
.staff_text::-webkit-scrollbar {display:none;}

.staff_image2{width: 80px; height: 80px; border-radius: 100px; padding: 5px; border: 1px var(--ae) solid;margin:10px;}

.staff_image2 img{ border-radius: 100%;width: 100%; height:100%;object-position:auto;object-fit: cover;}

/************FICHE PRESENTATION SCENA & AUTRES ************/
.fiche_imagead{width:80px; height:80px; border:1px var(--ae) solid; padding:5px;
    border-radius:100%; margin:20px 0;}

.fiche_imagead img { border-radius: 100%;width: 100%; height:100%;object-position:auto;object-fit: cover;}

.fiche_imagead2{width:80px; height:80px; border:1px var(--ae) solid;
    padding:5px; border-radius:100%; margin:20px 0;}

.fiche_imagead2 img { border-radius: 100%;width: 100%; height:100%;object-position:auto;object-fit: cover;}

.presentation_avatar{max-width: 100px; max-height: 160px; border: 1px var(--ae) solid;
    margin: 10px 0; width:100px; height:160px;}

.presentation_avatar img{width: 100%;}

.blockinfos{font:13px "Lora", sans-serif; color: var(--color-font08);
    text-align: justify; padding:10px; width: 400px; height: 140px; margin: 10px 0 0 15px;
    overflow: auto;background-color:var(--ar);
    text-transform:lowercase;}
.blockinfos2 {font:13px "Lora", sans-serif; color: var(--color-font08);
    text-align: justify; padding:10px; width: 330px; height: 140px; margin: 10px 0 0 15px; overflow: auto;background-color:var(--ar);
    text-transform:lowercase;}
.admcredit {font: 8px "Lora", serif; color: var(--color-font09); margin: 10px auto; height: 20px; width: 500px;}

.admcredit a {text-decoration: none; color: var(--color-font08);}
.sstitrefiche {text-transform:uppercase;width: 480px; height: 50px; background: -webkit-linear-gradient(-40deg,var(--ar),var(--az)); font: 20px "Lora", serif;
    text-align: center; line-height: 50px; color: var(--font-color01); margin:10px 0 0 0;letter-spacing:1px;}

.contenueadmin {font: 13px "Lora", sans-serif;  background-color:var(--ar); color: var(--color-font08); text-align: justify; padding: 20px 10px; width: 480px;}


.blockinfos2::-webkit-scrollbar {display:none;}

.blockinfos2 > div{font: 13px "Lora", serif; border-bottom:1px solid var(--az);
    height:20px; margin:5px 0; width:330px;  background: transparent; -webkit-background-clip: text!important;  
    -webkit-text-fill-color: transparent!important;    
    background-image: -webkit-linear-gradient(-40deg,var(--az),var(--az)) !important;}

.blockinfos::-webkit-scrollbar {display:none;}

.blockinfos > div{font: 13px "Lora", serif;
    border-bottom:1px solid var(--az); height:20px; margin:5px 0; width:330px;
    background: transparent; -webkit-background-clip: text!important;  
    -webkit-text-fill-color: transparent!important;  
    background-image: -webkit-linear-gradient(-40deg,var(--az),var(--az)) !important;}

.bottintext1{font: 13px "PT Lora", sans-serif; color: var(--color-font08); text-align:justify; padding: 20px;    
    width: 480px; margin:10px 0 0 10px; border-right:8px var(--az) solid;}
.lienficheauteur{width:460px; background: -webkit-linear-gradient(-40deg,var(--ar),var(--az));
    color:#var(--color-font10); font: 14px "Lora", serif;
    height:10px; padding:10px; line-height:10px; text-align:center;}

.presentation_blocktext{width:480px; height:150px; background-color:var(--zq);
    color:var(--color-font08); overflow:auto; border:2px var(--az) solid;font-size:13px; text-align:justify;}

.presentation_blocktext::-webkit-scrollbar{width: 5px; background: var(--zq);}

.presentation_blocktext::-webkit-scrollbar-thumb{height: 300px; background:linear-gradient( to bottom, var(--af), var(--af));}
.presentation_blocktext p{font: 13px "Lora", sans-serif; padding:10px; margin-top:-5px; text-align:justify;}


.presentation_blocktext2{width:480px; height:100px; background-color:var(--ar); color:var(--color-font08); overflow:auto; border:2px var(--az) solid;}

.presentation_blocktext2::-webkit-scrollbar{width: 5px; background: var(--af);}

.presentation_blocktext2::-webkit-scrollbar-thumb{height: 300px; background:linear-gradient( to bottom, var(--az), var(--az));}
.presentation_blocktext2 p{font: 13px "Lora", sans-serif; padding:10px; margin-top:-5px; text-align:justify;}

.lienfiche {
    background-color: var(--white); width: 480px;
    padding: 10px;
    margin: 10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border: 2px var(--az) solid;
    outline: 3px var(--az) solid;
    outline-offset: 10px;
}

.prenomlien{font: 25px "Lora", serif; background: transparent; -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background-image: -webkit-linear-gradient(
-40deg
,var(--ae),var(--ae))!important;
    text-align: center; text-transform: uppercase; font-weight: bold; width: 480px; height: 40px; border-bottom: 1px var(--az) solid;}
.liens_image{width:70px; height:70px; border:1px var(--az) solid; margin:20px 0 10px 0;}

.liens_image img{width:100%;}
.liens_image2{width:70px; height:70px; border:1px var(--az) solid; margin:20px 0 10px 0;}

.liens_image2 img{width:100%;}


.lientext{font: 13px "Lora", sans-serif; color: var(--color-font08); text-align: justify; padding: 10px 0 0px 0; width: 480px; margin: 10px; width:350px;}

.typedelien{width: 480px; height: 50px; text-align:right;background: -webkit-linear-gradient(-40deg,var(--ar),var(--az));
    font: 18px "Lora", serif; line-height: 50px; color: var(--color-font01); margin:10px 0 0 0;}

.liencredit{font: 6px "Lora", serif; color: var(--color-font08); margin: 10px auto; height: 20px; width: 500px;}.liencredit a{text-decoration: none; color: var(--color-font08);}


ps2 {
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background: transparent;
    background-image: -webkit-linear-gradient(
-40deg
,var(--color-font11),var(--color-font12))!important;
    color: #eec4a6;
    font-family: 'Lora';
    font-size: 14px;
    letter-spacing: .5px;
    padding: 1px;
    text-shadow: 0 0 1px;
    text-transform: uppercase;
}
ps3 { font-size: 14px; font-family: 'Lora';
    text-shadow: 0px 2px 1px var(--color-font12); letter-spacing: 1px; text-transform: uppercase;
    background: transparent; -webkit-background-clip: text!important;    -webkit-text-fill-color: transparent!important;  
    background-image: -webkit-linear-gradient(-50deg,var(--color-font12),var(--color-font12)) !important;
   padding:1px; font-weight:950;}
ps { font-size: 13px; font-family: 'Lora';
    letter-spacing: 2px; text-transform: uppercase;
    background: transparent; color:var(--color-font10) !important;
   padding:1px; font-weight:950;}
ps1 { font-size: 13px; font-family: 'Lora';
    letter-spacing: 2px; text-transform: uppercase;
    background: transparent; color:var(--color-font04) !important;
   padding:1px; font-weight:950;}
pss { font-size: 13px; font-family: 'Lora';
    letter-spacing: 2px; text-transform: uppercase;
    background: transparent; color:var(--color-font12) !important;
   padding:1px; font-weight:950;}
soulig { font-size: 13px; font-family: 'Lora';
    letter-spacing: 4px; text-transform: uppercase;
    background: transparent; color:var(--color-font10) !important;
   padding:1px; font-weight:950;text-decoration: underline 2px var(--color-font10);}

souligb { font-size: 13px; font-family: 'Lora';
    letter-spacing: 4px; text-transform: uppercase;
    background: transparent; color:var(--color-font07) !important;
   padding:1px; font-weight:950;text-decoration: underline 2px var(--color-font07);}
pst { font-size: 16px; font-family: 'Lora';
    letter-spacing: 2px; text-transform: uppercase;
    background: transparent; color:var(--color-font12) !important;
   padding:1px; font-weight:950;}
pstt { font-size: 16px; font-family: 'Lora';
    letter-spacing: 2px; text-transform: uppercase;
    background: transparent; color:var(--color-font12) !important;
   padding:1px; font-weight:950;}

ss {
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
    background: transparent;
    background-image: -webkit-linear-gradient(
-40deg
,var(--black),var(--color-font01))!important;
    font-family: Lora;
    font-size: 14px;
    letter-spacing: 5px;
}

ss1 { font-family:Lora; font-size:14px; letter-spacing:1px; background: transparent; color:var(--color-font05); !important;}
ss2 { font-family:Lora; font-size:14px; letter-spacing:1px; background: transparent; color:var(--color-font06); !important;}


/*********LISTING MEMBRE*********/
  
/* AFFICHAGE LISTE DES MEMBRES */
/* BLOC ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */
.tleLMBER {
margin:0 auto 10px; width:650px;
background:#fdf4f9; color:#9597aa; /* MODIFIABLE */
}
/* TITRE ENTÊTE */
.tleLMBER th {
margin-bottom:5px; padding:5px 0;
text-transform:uppercase; font-family:caudex; font-size:12px;
background:var(--zs); color:var(--color-font13); /* MODIFIABLE */
}
/* BLOC LISTE DES MEMBRES */
#LMBER {margin:auto; width:660px;}
 /* BLOC MEMBRE */
#MBER {
float:left; margin:0 5px 10px;
width:200px; height:360px; padding:5px 5px 0; font-family:caudex;
background:var(--zs); /* MODIFIABLE */
}
/* PSEUDONYME */
.nameLMBER{width:200px; height:15px; padding-bottom:5px;text-align:center; text-transform:uppercase;}
/* AVATAR */
.imgLMBER img{width:200px; height:320px;}
.imgLMBER div {position:relative; margin-top:-320px;width:200px; height:320px; overflow:hidden;}
/* BLOC MESSAGES / INSCRIPTION / DERNIERE VISITE / INFORMATION */
.imgLMBER div div{
width:180px; height:300px; padding:10px; overflow:auto;
background:var(--white); color:var(color-font13); /* MODIFIABLE */
font-size:11px; text-align:justify;text-transform:uppercase;
transform:translateY(640px); -webkit-transform:translateY(640px);
transition:transform 0.85s linear; -webkit-transition:transform 0.85s linear;
}
#MBER:hover .imgLMBER div div{transform:translateY(320px); -webkit-transform:translateY(320px);}
/* IMAGES MP * WWW */
.btnLMBER {position:relative; z-index:3; margin:-3px auto 0;}
.btnLMBER img {height:20px;}

   /********************************************************* PAGE ACCUEIL *********************************************************/
/* Fond PA */
.pa {
    background: var(--am);  
    font-family: Lora;
    font-size: 12px;
    width: 800px;
    margin-left: -15px;
    color:var(--color-font05);
    border:2px solid var(--ae); border-radius:5px;
      text-transform: lowercase;
}

/* Titres PA */
.pa h2 {
    display: block;
    font-family: arial;
    font-size: 24px;
    padding: 2% 0;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    color:var(--color-font05);
}

.pa h3 {
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
}

.pa_staff h3 {
    margin-left: 5%;
}

.pa_news h3 {
    text-align: center;
    margin-bottom: 10%;
}

.pa_partenaires h3 {
    color: var(--color-font01);
    font-family: Lora;
    font-size: 17px;
    margin-bottom: 4%;
}

/* Bloc contexte */
.pa_contexte {
    background: transparent;
    border: 1px solid var(--ae);
    padding: 2%;
    width: 45%;
    font-weight: bold;
    height: 180px;
    overflow: auto;
    float: left;
    margin: 3% 3% 0 10%;
    text-align: justify;
}

/* Bloc liens rapides */
.pa_liens_rapides {
    float: left;
    width: 30%; padding:31px;
    margin-top: 2.4% 0%;
}

.pa_liens_rapides a {
    display: inline-block;
    background: var(--ae);
    border: 1px solid var(--ae);
    color: var(--color-font01);
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    padding: 1%;
    width: 45%;
    text-align: center;
    margin: 2% 0;
}

.pa_liens_rapides a:hover {
    color: var(--color-font02);    background: var(--as);    border: 1px solid var(--ar);

}

/* Staff */
.pa_staff {
    float: left;
    margin: 4% 5% 0 10%;
    width: 30%;
}

.paonglets {
    text-align: center;
}

.paonglet {
    color: var(--color-font01):
    cursor: pointer;
    display: inline-block;
    margin: 2% 0;
    font-size: 25px;
}
            
.paonglet_0 {}
            
.paonglet_1 {}
          
.contenu_paonglet {
    display: none;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    line-height: 2;
}

.contenu_paonglet a {
    color: var(--color-font01);
}

.pa_staff img {
    float: left;
    margin-right: 2%;
}

/* News */
.pa_news {
    float: left;
    border: 1px solid var(--ar);
    padding: 1%;
    width: 20%;
    margin: 3% 3% 0 0;
    background: var(--ae);
    height: 100px;
    overflow: auto;
}

/* Partenaires */
.pa_partenaires {
    float: left;
    width: 25%;
    text-align: center;
    margin-top: 0%;
}

.pa_partenaires img {
    margin: 1%;
}

/* Credits */
.pa_credits {

    background: transparent;
    padding: 1%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    font-size: 8px;
    margin-top: 0%;

}

.clear {
    clear: both; text-align:right; text-transform:uppercase; font-size:12px;
}

.mdmois {background-size:cover; width:120px; height:40px; float: left;
  background-image:url('https://i.servimg.com/u/f98/19/87/04/06/sans_t10.jpg'); text-transform:uppercase; margin:-10px auto;        
}
 .mdmoiss {   margin:-10px;      box-sizing: border-box;
       text-align:center;text-transform:uppercase;     font-family: courier new, sans-serif;
      font-size:12px;; color:var(--color-font01);  }

mdm {font-size:10px; text-align:right; padding:-20px; margin:120px;color:var(--color-font05);widht:30px;}
partie 2



en fait ça me retire tous, le css ne fonctionne plus du tout
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par 'Christa Lun 10 Oct 2022 - 17:49

Généralement, quand le CSS cesse de fonctionner, ça veut généralement dire qu'il y a une coquille au niveau de l'usage des guillemets, points virgules et autres "ponctuations" nécessaires à un code fonctionnel.

Si je lis rapidement les deux CSS, je peux voir quelques coquilles de ci de là :
Au début du code (ligne 25) on voit qu'un point virgule a disparu
Code:
--color-font04:#eec4a6
(mais ça ne "cassera" que la ligne de code suivante)

Je vois aussi ceci au niveau de la ligne 564 :
Code:
    font-family: 'Lora', sans-serif;
    font-family: 'Oswald', sans-serif;
Ces deux lignes sont en dehors d'une règle CSS, donc elles ne devraient pas être là.

Au niveau de la ligne 569, je vois aussi ceci :
Code:
color:var(color-font14)
Qui devrait plutôt être écrit
Code:
color:var(--color-font14)
(En vrai je vois plusieurs endroits où il y a cette erreur).

Bref, plein de petites coquilles mais rien qui détruise complètement le CSS.

Je souhaitais surtout voir à quoi ressemblait ton code après avoir ajouté les lignes que je mentionnais.

Réessayons pour voir. Saute une ligne après cette ligne de code :
Code:
.ban6 { background-image: url('https://i.imgur.com/Jg9rYlA.gif'); }

Puis colles le code que j'ai donné plus haut :
Code:
 
[data-theme="dark"] .ban1 { background-image: url('https://i.imgur.com/97AuaUX.gif'); }
[data-theme="dark"] .ban2 { background-image: url('https://i.imgur.com/GsBG6RO.gif'); }
[data-theme="dark"] .ban3 { background-image: url('https://i.imgur.com/3iwFU0n.gif'); }
[data-theme="dark"] .ban4 { background-image: url('https://i.imgur.com/VoWXB0j.gif'); }
[data-theme="dark"] .ban5 { background-image: url('https://i.imgur.com/8zybZrw.gif'); }
[data-theme="dark"] .ban6 { background-image: url('https://i.imgur.com/Jg9rYlA.gif'); }
(Change bien sûr le lien des images, en faisant attention à ne pas supprimer des parenthèses, points-virgules et autres éléments)

Une fois que c'est fait, laisse ton forum tel quel comme ça je pourrai voir directement ce qui cloche sur ton forum.
'Christa

'Christa
***

Féminin
Messages : 134
Inscrit(e) le : 04/06/2009

https://lostmindy-test.forumactif.com/
'Christa a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 17:57

Alors je viens de remettre et de faire le rajout du ; et la suppression des deux lignes, je n'ai plus le bug ou tout vire mais je n'ai pas le changement de Header

En tout cas merci à toi de ton aide
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 17:58

Oooh je viens de voir que grâce au code que tu as rajouté ça fonctionne nickel merciiiiiiiiiiiiiiiiiiiiiiiiii tu me sauves la vie
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par sueki Lun 10 Oct 2022 - 18:05

Aaah j'ai du faire un truc qu'il ne faut pas dans le dark j'ai un header clair au lieu des sombres Arrow Embarassed

Edit : J'ai corrigé mon erreur toute seule merciii Embarassed Embarassed Embarassed
sueki

sueki
*

Messages : 44
Inscrit(e) le : 27/11/2020

https://sfdontdreamitbeit.forumactif.com/
sueki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Header de fond en darkmode

Message par 'Christa Lun 10 Oct 2022 - 18:16

Bien joué Smile Bonne continuation à toi !
'Christa

'Christa
***

Féminin
Messages : 134
Inscrit(e) le : 04/06/2009

https://lostmindy-test.forumactif.com/
'Christa a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum