Add a Logout Button in Header for Discourse Themes

Customization Theme component

AI-generated summary

A theme component titled ‘Add a Logout Button in Header for Discourse Themes’ was introduced by pinder99, offering a logout button in the header with installation instructions and a preview link. Initially, users Don and MihirR reported the component as non-functional, prompting pinder99 to update the code. After updates, MihirR confirmed functionality and suggested improvements: showing either text or icon (not both) and simplifying the install section to just the repo link. Jagster noted UI inconsistencies on iPad and iPhone. Monikas requested an option to hide the logout text, which NateDhaliwal addressed by opening a PR to add that setting. The topic was temporarily unlisted by Falco until code was ready, then relisted after fixes. The component allows CSS customization to hide either the icon or text via provided snippets.

1
:information_source: Summary Add a logout button in header
:eyeglasses: Preview GitHub - pushpinder6805/logout-header · GitHub
:hammer_and_wrench: Repository REPOSITORY_LINK
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

A button in header to logout users

Screenshots…
image
image

Detailed description…

To remove logo

.logout svg{
    display: none;
}

To remove text

.logout span {
display:none;
}
2

Hello :waving_hand: it looks like this component is empty and doesn’t do anything in this state…

2 Likes
3

+1, I can reproduce this error.

1 Like
4

Please wait updating code

1 Like
6

I have unlisted this topic until code is provided.

3 Likes
7

i have added the code , please list the topic

8

please check

10

Installed and checked; it works perfectly fine. Just two suggestions:

  1. It would be great to have either the logout text or the logout icon, but not both.
  2. In the Install this theme component section, it would be better to include only the repository link for easy installation.

I’ve attached the snippet below for your reference.

Screenshot 2024-12-29 015409
Screenshot 2024-12-29 015409924×466 29.3 KB

11

There could be some need to tune up a bit.

iPad:

The image is a screenshot displaying the status bar of a smartphone, showing time, battery life, Wi-Fi status, and a minimally displayed search bar. (Captioned by AI)
The image is a screenshot displaying the status bar of a smartphone, showing time, battery life, Wi-Fi status, and a minimally displayed search bar. (Captioned by AI)2360×298 71.6 KB

iPhone:

The image shows a mobile device with a time of 23:29, battery level at 78%, and several options for different sections such as starting, sites, and a message bubble icon for meta/katiska. (Captioned by AI)
The image shows a mobile device with a time of 23:29, battery level at 78%, and several options for different sections such as starting, sites, and a message bubble icon for meta/katiska. (Captioned by AI)1290×448 91.7 KB

12

Could you add an option to cancel the text? Thank you.

The image shows a navigation bar with various icons and text in Chinese, including options for posting, chat, search, and an option to log out. There is also a humorous reminder about smiling at the screen for 3 seconds to unfreeze a webpage. (Captioned by AI)
The image shows a navigation bar with various icons and text in Chinese, including options for posting, chat, search, and an option to log out. There is also a humorous reminder about smiling at the screen for 3 seconds to unfreeze a webpage. (Captioned by AI)1020×254 60.5 KB

13

@Monikas I’ve opened a PR to add a setting to do just that:
https://github.com/pushpinder6805/logout-header/pull/1

1 Like