Add button in header for logged in users

Development

AI-generated summary

Adding a Custom Header Button for Logged-In Users

Sami_Syed asked for help in adding a custom button to the header for logged-in users only. JammyDodger suggested searching the #theme-component category for existing solutions. Lilly provided links to relevant Meta Discourse topics and shared a code snippet for hiding elements from anonymous users.

Sami_Syed ultimately found a working solution using ChatGPT and shared the code for adding a custom button to the header for logged-in users. The code includes a script for adding the button and CSS for styling it.

Lilly praised Sami_Syed for the solution and shared that they use a similar technique for adding an icon link for mobile users only.

1

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.

2

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

3

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; 
}
4

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:

<script type="text/discourse-plugin" version="0.8.22">
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')
    ]);
});
</script>

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;
}
5

nice work @Sami_Syed.

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