How To Hide the button of logged in users?

I have added a button Join Now using the Custom Header Links theme component.

I want to show this button to the non-logged in user and want to hide it to the logged-in members.

I have tried adding this code:

#top-navbar {
display: none;
}

.anon #top-navbar {
display: block;
}

But it is not working, please help me…

2 Likes

It should work in theory (if you used the right class and id), can you provide a link to your forum?

1 Like

here is the link https://businesscomputingworld.co.uk/

1 Like

I see no #top-navbar in your HTML code, so try replacing this CSS id by .custom-header-links.

1 Like

I have replaced please check now

1 Like

It is working now, can you please help to add + icon as added in the New Topic button if discourse?

The plugin doesn’t have this feature currently, but it is possible to use another plugin and doing a bit of hacky CSS:
Replace your current plugin with this one: Iconified Header Links
Remove existing icons and create a custom one like this:


As for the icon identifier, set “plus”.

Then in your theme customization settings, add this custom CSS (replace “Subscribe” by whatever you want):

.d-header-icons .vdm a {
    width: auto;
    height: 30px;
    margin-top: 6px;
    color: #222;
    background: #e9e9e9;
    padding: 6px 12px;
    box-sizing: border-box;
    svg {
        font-size: 1.1487em;
        width: 1em;
        margin-right: .45em;
        color: #646464;
        transition: .25s;
        margin-top: -1px;
    }
    &:after {
        content: "Subscribe";
        font-size: 1.1487em;
        transition: .25s;
        margin-top: -1px;
    }
    &:hover, &:focus {
        background-color: #919191;
        color: white;
        svg.d-icon {
            color: #e9e9e9;
        }
    }
}

It will look lke this:
image
Hover:
image

2 Likes

Okay, thanks for your help

I have added the CSS and also add those codes to show the button only for logged-in users. But I am not able see Search icon and the menu icon. Seee here Screenshot by Lightshot

And the button is also in the right side of Log in button, I want to add it in left.

I see. Let me check that in a few hours, maybe I can figure out another way.

2 Likes

And I also want the same look as Log in button has, same size text, same color, same font if possible.

1 Like

Go in your theme customization, </head> tab, and paste this:

<script type="text/discourse-plugin" version="0.8.20">
if(api.getCurrentUser() == null) {
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-buttons:before', helper => {
        return helper.h('a.widget-button.btn.btn-primary.btn-small.custom-header-button.btn-text', {
            href:'https://businesscomputingworld.co.uk/t/how-to-post-content-on-this-site/39910',
            title: 'How to post content on this site'
        }, [iconNode('plus'), helper.h('span.d-button-label', 'Subscribe')]);
    });
}
</script>

In your CSS tab, paste this:

.custom-header-button {
    margin-right: 7px;
    padding: 6px 10px;
}

It will look like this:
image

And won’t be shown if the user is logged in.

3 Likes

It is working thanks…

I have added self in the custom links plugin but it is optning the button in the new tab. I don’t know why?

This is what I added: Contribute, Register to create topics, https://businesscomputingworld.co.uk/t/how-to-post-content-on-this-site/39910, self, keep

Can you help me?

1 Like

I want to hide this buttom for a specific group in my discourse forum? Monthly group…

I used this group

body:not(.primary-group-Monthly) .custom-header-links {
display: none;
}

1 Like

Replace this:

title: 'How to post content on this site'

By this:

title: 'How to post content on this site',
target: "_self"

(don’t forget to add the comma after the first line)

I made the button so it is hidden when you’re a logged-in user. So I don’t understand how it would appear if a user is in a group (since it means that the user is logged-in)…

2 Likes

Now I don’t need to hide button from the logged-in users, I want to hide it from Monthly group users?

Can you share the code to hide the button created using Custom Header Links plugin?

1 Like

What is a monthly group? Is it a custom group you created or something managed by Discourse?

2 Likes

It is created by me for my paid members

1 Like

If you want the button visible for everyone but this group’s members, replace:

if(api.getCurrentUser() == null) {
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-buttons:before', helper => {
        return helper.h('a.widget-button.btn.btn-primary.btn-small.custom-header-button.btn-text', {
            href:'https://businesscomputingworld.co.uk/t/how-to-post-content-on-this-site/39910',
            title: 'How to post content on this site'
        }, [iconNode('plus'), helper.h('span.d-button-label', 'Subscribe')]);
    });
}

By:

const user = api.getCurrentUser();
if(user.groups.includes("primary-group-Monthly") == null) {
    const { iconNode } = require("discourse-common/lib/icon-library");
    api.decorateWidget('header-buttons:before', helper => {
        return helper.h('a.widget-button.btn.btn-primary.btn-small.custom-header-button.btn-text', {
            href:'https://businesscomputingworld.co.uk/t/how-to-post-content-on-this-site/39910',
            title: 'How to post content on this site',
            target: "_self"
        }, [
            iconNode('plus'), helper.h('span.d-button-label', 'Subscribe')]
        );
    });
}

Make sure that “primary-group-Montly” is the exact group name.

It seems that no group class is added in <body> so I’m not sure that it’s possible to hide it with CSS only…

2 Likes