From 11ba984536699218f837a87a3a04340e8585fcff Mon Sep 17 00:00:00 2001 From: Arshin Sikka Date: Fri, 11 Jul 2025 23:57:23 +0530 Subject: [PATCH 1/2] docs: add custom CSS usage and warnings to user guide (#2705) --- docs/userGuide/usingHtmlJavaScriptCss.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md index abf13c316c..7b6cf4acf2 100644 --- a/docs/userGuide/usingHtmlJavaScriptCss.md +++ b/docs/userGuide/usingHtmlJavaScriptCss.md @@ -148,5 +148,27 @@ const myChart = new Chart(ctx, { +## Using Custom CSS in MarkBind + +You can apply your own custom CSS styles to customize how your site looks. + +There are two common ways to add custom CSS in MarkBind: + +### 1. Add a site-wide custom stylesheet + +To apply styles across your whole site, create a file called `styles.css` (or similar), and add it to your `site.json` under `head`: + +```json +"head": [ + { + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "/styles.css" + } + } +] + + {% from "njk/common.njk" import previous_next %} {{ previous_next('components/advanced', 'tweakingThePageStructure') }} From 3709477f80bc143b0619bbd65185f87ee3571e39 Mon Sep 17 00:00:00 2001 From: Arshin Sikka Date: Sat, 12 Jul 2025 00:05:27 +0530 Subject: [PATCH 2/2] docs: fix custom CSS section formatting (#2705) --- docs/userGuide/usingHtmlJavaScriptCss.md | 25 ++++++++++++++---------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md index 7b6cf4acf2..fc192348b3 100644 --- a/docs/userGuide/usingHtmlJavaScriptCss.md +++ b/docs/userGuide/usingHtmlJavaScriptCss.md @@ -156,19 +156,24 @@ There are two common ways to add custom CSS in MarkBind: ### 1. Add a site-wide custom stylesheet -To apply styles across your whole site, create a file called `styles.css` (or similar), and add it to your `site.json` under `head`: +To apply styles across your whole site, create a file called `styles.css` +(or similar) in the root of your site (same level as `index.md`), and then +add it to your `site.json` under the `head` array like so: ```json -"head": [ - { - "tagName": "link", - "attributes": { - "rel": "stylesheet", - "href": "/styles.css" +{ + "head": [ + { + "tagName": "link", + "attributes": { + "rel": "stylesheet", + "href": "/styles.css" + } } - } -] - + ] +} +``` {% from "njk/common.njk" import previous_next %} {{ previous_next('components/advanced', 'tweakingThePageStructure') }} +