Add striped, hover tables without wrapping tables in DIV tags (Quark Theme)

Support
1

Grav Community,

I’m using the Quark theme. I saw an example where someone improved the default theme tables by adding the striped, hover tables from Spectre.css. They did so by wrapping their markdown tables in the div element:

<div class="table table-striped table-hover" markdown="1">
MARKDOWN TABLE
</div>

I really like these tables, but would prefer adding the capacity through the YAML front matter rather than manually treat each table. Is this possible? Is there an example online I can reference?

Thank you,

Sean

2

I don’t use Quark and haven’t tested this, but it should work for you.

Also not sure if you want a global theme heading or on each page. Find the template with the table markup referenced above and add a conditional class that checks for your custom header. For example:

<div class="table {{ page.header.striped_table ? 'table-striped' }} table-hover" markdown="1">

If you were setting this per theme, you would test for your setting in the theme config, which you could access with something like:

{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
<div class="table {{ theme_config.striped_tables ? 'table-striped' }} table-hover" markdown="1">

theme_config is already set in many themes, so you may not need the first line there.

If you have more than one table per page and you might want them formatted differently, you could even do that by specifying their names in a page header and comparing that to the table name.

3

@hughbris Thanks for your reply. I wanted a global theme change, but by page type is fine as well. Thanks for showing how the conditional statement can be done.

My new default.html.twig is as follows (I created an inherited, Quark-based theme, as per an earlier post):

{% extends 'partials/base.html.twig' %}

{% block content %}

  <div class="table {{ page.header.striped_table ? 'table-striped' }} table-hover" markdown="1">

  {{ page.content|raw }}

  </div>

{% endblock %}

Everything works. Thanks!