Archived

This topic is now archived and is closed to further replies.

  • 0

Php Function To Customize Css Based On User Logged In Status

Question

Posted · Report post

It's pretty simple; I'm just too much of novice to quite make it work. 

 

If a user is logged in, I want the nav pushed further to the right. If they are not logged in, I want the nav pushed not quite as far to the right. Why I want this is complicated, and tiring. It has to do with my login modal, and hooking it to the nav (via the branding and absolute positioning), and resizing the nav section so it wouldn't block the modal's link, etc. etc., and with the fact that when the user is logged in the login button goes away, so I want the nav pushed further to end where it did when the (fake) login nav item was there. Anyway, here's the crappy version of what I want to put in functions.php:

 

 

<?php if ( is_user_logged_in() ) : ?>
<style type="text/css">
#nav {padding-left:290px;}
</style>
<?php if ( !is_user_logged_in() ) : ?>
<style type="text/css">
#nav {padding-left:240px;}
</style>
<?php endif; ?>
 
 
Of course, it would be in functions, so it wouldn't need the php opener at the start. It might need some sort of initial "function" command, the likes of which is beyond me. Point is, I haven't been able to get it to work, after several iterations. 
 
And the reason I'm doing padding and not margin is because I have the nav centered via exact width+margin auto, so zooming doesn't affect it's placement. 
 
Thanks for any help.

Share this post


Link to post
Share on other sites

9 answers to this question

Posted · Report post

You dont need any php, WordPress adds a body tag of 'logged-in' if a user is logged in.

 

View the source of your page and look for the <body> tag, WordPress adds a lot of useful classes here for just this kind of thing.

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Oh yeah, the site is bringtheharvest.com. 

Share this post


Link to post
Share on other sites

Posted · Report post

Cool. I see the logged in class in the body tag. Now how would I go about putting that to use to control my variable? Pretend I have no idea what I'm doing. (You won't have to pretend very hard.)

Share this post


Link to post
Share on other sites

Posted · Report post

#nav .logged-in {padding-left:290px;}

Share this post


Link to post
Share on other sites

Posted · Report post

Would it be something like this?

 

 

body.logged-in nav { padding-left:290px; }

Share this post


Link to post
Share on other sites

Posted · Report post

Ah, I was way off! :) Thanks much!

Share this post


Link to post
Share on other sites

Posted · Report post

Hmmm, that didn't quite work.

Share this post


Link to post
Share on other sites

Posted · Report post

I had to play around with the measurements, but this is the one that ended up working how I needed it to:

 

body.logged-in nav { margin-left:35px; padding-left:0px; width:665px;}

 

Thanks tonnes, Simon!

Share this post


Link to post
Share on other sites

Posted · Report post

Your welcome :)

Share this post


Link to post
Share on other sites