🚀 CSS that fixes beta to for on Obsidian 1.5

Question

🚀 CSS that fixes beta to for on Obsidian 1.5

simonfossom opened this issue 9 months ago · 11 comments

@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;
}

Answer 1 · 2023-12-31T16:45:24.000Z

this code work for me in 2.0.5-beta

Answer 2 · 2024-01-01T21:36:17.000Z

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.

Answer 3 · 2024-01-02T11:19:29.000Z

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.

Answer 4 · 2024-01-02T23:27:27.000Z

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.

Answer 5 · 2024-01-03T02:05:55.000Z

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 ^^

Answer 6 · 2024-01-06T19:15:34.000Z

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; 
}

Answer 7 · 2024-03-07T16:46:15.000Z

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

Answer 8 · 2024-03-09T21:44:06.000Z

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

Answer 9 · 2024-03-18T20:19:35.000Z

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.

Answer 10 · 2024-03-25T20:39:04.000Z

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

Answer 11 · 2024-04-11T14:21:45.000Z

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