Versatile Banner

theme
#300

Create a theme component as described at Beginners’ guide to using Theme Creator and Theme CLI to start building a Discourse theme, Developer’s guide to Discourse Themes or any of several other topics you can find by searching “theme developer”.

If that’s not helpful then you’ll need to say more about what you are trying to do.

4 Likes
#301

Thanks for the awesome tool.

I’m so close to creating what I need. I don’t know if anyone has any ideas, or if this could be implemented into versatile banner.

This is the banner I created

image
image1486×408 27 KB

However I only want that to appear to people in my Discourse group “trial” I don’t need my paying members to see this banner at all which is why I wrote

If you are already a member you can close this message

However, that’s still a flawed solution.

Another issue is that the “Learn more” button link is a private link for members in “Trial Mode” since paying members don’t have access to the group where that link takes the user.

Also I wouldn’t want trial members to be able to close the banner, (I only want paying members to be able to close it)

Does anyone know of any work arounds I can do to make the banner only appear to members of the trial group?

I’d love to find a solution with versatile banners, since it looks great, but I’m open to other ideas!

Update:

I created a separate post for this here:

Thanks!

2 Likes
#304

I’m using a background image that has transparency so it would still look normal if it didn’t cover the entire width

I’m not very good with CCS, what can I add to a custom CCS to reduce the height of the image? As in scale it down rather than crop it?

I’ve tried

.banner-box .section-header {
    margin-top: 240px;
}

Which works to kind of crop it

Then I tried

.banner-box .background-image {
    max-height: 10px !important;
}

Which did nothing :sweat_smile:

1 Like
#305

You probably want to play around with the background-size and background-position properties. The syntax would be something like this:

.banner-box {
    background-position: center;
    background-size: 100px;
}

Those two properties should allow you to position your background however you like.

3 Likes
#306

Hmm it didn’t seem to work. as in even setting the background size to 10px doesn’t change anything

Edit: Adding !important fixed it

3 Likes
#307

Any tips on changing the style of the button
image

<div class="buttons" id="Start Here">
  <a href="*link*" class="btn btn-icon-text">Welcome to the Forum - Start Here!</a>
</div>

Could it be changed to a ghost-style button or similar? maybe with rounded corners?
image
Like #5

1 Like
#308

You could try something like this:

.banner-box a.btn {
  border-radius: 4px;
  background: none !important;
  border: 2px solid red;
}
2 Likes