Using CSS to target elements based on User Sessions (Logged In Members vs Visitors)
Previously to show/hide elements when a user is logged in or out, users had to use complicated PHP in specific areas of code.
Now we've made it easier to control by including two classes to the <body> element that will be used depending on the user's logged-in status:
- Logged Out: <body class="general-session">
- Logged In: <body class="user-session session-plan-level-ID#">
With these classes it will be easier to hide simple elements like menu items, buttons, links, images using CSS in the Design Settings rather than having to go into specific sections of the code and use PHP every time.
Example Using the CSS Method
The mini nav menu is showing when user's are logged in and out:
This menu has 2 custom buttons:
- "Logged In Button" - show when logged in and hide when logged out
- "Logged Out Button" - show when logged out, hide when logged in
I want to hide the "Logged In Button" when a user is logged out, so I added a class called "hide-logged-out":
Similarly, I added the class "hide-logged-in" to the "Logged Out Button":
Finally, I added some CSS to the site to apply "display:none;" in the different situations:
body.user-session .hide-logged-in, body.general-session .hide-logged-out {
display: none;
} 
This will apply "display:none;" to any element with the "hide-logged-in" class when the <body> has the class "user-session" (when a user is logged in).
It will also apply "display:none;" to any element with the "hide-logged-out" class when the <body> has the class "general-session" (when a user is logged out).
Before applying the CSS, both buttons display:
After applying the CSS, I only see the "Logged In Button" when logged in:
And only see the "Logged Out Button" when logged out:
