Compatibility with Obsidian v1.0.0 - The banner overlap the new inline title #76

blikoor · 2022-10-14T10:28:56Z

Hi

Please updated the plugin to be compatible with Obsidian v1.0.0, Obsidian now includes a new feature called "inline titles".

It seems like the banner overlap the inline title, because it doesn't appear in the note.

If you remove the front matter for the banner, the inline title will appear in the note.

DryIce1 · 2022-10-15T21:02:03Z

You could try in a snippet something like

.inline-title{
  margin-top: calc(var(--banner-height) - 10rem);
  position: absolute;
  }

But you would want to only use it if has-banner is true.
How would you do that?

TobiZog · 2022-10-17T14:25:39Z

Thanks to DryIce1 I developed a workaround.

1.Create a CSS file like "bugfix-banner.css" in WORKFOLDER/.obsidian/snippets
2.Paste this code:

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

Hint: Remove the Line margin-left: 6rem; if you don't use banner icons.

3.Go to Settings -> Appearance -> CSS Snippets and activate the CSS snippet
4.For every file with a banner, add the following code fragment on top:

---
cssclass: banner-bug
---

With this way, there will only move the inline title on the file, where you defined it. The other files will not be changed.
Have fun :)

blikoor · 2022-10-19T10:44:05Z

Thank you to both DryIce and TobiZog for finding these solutions.

Looking at this solution. I found that the front matter block is squashed up too close to the bottom of the inline title. So I tried to find a solution to fix this problem.

Changing the position to static, cause the div.obsidian-banner-spacer to move down forcing a big gap between the front matter and the inline title.

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

To fix this problem, I tried to change the position of the div.obsidian-banner-spacer to absolute.

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

This also seem to return the div.cm-content to its intended position.
Thank you guys!

DryIce1 · 2022-10-20T12:34:17Z

Despite achieving this function... I am not going to switch to using inline titles (yet), instead I will continue to use one H1 per document which is the title.

Arguments in favour of using inline titles :

minimising redundancy / duplication of the title information within the document
the document outline in the sidebar is arranged more neatly if there is not duplication of the H1 title.

Arguments in favour of using H1 Title in document body :

My primary argument is that aesthetically and functionally, I really like having an [[Up Link]] in the line above the H1 Title which navigates to a parent or related note.
the Heading 1 Filename Sync plugin automatically maintains the titles.

Can anyone suggest a clean solution on how to use an [[Up Link]] with Inline Titles? I guess I could put the link in a call out on the first line, and that might be aesthetically good enough!

DryIce1 · 2022-10-20T20:08:54Z

I wonder if the Auto Class plugin can apply the banner-bug css in the presence of a banner in the YAML?
https://github.com/OfficerHalf/obsidian-auto-class/issues

mayurankv · 2022-10-28T15:25:44Z

Would love this to be fixed!

PJC-64 · 2022-11-08T16:17:13Z

I don't use an inline-title, and everything was still being overlapped, so I modified the bugfix-banner CSS as follows:

.markdown-reading-view .banner-bug .obsidian-banner {
margin-top: calc(var(--banner-height) * -1);
position: absolute;
}

This appears to work correctly for me, and also doesn't break the edit/live preview view, which my first attempt did!

TenviLi · 2022-11-09T08:50:23Z

Yeah, I am also deeply troubled by this problem. 😢

Personally, I suggest that we can directly call the Obsidian API to obtain the markdown file name as the banner title, instead of displaying the banner title by moving <H1> title position through CSS.

This can avoid conflicts with other plug-ins or features.

gsantoro · 2022-11-11T14:57:01Z

I am having even more issues with the banner overlapping the text behind.

I have solved with

.obsidian-banner-wrapper{
    padding-bottom:calc(var(--banner-height) - 15px);
    margin-top:0;
    padding-top:.5em
}

in a banner-fix.css file added to my snippets.

Here it is how it looks now

robertandrews · 2022-11-14T09:36:49Z

With this plugin active, inline headers do not appear...

ironhak · 2022-12-03T07:25:40Z

I am having even more issues with the banner overlapping the text behind.

I have solved with
.obsidian-banner-wrapper{
    padding-bottom:calc(var(--banner-height) - 15px);
    margin-top:0;
    padding-top:.5em
}
in a banner-fix.css file added to my snippets.

Here it is how it looks now

How did you managed to have text in columns like that?

mayurankv · 2022-12-03T12:08:16Z

Columns plugin? presumably at least.

DryIce1 · 2022-12-03T17:14:59Z

Dashboard++ snippet See https://tfthacker.medium.com/dashboard-a-simple-organization-and-navigation-method-for-obsidian-vaults-2b1982d023a0

…

On Sat, 3 Dec 2022, 1:08 pm mayurankv, ***@***.***> wrote: Columns plugin? presumably at least. — Reply to this email directly, view it on GitHub <#76 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOF6WQFLK2AFBX7Y7UTVTJTWLMZ3XANCNFSM6AAAAAARFDLR54> . You are receiving this because you commented.Message ID: ***@***.***>

mcdebugger · 2022-12-16T17:52:07Z

I have the same issue. Obsidian v1.0.3, Banners plugin version 1.3.3, Minimal theme version 6.1.11.

For now fixed it temporarily using slightly modified .obsidian-banner-wrapper fix from above comment.

ironhak · 2022-12-22T20:08:54Z

Will there ever be a proper update?

Praxxian · 2023-01-27T19:45:34Z

Would be cool to have the option of either having the banner behind or above the inline title.

Klemet · 2023-02-07T17:06:05Z

I wasn't super happy with the current fixes, so I tried to tweak them a bit.

The following .css snippet:

Only works on notes with a banner, without having to indicate something like cssclass: banner-bug in the YAML header
Puts the inline title under the banner and the icon, but before the YAML header with a bit of padding
Doesn't change anything on notes without a banner.
Deals with both the editor and the markdown view.

/* Deals with the editor view */
div.cm-editor:has(.has-banner) .inline-title
{
  margin-top: calc(var(--banner-height) + 4rem);
  margin-left: 6rem;
  margin-bottom: 2rem;
  position: static;
}
div.cm-editor:has(.has-banner) div.obsidian-banner-spacer {
	position: absolute;
}
div.cm-editor:has(.has-banner) .obsidian-banner-icon {
	position: absolute;
	top: calc(var(--banner-height) + 10px);
}

/* Deals with the markdown view */
div.markdown-reading-view:has(.obsidian-banner-wrapper) .inline-title
{
  margin-top: calc(var(--banner-height) + 2.9rem);
  margin-bottom: 2rem;
  position: static;
}
div.markdown-reading-view:has(.obsidian-banner-wrapper) div.obsidian-banner-spacer {
	position: absolute;
}
div.markdown-reading-view:has(.obsidian-banner-wrapper) div.obsidian-banner-wrapper {
    margin-top: 0;
}
div.markdown-reading-view:has(.obsidian-banner-wrapper) .obsidian-banner-icon {
	position: absolute;
	top: calc(var(--banner-height) + 10px);
}

EDIT : Apparently, the :has() selector that I use in this snippet is a very recent addition to the Chromium browser used by the Obsidian app. If this doesn't work on your Desktop or on Android, re-install Obsidian or check this post !

EDIT : For version 1.2.8 of Obsidian, you can remove the 5th line with margin-left: 6rem;.

DryIce1 mentioned this issue Oct 20, 2022

Can Auto Class activate a CSS class in the presence of any YAML metadata? (Banners plugin use case). nathonius/obsidian-auto-class#36

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compatibility with Obsidian v1.0.0 - The banner overlap the new inline title #76

Compatibility with Obsidian v1.0.0 - The banner overlap the new inline title #76

blikoor commented Oct 14, 2022

DryIce1 commented Oct 15, 2022 •

edited

TobiZog commented Oct 17, 2022 •

edited

blikoor commented Oct 19, 2022

DryIce1 commented Oct 20, 2022

DryIce1 commented Oct 20, 2022

mayurankv commented Oct 28, 2022

PJC-64 commented Nov 8, 2022

TenviLi commented Nov 9, 2022 •

edited

gsantoro commented Nov 11, 2022 •

edited

robertandrews commented Nov 14, 2022 •

edited

ironhak commented Dec 3, 2022

mayurankv commented Dec 3, 2022

DryIce1 commented Dec 3, 2022 via email

mcdebugger commented Dec 16, 2022 •

edited

ironhak commented Dec 22, 2022

Praxxian commented Jan 27, 2023

Klemet commented Feb 7, 2023 •

edited

Compatibility with Obsidian v1.0.0 - The banner overlap the new inline title #76

Compatibility with Obsidian v1.0.0 - The banner overlap the new inline title #76

Comments

blikoor commented Oct 14, 2022

DryIce1 commented Oct 15, 2022 • edited

TobiZog commented Oct 17, 2022 • edited

blikoor commented Oct 19, 2022

DryIce1 commented Oct 20, 2022

DryIce1 commented Oct 20, 2022

mayurankv commented Oct 28, 2022

PJC-64 commented Nov 8, 2022

TenviLi commented Nov 9, 2022 • edited

gsantoro commented Nov 11, 2022 • edited

robertandrews commented Nov 14, 2022 • edited

ironhak commented Dec 3, 2022

mayurankv commented Dec 3, 2022

DryIce1 commented Dec 3, 2022 via email

mcdebugger commented Dec 16, 2022 • edited

ironhak commented Dec 22, 2022

Praxxian commented Jan 27, 2023

Klemet commented Feb 7, 2023 • edited

DryIce1 commented Oct 15, 2022 •

edited

TobiZog commented Oct 17, 2022 •

edited

TenviLi commented Nov 9, 2022 •

edited

gsantoro commented Nov 11, 2022 •

edited

robertandrews commented Nov 14, 2022 •

edited

mcdebugger commented Dec 16, 2022 •

edited

Klemet commented Feb 7, 2023 •

edited