Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

Modo escuro para fórum

3 participantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Modo escuro para fórum

Mensagem por Sousaph29 Qua 14 Ago 2024 - 19:09

Detalhes da questão


Endereço do fórum: https://brasilexperiencelife.forumeiros.com
Versão do fórum: ModernBB

Descrição


Olá gostaria de colocar o modo escuro assim como nesse tópico: https://ajuda.forumeiros.com/t116740-modo-escuro-para-forum
Não consegui de jeito nenhum fiz o tutorial passo a passo, cá está meu overall_header.
Código:
<!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>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}"/>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <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}
<script type="text/javascript">!function(){var t,e=document.getElementById("darkSwitch");if(e){t=null!==localStorage.getItem("darkSwitch")&&"dark"===localStorage.getItem("darkSwitch"),(e.checked=t)?document.body.setAttribute("data-theme","dark"):document.body.removeAttribute("data-theme"),e.addEventListener("change",function(t){e.checked?(document.body.setAttribute("data-theme","dark"),localStorage.setItem("darkSwitch","dark")):(document.body.removeAttribute("data-theme"),localStorage.removeItem("darkSwitch"))})}}();</script>
   <!-- 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 () {

         $('#fa_ticker_content').css('display', 'block');

         var width_max = $('ul#fa_ticker_content').width();
         var width_item = Math.floor(width_max / {switch_ticker.SIZE});

         if (width_max > 0) {
            $('ul#fa_ticker_content li').css('float', 'left').css('list-style', 'none').width(width_item).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);
               }
            });

            if (slid_vert) {
               var height_max = h_perso;

               $('ul#fa_ticker_content li').each(function () {
                  if ($(this).height() > height_max) {
                     height_max = $(this).height();
                  }
               });

               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft', 'auto').css('marginRight', 'auto');
               $('ul#fa_ticker_content li').height(height_max);
            }


            $('#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 -->
         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 -->

         document.onclick = function(e){
            if (!e.target.classList.contains('navicon')) {
               if ($(e.target).parents('.responsive-headerbar').length == 0 && e.target.id != "menu-btn") {
                  document.getElementById('menu-btn').checked = false;
               }
            }
         };
      });

      <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH},
         logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;

      $(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}

   <style type="text/css">
      #page-footer, div.navbar, div.navbar ul.linklist {
         display: block !important;
      }

      ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
         display: inline !important;
      }

      <!-- BEGIN switch_ticker_new -->
      .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;
      }

      <!-- END switch_ticker_new -->
   </style>

   {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 -->

   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese&display=swap"
        rel="stylesheet"/>
   <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
</head>

<body id="modernbb">
  <div class="login-pop-up">
<div class="mfp-bg my-mfp-zoom-in mfp-ready"></div>
<div class="mfp-wrap  mfp-close-btn-in mfp-auto-cursor my-mfp-zoom-in mfp-ready" tabindex="-1" style="overflow: hidden auto;">
  <div class="mfp-container mfp-s-ready mfp-inline-holder">
      <div class="mfp-content">
        <div id="login-dialog" class="login-popup zoom-anim-dialog">
            <h3 class="aside-title">LOGAR NO FÓRUM</h3>
            <form action="/login" method="post" class="login-form" name="form_login">
              <label for="login-username-input-target" class="username-input"><input type="text" name="username" class="rounded-input blue-active" id="login-username-input-target" placeholder="{L_USERNAME}" autocomplete="username" required=""><i class="fas fa-user" aria-hidden="true"></i></label><label for="login-password-input-target" class="password-input"><input type="password" name="password" class="rounded-input blue-active" id="login-password-input-target" placeholder="{L_PASSWORD}" autocomplete="current-password" required=""><i class="fas fa-key" aria-hidden="true"></i></label>
              <div style="font-size: 15px; margin-bottom: 5%;"><input class="radio" id="autologin-check" type="checkbox" name="autologin" checked="checked" {AUTOLOGIN_CHECKED} hidden><label for="autologin-check">Manter-me conectado.</label></div>
              <button type="submit" class="rounded-button login" id="doLogin" name="login">Vamos lá!</button>
            </form>
            <a href="/register"><button class="rounded-button register" name="register">Registrar</button></a><button title="Close (Esc)" type="button" class="mfp-close">×</button>
        </div>
      </div>
      <div class="mfp-preloader">Loading...</div>
  </div>
</div>
    </div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
   <h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" loading="lazy" /> <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;">
   <div class="h3">{inactive_users_modal.L_MODAL_TITLE}</div>
   <div id="inactive_popup_message">{inactive_users_modal.L_MODAL_BODY}</div>
   <div id="inactive_popup_buttons">
      <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button>
      <button id="inactive_popup_close" class="button1">{inactive_users_modal.L_CLOSE}</button>
   </div>
</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" class="login-pop-up">
  <div class="mfp-bg my-mfp-zoom-in mfp-ready"></div>
  <div class="mfp-wrap  mfp-close-btn-in mfp-auto-cursor my-mfp-zoom-in mfp-ready" tabindex="-1" style="overflow: hidden auto;">
      <div class="mfp-container mfp-s-ready mfp-inline-holder">
        <div class="mfp-content">
            <div id="login-dialog" class="login-popup zoom-anim-dialog">
              <!-- BEGIN switch_quick_login --><h3 class="aside-title">{switch_login_popup.switch_quick_login.L_QUICK_CONNECT}</h3><!-- END switch_quick_login -->
              <form action="{S_LOGIN_ACTION}" method="post" class="login-form" name="form_login">
                  <p>{LOGIN_POPUP_MSG}</p>
                  <label for="login-username-input-target" class="username-input"><input type="text" name="username" class="rounded-input blue-active inputbox fl_username" id="login-username-input-target" placeholder="{L_USERNAME}" autocomplete="username" required /><i class="ion-person" aria-hidden="true"></i></label>
                  <label for="login-password-input-target" class="password-input"><input type="password" name="password" class="rounded-input blue-active inputbox fl_password" id="login-password-input-target" placeholder="{L_PASSWORD}" autocomplete="current-password" required /><i class="ion-key" aria-hidden="true"></i></label>
                  <div style="font-size: 15px; margin-bottom: 5%;">
                    <label for="autologin-check">{L_AUTO_LOGIN}: <input id="autologin-check" class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
                  </div>
                  <button type="submit" class="rounded-button login" id="doLogin" name="login">{L_LOGIN}</button>
                  {S_HIDDEN_FIELDS}
              </form>
              <button type="button" class="rounded-button" style="background-color:#84c754;margin: 5px;" onclick="parent.location='{U_REGISTER}';">{L_REGISTER}</button>
              <button type="button" id="login_popup_close" class="mfp-close" title="{L_DONT_DISPLAY_AGAIN}">×</button>
            </div>
        </div>
        <div class="mfp-preloader">Loading...</div>
      </div>
  </div>
</div>
<!-- END switch_login_popup -->
<!-- BEGIN switch_like_popup -->
<div id="like_popup" style="z-index: 10000 !important;">
   <div class="h3">{SITENAME}</div>
   <div id="like_popup_message">
        {LIKE_POPUP_MSG}
   </div>
   <div id="like_popup_buttons">
      <form action="{S_LOGIN_ACTION}" method="get">
         <input type="submit" class="button1" value="{L_LOGIN}"/>
         <input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';"/>
         <input id="like_popup_close" type="button" class="button2" value="{L_LIKE_CLOSE}"/>
      </form>
   </div>
</div>
<!-- END switch_like_popup -->

<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}

<div id="page-header">
   <div class="headerbar">
      <div id="headerbar-top" class="responsive-headerbar">
         <div class="wrap">            
            <input class="menu-btn" type="checkbox" id="menu-btn" />
            <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
            <ul id="modernbb-nav-menu" class="navbar navlinks{NAVBAR_BORDERLESS}">
               <li>{GENERATED_NAV_BAR}</li>
            </ul>
         </div>
      </div>

      <div class="wrap">
         <div id="site-desc">
            <!-- BEGIN switch_h1 -->
            <div id="site-title">{switch_h1.MAIN_SITENAME}</div>
            <!-- END switch_h1 -->
            <!-- BEGIN switch_desc -->
            <p>{switch_desc.SITE_DESCRIPTION}</p>
            <!-- END switch_desc -->
         </div>
      </div>
   </div>

   <!-- BEGIN switch_ticker_new -->
   <div id="fa_ticker_blockD" style="margin-top:4px;">
      <div class="module">
         <div class="inner">
            <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>
         </div>
      </div>
   </div>
   <!-- END switch_ticker_new -->
</div>

<div class="conteneur_minwidth_IE modern-resp">
   <div class="conteneur_layout_IE">
      <div class="conteneur_container_IE">
         <div id="wrap">
            <div id="page-body">

               <!-- BEGIN switch_ticker -->
               <div id="fa_ticker_block" style="margin-top:4px;">
                  <div class="module">
                     <div class="inner">
                        <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>
                     </div>
                  </div>
               </div>
               <!-- END switch_ticker -->

               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <div id="outer-wrapper">
                     <div id="wrapper">
                        <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>

                        <div id="container">
                           <div id="content-main">
                              <div id="main">
                                 <div id="main-content">
                                                                                         
 <!---Fontawsome--->
                                                                                         
                                                                                          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

Da ultima vez que fiz, o icone aparecia porém nada de funcionar.. @Shek me salva mais uma vez Aff
Sousaph29

Sousaph29
***

Membro desde : 16/09/2018
Mensagens : 149
Pontos : 240

https://brasilexperiencelife.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Shek Qua 14 Ago 2024 - 21:13

Boa noite.

Tem um modo que percebo ser mais fácil fazer isso (eu acho). Crie um novo javascript para todas as páginas com esse novo código:
Código:
$(document).ready(function(){
   $('#modo-escuro-forumeiros').click(function() {
      $('body').toggleClass('dark-mode');
        if($('body').hasClass('dark-mode')) {
         $('#modo-escuro-forumeiros').text('Desativar modo noturno');
         localStorage.setItem('modo-escuro-shek', 'enabled');
      } else {
         $('#modo-escuro-forumeiros').text('Ativar modo noturno');
         localStorage.setItem('modo-escuro-shek', 'disabled');
      }
   });
    if(localStorage.getItem('modo-escuro-shek') === 'enabled') {
      $('body').addClass('dark-mode');
   }
});
Você pode criar um botão no local que achar melhor em seu fórum. Ou seja, se quiser inserir o botão nos widgets, mensagem da página inicial ou no template... Fique a vontade. O botão é esse:
Código:
<button id="modo-escuro-forumeiros">Ativar modo noturno</button>
Feito isso, acesse Visualização > Imagens e Cores > Cores e CSS > Folha de estilos CSS e adicione este código:
Código:
.dark-mode .conteneur_minwidth_IE,
.dark-mode #wrap {
  background-color: #121212;
  color white;
}

.dark-mode .inner,
.dark-mode .icon,
.dark-mode .module,
.dark-mode .content,
.dark-mode .post,
.dark-mode .row {
  background-color: #1c1c1c;
  color: white;
}

.dark-mode a {
  color: grey !important;
}

.dark-mode p {
  color: white;
}

.dark-mode .block {
  background-color: #1d262c;
  color: white;
}
Salve e clique no botão para mudar o modo. Você pode ver o resultado aqui: https://shek.forumeiros.com/forum

Para incluir novos elementos no modo escuro, você pode inserir o termo .dark-mode antes do elemento. Ou seja, se quiser personalizar a cor das letras dos tópicos, basta inserir:
Código:
.dark-mode .post {color:red !important;}
É claro que isso é um exemplo. O jeito que fizer será do seu agrado. Além do mais, ele usa localStorage para armazenar a informação do modo noturno.

Atenciosamente,
Shek King
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Sousaph29 Qua 14 Ago 2024 - 22:31

não consegui oque fiz de errado?


Última edição por Dollynho em Sex 16 Ago 2024 - 19:06, editado 2 vez(es)
Sousaph29

Sousaph29
***

Membro desde : 16/09/2018
Mensagens : 149
Pontos : 240

https://brasilexperiencelife.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Shek Qui 15 Ago 2024 - 6:13

Bom dia!

Como citei no exemplo de resultado, o código é funcional e no seu fórum ocorreu um problema porque tens um erro de sintaxe. Você pode ver aqui:
Modo escuro para fórum Screen88

Isso deve ter ocorrido porque não seguiu a orientação de criar um novo código javascript para todas as páginas, decidindo juntar os códigos em um só, o que possivelmente fez faltar uma chave de fechamento no código anterior. Separe os códigos conforme orientado na mensagem anterior, pois, como eu disse antes o código funciona: https://shek.forumeiros.com/forum
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Sousaph29 Sex 16 Ago 2024 - 7:38

Modo escuro para fórum Imagem32 olá, preciso que cubra o resto da página Feliz meu index body:
Código:
<main id="index">
  <button id="modo-escuro-forumeiros">Ativar modo noturno</button>
    <div class="main-inner">
        <!-- BEGIN message_admin_index -->
        <div class="block introduction">
            <!-- BEGIN message_admin_titre -->
            <div class="block-header">{message_admin_index.message_admin_titre.MES_TITRE}</div>
            <!-- END message_admin_titre -->
 
            <!-- BEGIN message_admin_txt -->
            <div class="block-content">{message_admin_index.message_admin_txt.MES_TXT}</div>
            <!-- END message_admin_txt -->
        </div>
        <!-- END message_admin_index -->
 
        {CHATBOX_TOP}
        {BOARD_INDEX}
        {CHATBOX_BOTTOM}
    </div>
</main>
 
<!-- BEGIN disable_viewonline -->
<aside id="sidebar2" class="sidebar-home" style="margin-top: 0%;">
    <div class="block">
        <div class="stats-tabs">
            <input id="tab1" type="radio" name="tabs" checked />
            <label for="tab1"><i class="fa fa-users" style="font-size:15px"></i>Usuários</label>
            <input id="tab2" type="radio" name="tabs" />
            <label for="tab2"><i class="fa fa-birthday-cake" style="font-size:15px"></i>Aniversários</label>
            <input id="tab3" type="radio" name="tabs" />
            <label for="tab3"><i class="fa fa-archive" style="font-size:15px"></i>Grupos</label>
            <section id="content1">
                <p>
                    {TOTAL_USERS_ONLINE}
                </p>
                <p>
                    {RECORD_USERS}
                </p>
                <p>
                    {LOGGED_IN_USER_LIST}
                </p>
                <p>
                    {L_CONNECTED_MEMBERS}
                </p>
            </section>
            <section id="content2">
                <p>
                    {L_WHOSBIRTHDAY_TODAY}
                </p>
                <p>
                    {L_WHOSBIRTHDAY_WEEK}
                </p>
            </section>
            <section id="content3">
                <p>
                <div class="legend">{GROUP_LEGEND}</div>
                </p>
            </section>
        </div>
    </div>
</aside>
<!-- END disable_viewonline -->
 
<script type="text/javascript">
    $(document).ready(function() {
        if (!$('#sidebar').length) {
            $('#index').css('margin', 0);
        }
    });
</script>
obs: ao passar o mouse sobre os fóruns ele fica branco:Modo escuro para fórum Imagem33
Sousaph29

Sousaph29
***

Membro desde : 16/09/2018
Mensagens : 149
Pontos : 240

https://brasilexperiencelife.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Shek Sex 16 Ago 2024 - 19:55

Mas, eu expliquei como fazer isso nesta mensagem. Qual é sua dúvida relacionado a orientação passada?

Outro tópico que pode ajudar é esse: https://ajuda.forumeiros.com/t86027-elaborar-um-codigo-css
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Sousaph29 Sex 16 Ago 2024 - 19:58

Me passe o código css para deixar todo fórum preto inclusive as partes que em seu fórum test não ficam Feliz
e veja que neste fórum: https://www.pmhabbo.com ao passar o mouse nos tópicos ele não fica branco!


Última edição por Dollynho em Sex 16 Ago 2024 - 20:00, editado 2 vez(es)
Sousaph29

Sousaph29
***

Membro desde : 16/09/2018
Mensagens : 149
Pontos : 240

https://brasilexperiencelife.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Shek Sex 16 Ago 2024 - 20:00

Mas o código da mensagem que citei já faz isso. Você viu o fórum de testes que citei no link? Não estou entendendo qual é sua dúvida sobre os processos indicados na mensagem. Aliás, acho melhor aguardar algum Ajudeiro, porque se não está disposto a ler as indicações e aprender, então não posso ajudá-lo em algo que não entendo porque você não explica.

Boa sorte, e não se esqueça de manter o tópico ativo com UPS a cada 24 horas.
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Sousaph29 Sex 16 Ago 2024 - 20:05

Se não quiser mais me ajudar ok, não é que não estou explicando, a duvida é bem clara, não consegui a solução final. que é o fórum todo escuro, só consegui cobrir os tópicos e ainda com um background branco ao passar o mouse Modo escuro para fórum Imagem34
Sousaph29

Sousaph29
***

Membro desde : 16/09/2018
Mensagens : 149
Pontos : 240

https://brasilexperiencelife.forumeiros.com

Ir para o topo Ir para baixo

Principal Contribuidor

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Shek Sex 16 Ago 2024 - 21:54

A questão não é querer ajudar, eu estou ajudando, e ainda melhor, estou ensinando a como fazer. Você é quem não quer fazer porque está com preguiça de ler, aprender e tentar fazer. Pelo que percebi, você quer de mão beijada, então vamos as explicações de como você vai fazer algo que já expliquei.

O que eu disse na mensagem anterior?
Shek escreveu:Para incluir novos elementos no modo escuro, você pode inserir o termo .dark-mode antes do elemento. Ou seja, se quiser personalizar a cor das letras dos tópicos, basta inserir:
Código:
.dark-mode .post {color:red !important;}
É claro que isso é um exemplo. O jeito que fizer será do seu agrado. Além do mais, ele usa localStorage para armazenar a informação do modo noturno.
Ou seja, citei até um exemplo básico. Para personalizar a cor das letras de tópicos, é só inserir o .dark-mode antes da classe .post, e pronto. Você terá a cor vermelha nas letras do tópico. No caso do "corpo" do seu fórum que não fica escuro, é porque tú inseriu o código de forma incorreta:
Modo escuro para fórum Screen89
O que impede a cor escura aparecer é o fato de ter inserido uma tag stylesheet na sua folha de estilos CSS. Por isso sugeri o tópico: https://ajuda.forumeiros.com/t86027-elaborar-um-codigo-css Nele é explicado o que é o CSS e como ele funciona, para que você entenda que não se deve inserir tags HTML dentro do CSS, porque vai fazer seu fórum bugar! Ainda acha que não estou ajudando? Então, vamos continuar. Você removeu esse trecho absurdo do seu CSS?
Código:
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/solid.css" integrity="sha384-ioUrHig76ITq4aEJ67dHzTvqjsAP/7IzgwE7lgJcg2r7BRNGYSK0LwSmROzYtgzs" crossorigin="anonymous"> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/regular.css" integrity="sha384-hCIN6p9+1T+YkCd3wWjB5yufpReULIPQ21XA/ncf3oZ631q2HEhdC7JgKqbk//4+" crossorigin="anonymous"> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/brands.css" integrity="sha384-i2PyM6FMpVnxjRPi0KW/xIS7hkeSznkllv+Hx/MtYDaHA5VcF0yL3KVlvzp8bWjQ" crossorigin="anonymous"> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/fontawesome.css" integrity="sha384-sri+NftO+0hcisDKgr287Y/1LVnInHJ1l+XC7+FOabmTTIK0HnE2ID+xxvJ21c5J" crossorigin="anonymous">
Se não, remove para ver se não funciona. Porque para mim funcionou perfeitamente:
Modo escuro para fórum Screen90

Agora vamos para o que acho que está tentando explicar na sua dúvida. Por que essa parte está branca, Shek?
Modo escuro para fórum Screen91

Está branca porque você não quis ler o que escrevi na mensagem anterior, onde eu deixei explicado e detalhado, que...
Shek escreveu:Para incluir novos elementos no modo escuro, você pode inserir o termo .dark-mode antes do elemento. Ou seja, se quiser personalizar a cor das letras dos tópicos, basta inserir:
Código:
.dark-mode .post {color:red !important;}
É claro que isso é um exemplo.
Isto é, está branco porque você precisa saber qual é a parte que corresponde a cor branca quando se passa o mouse. O nome disso é hover, coisa que está explicado no tópico elaborar um código CSS que indiquei. Você não quis ler, e por isso não soube do que eu falei. Então vamos lá, lá vou eu escrever um textão para te AJUDAR (já que disse que não quero ajudar) a explicar algo que um tópico simples já explica bem explicado.
Modo escuro para fórum Screen94
A parte que corresponde a parte branca que está mencionando é contém a classe .row que não está inclusa no código CSS que indiquei na mensagem que ENSINO como aplicar o efeito escuro no fórum. Para isso, você vai inserir a classe que indiquei .dark-mode antes do .row.
Shek, mas como vou saber qual é o elemento que corresponde a parte branca??
Essa sim é a dúvida que você deveria ter postado. Se tivesse postado isso, minha resposta seria simples. Pressione Ctrl + F12 no seu teclado ou clique com o botão direito do mouse sobre a parte branca e vai em Inspecionar elemento, onde a parte branco ficaria destacada com o elemento que você precisaria personalizar. Feliz

Como neste caso é um seletor (o que é explicado no tópico elaborar um código CSS em detalhes), então você deve inserir o seletor :hover junto ao .row para afetar essa parte. Entendeu? O código funcional será:
Código:
dark-mode .row:hover
Para facilitar sua vida caso realmente tivesse uma dúvida se tivesse pelo menos tentado, era vir perguntar para mim como poderia aplicar isso usando a mesma cor background definida em todo o modo escuro. Aí eu ia sugerir incluir uma virgula na linha do CSS .dark-mode .conteneur_minwidth_IE, .dark-mode #wrap e colocar o .dark-mode li.row:hover. Veja só que resultado maravilhoso:
Modo escuro para fórum Screen92
Código que resultaria para você:
Código:
.dark-mode .conteneur_minwidth_IE, .dark-mode #wrap,.dark-mode li.row:hover {
    background-color: #121212;
}
Simples né? Todo esse alvoroço por causa de um código tão pequeno. Mas se tivesse pelos menos tentado, eu teria o prazer de te ensinar. E talvez, sua próxima mensagem seja:
Shek, eu não sei CSS ou programação
Por isso o tópico Elaborar um código CSS existe aqui no FDF. Para ensinar/ajudar os usuários a fazerem, a tentarem pelo menos. Como acha que aprendi tudo o que sei? Lendo, estudando o básico de programação e assim por diante. Se não fizer o mesmo, não aprenderá nada. Se fosse no stackoverflow, você não teria respostas na sua dúvida, você seria banido.

Por fim, quero que entenda o seguinte. O FdF tem como objetivo ajudá-lo com suas dúvidas, mas qual é sua dúvida? Você não tem uma dúvida, você quer que façamos por você, e já que nosso objetivo é ensinar, quando fazemos isso você conseguirá seguir fazer por conta própria um dia. Agora vir aqui e dizer "se não quiser ajudar ok?", não me julgue por perder o controle nesta mensagem, mas seja sensato. Eu criei o código javascript para você do zero, para não plagiar o fórum que citou na mensagem, expliquei como funciona, e você ainda diz que não estou aqui para ajudar? Eu desabafei aqui, porque achei um desaforo você me dizer que "não quero ajudar", se não sabe a diferença entre ajudar ou ensinar. Desacordo

Demônio Espero que tenha ficado bem explicado agora. Seco
Shek

Shek
Principal Contribuidor
Principal Contribuidor

Membro desde : 11/04/2009
Mensagens : 19006
Pontos : 22969

https://shiftactive.blogspot.com/ https://www.facebook.com/ShiftActif https://twitter.com/ShiftActif

Ir para o topo Ir para baixo

Tópico resolvido Re: Modo escuro para fórum

Mensagem por Sousaph29 Dom 18 Ago 2024 - 11:33

Muito obrigado, não foi um desaforo, apénas como estou com dificuldades, preferi que me desse apénas a soluçao, pois creio que o forumeiros é para ter um suporte/ajuda Feliz

entretanto como posso fazer para que as cores do grupo aqui fiquem normais ? Modo escuro para fórum Imagem35
Sousaph29

Sousaph29
***

Membro desde : 16/09/2018
Mensagens : 149
Pontos : 240

https://brasilexperiencelife.forumeiros.com

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Modo escuro para fórum

Mensagem por tikky Sex 23 Ago 2024 - 13:44

@Dollynho: Basta substituir
Código:
.dark-mode a {
    color:#fff !important
}
por
Código:
.dark-mode a:not([style][href^="/g"]) {
    color:#fff !important
}


Tópico resolvido


Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7957
Pontos : 9209

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery

Permissões neste sub-fórum
Não podes responder a tópicos