`. It does, however, mean that all
your tables have `display` set to `block`. If you don't want this, you can
create your own custom styles for tables.
{{% alert title="Note" %}}
Our table styling goes against the [Bootstrap recommendation to _wrap_
tables][wrap-tables] with `.table-responsive` — however, we think letting
users create responsive tables with just Markdown table syntax is more
convenient.
[wrap-tables]:
https://getbootstrap.com/docs/5.3/content/tables/#responsive-tables
{{% /alert %}}
To render a table without Docsy styling, apply the `.td-initial` class to the
table. From the resulting `
` style base, it is easier to apply your own
custom styles (rather than trying to undo Docsy table styling), as is
illustrated in the following example:
```markdown
| Shape | Number of sides |
| -------- | --------------- |
| Triangle | 3 |
| Square | 4 |
{.td-initial .my-dark-table-style}
```
The example above uses [Markdown attribute][] syntax, and might render like
this:
| Shape | Number of sides |
| -------- | --------------- |
| Triangle | 3 |
| Square | 4 |
{.td-initial .table .table-dark}
[Bootstrap table]: https://getbootstrap.com/docs/5.3/content/tables/
[Markdown attribute]: https://discourse.gohugo.io/t/markdown-attributes/41783
## Customizing templates
### Add code to head or before body end
If you need to add some code (CSS import, cookie consent, or similar) to the
`head` section on every page, add a [hooks/head-end.html] partial to your
project (the theme version is an empty placeholder). The content of this partial
is automatically included just before the end of the theme partial [head.html].
Similarly, if you want to add some code right before the `body` end, create your
own version of [hooks/body-end.html]. This partial is included automatically at
the end of the theme partial [scripts.html].
Both [head.html] and [scripts.html] are included from [baseof.html], Docsy's
[base template][].
[baseof.html]: https://github.com/google/docsy/blob/main/layouts/baseof.html
[base template]: https://gohugo.io/templates/base/
[head.html]:
https://github.com/google/docsy/blob/main/layouts/_partials/head.html
[hooks/body-end.html]:
https://github.com/google/docsy/blob/main/layouts/_partials/hooks/body-end.html
[hooks/head-end.html]:
https://github.com/google/docsy/blob/main/layouts/_partials/hooks/head-end.html
[scripts.html]:
https://github.com/google/docsy/blob/main/layouts/_partials/head.html
### Adding a banner before page content (EXPERIMENTAL) {#before-page-content}
To have a banner or other similar content appear at the top of the pages in a
section, add the relevant HTML to a [_td-content-after-header.html] file in the
section's page path under `layouts` -- such as
`layouts/blog/_td-content-after-header.html`. Add the file directly under
`layouts` to have the file processed for all docs, blog, and swagger pages. The
file's content will be included inside the `div.td-content` after ``,
just before `.Content` is rendered.
[_td-content-after-header.html]:
https://github.com/google/docsy/blob/main/layouts/_td-content-after-header.html
## 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:
```html
```
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 front matter 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
front matter of the page:
```yaml
body_class: myclass anotherclass
```
The page's opening body tag will look like this (assuming it is a section page):
```html
```
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 front matter of the
highest-level page you want to modify.
[bs-docs]: https://getbootstrap.com/docs/