Hiding margin-top after login

Question

I have a following line of codes:

<div align="center" style="margin-bottom: 5px; margin-top: 35px;">
<!-- AD CODE HERE -->
</div>

Please follow my site: http://www.electronicsforum.in/

When it is a guest user it shows a pop-up message 'Please Login/register'. I have no issue with this.
But after login I want to hide the margin-top of the div.

Answer 1

This code below fixes the issue at www.electronicsforum.in

global $context;
if ($context['user']['is_logged']) {
echo'<div align="center" style="margin-bottom:5px; margin-top: 5px;"> ---Ad Code Here 1-- </div>';
}
else
{
echo'<div align="center" style="margin-bottom: 5px; margin-top: 35px;"> ---Ad Code Here else-- </div>';
}

Answer 2

What's Going On

Currently the HTML template you are using is placing the div containing the ads before the div containing the message telling people to register/login. Since the register/login div needs to be on top, you are absolutely positioning it. This forces you to use a margin-top on the ads div.

You have two options. You can use whatever backend language this is built with to run a check on whether the user is logged in, and add a class called loggedin to the ads div which would set margin-top to 0.

Second option is to just flip the output of the HTML, and then remove the position:absolute from the register/login div. Since you don't say anything about how your backend is built, I'll show you how to do the second option.

Code

Current HTML

<div align="center" style="margin-bottom: 5px; margin-top: 35px;"></div>

<div id="topbar" onclick="document.getElementById('topbar').style.visibility='hidden'; window.location=smf_scripturl + '?action=register';"></div>

<div id="wrapper" style="width: 90%"></div>

Current CSS:

#topbar {
    background: #ffffe0;
    border-bottom: solid 1px #F0C36D;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: block;
    clear: both;
    float: left;
    left: 0px;
    padding: .45em .3em .45em 2em;
    position: absolute;
    top: 0px;
    width: 100%;
}

---

New HTML (We flip the top two divs and remove margin-top:35px;)

<div id="topbar" onclick="document.getElementById('topbar').style.visibility='hidden'; window.location=smf_scripturl + '?action=register';"></div>

<div align="center" style="margin-bottom: 5px;"></div>

<div id="wrapper" style="width: 90%"></div>

New CSS (Remove the position:absolute;)

#topbar {
    background: #ffffe0;
    border-bottom: solid 1px #F0C36D;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: block;
    clear: both;
    padding: .45em .3em .45em 2em;
    width: 100%;
}

Edit

To respond to comment: You'd need a conditional check. Example, in WordPress, I'd write:

<div align="center" style="margin-bottom: 5px; <?php if (is_user_logged_in()) {echo 'margin-top:35px;'} ?>"></div>

Answer 3

this is not wordpress, its a forum software called Simple machines Forum (SMF) .. and this code below, is just for an example of conditions used for logged in users in SMF.

// If the user is logged in, display stuff like their name, new messages, etc.
   if ($context['user']['is_logged'])
   {
      if (!empty($context['user']['avatar']))
         echo '
            <p class="avatar">', $context['user']['avatar']['image'], '</p>';
      echo '
            <ul class="reset">
               <li class="greeting">', $txt['hello_member_ndt'], ' <span>', $context['user']['name'], '</span></li>
               <li><a href="', $scripturl, '?action=unread">', $txt['unread_since_visit'], '</a></li>
               <li><a href="', $scripturl, '?action=unreadreplies">', $txt['show_unread_replies'], '</a></li>';

      // Is the forum in maintenance mode?
      if ($context['in_maintenance'] && $context['user']['is_admin'])
         echo '
               <li class="notice">', $txt['maintain_mode_on'], '</li>';

also, for guests, the same code will start with

 if ($context['user']['is_guest'])
       {
         echo '

This might help you guys, to find a solution.

Answer 4

Add in your Header:

    <?php if ( is_user_logged_in() ) { ?>
    <style type="text/css">
        #topbar{
            display:none;
        }
        body div:first-child {
            margin-top:0!important;
        }
    </style>
   <?php }?>