Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema
Modo escuro e modo claro
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Modo escuro e modo claro
Detalhes da questão
Endereço do fórum: https://runeterra.forumbrasil.net
Versão do fórum: phpBB3
Descrição
Opa. Queria saber como eu faço essa mudança de modo claro para modo escuro em fórum.
Um exemplo de fórum: https://neonparadise.foroactivo.com, clicando no botão ao lado de registrar-se.
Re: Modo escuro e modo claro
Olá,
Primeiramente adicione o código HTML onde deseja que o botão fique
Depois adiciona o código abaixo na sua Folha de estilo CSS
E depois, crie um novo JavaScript com o código abaixo
Depois de todos esses passos, será necessário criar código por código para fazer as alterações de cor que você deseja, se o tema padrão do seu fórum for claro você deve criar então a versão night, usando o css .mm-night. Se o seu fórum tiver a versão escura, deverá criar os códigos usando o css .mm-day
Confira o CSS exemplo que está no fórum neonparadise
https://pastebin.com/iLdNVx6y
Até mais!
Primeiramente adicione o código HTML onde deseja que o botão fique
- Código:
<a id="mm-claro" title="DAY"><i class="fa fa-sun" aria-hidden="true"></i></a>
<a id="mm-oscuro" title="NIGHT"><i class="fa fa-moon" aria-hidden="true"></i></a>
<script type="text/javascript">
var colores = $.cookie('colores');if (colores=='day') $('#phpbb').prop('class', 'mm-day');if (colores=='night') $('#phpbb').prop('class', 'mm-night');//]]></script><script type="text/javascript">
var vglnk = { key: '5a5e09c99bf477b62bf79c1924e231f7' };
(function(d, t) {
var s = d.createElement(t); s.type = 'text/javascript'; s.async = true;
s.src = 'http://cdn.viglink.com/api/vglnk.js';
var r = d.getElementsByTagName(t)[0]; r.parentNode.insertBefore(s, r);
}(document, 'script'));
</script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@beta/dist/js.cookie.min.js"></script>
<script type="text/javascript" src="https://illiweb.com/rs3/84/frm/jquery/cookie/jquery.cookie.js" ></script>
Depois adiciona o código abaixo na sua Folha de estilo CSS
- Código:
#mm-oscuro, #mm-claro {
z-index: 999;
top: 10px;
left: 145px;
padding: 5px;
font-size: 20px;
}
.mm-night #mm-oscuro, .mm-day #mm-claro {
display: none;
}
#mm-oscuro {
color: #000;
}
.fa-sun:before {
content: "\f185";
}
.fa-moon:before {
content: "\f186";
}
.fa, .fas {
font-weight: 900;
}
.fa, .far, .fas {
font-family: "Font Awesome 5 Free";
}
.fa, .fab, .fal, .far, .fas {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
}
E depois, crie um novo JavaScript com o código abaixo
- Código:
$(function() {
$('#mm-claro').click(function() {
$('#phpbb').prop('class', 'mm-day');
$.cookie('colores', 'day');
});
$('#mm-oscuro').click(function() {
$('#phpbb').prop('class', 'mm-night');
$.cookie('colores', 'night');
});
});
Depois de todos esses passos, será necessário criar código por código para fazer as alterações de cor que você deseja, se o tema padrão do seu fórum for claro você deve criar então a versão night, usando o css .mm-night. Se o seu fórum tiver a versão escura, deverá criar os códigos usando o css .mm-day
Confira o CSS exemplo que está no fórum neonparadise
https://pastebin.com/iLdNVx6y
Até mais!
Re: Modo escuro e modo claro
Obrigado amigão, valeu!!!! Funcionou direitinho aqui. Tamo junto no que precisar.
Re: Modo escuro e modo claro
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos