Change CSS with session and misaligned divs

Question

Change CSS with session and misaligned divs

Navigation

#1 by (2 votes)

2

In general, how to change the CSS property of some tag depending on the user's access to the system?

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

Andbelowthesameheader,butwiththedivsofthemisalignedbuttons(disregardtheexaggeratedsizeoftheusername):

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 one 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 HTML and body css

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

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

Headers have the extension html.php .

php html css

asked by anonymous 27.05.2015 / 04:58

1 answer

Wildfly - "Netty 'connector not found in main configuration file" Modal made in bootstrap

score 2 · Answer 1

Let's see

I believe there are several ways to solve your problem - that of loading another style sheet - but I'll cite only two ways that came to mind. But first, I need to say that I suppose you're using PHP because of the TAGs that you assign to your question in SOPT . And I suppose user authentication is also in PHP.

1st - no case is authentication using Ajax

I'll assume you're doing something like authentication:

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

You could create cookies and make a IF() / ELSE with PHP to check when loading 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 configured 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.

2nd - If it is authentication using Ajax

I'll assume you're doing something like authentication:

Page 1 - with login form;
Page 1 - with Ajax authentication (PHP)
Page 1 - Exit somewhere on the same form page;

In this case , when Ajax is to play changed content on the page, you simply change the style of the elements you want with JavaScript, without using a CSS file for it, right after you dump the page of authentication on some page element ( <body> , <div> , etc).

Alternatively , you can use the first method - cookie . It is more 'organized' but more 'time consuming' . This method here is 'fast' and more 'lean' , besides making unnecessary the existence of two CSS files . But who will choose is going to be you.

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

I hope I have helped! ;)