Jump to content
Sapinn

Mudar a cor padrão do layout com css, js, php

Recommended Posts

A um bom tempo atrás eu encontrei um site que dava pra mudar a cor do layout. Então eu resolvi adicionar essa propriedade em um site que estou desenvolvendo, mas não sei bem como fazer isso. Eu criei uma variável no meu arquivo css pra colocar uma cor padrão para o site então eu gostaria que o usuário quando apertasse em um palheta de cores visse como o site ficaria caso ele gostasse ele apertaria em mudar cor e essa nova cor seria a padrão do site. Eu fiz algumas buscas mas não encontrei muita coisa, infelizmente. Se alguém pudesse me ajudar eu ficaria grato. Vlw

Share this post


Link to post
Share on other sites

No rodapé aqui do fórum você tem esse recurso.

Uma alternativa seria usar um sessão para armazenar o "tema" que o usuário selecionou em uma sessão.

Sinceramente acho que isso é uma besteira, mas minha opinião não importa.

 

Como a ideia é só mudar a cor vou abordar o uso do próprio css padrão que desenvolvi, apenas mudando sua paleta de cores:

<?php
session_start();
$_SESSION['nome_do_css'] = (isset($_SESSION['nome_do_css']) ? $_SESSION['nome_do_css'] : 'exemplo');
?>

<link href="sm-default.css" rel="stylesheet" type="text/css" />
<link href="<?= $_SESSION['nome_do_css'] ?>.css" rel="stylesheet" type="text/css" />

Note que gravamos em uma sessão o nome do arquivo que vai mudar a coloração disponível no CSS, o mesmo poderia ser feito usando um cookie caso queira que o tema continue alterado mesmo depois que o usuário fechar seu navegador.

Reparando também que o arquivo ao qual vai mudar o esquema de cores vem depois, desse modo re-escrevemos propriedades do primeiro css carregado.

 

Agora vamos ao css:

Nesse meu css que é encontrado nesse endereço

Podemos ver o uso da variável root

:root {
    --white:#ffffff;
    --black:#333333;
    --grey:#808080;
    --red:#d42020;

 

E mais adiante no arquivo vemos o uso dessas vars em esquema de cor:

.text-white, .text-white-hover:hover {color:var(--white) !important}

 

Então se eu criar outra folha de estilo e adicionar por exemplo:

:root {
    --white:red;

O que vai acontecer é que toda vez que o classificador text-white for carregado ao invés o texto ser branco ele será vermelho, e assim sucessivamente para todas as demais propriedades:

<span class="text-white">Um texto escrito em barnco ou vermelho dependendo do valor de "--white:"</span>

 

Bom, eu usei o meu arquivo para exemplificar, mas esse é o esquema basta que tenha um arquivo css para definir as propriedades com o nome relacionado ao "tema" que o usuário escolher

 

E para não entrar em outras questões, para que o novo sema seja válido a página deve ser recarregada. Dar para alterar sem recarregar mais daí é outra história.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Caio Vargas
      Fala pessoa tudo tranquilo ?
      estou com um problema eu fiz um sistema de upload onde tem a marca dagua  o problema e que quando o cadastro da capa e pequena a imagem da marca dagua fica grande
      e qauando a capa e grande  a imagem da marca dagua fica pequena alguem poderia me ajudar 
    • By klasss
      Olá a todos, 

      Tenho aqui um erro parvo não estou a ver como resolver . 

      Na minha View tenho um botão que será para fazer a aprovação de documentos , que abre uma modal para fazer a confirmação : 
      O problema é que quis fazer a mesma coisa para rejeitar. 
       
      <a href="{{route('despesas.modal', $item)}}" ><i class="fas fa-check text-info mr-1"></i></a> <a href="{{route('despesas.modal2', $item)}}" ><i class="fas fa-ban text-danger mr-1"></i></a> <?php if(@$id != ""){ echo "<script>$('#modalaceitar').modal('show');</script>"; } ?> <?php if(@$id != ""){ echo "<script>$('#modalrejeitar').modal('show');</script>"; } ?> Será que consigo validar por exemplo criando um ID nos dois botões?  
       
      Obrigado!
    • By b2black
      Então, estou tentando criar um submenu com opções quando o usuário passa o link em cima da imagem, porém não estou conseguindo, qual é o jeito certo de fazer?
       
      Ao clicar no link (link-login) que é uma imagem colocada com css, abre um menu abaixo da imagem com 5 opções de link
       
      <div class="nav-container"> <nav> <ul class="desktop-nav"> <li> <a href="" class="link-logo"></a> </li> <li> <a href="">Charm Points</a> </li> <li> <a href="">Ranking</a> </li> <li> <a href="">Colaboradores</a> </li> <li> <a href="">Blog</a> </li> <li> <a href="">Eventos</a> </li> <li> <a href="">Suporte</a> </li> <li> <!--<a href="" class="link-search"></a>--> <form method="get" action="" class="search"> <input name="boxsearch" type="search-text" placeholder="" /> </form> </li> <li> <a href="" class="link-bag"></a> </li> <li> <a href="" class="link-login"></a> </li> </ul> </nav> </div>  
      .link-login { background: url('avatar.png'); background-repeat: no-repeat; display: block; background-position: center; background-size: 20px; height: 44px; width: 20px; } .link-login:hover { position: relative; display: inline-block; margin-top: 50px; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; }  
    • By b2black
      Estava vendo para atualizar o Windows pro 11, e notei isso no site da Microsoft, alguém sabe qual repositorio, ou como pesquisar para desenvolver algo similar?
      Quando você rola a página, o menu fica transparente.
       
      Explore Windows 11 OS, Computers, Apps, & More | Microsoft
    • By Marcos RJ
      Bom dia, boa tarde, boa noite colegas.
       
      Tenho um projeto onde conterá diversos subdomínios. Ex.:
      empresa1.site.com.br empresa2.site.com.br empresa3.site.com.br Esses subdomínios acessarão o sistema que está dentro do seguinte diretório:
      site.com.br/sistema/ Gostaria de fazer com que os subdomínios acessassem o sistema sem alterar a url, pois o objetivo é quando fizer quaisquer alterações e/ou inclusões de novos recursos, não tenhamos a necessidade de fazer isso dentro de todos os subdomínios, haja vista que serão dezenas ou até mesmo centenas de subdomínios. As minhas tentativas foram diretamente no .htaccess:
      RewriteEngine on RewriteCond %{HTTP_HOST} ^empresa1.site.com$ [OR] RewriteCond %{HTTP_HOST} ^www.empresa1.site.com$ RewriteRule ^(.*) http://www.site.com/sistema/$1?key=empresa1 [P,L] E o PHP ficou dessa forma:
       
      $diretorio = $_REQUEST["key"]; if($directory != null){    require "http://".$diretorio.".site.com.br/sistema/class/conectCass.php"; }else{  require "conectClass.php";  } Mas não deu certo. Tentei diretamente pelo PHP, mas quando clico no link criado, ele me obriga que a página do link esteja dentro dos subdiretórios. Em cada subdomínio coloquei da seguinte forma:
      include 'sistema/'; E no index.php do diretório sistema/:
      $host = $_SERVER['SERVER_NAME']; $host = str_replace(['www.', '.site.com.br', 'site.com.br'], '', $host); if($host == '') {     // entra o conteúdo do sistema } else {     // Entra o conteúdo do subdomínio } Mas também não funcionou. Como eu poderia resolver isso?

      Muito obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.