Banners plugin that works with obsidian 1.4.0. and above

Plugins ideas
1

The Banners plugin is great. But it not no longer works with obsidian 1.4.0
The plugin is really great with a lot of functionality (way more than the snippets I have tried for implementing banners). But the plugin seems to be abandoned.
Hopefully someone comes with a new plugin

1 Like
3

If your ok to install a new theme then go ahead and try out my theme, it’s called Dune. You can read more about banners in its online documentation here

1 Like
4

Thanks. Will give it a try.

5

I made a quick work-around with a small custom snippet:

.obsidian-banner-wrapper {
  margin-top: 0px;
  padding-top: 0px;
}

.mod-header:has(+ .obsidian-banner-wrapper) {
  margin-top: var(--banner-height);
}
8 Likes
6

Hi, thanks a lot for your answer.
I just have some questions, since I am not an expert in css and so on
First I suposse I have to add this to My snippets folder and activate it inside obsidian.
After that:

  1. Do I have to name the snippet in a certaln way? Or can it be whaterever I want?
  2. Do have to add the name of said css snippet to the cssclases frontmatter for it to work?

Thanks for your time.

7

Hi, I manage to use the snippet and it works great. I really appreciate it.
One last thing, I know this may be asking for a lot, but the banners plugins also allow you to insert an emoji in the banner, but when I select an emoji, it is offset, as you can see from the following picture…

banners
banners1328×666 33.1 KB

Do you know if there is a way to fix this issue?

8

Thank you very much for the solution.
I tried this css with Banners plugin and got in Preview mode (on a dashboard) new Properties view is under the banner.

Screenshot 2023-09-02 at 13.24.55
Screenshot 2023-09-02 at 13.24.551920×1218 116 KB

May be you or someone else konws the way to remove it? The setting: Settings => Editor tab => Display => Properties in document is set to Source mode. I need it in Live Preview for other notes.

9

Now in Obsidian v.1.4.14 they made these properties foldable, so a dashboard with a banner now looks more or less affordable with the css snippet.

Screenshot 2023-10-01 at 22.15.41
Screenshot 2023-10-01 at 22.15.411648×960 92.1 KB

But I am the one who does not like the properties anyway. Everything worked good with a simple YAMEL header. Now the properties make it ugly and add another headache to a working vault.

1 Like
10

Hello. The banner have a beta for Obsidian 1.4.* : Release 2.0.3-beta - had an exam week · noatpad/obsidian-banners · GitHub

2 Likes
11

that works great, thank you!

12

Snippet that works both on Desktop and Android (not tested on iOS)

.mod-header:has(+ .obsidian-banner-wrapper) {
  margin-top: var(--banner-height);
  margin-bottom: calc(-1 * var(--banner-height));
}
13

Tried on macOS and iOS. This snippet fixes the awkward gap.
The banner is still not showing up in Live Preview mode though.