Banner Topic on home page and only for anonymous users


(Jay Abie) #1

Hello friends,

How i can make the banner topic show up on the home page and only for anonymous users, and when the user moves to a topic the banner disappear ?

Thanks in advance.


Add a Sign up button (memberful purchase link) in header and disappear when log in
(Jay Abie) #2

Any help on this please !!


(Kris) #3

Does the Banner Topic accomplish what you’re looking for?

The banner shows for all users — but once a logged in user dismisses it then it’s gone forever; anon users can dismiss it (but the dismissed state is only saved locally on their device).

Additionally, you can target anon users using CSS (we add the class .anon to the HTML tag).

There are also some CSS classes to target either the topic-list pages (body.navigation-topics) or category pages (body.navigation-categories).


(Jay Abie) #4

do i need to add only this to HTML under nav bar location ?


(Kris) #5

So for example, in your customizations if you add HTML content (Admin > Customize > Themes > Edit HTML/CSS > Header/After Header/Footer):

<div class="anon-content">
    <p>This is test content</p>
</div>

You can then add this to your CSS so that content only shows for anon users:

.anon-content { 
    display: none; 
}

.anon .anon-content {
    display: block;
}

If you wanted to go further and only show that content for anon users on the category page, you could use this CSS:

.anon-content { 
    display: none; 
}

.anon .navigation-categories .anon-content {
    display: block;
}

How to display a banner for visitors only?
(Jay Abie) #6

yes i only want to show banner topic on the homepage and for non registered users only.


(Kris) #8

If you’re using a banner post and you want it to only show for anon users you’d add this to your CSS:

#banner {
    display: none;
}

.anon #banner {
    display: block;
}

(Jay Abie) #10

yes worked fine, sorry for the last post, i closed the browser and re-open it… its working now.

Thank you so much.


(Jay Abie) #11

Dear Sir,

One more thing if you dont mind, the banner is showing on the mobile view, how i can hide it from mobile and keep it on desktop only?

Thanks in advance.


(Kris) #12

after the other CSS you added, add this:

.mobile-view #banner {
    display: none;
}

(Jay Abie) #13

Many thinks sir, thanks for your time, worked like charm.