Banner themes (and instructions for customizing them)

Use the .anon class to do that

.anon .banner-box {
    display:none;
}
3 Likes

Brilliant! Thank you.

What is the complete code please?

/*Hide the banner on the Categories page and on the Login page*/
.navigation-categories, .docked.static-login {
    .banner-box {
        display: none;
    }
}

To hide it from the Latest/New/Unread change .navigation-categories to .navigation-topics

8 Likes

Oh no! I already type codes to not display banner box on pages but there are a lot of pages. Instead, can I just write a code to display ONLY on the main page (navigation-categories)? Thanks

This should work:

.navigation-categories .banner-box {
    display: block;
}
.banner-box {
    display: none;
}
9 Likes

Great banner @Dax ! Is there any way to make the default status of the banner on initial load as expanded instead of hidden?
Thanks!

If I’m on the URL lepeuplier.ca/top and I expand details, I go to lepeuplier.ca.

And sometimes, nothing happens :

Is there another solution?

Expended banner does not work. When the “Expand details” button is pressed it just refresh the page.

Remove the root symbol “/” from

and leave only <a href="" id=“banner-content_wrap_toggle”>

EDIT: wait, I forgot the problem above, let me see what I can do

No repro on my instance.
My editor does not report any errors to me.
How did you add the codes, via Github or copy-paste?
Have you manually edited the Html?

I add it via github and I do not made any edit.

Ok, try this solution:

<a href="#" onclick="return false" id="banner-content_wrap_toggle"></i>Expand Details</a>

Let me know if it solve the issue on your site too, it works on my test site.

2 Likes

Thanks this is perfect!

1 Like

I fixed a typo at line 13, but the problem is not solved (now I can repro it) but I think I understand the cause of the malfunction.
Can you check what you find on the Common > Body tab?

EDIT: nevermind it is fixed, try to update the theme now

1 Like

Hi,

Its working now. Thank You.

As a suggestion. I think an option to let users to close the banner would be great.

All the banners above use the same elements that are already present in all CSS stylesheets.
You can easily add the closing button (there is already in all other banners):

	<!--ADD A "CLOSE BANNER" BUTTON ON THE TOP RIGHT-->
	<!--To disable this button, comment the <button> </button> tag-->
	
	<button class="close" data-dismiss="alert">
        <i class="fa fa-times d-icon d-icon-times" title="Close."></i>
        </button>

For example:

produces the result:

7 Likes

Would there be a way to use cookie functionality to let that banner box closed when clicking that dismiss button?

Sorry to bother you again @Dax … sometimes, it does anything when I click on Details.
You can’t see it but I clicked 5 times in this video

What have you changed/added on the forum? I see you’ve added the @angus header search, I added it to my test site, but I can not replicate the error.
What does the browser console tell you when you click the Details button?
Have you tried to do it from an anonymous window?