Jump to content
thomstark

Php Function To Customize Css Based On User Logged In Status

Recommended Posts

thomstark    2
thomstark

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
thomstark    2
thomstark

Oh yeah, the site is bringtheharvest.com. 

Share this post


Link to post
Share on other sites
Simon    247
Simon

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.

  • Like 1

Share this post


Link to post
Share on other sites
thomstark    2
thomstark

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
Simon    247
Simon
#nav .logged-in {padding-left:290px;}

Share this post


Link to post
Share on other sites
thomstark    2
thomstark

Would it be something like this?

 

 

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

Share this post


Link to post
Share on other sites
thomstark    2
thomstark

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×