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.
Have you had a search of the theme-component category to see if something already exists that would fit your needs?
1 Like
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;
}
2 Likes
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;
}
1 Like
nice work @Sami_Syed.
I use the header Icon link TC above on my forum for one icon for only mobile users.
1 Like