How can I add a button to the header for logged-in users only. I would need to add custom text and link for this button.

[תמונה] Custom Header Links (icons) Theme component discourse2 Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link https://github.com/discourse/discourse-icon-header-links open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Screenshots Desktop [Capture3] Mobile [Capture] Settings This component includes a … [תמונה] Custom Header Links Theme component discourse2 Summary Custom Header Links allows you to easily add custom text-based links to the header. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link GitHub - discourse/discourse-custom-header-links · GitHub open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Desktop [Capture] Mobile [Capture] (due to very limited space, adding more than one link on mo… Displaying for Logged-In Users Only You can target anonymous users to hide elements from them. Like this for example, which hides the tags in the navigation sidebar menu from users who are not logged in. You can use a similar code to hide any element in the header from anonymous users. .anon .sidebar-section-wrapper.sidebar-section[data-section-name="tags"] { display: none; }

this is a great solution, I really only wanted one button on top. What I ended up doing was just asking ChatGPT how to add it manually with code and it gave me a working solution… Header: api.decorateWidget('header-buttons:after', helper => { let currentUser = api.getCurrentUser(); if (!currentUser) return; return helper.h('li.custom-login-button-li', [ helper.h('a.custom-login-button', { href: 'ENTER URL HERE', target: '_blank'}, 'Button') ]); }); CSS .custom-login-button { display: inline-block; margin: 0; padding: 0.5em 1em; text-align: center; vertical-align: middle; border: 1px solid transparent; font-weight: bold; line-height: 1.5; border-radius: 3px; color: #fff !important; background-color: #0084ff; border-color: #0076e6; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .custom-login-button:hover { background-color: #0076e6; border-color: #0065d0; } .custom-login-button-li { list-style-type: none; }

nice work @Sami_Syed. I use the header Icon link TC above on my forum for one icon for only mobile users.

הוסף כפתור בראש להודעות של משתמשים מחוברים

מפתח

JammyDodger 26 באוגוסט,‏ 2023,‏ 5:32am 2

Have you had a search of the Customization > Theme component category to see if something already exists that would fit your needs?

נושא		תגובות	צפיות
Add a link to user profile in the navigation Product Support	7	748	28 בפברואר,‏ 2024
Custom Header Links Theme component official , custom-header-links	69	54931	6 ביוני,‏ 2026
Adding a header link for Guests Only Product Support	4	280	5 בספטמבר,‏ 2025
How can I add a button to the header? Product Support	4	1535	31 באוקטובר,‏ 2019
Link on Top header to Go to Home page of main site Product Support	1	1424	25 בפברואר,‏ 2020

הוסף כפתור בראש להודעות של משתמשים מחוברים

נושאים קשורים