 |
Summary | Replaces the mobile Log In button with a combined Sign Up / Log In button that opens a modal with links |
 |
Repository | https://github.com/Lillinator/discourse-combined-auth-button |
 |
Install Guide | How to install a theme or theme component |
Install this theme component
Overview
This theme component combines the sign up and login buttons into one button with drop down options, for a cleaner header space and improved user experience (especially for mobile users).
In particular, the default Discourse mobile forum view hides the Sign Up button and just shows the existing Log In button; this can be confusing and non-intuitive for new visitors to Discourse forums (anonymous view). Moreover, the default mobile view log in button links to the log in page that in turn, has a link to the sign up page; this creates unnecessary friction for new users on mobile devices.
Default mobile view without component:
This simple Discourse theme component replaces the existing Log In button with a combined button with clearer labeling - the default is Sign Up / Log In. When clicked or tapped, it opens a dropdown menu or mobile modal with links to the sign up or log in pages. There is an admin setting that gives the option to hide the combined button icon for more header space, as well as settings for changing the icons and text string fields to customize all the button labels.
Mobile button and modal with component default settings:
Desktop button and dropdown menu with component default settings:
There are admin settings that allow the combined button icon for more header space in mobile view, as well as for changing all the button icons. You can also customize all the button labels.
Settings & theme translations
| Setting | Description |
|---|---|
enable_on_desktop |
Enable the combined auth button on all viewports sizes |
hide_mobile_login_button_icon |
hides the combined auth button icon in mobile view to save header space |
combined_button_icon |
SVG icon for the main dropdown trigger button |
login_button_icon |
SVG icon for Log In button (& combined auth button if 'Hide mobile login button icon` is disabled) |
signup_button_icon |
SVG icon for the Sign Up button |
button_labels.auth |
combined button text string for theme translations |
button_labels.log_in |
log in button text string for theme translations |
button_labels.sign_up |
sign up button text string for theme translations |
More screenshots
Notes
- This component is compatible with the Left side hamburger menu on mobile but centring the site logo may cause crowding issues in the header.
Check out my other Discourse stuff
