Banner themes (and instructions for customizing them)

Ok, I will take a look tomorrow, now I’m out for dinner and I have only my phone with me.

4 Likes

Reminder… :grinning:

This code is right to do what you want,

.anon .banner-box {
    display: block;
}
.banner-box {
    display: none;
}

Did you do tests in incognito mode to avoid cache problems?

3 Likes

i don`t know why this happening, when am adding the codes its hiding it from both users and guests, yes i went through another clean browser and its the same.

when am adding this code nothing happening at all

.anon .banner-box {
    display: block;
}

but when am adding this with the above is hiding it from everybody

.anon .banner-box {
    display: block;
}

It’s the same code what I see in the posts above…Is your site private or public? Can you share a link?

1 Like

sent by PM…

Same thing occurred to me yesterday after updating discourse. All code modifications/updates that were working properly are still present, but now nothing will display regardless of a user being logged in or logged out. Code has been rechecked multiple times and it’s still occurring.

1 Like

Would I change this background and description information?
Could you please advise it?

Use this new theme component to build your banner

6 Likes

Is it possible to only show this component on the homepage of the forum? (that is, the categories-list page) The banner gets in the way on the other pages of my site, but is only needed on the homepage as a greeting. I dug through the code but couldn’t find anything that I could change to make it page-specific. Thanks!

1 Like

Hello @Dax great banner thanks.
Is the close button fixed. It doesn’t work on my site.

It has been fixed weeks ago from what I know. What version of Discourse are you running?

2 Likes

How do I change the icon using FA? for example, this line of code uses thumbtack and I can see where it says thumbtack. but when I change it to say “comments” as found on font awesome site, it doesn’t work. Am I missing something?

  • Newsletters
  • Announcements
  • help please.

    I’m not at home but probably you need only to add the icon in the svg icon subset site setting.

    5 Likes

    got it!! Discourse is the best! so easy to figure out things as long as you get tips!

    4 Likes

    @Dax Hello Daniela,

    I’m using the expandable banner and I’ve changed the title with a banner (maintaining same ratio) and the next paragraph I used it as a title with a custom font. (https://i.imgur.com/6MVtpW9.jpg)

    I’ve uploaded the custom font to the component and then I went to Common > CSS and added

    @font-face {
        font-family: Custom;
        font-weight: normal;
        font-style: normal;
        src: url($custom-font) format('woff2')
    }
    

    and modified

    .description p {
        margin-top: -15px;
        margin-bottom: 5px;
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
        font-family: Custom;
        font-size: 50px;
        color: $title-color;
    }
    

    It works fine and all but the problem is that when I go to /about page, the site description (Admin - Settings - Required - Site Description) is displayed with that custom font.

    How can I isolate .description p settings to apply only to that section of the banner?

    Add the parent element to your CSS to target just that element, so

    .banner-box .description p {
        margin-top: -15px;
        margin-bottom: 5px;
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
        font-family: Custom;
        font-size: 50px;
        color: $title-color;
    }
    

    should works.

    5 Likes

    Hey, I when trying to change the html/css, I get a notice that changes will be washed away when I update it, should I be worried about that?

    Well, yes. You have to overwrite each change in a separate stylesheet (as a new theme component) and add it to the main theme(s) like you already did for this :arrow_up: theme component.

    That said, this was an old theme component and even if it has not been deprecated (it serves as an example for those who want to build a banner on their own) I suggest you use the Versatile Banner theme component instead of this one. The advantage of Versatile Banner is that you can do many configurations through the theme settings, without touching HTML or CSS.

    3 Likes