Open AdotBdot opened 4 months ago
Same problem here...
same problem :(
Same here. I created an empty vault to make sure this issue is not caused by other plugins I use and I can confirm – it occurs also with the most default of Obsidian settings.
Create a directory/folder with exact name css-snippets
at root of your vault.
Create CSS file inside this folder, name doesn't matter. Follow the instructions given in the plugin above.
Note: You can't adit CSS file inside Obsidian. You need to open this file in some other text editor.
Copy & paste the following snippet in the CSS file that you have created:
.obsidian-banner-wrapper {
margin-top: 0;
padding-top: 0;
}
.mod-header {
margin-top: calc(var(--banner-height) - 30px);
}
Note: You can customize how much space you want between image and front matter by updating the 30px
in the CSS snippet above
Before | After |
---|---|
@tejas-hosamani, Obsidian supports snippet management out of the box in Settings > Appearance > CSS Snippets
. Once a snippet is active, Obsidian re-renders its view every time the snippet is modified. Since the plugin you submitted was last updated 4 years ago, I infer it must've been created when snippets management was not as easy as it is now.
I tested your snippet in a clean, default vault and it worked fine. In my customized vault, however, it created excessive top margins in note embeds and previews. I modified your snippet like this:
.metadata-container {
margin-top: calc(var(--banner-height) - 10px) !important;
}
.obsidian-banner-wrapper {
margin: 0;
}
Snippet by @tejas-hosamani | Snippet by me |
---|---|
I'm leaving this piece of code for anyone who encounters a similar issue.
As the title says. To reproduce simply add properties and banner to a note. I don't think other plugins I use are the issue but I also use: Advanced Tables, Completr, Emoji Toolbar, Excalidraw, Iconize, Image in Editor, Image Layouts, Latex Suite, Remotely Save and Text Format.