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

Share & showcase
1

Overview

What is this snippet all about?

Modular CSS Layout (MCL) is a CSS snippets collection that are meant to provide a useful layout options as a complement to the default theme or your chosen community theme. It uses Obsidian’s default CSS classes and HTML structure to achieve the intended layout (I don’t intend to do any color-theme changes)

Do log issues in MCL github repo (link below) if you encounter any compatibility issues with your theme.

How to get started?

Since this is actually just a CSS snippets collection, it isn’t an installation per se, but rather download and enable in Obsidian. As I might update this snippets from time to time, the best way is to use Mara Li’s Snippet Downloader. Anyhow, you can read through documentation on how to do so (link below)

Download the snippets here

Documentation/How to here

Features / Modules

Wide Views

CSS snippet: MCL Wide Views.css

This snippet provides you the following features:

  • Full width page or blocks (dataview, table and backlinks) per page/note basis by specifying custom cssClass at the frontmatter (YAML)
    • wide-page
    • wide-dataview – require Contextual Typography plugin
    • wide-table – require Contextual Typography plugin
    • wide-backlinks
  • Narrow width page per page/note basis for vault with RLL disabled by specifying custom cssClass at the frontmatter (YAML)
    • narrow-page
  • Adjustable RLL (custom css class toggle) applicable to entire vault
    • Disabled by default. Enable it via Style Settings plugin

For wide-dataview and wide-table, you will need to install Contextual Typography plugin.

Example & Screenshot

---
cssClass: wide-page
---

<the rest of your note>

screenshot for wide-page and wide-table

Multi Column

CSS snippet: MCL Multi Column.css

This snippet provides you the following features:

  • Multi column layout using Callout using the following custom data-callout
    • > [!multi-column]
    • > [!blank-container]
  • Allow you to control the width of the sub-callout using custom callout-metadata
    • > [!<anycallout>|<wide-3|wide-2>] for flexibly increase relative width, and
    • > [!<anycallout>|min-0] to remove mininum width for multi-column sub-callout (default: 200px)
  • Multi column layout using (Unordered) List
    • Via custom cssClass at the frontmatter. But note that this will apply to all list in that note
      • two-column-list
      • three-column-list
      • two-column-grid-list
      • three-column-grid-list
    • Using Markdown Attributes plugin but able to apply at block level (inside your note)
      • multi-column-list-block – require Markdown Attributes plugin
  • Side / Floating Column using Callout
    • > [!<anycallout>|<left|right>-<small|medium|large>]
    • > [!blank-container||<left|right>-<small|medium|large>]

<anycallout> refers to any of the standard (or even your own custom) callout e.g. note, tldr, quote

Example and Screenshot

for multi-column callout

> [!multi-column]
> 
>> [!Summary|wide-3 min-0]+ Using callout-metadata `wide-3 min-0`
>> #### How to achieve this?
>> specify the sub callout as `> [!Summary|wide-3 min-0]`
>> - this callout width is 3/6 overall width
>
>> [!warning|wide-2 min-0]+  `wide-2 min-0`
>> #### header
>> - this callout is 2/6
>
>> [!summary|min-0]+ `min-0`
>> #### header
>> - this callout is 1/6

note that when you insert callout within callout, the line separating the callouts should only use single angle bracket (“>”)

for multi-column list

#### Type of Graphics (Plot)
- [Bar chart](https://en.wikipedia.org/wiki/Bar_chart "Bar chart")
- [Biplot](https://en.wikipedia.org/wiki/Biplot "Biplot")
- [Box plot](https://en.wikipedia.org/wiki/Box_plot "Box plot")
- [Control chart](https://en.wikipedia.org/wiki/Control_chart "Control chart")
- [Correlogram](https://en.wikipedia.org/wiki/Correlogram "Correlogram")
- [Fan chart](https://en.wikipedia.org/wiki/Fan_chart_(statistics) "Fan chart (statistics)")
- [Forest plot](https://en.wikipedia.org/wiki/Forest_plot "Forest plot")
- [Histogram](https://en.wikipedia.org/wiki/Histogram "Histogram")
- [Pie chart](https://en.wikipedia.org/wiki/Pie_chart "Pie chart")
- [Q–Q plot](https://en.wikipedia.org/wiki/Q%E2%80%93Q_plot "Q–Q plot")
- [Run chart](https://en.wikipedia.org/wiki/Run_chart "Run chart")
- [Scatter plot](https://en.wikipedia.org/wiki/Scatter_plot "Scatter plot")
- [Stem-and-leaf display](https://en.wikipedia.org/wiki/Stem-and-leaf_display "Stem-and-leaf display")
- [Radar chart](https://en.wikipedia.org/wiki/Radar_chart "Radar chart")
- [Violin plot](https://en.wikipedia.org/wiki/Violin_plot "Violin plot")
{ .multi-column-list-block }

screenshot
multi column showcase

Gallery Cards

CSS snippet: MCL Gallery Cards.css

This snippet provides you the following features:

  • Image gallery using callout by specifying the callout-metadata gallery e.g. > [!NOTE|gallery]
    • Transcluded/embedded images will be stacked side by side. Add empty lines in between the images to create new row
  • Image gallery using YAML/frontmatter .cssClass: image-gallery
    • Specify the following frontmatter at the very top of your markdown notes
    • Similar to using callout, transcluded/embedded images will be stacked side by side. Add empty lines in between the images to create new row
  • Dimension control for images in bullet list
    • Enabled by default. To disable, go to Style Settings and under Modular CSS Layout - Gallery Cards > Image and Gallery Settings enable the “Disable Image Control in Lists”
  • Image Zoom
    • Disabled by default. To enable this feature, go to Style Settings and under Modular CSS Layout - Gallery Cards > Image and Gallery Settings enable the “Enable Image Zoom via CSS in Lists”

Example and Screenshot

gallery using callout featuring langkawi

Support Me

I do this on my free time for personal joy. However, a cup of coffee or two would motivate me further! If you like what I do, and want to contribute back, you can support me via Ko-fi

Buy Me a Coffee at ko-fi.com

43 Likes
2

This is excellent!

1 Like
3

I am very new to CSS and someone just shared this with me. I am blown away! Thank you for making such a great post!! AND the documentation is great!

3 Likes
4

Thanks for the Multi Column feature, I really missed it!

5

Hello @efemkay, thank’s for this amazing snippet collection.

I would like to have cssclass: minimal-float applied on all notes by default, I searched inside your css files in order to see if I could find the code, paste it on a blank .css file and use it as a separate snippet, but I did not found it.

Could you please give some guidance on how to have that by default without having to type cssclass: minimal-float every time?

Thank you :slight_smile:

6

@ironhak currently there isn’t a way to do so. Mainly because that might interfere with minimal other functions that I haven’t tested. I can consider as an option in future updates

1 Like
7

Thanks. I would also like to bring to your attention that this function does not work good on the mobile app: it cuts out the last part of the note.

9

Forgive me if this is a newbie question (first forum post, hi!) - will this work with Obsidian Publish?

10

i don’t think so. mainly coz i don’t know how snippets works with publish and didn’t even have a publish subs to to even know

11

Wow, this is what I have been looking for, right from the time I started investigating on using Obsidian instead of Notion. I am still new to Obsidian (and Notion too) and markdown editors in general, so have been looking around for last couple of weeks to make sense of how this tool works.

Please can I ask, what theme or css snippets have you used for the actual callouts you have displayed in the columns in the image on your GitHub page, under Multi Column Callout section (Link to image)

12

it’s Minimal theme. Someone else was also intrigued by the theme. Here’s my more complete response

13

Wide Views snippet has not got the love it should for quite some time. Since I introduce MCL, all it got are just incidental bug fixes. So even though this is a still bug fix release, the code base for it has change drama.tically.

Thanks to CSS @container (available with Electron v21 that was bundled into Obsidian v1.1.9 installer) I can now use it to get the element sizes. As such, I no longer have to (a) make all note’s blocks wide and then (b) make it all narrow again but excluding the targeted block (either table, dataview or callout block). In case you’re wondering, yes that was the approach I took before.

Inherent benefit of the new approach is that it no longer disrupt community themes note’s width setting or layout. This is especially true for Minimal theme for it’s unique take on controlling note’s width. But of course I cannot guarantee bug free experience, if you find any issue, do raise an issue at MCL GitHub repo.

Example screenshot for wide-table

image
image1300×962 59.5 KB

Note: Using AnuPpuccin theme with just color scheme change

14

This is incredible! Thank you so much!
Is there a way to hide the title and icon in the Multi Column? :thinking:

15

@333 u can use [!blank] callout for that

image
image1017×489 24.9 KB

here’s the markdown


multi column with icon
> [!multi-column]
> > [!Todo]+ Deliverables Milestone
> > - [x] Insider's Alpha Release
> > - [ ] Gold & Silver Supporters Meetup
> > - [ ] Public Beta Release
> 
> > [!Summary]+ Funding Milestone
> > - Series A: $ 1.1 mil
> > - Series B: ongoing
> > - Series C: planned

multi column without icon
> [!multi-column]
> > [!blank]+
> > - [x] Insider's Alpha Release
> > - [ ] Gold & Silver Supporters Meetup
> > - [ ] Public Beta Release
> 
> > [!blank]+
> > - Series A: $ 1.1 mil
> > - Series B: ongoing
> > - Series C: planned
1 Like
16

Thank you!! and another question…
How to do the same thing, but leave the colored boxes.
The idea is to do something like this, but without a title or icon.

callouts1
callouts1817×464 47.1 KB

17

@333 i don’t do that for MCL. but if you want, u can add this snippet and declare the no-title callout metadata i.e. [!info|no-title]

/* no title no icon */
[data-callout-metadata="no-title"] > .callout-title {
    display: none;
}

here’s the Obsidian help on creating a snippet if u don’t know yet – CSS snippets - Obsidian Help

18

Wow, I love the CSS of your callouts! Is it a snippet of your own, or is it a part of a theme? Would you mind sharing it?

Thanks!

19

hi @Molibdeno, it’s a CSS snippets. you may find the GH repo and docs page in the first post above

20

¿How did u do that with colors?

21

I don’t think we are talking about the same thing. I just liked the CSS of your callouts, which is not in the GH repo (or at least i couldn’t find it).

Thanks!