🚀 CSS that fixes beta to for on Obsidian 1.5

[simonfossom]

@noatpad I don't quite understand how your code is organized. I never worked in Svelte, but this fixes the problem for me:

/* fixes bugs */
.is-mobile .obsidian-banner-wrapper.with-banner:not(.in-internal-embed) {
    width: 100%;
    height: calc(var(--banners-mobile-height) - 80px) !important;
    margin: 0;
}

.obsidian-banner-wrapper.with-banner:not(.in-internal-embed) {
    width: 100%;
    height: calc(var(--banners-height) - 80px) !important;
}

/* fix top in minimal theme */
.view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller {
    padding: 0; 
}

/* suggestion for styling */
.inline-title {
    position: relative;
    z-index: 2;
}

[gvzhang]

this code work for me in 2.0.5-beta

[Net-Slayer]

Unfortunately this doesn't work on mine, also using the minimal theme and banners 2.0.5-beta

My content is a H2 heading with the date, followed by a H4 heading with navigational backlinks. Plugin settings at default except for banner height at 200.

[simonfossom]

Unfortunately this doesn't work on mine, also using the minimal theme and banners 2.0.5-beta

My content is a H2 heading with the date, followed by a H4 heading with navigational backlinks. Plugin settings at default except for banner height at 200.

I am also using minimal theme. Why doesn't it work? 🤔

You can adjust this in my snippet. You can see that I've pushed by - 80px. You can add or subtract to that number to adjust where the page content starts.

[Net-Slayer]

Thank you I'm making some tweaks now ^^

For reference before Obsidian's update and the new banner beta my banners would look like this:

I'm glad your fix works for some people's setups but seems to break in my case. I'm gonna take a look at what tweaks I can add that hopefully will help others go back to what it was.

[Net-Slayer]

Been doing some digging for my issue:

Minimal theme is the culprit:

By default the banner wrapper div has the following css:

.obsidian-banner-wrapper.with-banner:not(.in-internal-embed) {
    width: calc(100% + 2 * var(--file-margins));
    margin: calc(-1 * var(--file-margins));
    margin-bottom: var(--file-margins);

The default theme sets the following file margins:

...
--file-margins: 48px
...

However, the Minimal theme breaks this entirely by setting the following: (https://github.com/kepano/obsidian-minimal)

/* Minimal/theme.css */
...
--file-margins: var(--size-4-2) var(--size-4-12)
...

(This just means use "--size-4-2" 8px for vertical and "--size-4-12" for horizontal)

This breaks many banner calculations as it's not a single value anymore, resulting in a short width banner and an out of place icon/header title as calculations involving --file-margins resolve to zero:

My solution is the following css snippet that just overrides the banner plugins's use of --file-margins with the appropriate sizes from the minimal theme.

/* Css fix for Obsidian-banners[2.0.5-beta] appearance when using Minimal theme[7.4.6]
See discussion of issue: https://github.com/noatpad/obsidian-banners/issues/146
~ NetSlayerUK
*/

body.minimal-theme .obsidian-banner-wrapper.with-banner:not(.in-internal-embed) {
    width: calc(100% + 2 * var(--size-4-12)); 
    margin: calc(-1 * var(--size-4-2)) calc(-1 * var(--size-4-12));
    margin-bottom: var(--size-4-2);
}

body.minimal-theme .banner-header.with-banner {
    padding: 0 var(--size-4-12);
}

Which puts things back in order for minimal theme users ^^

[simonfossom]

nice one!

BTW there's still a problem with top in focus mode. it needs stg like this or some other fix

.view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller {
    padding: 0; 
}

[DudeThatsErin]

These seem to only work in reading view. Anyone know how to fix minimal for live preview mode? I only use LP mode.

[simonfossom]

I am using also only live preview. It works fine for me. Check it is in conflict with your theme or some plugin.

[DudeThatsErin]

Works now. Not sure what the difference was.

Just has rounded borders on the top and bottom via mobile.

Also, my margin's are messed up. I can't close or open headings on mobile and on the desktop everything is hugging the sides. The width settings is default (88) in minimal theme settings.

Current snippet:

body.minimal-theme .obsidian-banner-wrapper.with-banner:not(.in-internal-embed) {
    width: calc(100% + 2 * var(--size-4-12)); 
    margin: calc(-1 * var(--size-4-2)) calc(-1 * var(--size-4-12));
    margin-bottom: var(--size-4-2);
}

body.minimal-theme .banner-header.with-banner {
    padding: 0 var(--size-4-12);
}

EDIT: This new CSS Snippet fixed it. BUT I still have rounded borders on mobile.

[albertoloscerritos]

Thanks. It would be great if somebody could maintain this project into a stable release. Such a great plugin :(

[Ilaner2000]

Been doing some digging for my issue:

Minimal theme is the culprit:

By default the banner wrapper div has the following css:

.obsidian-banner-wrapper.with-banner:not(.in-internal-embed) {
    width: calc(100% + 2 * var(--file-margins));
    margin: calc(-1 * var(--file-margins));
    margin-bottom: var(--file-margins);

The default theme sets the following file margins:

...
--file-margins: 48px
...

However, the Minimal theme breaks this entirely by setting the following: (https://github.com/kepano/obsidian-minimal)

/* Minimal/theme.css */
...
--file-margins: var(--size-4-2) var(--size-4-12)
...

(This just means use "--size-4-2" 8px for vertical and "--size-4-12" for horizontal)

This breaks many banner calculations as it's not a single value anymore, resulting in a short width banner and an out of place icon/header title as calculations involving --file-margins resolve to zero:

My solution is the following css snippet that just overrides the banner plugins's use of --file-margins with the appropriate sizes from the minimal theme.

/* Css fix for Obsidian-banners[2.0.5-beta] appearance when using Minimal theme[7.4.6]
See discussion of issue: https://github.com/noatpad/obsidian-banners/issues/146
~ NetSlayerUK
*/

body.minimal-theme .obsidian-banner-wrapper.with-banner:not(.in-internal-embed) {
  width: calc(100% + 2 * var(--size-4-12)); 
  margin: calc(-1 * var(--size-4-2)) calc(-1 * var(--size-4-12));
  margin-bottom: var(--size-4-2);
}

body.minimal-theme .banner-header.with-banner {
    padding: 0 var(--size-4-12);
}

Which puts things back in order for minimal theme users ^^

It seems break again after the recent Minimal theme update