Banner Topic on home page and only for anonymous users

support
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.

2

Any help on this please !!

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).

4 Likes
4

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

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;
}
8 Likes
6

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

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;
}
8 Likes
10

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

Thank you so much.

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.

12

after the other CSS you added, add this:

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

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