The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Hiding visibility of custom login box

View previous topic View next topic Go down

Solved Hiding visibility of custom login box

Post by ian2000 on April 22nd 2015, 7:49 pm

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

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by Ange Tuteur on April 22nd 2015, 8:03 pm

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


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>

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by ian2000 on April 23rd 2015, 10:09 pm

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.

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by Ange Tuteur on April 23rd 2015, 10:25 pm

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by ian2000 on April 24th 2015, 7:01 pm

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.

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by Ange Tuteur on April 24th 2015, 8:44 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by ian2000 on April 25th 2015, 10:10 pm

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

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by SLGray on April 25th 2015, 10:41 pm

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


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36747
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by ian2000 on April 25th 2015, 11:40 pm

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

ian2000
Forumember

Posts : 38
Reputation : 3
Language : English

http://onyxlegion.forumotion.net/

Back to top Go down

Solved Re: Hiding visibility of custom login box

Post by SLGray on April 25th 2015, 11:55 pm

You're welcome.

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36747
Reputation : 2449
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum