`. 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. > [!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 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 {#before-page-content} EXPERIMENTAL 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/ [color modes]: https://getbootstrap.com/docs/5.3/customize/color-modes/ [experimental]: /project/about/changelog/#experimental [noClasses]: https://gohugo.io/content-management/syntax-highlighting/#noclasses [syntax highlighting]: https://gohugo.io/content-management/syntax-highlighting/ [ug-project-styles]: https://github.com/google/docsy/blob/main/docsy.dev/assets/scss/_styles_project.scss