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
Página 1 de 1 • Compartilhe
Modo escuro para fórum
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&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
Re: Modo escuro para fórum
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:
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:
Atenciosamente,
Shek
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');
}
});
- Código:
<button id="modo-escuro-forumeiros">Ativar modo noturno</button>
- 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;
}
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;}
Atenciosamente,
Shek
Re: Modo escuro para fórum
não consegui oque fiz de errado?
Última edição por Dollynho em 16.08.24 23:06, editado 2 vez(es)
Re: Modo escuro para fórum
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:
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
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:
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
Re: Modo escuro para fórum
olá, preciso que cubra o resto da página 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>
Re: Modo escuro para fórum
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
Outro tópico que pode ajudar é esse: https://ajuda.forumeiros.com/t86027-elaborar-um-codigo-css
Re: Modo escuro para fórum
Me passe o código css para deixar todo fórum preto inclusive as partes que em seu fórum test não ficam
e veja que neste fórum: https://www.pmhabbo.com ao passar o mouse nos tópicos ele não fica branco!
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 17.08.24 0:00, editado 2 vez(es)
Re: Modo escuro para fórum
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.
Boa sorte, e não se esqueça de manter o tópico ativo com UPS a cada 24 horas.
Re: Modo escuro para fórum
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?
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?
Agora vamos para o que acho que está tentando explicar na sua dúvida. Por que essa parte está branca, Shek?
Está branca porque você não quis ler o que escrevi na mensagem anterior, onde eu deixei explicado e detalhado, que...
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.
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 que resultaria para você:
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.
Espero que tenha ficado bem explicado agora.
O que eu disse na mensagem anterior?
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: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:É 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.
- Código:
.dark-mode .post {color:red !important;}
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">
Agora vamos para o que acho que está tentando explicar na sua dúvida. Por que essa parte está branca, Shek?
Está branca porque você não quis ler o que escrevi na mensagem anterior, onde eu deixei explicado e detalhado, que...
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.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:É claro que isso é um exemplo.
- Código:
.dark-mode .post {color:red !important;}
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.
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.Shek, mas como vou saber qual é o elemento que corresponde a parte branca??
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
Código que resultaria para você:
- Código:
.dark-mode .conteneur_minwidth_IE, .dark-mode #wrap,.dark-mode li.row:hover {
background-color: #121212;
}
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.Shek, eu não sei CSS ou programação
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.
Espero que tenha ficado bem explicado agora.
Re: Modo escuro para fórum
@Dollynho: Basta substituir
- Código:
.dark-mode a {
color:#fff !important
}
- Código:
.dark-mode a:not([style][href^="/g"]) {
color:#fff !important
}
Tópico resolvidoTópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão. |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7996
Pontos : 9259
Tópicos semelhantes
» Modo escuro para fórum
» Criar um modo escuro para o fórum
» Problemas para aplicar o modo escuro
» Modo escuro e modo claro
» Painel administrativo: Modo escuro
» Criar um modo escuro para o fórum
» Problemas para aplicar o modo escuro
» Modo escuro e modo claro
» Painel administrativo: Modo escuro
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre códigos Javascript e jQuery
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos