2

De modo geral, como mudar a propriedade CSS de alguma tag dependendo do acesso do usuário ao sistema?

Abaixo está a imagem do cabeçalho (rascunho) antes do usuário acessar ao sistema:

inserir a descrição da imagem aqui

E abaixo o mesmo cabeçalho, mas com as divs dos botões desalinhadas (desconsidere o tamanho exagerado do nome do usuário):

inserir a descrição da imagem aqui

E abaixo estão os códigos dos dois:

<div class="header">
<h1 style="margin-left: 300px; margin-top: 0px;"><a href="index.php">TI_sem_dúvidas</a></h1>
<div class="btn_login" style="margin-left: 1000px; margin-top: 50px;">
    <a href="#abrir-modal">Login</a>
</div>

Acima foi o header antes do login.

Abaixo é o de depois.

<div class="header">
    <h1 style="margin-left: 300px; margin-top: 0px;"><a href="index.php">TI_sem_dúvidas</a></h1>
    <div class="btn_login" style="margin-left: 800px; margin-top: 50px; background-color: steelblue; width: 300px;">
        Nome de Usuário
    </div>
    <div class="btn_login" style="margin-left: 1000px; margin-top: 50px;">
        <a href="#abrir-modal">Sair</a>
    </div>
</div>

Abaixo está o css do HTML e do body

   html{
    position: relative;
    min-height: 100%;
    background-color: lightblue;
}

    body{
    font-family: verdana;
    margin: 0 0 400px; /* bottom = footer height */
    }

Os cabeçalhos têm a extensão html.php.

3
  • Não sei se entendi, mas não é o caso de if( ... ) else? Commented 27/05/2015 às 3:29
  • @PapaCharlie vc diz colocar o if else do php dentro do HTML ou do CSS? Pergunto porque fiz esta pergunta pt.stackoverflow.com/questions/65104/… (ainda sem resposta) e me pareceu insegura a utilização de php dentro do CSS, por causa de uma resposta que vi no SOen...
    – gustavox
    Commented 27/05/2015 às 6:12
  • Se eu entendi bem, você quer carregar uma nova folha de estilos de acordo com a autenticação de um usuário (ou seja, alguém 'conectou-se' e assim muda o CSS), correto? Se sim, acho que se você incrementar um HTML por meio PHP (um echo do conteúdo HTML) que tenha um script JavaScript para alterar o estilo dos elementos necessários resolverá seu problema. E se for autenticação com Ajax, mais fácil ainda! Basta inserir mais linha de código JavaScript na chamada de função! :)
    – José
    Commented 27/05/2015 às 6:26

1 Resposta 1

2

Vejamos

Acredito que existem várias maneiras de se resolver seu problema - o de carregar outra folha de estilos - mas vou citar apenas duas formas que me veio logo a mente. Mas, primeiro, preciso dizer que suponho que você esteja usando PHP devido as TAGs que atribui à sua pergunta no SOPT. E suponho que a autenticação de usuário também seja em PHP.


1º - Caso não seja autenticação que utilize Ajax

Vou supor que você esteja fazendo algo do tipo quanto a autenticação:

  • Página 1 - com o formulário de login
  • Página 2 - de autenticação (PHP)
  • Página 3 - destino

Você poderia criar cookies e fazer um IF()/ELSE com PHP para verificar quando carregar um arquivo CSS. Algo do tipo:

<!-- PÁGINA 1 = PÁGINA 3 -->
<head>
...
<?php
...
if(!isset($_COOKIE['css']) && $_COOKIE['css'] == "css")
     echo '<link rel="stylesheet" type="text/css" href="./novo_estilo.css" />';
else
     echo '<link rel="stylesheet" type="text/css" href="./antigo_estilo.css" />';
...
?>
...
</head>

Esse cookie será configurado na página 2.

<?php
// PÁGINA 2 - PHP - Autenticador
...
$cookie_nome = "css";
$cookie_valor = "css";
$cookie_tempo = 86400; // No caso, um dia mas você deve alterar

setcookie($cookie_nome, $cookie_valor, time() + $cookie_tempo, "/");
...
?>

NOTA: Funcionará mesmo se a página 1 for diferente da página 3 (diferentes arquivos PHP). O que muda é que ambas as páginas receberão código.


2º - Caso seja autenticação que utilize Ajax

Vou supor que você esteja fazendo algo do tipo quanto a autenticação:

  • Página 1 - com formulário de login;
  • Página 1 - com autenticação (PHP) chamada via Ajax
  • Página 1 - saída em algum local da mesma página de formulário;

Nesse caso, quando o Ajax for jogar o conteúdo alterado na página, basta você alterar o estilo dos elementos desejados com JavaScript mesmo, sem usar um arquivo CSS para isso, logo depois de despejar a página de autenticação em algum elemento da página (<body>, <div>, etc).

Alternativamente, você poderá usar o primeiro método - o do cookie. Ele é mais 'organizado' porém mais 'demorado'. Este método aqui é mais 'rápido' e mais 'enxuto', além de tornar desnecessário a existência de dois arquivos CSS. Mas quem vai escolher vai ser você.


Não vou dar exemplos de código pois acho que o JSFiddle não suporta Ajax ou Session ou Cookie (acho). Mas com isso que foi dito, tudo deve funcionar por aí.

Espero ter ajudado! ;)

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .