<link href="/user/themes/bones-vanilla/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <link href="/user/themes/bones-vanilla/css/foundation.css" type="text/css" rel="stylesheet"> <link href="/user/themes/bones-vanilla/css/bones-styles.css" type="text/css" rel="stylesheet"> <link href="/user/themes/bones-vanilla/css/bones-colors.css" type="text/css" rel="stylesheet"> <link href="/user/plugins/breadcrumbs/css/breadcrumbs.css" type="text/css" rel="stylesheet"> <link href="/user/plugins/form/assets/form-styles.css" type="text/css" rel="stylesheet"> <link href="/user/plugins/simplesearch/css/simplesearch.css" type="text/css" rel="stylesheet"> <link href="/user/plugins/login/css/login.css" type="text/css" rel="stylesheet"> <script src="/system/assets/jquery/jquery-3.x.min.js"></script>

Body & Hero Classes

11 Aug journal photography <img alt="" src="/images/e/d/5/9/0/ed59094ce420ed126ce20b2190f6b05071615e68-unsplash-overcast-mountains.jpg" />
<p>The <a href="https://getgrav.org/downloads/themes">Quark theme</a> has the ability to allow pages to override some of the default options by letting the user set <code>body_classes</code> for any page. The theme will merge the combination of the defaults with any <code>body_classes</code> set. This allows you to easily add hero classes to give your blog post some <strong>bling</strong>.</p> <h2>Body Classes</h2> <pre><code class="language-yaml">body_classes: "header-dark header-transparent"</code></pre> <p>On a particular page will ensure that page has those options enabled (assuming they are false by default).</p> <h2>Hero Options</h2> <p>The hero template allows some options to be set in the page frontmatter. This is used by the modular <code>hero</code> as well as the blog and item templates to provide a more dynamic header.</p> <pre><code class="language-yaml">hero_classes: text-light title-h1h2 parallax overlay-dark-gradient hero-large hero_image: road.jpg hero_align: center</code></pre> <p>The <code>hero_classes</code> option allows a variety of hero classes to be set dynamically these include:</p> <ul> <li><code>text-light</code> | <code>text-dark</code> - Controls if the text should be light or dark depending on the content</li> <li><code>title-h1h2</code> - Enforced a close matched h1/h2 title pairing</li> <li><code>parallax</code> - Enables a CSS-powered parallax effect</li> <li><code>overlay-dark-gradient</code> - Displays a transparent gradient which further darkens the underlying image</li> <li><code>overlay-light-gradient</code> - Displays a transparent gradient which further lightens the underlying image</li> <li><code>overlay-dark</code> - Displays a solid transparent overlay which further darkens the underlying image</li> <li><code>overlay-light</code> - Displays a solid transparent overlay which further darkens the underlying image</li> <li><code>hero-fullscreen</code> | <code>hero-large</code> | <code>hero-medium</code> | <code>hero-small</code> | <code>hero-tiny</code> - Size of the hero block</li> </ul> <p>The <code>hero_image</code> should point to an image file in the current page folder.</p>

Previous Post

<script src="/user/themes/bones-vanilla/js/what-input.js"></script> <script src="/user/themes/bones-vanilla/js/foundation.js"></script> <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script> <script src="/user/plugins/simplesearch/js/simplesearch.js"></script> <script> $(document).foundation(); </script>