Modular CSS Layout - snippets for wide views, multi column and gallery

hey @Molibdeno, after re-reading yeah i misunderstood your question. for the callout it’s Minimal theme

see link above

Great work. Is there a way to add vertical scroll bar if the content exceeds a certain height

Thanks! On the fixed height, not something I plan before, but I could see if it seems fit. At the moment I’m trying to minimise what new things I add to avoid bloating it

Heya, I’m new to obsidian and a total noob at css. Your snippet is amazing and exactly what I was looking for. However, it is breaking another note of mine where I have a task calendar. My question is, how could I make you snippet only apply on certain notes and not all of them?
Thanks a lot in advance and have a great day

Hey @ennioma which feature are u using? The way I create the snippets are mainly note specific. So maybe u can share a screenshot and elaborate how the problem come about. I might be able to help out

Hey @efemkay thanks for such a quick response, I’m using the multi column callout snippet which applies to all notes and it’s breaking my task calendar setup I made using (GitHub - 702573N/Obsidian-Tasks-Calendar: A custom view build with Obsidian-Dataview to display tasks from Obsidian-Tasks and from your daily notes in a highly customisable calendar with a wide variety of views)

Before I enable multi-column, my calendar works normally as the plugin intends. But when I switch on multi-column in the snippets, it makes my obsidian lag like crazy when I open my calendar note and most of the time just crashes obsidian, so I can’t really share a screenshot unfortunately. I essentially am just looking for a way to disable the influence of your snippet in the calendar note, or to use the cssclass property like with other snippets to call it in the notes where I want to use it.
Thanks again!

Noted. I’ll to repro and see what’s what

Thank you very much, if it can help i’m using the AnuPpuccin theme

Edit: I was able to grab a screenshot of my messed up calendar since this time obsidian didn’t crash, here’s how it looks:

It came back around to looking like my proper calendar after a couple of minutes, but it is still very slow and laggy.

Not sure what I’m doing wrong but it doesn’t work for me.

Downloaded both of the .css, put them in the Obsidian folder and activated them.

Copy/pasted your example code.

Using Minimal Theme.

(Properties converts “cssClass” into “cssclasses”. Same happens when I manually add “cssClass: wide-page” to the YAML.


make sure the snippets are downloaded and enabled

Installation | Modular CSS Layout (efemkay.github.io)

Please ensure your vault’s /.obsidian/snippets folder is already created before doing the following steps. You can do that by going to Settings > Appearance and click “Open snippets folder” under CSS snippets section

2 Likes

@efemkay Wide Views and Multi Column are activated as mentioned. I have no use for Gallery Cards atm so that one is missing, but there is no dependency is there?

Not sure what I did differently, but I deleted the .css files and went through the process again. Now it works.

Thanks a lot, this will help a lot when making MOCs/Dashboards :slight_smile:

(On an unrelated note, where can I find the icons used for the Dashboard example shown here?)

Also, do you know if it is possible to have both filled and outlined callouts at the same time through some css magic? Would be kinda nice to mix and match to visually distinguish some things.

it should be possible, but it will require some tinkering with css and potentially either using cssclasses properties or callout metadata definition. i don’t anything on that, though you could get help from obsidian discord channel

1 Like

It’s frustrating to have to go two repos in to download this as the author intended.

I don’t want to seem ungrateful as what you’ve collected is great but it certainly left an annoying after taste installing brat 42 to install the plugin to install the css code…

None of this is necessary. Go to GitHub - efemkay/obsidian-modular-css-layout: CSS Layout hack for Obsidian.md → navigate to the .css file you’d like → save a copy for yourself in {YOURVAULT}/.obsidian/snippets/. Rinse and repeat.

seems to be a skill issue on my part then. Thanks

Well. I feel ur frustration as I had similar ones as I was starting with obsidian. I do log FR in BRAT so that it supports downloading snippets since Snippet Downloader dev already clarified will not continue to maintain it.

There’s manual options to download that I captured in the docs that doesn’t require any plugins (similar to what ariehen example steps).

From where I stand, using obsidian will to certain extent require u to geek out a bit, especially if u want to unlock its full potential. Thats the side effect of using highly customisable app.

For now. Those css snippets are the extent of what I can contribute.

You’re right about the geeking out a bit piece and I am happy to do that, I was fatiqued and cranky at the time I created the account to purposely whinge.

Thanks for replying.

1 Like

Hey there :slight_smile:

I’ve been using and enjoying your snippets. Thank you for that!
However, I’m encountering two problem I haven’t been able to solve yet:

  1. The spacing between the first level (“Contents” in the attached image) and "#1 (content of the unordered list) is very big. This is also the case for when the snippet is not active and I have additional text (highest level) below the list. Is there a way to reduce the spacing?

  2. As you can see in the image, once going down one level “>>>” to start an unordered list (and adding the vertical, colored line), there is no way to go back up (to the level of “Contents”) again? Btw., this problem also occurs when using “> -” to start a bullet point, and then only using “>” to go back up a level. How can I fix that?

This is the query I’m using:

[!multi-column]

[!info]+ Title 1
Contents

#1
aoeiaoei
oaeiaoei
should be first level

[!warning]+ Title 2
Contents2

aoedsidaoei
aoiea
aoneids

[!note]+ Title 3
Contents3

odrniedsae

[!neutral]+ Title 4
Contents5

aeoisdr
aroea

Attached the image and the CSS file.

Thanks a lot in advance. Kind regards,
LFT


MCL Multi Column_2.css (44.9 KB)