Hiding visibility of custom login box

Greetings. I am making a custom login box that fits my style and has cool buttons and everything.

However, I can't get the form to disappear when the user is logged in already. I thought it would be as simple as having a  little javascript that would change the visibility of it, but that did not work. I can't even figure out how to simply make it invisible in the first place (I tried using visibility="hidden", and display="none" but neither seem to work....)

Code:

<form action="{S_LOGIN_ACTION}" method="post" name="form_login">                                 
<label><span class="genmed"></span> <input class="post" type="text" size="10" name="username" /></label> &nbsp;
<label><span class="genmed"></span> <input class="post" type="password" size="10" name="password" /></label> &nbsp;
<label><span class="gensmall"></span> <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label> &nbsp;
<input class="mainoption" type="submit" name="login" value=""  />
<a class="signup-btn" title="Register" href="/register"></a>
</form>

Here's what it looks like now

And Here's my forum address:
Onyx Legion

Hello @ian2000,

If you want the content in your template only viewable to guests, it's recommended to put your HTML between the following tags.

Code:

<!-- BEGIN switch_user_logged_out -->

<!-- END switch_user_logged_out -->

You can swap out for in to show content only for logged in users.


I think you're thinking of the CSS properties for hiding elements. Those should be applied using the style attribute. For example :

Code:

<p style="display:none;">You can't see me !</p>

Thank you for the helpful response! I tried putting it in the tags but I forgot to mention that it was in a different page so that didn't work. I ended up writing some javascript that uses the style:none idea you gave me.

Code:

<script type="text/javascript">
function logBox() {
var theirName = document.getElementById('i_icon_mini_logout').getAttribute('alt');
var nameArray2 = theirName.split(" ");
var currentProfile2 = nameArray2[1];

if (currentProfile2 == "out") {

document.getElementById("guestForm_User").style.display = 'none';
document.getElementById("guestForm_Pass").style.display = 'none';

document.getElementById("guestForm_Sub").style.display = 'none';
document.getElementById("guestForm_Reg").style.display = 'none';
document.getElementById("guestForm_Out").style.display = 'inline';


} else {
document.getElementById("guestForm_Out").style.display = 'none';
}


}
logBox();
</script>

Thank you again for that. Solved.

Yes, those tags can only be used in the templates. On an HTML page, if you're using your forum header, you can check the log in state via the _userdata object. For example :

Code:

if (_userdata.session_logged_in) {
  console.log('logged in');
} else {
  console.log('logged out');
}

If you're not using your header, you can usually do a check via AJAX. Like this :
( provided you're using jQuery, otherwise you can use vanilla AJAX )

Code:

$.get('/', function(d) {
  var logged_in = $('#logout', d)[0];
 
  if (logged_in) {
    console.log('logged in');
  } else {
    console.log('logged out')
  }
});

Once you know the state, you can manipulate the document the way you want, mostly by hiding or showing elements..

Great! This helps me so much.


I have one more minor CSS question: I want to change my custom buttons so that they change when the user hovers over them. 



While researching, I found that I should be able to do something like

Code:

div.post-options profile_left:hover {
 opacity: 0.5;
}

But for some reason I can't get this to work when I put it in my CSS.

Any thoughts?




Thank you again.

In CSS, if you want to change the display of an element on hover we add the :hover pseudo class to our elements. For example, if I wanted to change the opacity of images on hover my rule would look like this :

Code:

img:hover { opacity:0.3 }

I'm assuming the options are images, so you could do :

Code:

div.post-options img:hover {
  opacity:0.5
}

profile_left is a class right ? I noticed that it's missing a decimal at the beginning.

This was very helpful. 

I have one more small question. I just noticed that my user info looks like this:


The user's posts are stuck on the same line as the user's birthday, and it kinda looks cluttered in general. Can I actually just take out the birthday line? I dont really need a birthday line and an age line... they're essentially the same thing.

Best,
Ian

AP > Users & Usergroups > Users > Profile
Check to see what the last option is set to in the birthday and post fields.

Wonderful! This was very helpful. Thank you. I think this topic is more than solved haha!

You're welcome.

Topic solved and archived