Add Member Logged In/Out Class Introduction
In Flarum, optimizing user engagement is essential for building a vibrant community. A powerful approach to achieve this is by using conditional visibility for different elements based on users' login status. This guide presents a method for assigning global "logged-in" and "logged-out" classes to the <body> element, allowing forum administrators to control the visibility of various elements for both logged-in users and guests.
Why Is It Needed?
User Engagement: Tailoring content and features for logged-in and logged-out users enhances interaction within the community.
Visual Clarity: By managing element visibility based on login status, the interface remains organized and user-friendly.
Customizability: This method offers flexibility for forum administrators to implement design changes without altering the core Flarum codebase.
Existing Plugins: There are similar functionalities available in the Flarum community, such as Member Add Logged-in Class to Body Tag, which is no longer supported. These plugins previously allowed users to add a class to the body tag based on their login status, enabling administrators to customize user experiences visually. However, this particular plugin is outdated, making our approach a more reliable option.
Functions
Global Class Assignment: The script checks the user's login status and assigns either "logged-in" or "logged-out" classes to the <body> element.
Conditional Display: Using CSS, it allows you to manage the visibility of any element based on the assigned class.
Usage Example
The following code snippets can be used to implement this functionality.
JavaScript Code
Add the JavaScript code to the 'Custom Footer' section on the Admin Panel in Appearance.
<script>
document.addEventListener("DOMContentLoaded", function() {
setTimeout(function() {
const isLoggedIn = app.session.user !== null;
if (!isLoggedIn) {
document.body.classList.add('logged-out');
} else {
document.body.classList.add('logged-in');
}
}, 1); // 1 ms
});
</script>
CSS Code
Add the CSS code to the 'Custom CSS' section on the admin panel in the Appearance.
header.Hero.WelcomeHero {display: none;} /* Hide default */
body.logged-out header.Hero.WelcomeHero {display: block;} /* Show visitors */
/* Example: Control other elements with CSS */
body.logged-in .some-element {display: none;} /* Hide members */
body.logged-out .some-element {display: block;} /* Show visitors */
How It Works
JavaScript: When the page loads, the DOMContentLoaded event is triggered. After the content is fully loaded, it waits for 1 millisecond to check the user's login status. If the user is not logged in, it adds the logged-out class; if logged in, it adds the logged-in class to the body.
CSS: You can control the visibility of any element based on the user's login status by using these classes. For instance, when the logged-in class is present, specific content can be hidden, or with the logged-out class, other content can be displayed.
Conclusion
This method is an effective way to enhance the user experience on your Flarum forum. By managing content based on whether users are logged in or not, you can provide tailored experiences for both visitors and members. Feel free to add this code to your forum and create a structure that meets the needs of both users and administrators.
Feedback
Don't hesitate to implement this code snippet in your Flarum forum and share your experiences or improvements! Your feedback and enhancements will contribute to our community's knowledge base.
I'm looking forward to your suggestions and thoughts on the code. Also, I don't know how to create an extension. If someone is able to turn this into an extension, I'm sure there will be people interested in using it. Your feedback is very valuable to me!
Lastly, if you need a footer for your Flarum forum, you can access the code I shared, which is fully compatible and responsive without the need for any extensions, from this topic: https://discuss.flarum.org/d/36061-responsive-footer-for-flarum-fully-compatible
