/obsidian-modular-css-layout

CSS Layout hack for Obsidian.md

Primary LanguageCSSGNU General Public License v3.0GPL-3.0

Modular CSS Layout for Obsidian.md

there's beta branch (v0.6.0 see GH branch beta-0.16.x) for Obsidian v0.16.x support. I've updated the snippets (Wide Views and Multi Column)

v0.5.0 updated 2022-09-17

This is a repository for modular CSS layout hack for use with Obsidian.md. It's meant to complement/assist Community Theme, focusing solely on providing alternative layout to standard width and standard top-bottom block view.

Table of Content

Installation / Download and Enable

This is actually just a CSS code snippets collection. So it isn't an installation per se, but rather download and enable in Obsidian. The best way is to use Mara Li's Snippet Downloader plugin as I have plans to update this snippets from time to time

Wide Views

CSS snippet: MCL Wide Views.css

This section only briefly explains Wide Views snippet. Please go through the documentation site Wide Views - Modular CSS Layout for more details.

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-callout
    • wide-backlinks
    • vault-wide toggle for each of the above
  • 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

---
cssClass: wide-page
---

<the rest of your note>

Multi Column

CSS snippet: MCL Multi Column.css

This section only briefly explains Multi Column snippet. Please go through the documentation site Multi Column - Modular CSS Layout for more details.

This snippet provides you the following features:

  • Multi column layout using Callout
    • > [!multi-column]
    • > [!blank-container]
  • Multi column layout using (Unordered) List
    • it can be done via custom cssClass at the frontmatter
      • two-column-list
      • three-column-list
      • two-column-grid-list
      • three-column-grid-list
    • it can also be done 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>]

Example Multi Column using Callout

> [!multi-column]
>
>> [!note]+ Work
>> your notes or lists here. using markdown formatting
>
>> [!warning]+ Personal
>> your notes or lists here. using markdown formatting
>
>> [!summary]+ Charity
>> your notes or lists here. using markdown formatting

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

Example Multi Column using List

Gallery Cards

CSS snippet: MCL Gallery Cards.css

This section only briefly explains Gallery Cards snippet. Please go through the documentation site Gallery Cards - Modular CSS Layout for more details.

This snippet provides you the following features:

  • Image gallery using callout by specifying the callout-metadata gallery e.g. > [!NOTE|gallery]
  • Image gallery using YAML/frontmatter .cssClass: image-gallery
  • Image and Mermaid Diagram Controls
    • Dimension control for images in bullet list
    • Image Zoom
    • Mermaid Scale and Zoom

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