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 b2black
      Quando preencho o cadastro e clico em cadastrar, a informação não é salva no banco de dados, e também, como pode ver na imagem action2, as informações digitadas permanecem nos campos imput e o nome vai para o alerta de erro de mensagem em baixo do campo....
       
      <?php require_once "config.php"; $idclient = $fullname = $cpfclient = $gender = $phone = $email = $dayagend = $houragend = ""; $idclient_err = $fullname_err = $cpfclient_err = $gender_err = $phone_err = $email_err = $dayagend_err = $houragend_err = ""; if($_SERVER["REQUEST_METHOD"] == "POST"){ // $input_idclient = trim($_POST["idclient"]); if(empty($input_idclient)){ $idclient_err = "ID de identificação do cliente."; } else{ $idclient = $input_idclient; } $input_fullname = trim($_POST["fullname"]); if(empty($input_fullname)){ $fullname_err = "Por favor, insira o nome completo do cliente."; /*} elseif(!filter_var($input_fullname, FILTER_VALIDATE_REGEXP, array("options"=>array("regexp"=>"/^[a-zA-Z\s]+$/")))){ $fullname_err = "Por favor, insira um nome válido de cliente.";*/ } else{ $fullname = $input_fullname; } $input_cpfclient = trim($_POST["cpfclient"]); if(empty($input_cpfclient)){ $cpfclient_err = "Por favor, insira o CPF do cliente."; } elseif(!ctype_digit($input_cpfclient)){ $cpfclient_err = "Por favor, coloque apenas números do CPF."; } else{ $cpfclient = $input_cpfclient; } $input_gender = trim($_POST["gender"]); if(empty($input_gender)){ $gender_err = "Por favor, escolha o gênero do cliente."; } else{ $gender = $input_gender; } $input_phone = trim($_POST["phone"]); if(empty($input_phone)){ $phone_err = "Por favor, insira o telefone do cliente."; } elseif(!ctype_digit($input_phone)){ $phone_err = "Por favor, é necessário inserir o telefone de contato do cliente."; } else{ $phone = $input_phone; } $input_email = trim($_POST["email"]); if(empty($input_email)){ $email_err = "Por favor, insira o e-mail do cliente."; } else{ $email = $input_email; } $input_dayagend = trim($_POST["dayagend"]); if(empty($input_dayagend)){ $dayagend_err = "Por favor, coloque a data do atendimento do cliente."; } elseif(!ctype_digit($input_dayagend)){ $dayagend_err = "Por favor, é necessário uma data de atendimento para o cliente."; } else{ $dayagend = $input_dayagend; } $input_houragend = trim($_POST["houragend"]); if(empty($input_houragend)){ $houragend_err = "Por favor, coloque a data do atendimento do cliente."; } elseif(!ctype_digit($input_houragend)){ $houragend_err = "Por favor, é necessário uma data de atendimento para o cliente."; } else{ $houragend = $input_houragend; } if(empty($idclient) && empty($fullname_err) && empty($cpfclient_err)&& empty($gender_err)&& empty($phone_err)&& empty($email_err)&& empty($dayagend_err)&& empty($houragend_err)){ $sql = "INSERT INTO schedule (idclient, fullname, cpfclient, gender, phone, email, dayagend, houragend) VALUES (?, ?, ?)"; if($stmt = mysqli_prepare($link, $sql)){ mysqli_stmt_bind_param($stmt, "sss", $param_idclient, $param_fullname, $param_cpfclient, $param_gender, $param_phone, $param_email, $param_dayagend, $param_houragend); $param_idclient = $idclient; $param_fullname = $fullname; $param_cpfclient = $cpfclient; $param_gender = $gender; $param_phone = $phone; $param_email = $email; $param_dayagend = $dayagend; $param_houragend = $houragend; if(mysqli_stmt_execute($stmt)){ header("location: index.php"); exit(); } else{ echo "Ops! Algo deu errado. Por favor, tente novamente mais tarde."; } } if($stmt = mysqli_prepare($link, $sql)){ // [...] mysqli_stmt_close($stmt); } } mysqli_close($link); } ?> <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <title>Agenda dos Clientes</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <style> .wrapper{ width: 600px; margin: 0 auto; } </style> </head> <body> <div class="wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <h2 class="mt-5">Cadastro do Cliente</h2> <p>Por favor, preencha os campos abaixos para agendar o cliente.</p> <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post"> <div class="form-group"> <label>ID DO CLIENTE</label> <input type="text" name="idclient" class="form-control <?php echo (!empty($idclient_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $idclient; ?>"> <span class="invalid-feedback"><?php echo $idclient_err;?></span> </div> <div class="form-group"> <label>NOME COMPLETO</label> <input type="text" name="fullname" class="form-control <?php echo (!empty($fullname_err)) ? 'is-invalid' : ''; ?>"><?php echo $fullname; ?> <span class="invalid-feedback"><?php echo $fullname_err;?></span> </div> <div class="form-group"> <label>CPF</label> <input type="text" name="cpfclient" class="form-control <?php echo (!empty($cpfclient_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $cpfclient; ?>"> <span class="invalid-feedback"><?php echo $cpfclient_err;?></span> </div> <div class="form-group"> <label>GÊNERO</label> <input type="text" name="gender" class="form-control <?php echo (!empty($gender_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $gender; ?>"> <span class="invalid-feedback"><?php echo $gender_err;?></span> </div> <div class="form-group"> <label>Telefone</label> <input type="text" name="phone" class="form-control <?php echo (!empty($phone_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $phone; ?>"> <span class="invalid-feedback"><?php echo $phone_err;?></span> </div> <div class="form-group"> <label>E-mail</label> <input type="text" name="email" class="form-control <?php echo (!empty($email_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $email; ?>"> <span class="invalid-feedback"><?php echo $email_err;?></span> </div> <div class="form-group"> <label>Agendar Dia</label> <input type="text" name="dayagend" class="form-control <?php echo (!empty($dayagend_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $dayagend; ?>"> <span class="invalid-feedback"><?php echo $dayagend_err;?></span> </div> <div class="form-group"> <label>Agendar Horário</label> <input type="text" name="houragend" class="form-control <?php echo (!empty($houragend_err)) ? 'is-invalid' : ''; ?>" value="<?php echo $houragend; ?>"> <span class="invalid-feedback"><?php echo $houragend_err;?></span> </div> <input type="submit" class="btn btn-primary" value="Submit"> <a href="index.php" class="btn btn-secondary ml-2">Cancel</a> </form> </div> </div> </div> </div> </body> </html>  


    • By Air-Gear
      Olá, na parte de enviar eu conseguir, mas manter até terminar o cadastro eu não conseguir. Eu vou contar toda a história para ficar mais claro possível.
       
      Eu precisei implementar um Upload de qualquer imagem ou PDF na página de solicitar compras. O site utiliza AngularJS, a primeira versão do Angular. Eu tentei fazer sem depender de PHP, mas na internet achava só a parte de Front-End e ninguém sabia fazer no Back-End. Então eu resolvi fazer com PHP mesmo.
       
      Nó código PHP, ele aceita todos as extensões de imagens mais o PDF e é possível envia-los todos de uma vez na quantidade que quiser. Todos os arquivos serão renomeados, contendo no nome o ID do usuário logado pego pela função javascript, o dia do mês, o mês, o ano, o dia da semana, a hora, o minuto, o segundo, se é AM ou PM e uma numeração aleatório. O arquivo PDF vai continuar sendo PDF e todas as imagens serão JPG. No final, todos serão enviados para uma pasta chamada upload.
       
      Só que agora eu preciso jogar de volta para página para salvar os novos nomes dos arquivos para continuar o cadastro da solicitação de compras. Como AngularJS utiliza Javascript, eu tentei usa-lo dentro do PHP utilizando EOF, mas não tive resultado. Eu só consigo com HTML com as diretivas do AngularJS. Na parte do API, nos atributos, eu declarei "nomeArquivo: []," , para salvar os nomes dos arquivos.
       
      Seguem o código.
      <div class="row"> <div class="col-sm-12 col-md-6 "> <div class="upload_form_cont"> <form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload"> <div> <div><label for="image_file">Selecione o arquivo de imagem</label></div> <div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div> </div> <div> <input type="button" value="Upload" onclick="startUploading()" /> </div> <div id="fileinfo"> <div id="filename"></div> <div id="filesize"></div> <div id="filetype"></div> <div id="filedim"></div> </div> <div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div> <div id="error2">Ocorreu um erro ao enviar o arquivo</div> <div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div> <div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div> <div id="progress_info"> <div id="progress"></div> <div id="progress_percent">&nbsp;</div> <div class="clear_both"></div> <div> <div id="speed">&nbsp;</div> <div id="remaining">&nbsp;</div> <div id="b_transfered">&nbsp;</div> <div class="clear_both"></div> </div> <div id="upload_response"></div> </div> </form> </div> </div> </div> upload.php
      <?php function bytesToSize1024($bytes, $precision = 2) { $unit = array('B','KB','MB'); return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; } //Pega o id do usuário logado $id_url = $_GET['id']; // Numero de campos de upload $numeroCampos = count($_FILES['image_file']['name']); // Tamanho máximo do arquivo (em bytes) $tamanhoMaximo = 1024*1024*2; // Extensões aceitas $extensoes = array(".jpg", "jpeg", ".gif", ".png", ".pdf", ".bmp", ".pdf", ".tiff"); //Local da pasta $_UP['pasta'] = '../upload/'; $substituir = false; for ($i = 0; $i < $numeroCampos; $i++) { // Informações do arquivo enviado $sFileName = $_FILES['image_file']['name'][$i]; $sSize = $_FILES['image_file']['size'][$i]; $sFileSize = bytesToSize1024($sSize, 1); $nomeTemporario = $_FILES['image_file']['tmp_name'][$i]; // Verifica se o arquivo foi colocado no campo if (!empty($sFileName)) { $erro = false; // Verifica se o tamanho do arquivo é maior que o permitido if ($sSize > $tamanhoMaximo) { $erro = "O arquivo " . $sFileName . " não deve ultrapassar " . $tamanhoMaximo. " bytes"; } // Verifica se a extensão está entre as aceitas elseif (!in_array(strrchr($sFileName, "."), $extensoes)) { $erro = "A extensão do arquivo <b>" . $sFileName . "</b> não é válida"; } // Verifica se o arquivo existe e se é para substituir elseif (file_exists($_UP['pasta'] . $sFileName) and !$substituir) { $erro = "O arquivo <b>" . $sFileName . "</b> já existe"; } else{ //Pega a extensão do arquivo $TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION); // O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta // Primeiro verifica se deve trocar o nome do arquivo $unixTime = time(); $timeZone = new \DateTimeZone('America/Sao_Paulo'); $time = new \DateTime(); $time->setTimestamp($unixTime)->setTimezone($timeZone); $formattedTime = $time->format('d-m-Y_l_h-i-s-a'); $aleatorio = rand(); if($TipoExtensao == 'pdf'){ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf'; }else{ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg'; } // Depois verifica se é possível mover o arquivo para a pasta escolhida if (move_uploaded_file($nomeTemporario, $_UP['pasta'] . $nome_final)) { // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo echo "Upload do arquivo ".$sFileName." foi efetuado com sucesso!"; echo "</br>"; echo<<<EOF <p>Eu tentei implementar o retorno da página aqui!</p> <p></br></p> <p></br></p> EOF; } else { // Não foi possível fazer o upload, provavelmente a pasta está incorreta echo "Não foi possível enviar o arquivo, tente novamente"; echo "</br>"; } } } else { echo "Selecione algum arquivo de imagem ou PDF para fazero upload."; } } ?>  
    • By Danilo CS
      Olá
      Uma das formas que encontrei para incluir nosso próprio PHP nas páginas Wordpress foi por meio desse tutorial
       https://www.icloud.com.br/2357/criar-uma-pagina-no-site-wordpress-com-um-arquivo-php
       
      Mas um colega disse que essa técnica não é segura. Você concorda com isso?
       
      <?php /* Template Name: Nome da Página */ ?> <?php get_header(); ?>  
    • By belann
      Olá!
       
      Estou tentando fazer upload de arquivo e estou tendo problemas com as variáveis dá o erro: Notice: Undefined index: fileimg 
      Notice: Undefined index: uploadfile :
       
      O código segue abaixo
      html
      <input type="file" accept="image/*" name="fileimg" id="lerarq" class="jump"> php
      <?php $uploaddir = "imagem/";   if (isset($_POST)) {       $uploadfile = $uploaddir . basename($_FILES["fileimg"]["name"]);     $imgFileType = strtolower(pathinfo($uploadfile,PATHINFO_EXTENSION));     $checkimg = getimagesize($_FILES["uploadfile"]["tmp_name"]);     if($check !== false) {         if (!file_exists($target_file)) {             if ($_FILES["fileToUpload"]["size"] <= 500000) {                         if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $uploadfile)) {                     echo "Arquivo válido e enviado com sucesso.\n";                 } else {                     echo "Possível ataque de upload de arquivo!\n";                 }             } else {               echo "Arquivo muito grande";             }           } else {           echo "Arquivo já existe";         }     } else {        echo "Arquivo não é uma imagem";     }     } else {       echo "Selecione uma imagem" . $arquivo; }   ?>
    • By Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
×

Important Information

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