Open simonfossom opened 8 months ago
this code work for me in 2.0.5-beta
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.
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.
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.
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 ^^
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;
}
These seem to only work in reading view. Anyone know how to fix minimal for live preview mode? I only use LP mode.
I am using also only live preview. It works fine for me. Check it is in conflict with your theme or some plugin.
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.
Thanks. It would be great if somebody could maintain this project into a stable release. Such a great plugin :(
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
@noatpad I don't quite understand how your code is organized. I never worked in Svelte, but this fixes the problem for me: