Banner plugin help?

[ironhak]

Hello everyone, I’m tryong to have a decent result with banner plugin and I also tried using the snippet fix from github but result is not good, look:

And with css looks like:

This is the snippet:

.banner-bug .inline-title {

  margin-top: calc(var(--banner-height) - .5rem);
    margin-bottom: calc(var(--banner-height)  500rem);
  margin-left: 0rem;
  
  position: relative;
}

Is someone able to fix this? Thnk’s.

[xoSidon]

What precisely are you trying to accomplish?

[ironhak]

Hello, I would just like to remove that huge empty space between note inline title and first header

[xoSidon]

Explanation

So, I went ahead and searched for the original snippet in the Github issues and found it here.

.banner-bug .inline-title {
  margin-top: calc(var(--banner-height) - 1.5rem);
  margin-left: 6rem;
  position: absolute;
}

Modifications

In your snippet you added a bottom margin of 500rem and changed the top margin to be .5rem less then the margin top. In addition, you changed the position to relative instead of absolute

The margin sizes are cosmetic preferences; however, the left margin should be set to 6rem if a banner icon is set. The position should be relative, if you would like to enable a theme that offsets the position of the inline title

In addition, the change in the .inline-title position causes the div.obsidian-banner-spacer to be offset resulting in the large space that you see

Solution

Therefore, your CSS snippet is structurally sound. However, I recommend adding;

.banner-icon-bug .inline-title {
	margin-top: calc(var(--banner-height) - .5rem);
	margin-left: 6rem;
	position: relative
}

As a result, you’ll be able to set the cssclass to banner-bug or banner-icon-bug depending on whether you have a banner icon or not [^1]

Finally add this line,

div.obsidian-banner-spacer {
	position: absolute;
}

---

[^1]: If you set the cssclass to banner-icon-bug then ensure you change your plugin settings

[ironhak]

Hello! thanks for your time but the problem persist:

Have you tried to replicate the problem?

[xoSidon]

The final CSS snippet will be,

.banner-bug .inline-title {
	margin-top: calc(var(--banner-height) - .5rem);
	margin-left: 0rem;
	position: relative;
}

.banner-icon-bug .inline-title {
	margin-top: calc(var(--banner-height) - .5rem);
	margin-left: 6rem;
	position: relative
}

div.obsidian-banner-spacer {
	position: absolute;
}

banner-bug.css (311 Bytes)

[xoSidon]

My apologies, in my last “final CSS snippet” reply. I neglected to type out the most important line,

div.obsidian-banner-spacer {
	position: absolute;
}

Also, yes, I did replicate the bug

Before

After

[ironhak]

I don’t understand, am I doing something wrong?

I just downloaded your snippet with no modifications, I also tried to disable all my other snippets. Thank’s

[ironhak]

Maybe I found a solution, I added a line to your script:

.banner-bug .inline-title {
	margin-top: calc(var(--banner-height) - .5rem);
	margin-bottom: calc(var(--banner-height) - 37rem); //ADDED LINE
	margin-left: 0rem;
	position: relative;
}

.banner-icon-bug .inline-title {
	margin-top: calc(var(--banner-height) - .5rem);
	margin-left: 6rem;
	position: relative
}

div.obsidian-banner-spacer {
	position: absolute;
}

Which produces the desired result:

Since I’m no coder I would like to know if this is a suitable solution or not. Thank you again