Change CSS with session and misaligned Ivs

Asked

Viewed 310 times

2

Generally speaking, how to change the CSS property of a tag depending on the user’s access to the system?

Below is the header image (draft) before the user access the system:

inserir a descrição da imagem aqui

And below the same header, but with the Ivs of the buttons misaligned (disregard the exaggerated size of the user name):

inserir a descrição da imagem aqui

And below are the codes of the two:

<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>

Above was the header before login.

Below is the after.

<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>

Below is the css of HTML and body

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

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

The headers have the extension html.php.

php html css

  • I’m not sure I understand, but this is not the case if( ... ) else?

  • @Papacharlie you say put php if Else inside HTML or CSS? I ask because I asked this question http://answall.com/questions/65104/como-modifir-com-segurn%C3%A7a-a-file-css-using-php (still unanswered) and I felt insecure the use of php within CSS, because of an answer I saw in Soen...

  • If I understand correctly, you want to load a new style sheet according to a user’s authentication (i.e., someone 'logged in' and so changes the CSS), correct? If yes, I think if you increment an HTML by PHP (a echo of HTML content) that has a Javascript script to change the style of the required elements will solve your problem. And if it’s Ajax authentication, it’s even easier! Just insert more line of Javascript code into the function call! :)

1 answer

2

Let’s see

I believe that there are several ways to solve your problem - carrying another sheet of styles - but I will quote just two ways that came to mind. But first, I need to say that I assume you are using PHP due to the tags you assign to your question on SOPT. And I suppose user authentication is also in PHP.

1st - Case nay is authentication that uses Ajax

I’m going to assume you’re doing something like this about authentication:

  • Page 1 - with login form
  • Page 2 - Authentication (PHP)
  • Page 3 - destination

You could create cookies and make one IF()/ELSE with PHP to check when to upload a CSS file. Something like:

<!-- 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>

This cookie will be set on page 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, "/");
...
?>

NOTE: It will work even if page 1 is different from page 3 (different PHP files). What changes is that both pages will receive code.

2º - If authentication is using Ajax

I’m going to assume you’re doing something like this about authentication:

  • Page 1 - with login form;
  • Page 1 - with authentication (PHP) called via Ajax
  • Page 1 - exit somewhere from the same form page;

In that case, when Ajax is going to play the modified content on the page, you just change the style of the elements you want with Javascript itself, without using a CSS file for that, right after you dump the authentication page into some element of the page (<body>, <div>, etc.).

Alternatively, you can use the first method - the cookie. He’s more 'organized' but more 'time-consuming'. This method here is more 'quick' and more 'dry', besides making no need for two CSS files. But who will choose will be you.

I’m not going to give examples of code because I think Jsfiddle does not support Ajax or Session or Cookie (think). But with that being said, everything should work out there.

I hope I’ve helped! ;)

Browser other questions tagged php html css

You are not signed in. Login or sign up in order to post.