Quick-search for anything
⌘F
Docs / Themes / Helpers / Body class /

body_class

Usage: {{body_class}}

Description

{{body_class}} – outputs dynamic CSS classes intended for the <body> tag in your default.hbs or other layout file, and is useful for targeting specific pages (or contexts) with styles.

The {{body_class}} helper outputs different classes on different pages, depending on what context the page belongs to. For example the home page will get the class .home-template, but a single post page would get .post-template.

Ghost provides a series of both static and dynamic body_class classes:

Static classes

  • home-template – The class applied when the template is used for the home page
  • post-template – The class applied to all posts
  • page-template – The class applied to all pages
  • tag-template – The class applied to all tag index pages
  • author-template – The class applied to all author pages
  • private-template – The class applied to all page types when password protected access is activated

Dynamic classes

  • page-{slug} – A class of page- plus the page slug added to all pages
  • tag-{slug} – A class of tag- plus the tag page slug added to all tag index pages
  • author-{slug} – A class of author- plus the author page slug added to all author pages

Examples

<!-- default.hbs -->

<html>
    <head>...</head>
    <body class="{{body_class}}">
    ...
    {{{body}}}
    ...
    </body>
</html>