Skip to content

docs: add custom CSS usage and warnings to user guide (#2705) #2736

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

docs: add custom CSS usage and warnings to user guide (#2705) #2736

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11ba984
docs: add custom CSS usage and warnings to user guide (#2705)
arshinsikka Jul 11, 2025
3709477
docs: fix custom CSS section formatting (#2705)
arshinsikka Jul 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions docs/userGuide/usingHtmlJavaScriptCss.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,5 +148,32 @@ const myChart = new Chart(ctx, {
</variable>
</include>

## 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) 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"
}
}
]
}
```

{% from "njk/common.njk" import previous_next %}
{{ previous_next('components/advanced', 'tweakingThePageStructure') }}

Copy link
Preview

Copilot AI Aug 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The documentation section is incomplete. The PR description mentions explaining two methods (site-wide and page-specific inline styles) with warnings about conflicts, but only the site-wide method is documented. The page-specific inline <style> blocks method and the promised warnings about conflicts with MarkBind's built-in component styles are missing.

Suggested change
> **Warning:** Custom CSS rules may conflict with MarkBind's built-in component styles. If you override styles used by MarkBind components (e.g., buttons, panels, etc.), it may affect their appearance or functionality. Use specific selectors or [CSS scoping techniques](https://developer.mozilla.org/en-US/docs/Web/CSS/Scope) to minimize conflicts.
### 2. Add page-specific inline styles
To apply styles to a single page, you can add a `<style>` block directly in your `.md` file. For example:
```html
<style>
.custom-title {
color: darkblue;
font-size: 2em;
}
</style>
<h1 class="custom-title">Welcome to My Page</h1>

This method is useful for quick customizations or when you want to style only a specific page.

Warning: Inline styles can also conflict with MarkBind's built-in component styles. If you use generic selectors (e.g., h1, .panel), you may unintentionally override styles used by MarkBind components. Prefer using unique class names to avoid such conflicts.

{% from "njk/common.njk" import previous_next %}
{{ previous_next('components/advanced', 'tweakingThePageStructure') }}

Copilot uses AI. Check for mistakes.

Loading