From 04ee172da5bfb3e05dd98d63e67cdc4ed2e49a4a Mon Sep 17 00:00:00 2001
From: JonathanBaby <baby.jonathan@gmail.com>
Date: Sat, 7 Feb 2026 23:31:21 +0100
Subject: [PATCH] Renamed deprecated `cssClass` frontmatter property to
 `cssclasses` (Obsidian 1.9.10 update, released August 18, 2025) See Obsidian
 changelog https://obsidian.md/changelog/2025-08-18-desktop-v1.9.10/

---
 MCL Gallery Cards.css                         |  2 +-
 MCL Multi Column.css                          | 22 +++++++++----------
 MCL Wide Views.css                            |  8 +++----
 README.md                                     | 10 ++++-----
 ...case - Float with Multi Column Dataview.md |  2 +-
 .../MCL Showcase - MC Callout and List.md     |  2 +-
 docs/gallery-cards/02-image-gallery.md        | 10 ++++-----
 docs/gallery-cards/05-gc-settings.md          | 10 ++++-----
 docs/gallery-cards/index.md                   |  2 +-
 docs/multi-column/05-list-column.md           |  6 ++---
 docs/multi-column/06-list-grid.md             |  2 +-
 docs/showcases/float-with-mc-dataview.md      |  2 +-
 docs/showcases/mc-callout-and-list.md         |  2 +-
 docs/showcases/mc-callout-list-card.md        |  2 +-
 docs/wide-views/index.md                      |  6 ++---
 docs/wide-views/wvsettings.md                 |  4 ++--
 16 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/MCL Gallery Cards.css b/MCL Gallery Cards.css
index f6316e1..5e4d1b8 100644
--- a/MCL Gallery Cards.css	
+++ b/MCL Gallery Cards.css	
@@ -25,7 +25,7 @@
 	This snippet is part of MCL collection of snippets for customising layout, and it provides the following
 	- "gallery" callout-metadata i.e. [!<any-callout>|gallery] for flex/grid layout
 		- use together with MCL Multi Column [!blank-container] for invisible container
-	- YAML `cssClass: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
+	- YAML `cssclasses: image-gallery` to achieve similar to callout but using only Contextual Typography plugin & <p>
 	- Image Zoom via css
 	- Dimension control for images in lists <ul>
 
diff --git a/MCL Multi Column.css b/MCL Multi Column.css
index 4b70360..1b2f645 100644
--- a/MCL Multi Column.css	
+++ b/MCL Multi Column.css	
@@ -43,13 +43,13 @@
 
 	What is this snippet for?
 	- to allow Obsidian users to change the layout with preset css by just specifying
-	  the cssClass in the frontmatter (YAML) or naming the Callout block
-	- available cssClass
-		- cssClass: two-column-list
-		- cssClass: {.two-column-list-block}
-		- cssClass: three-column-list
-		- cssClass: {.three-column-list-block}
-		- cssClass: multi-column-list
+	  the cssclasses in the frontmatter (YAML) or naming the Callout block
+	- available cssclasses
+		- cssclasses: two-column-list
+		- cssclasses: {.two-column-list-block}
+		- cssclasses: three-column-list
+		- cssclasses: {.three-column-list-block}
+		- cssclasses: multi-column-list
 	- available Callout format
 		- [!multi-column]
 		- [!blank] / [!blank-container]
@@ -384,7 +384,7 @@ body{
 	/* -- Special Adjustment for Themes -- */
 
 		/* Minimal. Minimal Float. Updated for Minimal V7.4.7 */
-		/* "Reset" the default "cm-sizer" width but respect Minimal Settings, and require cssclass ".minimal-float" as Minimal own wide table will not work together with float i.e. removing :not(:has(table)) from .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)) */
+		/* "Reset" the default "cm-sizer" width but respect Minimal Settings, and require cssclasses ".minimal-float" as Minimal own wide table will not work together with float i.e. removing :not(:has(table)) from .markdown-source-view.mod-cm6.is-readable-line-width:not(:has(table)) */
 		.minimal-float.markdown-source-view.mod-cm6 {
 			.cm-sizer {
 				max-width: var(--max-width); width: var(--line-width);
@@ -422,7 +422,7 @@ body{
 
 
 /* === List Column ===*/
-	/* supported for (1) css :has(), (2) yaml cssclass, (3) CT plugin, and (4) MA plugin
+	/* supported for (1) css :has(), (2) yaml cssclasses, (3) CT plugin, and (4) MA plugin
 		- CSS :has() can be applied to sublists, so no column rule. CT plugin apply to div that houses the ul, so column gap is different
 		- xx-column-list for first level only list, but apply anywhere but xx-column-list-block apply at block level. Both require JV's Markdown Attributes plugin
 	*/
@@ -436,7 +436,7 @@ body{
 		.cm-s-obsidian .HyperMD-list-line span[class*="mcl"] {background-color: var(--background-primary) !important; color: var(--text-faint); font-size: 0.9rem; }
 
 
-	/* -- List Column using YAML cssclass and Markdown Attributes i.e. {.three-column-list-block} -- */
+	/* -- List Column using YAML cssclasses and Markdown Attributes i.e. {.three-column-list-block} -- */
 
 		/* define the column gap and column rule */
 		.two-column-list div > ul,   .two-column-list-block,
@@ -480,7 +480,7 @@ body{
 
 		/* Adjustment for misaligned bullets (this is a hack, need to find better solution later) */
 		ul:has([href="#mcl/list-column"]) li > .list-bullet::after, /* :has() */
-		.markdown-preview-view[class*="column-list"] li > .list-bullet::after, /* yaml cssclass */
+		.markdown-preview-view[class*="column-list"] li > .list-bullet::after, /* yaml cssclasses */
 		.tag-mcllist-column ul li > .list-bullet::after, /* contextual typography */
 		ul[class*="column-list"] li > .list-bullet::after /* markdown attributes */
 			{ position: relative; }
diff --git a/MCL Wide Views.css b/MCL Wide Views.css
index 4c52951..59082e7 100644
--- a/MCL Wide Views.css	
+++ b/MCL Wide Views.css	
@@ -8,7 +8,7 @@
 
 	What is this snippet for?
 	- for any users to use with any theme to complement any missing page/block width control
-	- available cssClass:
+	- available cssclasses:
 		- wide-page
         - wide-table
 		- wide-dataview
@@ -46,7 +46,7 @@
 
 
 /* === Adjustable RLL === */
-    /* cssClass toggle to allow users to adjust the RLL via Style Settings.
+    /* cssclasses toggle to allow users to adjust the RLL via Style Settings.
        Obsidian v1.0.0 makes it easier to do adjustable RLL ;) */
 
 	/* -- Main Code - Editing and Reading View -- */
@@ -55,7 +55,7 @@
 
 
 /* === Narrow Page === */
-    /* cssClass YAML to allow users with disabled RLL to introduce RLL per
+    /* cssclasses YAML to allow users with disabled RLL to introduce RLL per
        page/note basis. width is following obsidian default setting, or you
        can change it via MCL's Adjustable RLL */
 
@@ -383,7 +383,7 @@ settings:
     -
         id: narrow-view-title
         title: Narrow Page Settings
-		description: Control max-width page/note with cssClass `narrow-page`. RLL must be **disabled**
+		description: Control max-width page/note with cssclasses `narrow-page`. RLL must be **disabled**
         type: heading
         level: 2
         collapsed: true
diff --git a/README.md b/README.md
index 6740a88..2c1e42d 100644
--- a/README.md
+++ b/README.md
@@ -28,14 +28,14 @@ This is actually just a CSS code snippets collection. So it isn't an installatio
 > This section only briefly explains Wide Views snippet. Please go through the documentation site [Wide Views - Modular CSS Layout](https://efemkay.github.io/obsidian-modular-css-layout/wide-views/) 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)
+- Full width page or blocks (dataview, table and backlinks) per page/note basis by specifying custom `cssclasses` at the frontmatter (YAML)
 	- `wide-page`
 	- `wide-dataview`
 	- `wide-table`
 	- `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 width page per page/note basis for vault with RLL disabled by specifying custom `cssclasses` 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
@@ -48,7 +48,7 @@ This snippet provides you the following features:
 
 ```markdown
 ---
-cssClass: wide-page
+cssclasses: wide-page
 ---
 
 <the rest of your note>
@@ -100,7 +100,7 @@ Multi Column Callout layout take advantage of Obsidian Callout - leveraging it a
 
 
 ### List Column/Grid/Card
-This layout take advantage of markdown unordered list (i.e. `- list item`) to create multi column (and multi row for List Grid/Card) layout by matching with an identifier i.e. either `#mcl` tag, Markdown Attributes plugin syntax, or `cssclass:` key at frontmatter.
+This layout take advantage of markdown unordered list (i.e. `- list item`) to create multi column (and multi row for List Grid/Card) layout by matching with an identifier i.e. either `#mcl` tag, Markdown Attributes plugin syntax, or `cssclasses:` key at frontmatter.
 
 ![](https://raw.githubusercontent.com/efemkay/obsidian-modular-css-layout/main/docs/assets/hero-mc-list-column-grid-card.png)
 
@@ -156,7 +156,7 @@ You can apply to any callout as the identifier is done on the callout-metadata i
 
 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 gallery using YAML/frontmatter .`cssclasses: image-gallery`
 - Float Image using image alt-text
 - Image and Mermaid Diagram Controls
 	- Dimension control for images in bullet list
diff --git a/Showcases/Float with Multi Column Dataview/MCL Showcase - Float with Multi Column Dataview.md b/Showcases/Float with Multi Column Dataview/MCL Showcase - Float with Multi Column Dataview.md
index b1ffe14..7352fab 100644
--- a/Showcases/Float with Multi Column Dataview/MCL Showcase - Float with Multi Column Dataview.md	
+++ b/Showcases/Float with Multi Column Dataview/MCL Showcase - Float with Multi Column Dataview.md	
@@ -1,5 +1,5 @@
 ---
-cssclass: text-justify
+cssclasses: text-justify
 ---
 
 ## General linear model
diff --git a/Showcases/Multi Column Callout and List/MCL Showcase - MC Callout and List.md b/Showcases/Multi Column Callout and List/MCL Showcase - MC Callout and List.md
index c500877..6699aa1 100644
--- a/Showcases/Multi Column Callout and List/MCL Showcase - MC Callout and List.md	
+++ b/Showcases/Multi Column Callout and List/MCL Showcase - MC Callout and List.md	
@@ -1,5 +1,5 @@
 ---
-cssclass: wide-page
+cssclasses: wide-page
 ---
 
 > [!multi-column]
diff --git a/docs/gallery-cards/02-image-gallery.md b/docs/gallery-cards/02-image-gallery.md
index c674498..6e8ee37 100644
--- a/docs/gallery-cards/02-image-gallery.md
+++ b/docs/gallery-cards/02-image-gallery.md
@@ -21,7 +21,7 @@ nav_order: 2
 Image Gallery layout will allow you to create masonry like image gallery layout by placing image embed (i.e. `![[path/to/image.jpg]]`) in successive row of line. There are 2 different ways you can do so i.e.
 
 1. Using Obsidian Callout (by specifying the callout metadata `gallery`)
-2. Using frontmatter (by specifying `cssclass: image-gallery`)
+2. Using frontmatter (by specifying `cssclasses: image-gallery`)
 
 {: .warning-title}
 > Markdown image embed (i.e. `![](path/to/image.jpg)`) not supported
@@ -52,15 +52,15 @@ Image Gallery layout will allow you to create masonry like image gallery layout
 ![](https://raw.githubusercontent.com/efemkay/obsidian-modular-css-layout/main/docs/assets/gallery-callout-langkawi.png)
 
 
-### How to Use -- with Frontmatter `cssClass: image-gallery`
+### How to Use -- with Frontmatter `cssclasses: image-gallery`
 
-- Specify `cssClass: image-gallery` at the frontmatter *(top of your markdown notes fenced by two three-dashes `---`, see example below)*
+- Specify `cssclasses: image-gallery` at the frontmatter *(top of your markdown notes fenced by two three-dashes `---`, see example below)*
 - Insert embedded images (i.e. `![[path/to/image.jpg]]`). Put next to each other (with single spacing) for same row placement. Add single empty line to create new row.
 
 
 ```markdown
 ---
-cssClass: image-gallery
+cssclasses: image-gallery
 ---
 
 ![[path/to/pic1.jpg]] ![[path/to/pic2.jpg]]
@@ -74,7 +74,7 @@ cssClass: image-gallery
 > **Syntax below only works with Reading View**
 > ```markdown
 > ---
-> cssClass: image-gallery
+> cssclasses: image-gallery
 > ---
 >
 > ![[path/to/pic1.jpg]]
diff --git a/docs/gallery-cards/05-gc-settings.md b/docs/gallery-cards/05-gc-settings.md
index efcb199..003a2bd 100644
--- a/docs/gallery-cards/05-gc-settings.md
+++ b/docs/gallery-cards/05-gc-settings.md
@@ -16,14 +16,14 @@ nav_order: 5
 
 
 ## Image in "Gallery" Settings
-"Gallery" refers to gallery callout-metadata and/or "cssClass:image-gallery" frontmatter
+"Gallery" refers to gallery callout-metadata and/or "cssclasses:image-gallery" frontmatter
 
 | Settings | Description |
 | --- | --- |
 | Hide Strange New World Indicators | Hide Strange New World count indicator in Image Gallery (both using callout and css helper) |
 | Gallery Callout Gap | Set the gap between images in `[!<anycallout>\|gallery]` |
-| Max Height for Images | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
-| Max Width for Images | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
+| Max Height for Images | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
+| Max Width for Images | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
 
 
 ## Image in Lists Settings
@@ -31,8 +31,8 @@ nav_order: 5
 | Settings | Description |
 | --- | --- |
 | Disable Image Control in Lists | Turn this on to have the max height and width set below to have effect to images in bullet list |
-| Max Height for Images in Lists | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
-| Max Width for Images in Lists | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssClass: image-gallery` |
+| Max Height for Images in Lists | Set the max height for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
+| Max Width for Images in Lists | Set the max width for Images in `[!<anycallout>\|gallery]` and `cssclasses: image-gallery` |
 
 
 ## Mermaid SVG Settings
diff --git a/docs/gallery-cards/index.md b/docs/gallery-cards/index.md
index 8e524fe..d110c27 100644
--- a/docs/gallery-cards/index.md
+++ b/docs/gallery-cards/index.md
@@ -10,7 +10,7 @@ has_children: true
 
 Gallery Cards CSS snippet will allow you to create image gallery and control image customisation (like rounded corner and max width). In summary this snippet will provide 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 gallery using YAML/frontmatter .`cssclasses: image-gallery`
 - Image and Mermaid Diagram Controls
     - Dimension control for images in bullet list
     - Image Zoom (via CSS)
diff --git a/docs/multi-column/05-list-column.md b/docs/multi-column/05-list-column.md
index 0b69273..37f21d2 100644
--- a/docs/multi-column/05-list-column.md
+++ b/docs/multi-column/05-list-column.md
@@ -58,7 +58,7 @@ For this approach, do note that there's a dot (`.`) before the class name. This
 Here's an example markdown:
 ```md
 ---
-cssClass: two-column-list
+cssclasses: two-column-list
 ---
 
 - list item 1 #mcl/list-column
@@ -78,7 +78,7 @@ cssClass: two-column-list
 > Note that this approach do not work well if the last bullet is indented (not part of top level list). Example here
 > ```md
 > ---
-> cssClass: two-column-list
+> cssclasses: two-column-list
 > ---
 >
 > - list item 1 #mcl/list-column
@@ -99,7 +99,7 @@ Using this approach, you will have to specify the css for the column type at the
 Here's an example markdown:
 ```md
 ---
-cssClass: two-column-list
+cssclasses: two-column-list
 ---
 
 - list item 1 #mcl/list-column
diff --git a/docs/multi-column/06-list-grid.md b/docs/multi-column/06-list-grid.md
index 08e7296..ed2d246 100644
--- a/docs/multi-column/06-list-grid.md
+++ b/docs/multi-column/06-list-grid.md
@@ -69,7 +69,7 @@ Using this approach, you will have to specify the css for the column type at the
 Here's an example markdown:
 ```md
 ---
-cssClass: two-column-grid-list
+cssclasses: two-column-grid-list
 ---
 
 - #### Core Work
diff --git a/docs/showcases/float-with-mc-dataview.md b/docs/showcases/float-with-mc-dataview.md
index fe4272e..a68cc3b 100644
--- a/docs/showcases/float-with-mc-dataview.md
+++ b/docs/showcases/float-with-mc-dataview.md
@@ -12,7 +12,7 @@ nav_order: 2
 
 ```md
 ---
-cssclass: text-justify, wide-page, minimal-float
+cssclasses: text-justify, wide-page, minimal-float
 ---
 
 ## General linear model
diff --git a/docs/showcases/mc-callout-and-list.md b/docs/showcases/mc-callout-and-list.md
index 9e2047a..6dc6f12 100644
--- a/docs/showcases/mc-callout-and-list.md
+++ b/docs/showcases/mc-callout-and-list.md
@@ -12,7 +12,7 @@ nav_order: 3
 
 ```md
 ---
-cssclass: wide-page
+cssclasses: wide-page
 ---
 
 > [!multi-column]
diff --git a/docs/showcases/mc-callout-list-card.md b/docs/showcases/mc-callout-list-card.md
index 305e578..668a839 100644
--- a/docs/showcases/mc-callout-list-card.md
+++ b/docs/showcases/mc-callout-list-card.md
@@ -11,7 +11,7 @@ parent: Showcases
 
 ```md
 ---
-cssClass: minimal-float, wide-page
+cssclasses: minimal-float, wide-page
 ---
 
 > #### What do you need to achieve this?
diff --git a/docs/wide-views/index.md b/docs/wide-views/index.md
index 28f56c4..4b3e457 100644
--- a/docs/wide-views/index.md
+++ b/docs/wide-views/index.md
@@ -18,13 +18,13 @@ has_children: true
 ## Understanding the snippet
 - CSS snippet file: [MCL Wide Views.css](https://github.com/efemkay/obsidian-modular-css-layout/blob/main/MCL%20Wide%20Views.css)
 - This snippet will provide the following features
-	- Wide views using YAML `cssClass: wide-<page/blocks>` for applying to a specific individual note
+	- Wide views using YAML `cssclasses: wide-<page/blocks>` for applying to a specific individual note
 	- Wide views using vault-wide toggle for applying to all notes in your vault
 		- will require Style Settings plugin to enable the feature
 
 ---
 
-## Using YAML (specifying `cssClass`)
+## Using YAML (specifying `cssclasses`)
 
 - CSS snippet: `MCL Wide Views.css`
 - Custom CSS class available
@@ -37,7 +37,7 @@ This snippet allow you to use Obsidian CSS class helper to enable any of the wid
 
 ```markdown
 ---
-cssClass: wide-page
+cssclasses: wide-page
 ---
 
 <the rest of your note>
diff --git a/docs/wide-views/wvsettings.md b/docs/wide-views/wvsettings.md
index 0c0e3e0..e23ed75 100644
--- a/docs/wide-views/wvsettings.md
+++ b/docs/wide-views/wvsettings.md
@@ -17,12 +17,12 @@ Set the max width for normal-width page. Enable Adjustable RLL option above must
 ## Wide Page Settings
 
 ### Max Width for Normal Width block
-Set the max width for normal-width blocks for page/note that you specify with `cssClass: wide-<dataview|table|backlinks>`
+Set the max width for normal-width blocks for page/note that you specify with `cssclasses: wide-<dataview|table|backlinks>`
 
 ## Narrow Page Settings
 
 ### Max Width for Narrow View page
-Set the max width for the page/note that you specify with `cssClass: narrow-page`.
+Set the max width for the page/note that you specify with `cssclasses: narrow-page`.
 
 ---