How to show that banner with a dismiss (X) button to non logged in users only?

Support
1

Is there any way to show that banner with a dismiss (X) button to non logged in users only.
The top banner is shown always, I would like to make it visible only if you are not logged in.

2 Likes
2

It is – you can do it with cookies.

Here is an example where I have one banner that displays for members and a different one for non-members. Both are dismissible and appear just below the top nav.

Go into your customisable CSS/HTML

Put this in the Common </head> section (you might want to play around with the timing etc)

<script>
$(document).ready(function(event) {
    if (Discourse.User.current() && !checkCookie("hideMemberBanner")) {
        $("#banner-container").show();
        $("#uxm-members-banner").show();
        $("#uxm-new-users-banner").hide();
    }
    else if (!Discourse.User.current() && !checkCookie("hideNewUserBanner")) {
        $("#banner-container").show();
        $("#uxm-members-banner").hide();
        $("#uxm-new-users-banner").show();
    }
})

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}

function checkCookie(cname) {
    return cval = getCookie(cname) || false;
}


function hideBanner() {
    if (Discourse.User.current() !== null){
        var cname = "hideMemberBanner";
        var cdays = 20;
    }
    else {
        var cname = "hideNewUserBanner";
        var cdays = 7;
    }
    $("#banner-container").hide();
    setCookie(cname, true, cdays);
}
</script>

Put this into the After Header section

  <div id="banner-container" class="show" scrolling="no">
    <button id="banner-close-button" onclick="hideBanner();"><i class="fa fa-times" aria-hidden="true"></i></button>
    <a id="uxm-members-banner" href="URL here">
        <img src="image URL here" alt="" onclick="toggle('banner-close-button', 'banner-container', 'banner');"/>
    </a>
    <a id="uxm-new-users-banner" href="URL here">
        <img src="image URL here" alt="" onclick="toggle('banner-close-button', 'banner-container', 'banner');"/>
    </a>
</div>

Put this in the CSS section

#banner-container img {
   width: 100%;
   height: auto;
   padding-bottom: 20px;
}
#banner-close-button {
    float: right;
    top: 5px;
    right: 5px;
    position: relative;
    margin-bottom: -30px;
    border-top: none;
    background: transparent;
    border: none;
    font-size: 10pt;
    color: lightgray;
}
#uxm-members-banner {
    display:none;
}

#uxm-new-users-banner {
    display:none;
}

#banner-container{
    display:none;
}
11 Likes
3

Thank you, that worked :slight_smile:

1 Like
4

I am looking for the same function.
Is the banner you wanted to modify like the following #2?

banner
banner1641×766 335 KB

5

How the 3rd advertisement implemented?

6

This topic was automatically closed after 2522 days. New replies are no longer allowed.