search

hibbitts-design / grav-theme-quark-open-publishing

A customized version of the Quark theme with Git Sync and 'chromeless' mode support.
http://demo.hibbittsdesign.org/grav-open-publishing-quark/
MIT License
21 stars 13 forks source link

Make an Alternative spectre.css table style the default or change locally in markdown #13

Closed rhoppel closed 5 years ago

rhoppel commented 5 years ago

The minimalist look of this template is outstanding as is the entire package! The default table style for spectre.css is also very minimalist. spectre.css table. However, I would prefer to change the default style to a striped version. I have tried a number of things to modify custom.css to change the style but nothing I put in custom.css seems to take affect. The spectre documentation demonstrates how that the striped table can be used but I cannot do anything to make it work using this template.

Also I would like the ability to change the table style locally. All my HTML mods to the markdown source breaks the table. I realize that this might not be possible.

I have used the following to research the issue but everything I learned and tried fails miserably.

https://picturepan2.github.io/spectre/elements/tables.html https://www.w3schools.com/css/css_table.asp https://michelf.ca/projects/php-markdown/extra/#table https://stackoverflow.com/questions/29368902/how-can-i-wrap-my-markdown-in-an-html-div

Any comments or ideas?

paulhibbitts commented 5 years ago

Hi @rhoppel , glad you are finding this theme useful. A lot of credit goes to the parent theme 'Quark', which this theme is based on.

To get stripped tables you would need to use either HTML or a Shortcode to add the needed style class. I'd suggest the shortcode method as it is the cleaner approach.

  1. Install the Shortcode Core Plugin (https://github.com/getgrav/grav-plugin-shortcode-core#div)
  2. Add the needed shortcode with the striped table class around your Markdown table. Here is an example (backticks are required to show code, do not include them):

`[div class="table table-striped"]

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

[/div]`

Please let me know if the above works for you. Paul

rhoppel commented 5 years ago

Wow. That works. I was using angle brackets (<>) instead of the standard brackets ([ ]). Thanks @paulhibbitts for all the great work you do. I really love the theme and this resolved the only problem I had. Cheers!!!