Be able to put the banner above the main content but not above the sidebar

Contribute Feature
,

AI-generated summary

Be able to put the banner above the main content but not above the sidebar.

Lilly asked if it’s possible to make the banner sit inside the page container beside the sidebar instead of having the sidebar below it. pfaffman suggested looking at the Plugin outlet locations theme component for possible solutions.

awesomerobot created a PR that added a plugin outlet setting to display the banner above the main content but not above the sidebar. tshenry merged the PR, and users tested it with success.

However, Lilly noticed a gap in the top margin under the header in desktop view when the component is enabled. md-misko also observed this issue in mobile view. To fix this, Lilly provided a temporary CSS solution:

// * compensate for versatile banner top margin off-set *

#main-outlet {
  margin-top: -25px;
}
1

before i try to attack it with a bunch of code, just wonder if it is even possible to force the banner to sit inside the page container beside the sidebar instead of having the sidebar down under it?

3 Likes
2

You can have a look at the Plugin outlet locations theme component to see where you can easily add stuff.

That would help only if you were going to create your own component or fork this one, though.

2 Likes
3

I’ve just opened a PR that will add a plugin outlet setting so it can be displayed like this:

Screenshot 2023-05-18 at 11.13.52 AM
Screenshot 2023-05-18 at 11.13.52 AM1419×688 86.2 KB

@tshenry can you try it out and merge it when you have a chance? DEV: plugin outlet setting for sidebar, prettier by awesomerobot · Pull Request #15 · discourse/discourse-versatile-banner · GitHub

6 Likes
4

thank you so much for this and for all your great work @awesomerobot :slight_smile:

3 Likes
5

Looks great :star_struck: Thanks @awesomerobot!

PR merged!

4 Likes
6

Tested and working smooth!

3 Likes
7

works perfecly! :+1:

3 Likes
8

just a quick note - this component seems to leave a gap in the top margin under the header in desktop view - it is also noticeable above the navigation bar in views where it’s not enabled (ie: if show for members is disabled).

to repro, go to a category or topic list page in a desktop view and compare when the component is enabled or disabled - the top margin expands by about 25px. this is can been seen in views where the banner is not enabled for members too (i’ve added a top-margin corrector to the main-outlet in common css for the time being).

2 Likes
9

I can observe the same in mobile view also. Disabling this TC fixes the gap, so the cause is definitely in here somewhere.

2 Likes
10

FYI, you can add this to the common css for formatting the banner. i use similar for formatting my versatile banner to fix it in the meantime.

// * compensate for versatile banner top margin off-set *

#main-outlet {
  margin-top: -25px;
}
2 Likes
11

4 posts were merged into an existing topic: Versatile Banner