Skip to content

Commit

Permalink
Review comment fixes & fix format
Browse files Browse the repository at this point in the history
  • Loading branch information
chalin committed Aug 7, 2024
1 parent 2f63690 commit 4649ce7
Showing 1 changed file with 15 additions and 4 deletions.
19 changes: 15 additions & 4 deletions userguide/content/en/docs/adding-content/lookandfeel.md
Original file line number Diff line number Diff line change
Expand Up @@ -529,16 +529,23 @@ which is used by all the other page templates:

## Adding custom class to the body element

By default, Docsy adds the `td-{{ .Kind }}` class, where the kind is the kind of the page, like section, blog, and so on. For example:
By default, Docsy adds the `td-{{ .Kind }}` class, where the kind is the kind of
the page, like section, blog, and so on. For example:

<!-- prettier-ignore -->
```html
<body class="td-section">
```

Sometimes it's useful to assign custom classes to a page, or to an entire section, for example, to apply custom styling. To do so, add the `body_class` parameter to the frontmatter of your page. The value of the parameter will be then added to the class attribute of your page's body element.
Sometimes it's useful to assign custom classes to a page, or to an entire
section, for example, to apply custom styling. To do so, add the `body_class`
parameter to the frontmatter of your page. The value of the parameter will then
be added to the class attribute of your page's body element.

To add the classes `myclass` and `anotherclass`, add the following line to the frontmatter of the page:
To add the classes `myclass` and `anotherclass`, add the following line to the
frontmatter of the page:

<!-- prettier-ignore -->
{{< tabpane persistLang=false >}}
{{< tab header="Configuration file:" disabled=true />}}
{{< tab header="hugo.toml" lang="toml" >}}
Expand All @@ -554,10 +561,14 @@ body_class : myclass anotherclass

The page's opening body tag will look like this (assuming it is a section page):

<!-- prettier-ignore -->
```html
<body class="td-section myclass anotherclass">
```

To apply the custom class to every page of a section or a directory, use the [Front Matter Cascade](https://gohugo.io/content-management/front-matter/#front-matter-cascade) feature of Hugo in your configuration file, or in the frontmatter of the highest-level page you want to modify.
To apply the custom class to every page of a section or a directory, use the
[Front Matter Cascade](https://gohugo.io/content-management/front-matter/#front-matter-cascade)
feature of Hugo in your configuration file, or in the frontmatter of the
highest-level page you want to modify.

[bs-docs]: https://getbootstrap.com/docs/

0 comments on commit 4649ce7

Please sign in to comment.