Hi all,
I’m new to Grav, always been using Wordpress. I’m trying to wrap my head around how the themes work, I’ve read all the docs and have a light grasp I would say.
I’m keen on using Quark to make it work. I need a site up and running fast so that I can concentrate and coding my aws plugs for it. I’m looking for a guide on the quark theme.
There are classes that can be used in the header such as base-classes, there are also hero options for the hero pages. Is there a document explaining all this?
How for example can I create a page with a video player centered horizontally and then have a list of thumbnail below it. Change the gradient of the background? Would using the custom.css be the way to go?
Thanks all and I appreciate your time.
@daredevil, welcome to the forum.
There is not much documentation on individual themes with respect to customisations. You will have to resort to the README’s on GitHub. For Quark you can find it here.
Since Quark is the default theme, it is often mentioned in Grav’s documentation as an example. In the section about theme customisation you will find more detailed info on customisations of themes in general.
Be advised to use an inherited theme. If you change the original theme you may risk loosing your changes when updating the theme.
Is ‘custom.css’ the way to go? Hard to say… It depends on your css/scss skills, your workflow, …
1 Like
Thanks for getting back to me.
My CSS isn’t bad. I would like to dig deeper into twig to understand it better but I’m a little short on time.
Going with Quark because it’s the default. Don’t want to mess around too much.
I created a copy of Quark for me to work on so I always have it to fall back on, thanks for that tip though.
What would be the best way for me to create a header attribute like hero_image: for example but as a boleen.
For example, when I create a new page I can add bg-gradient: true to the header and it will know that it must render a background with a specific gradient?
@daredevil,
Copy of Quark
I would advice against using copies, it makes it harder to keep up with changes in Quark.
To create an inherited theme use the following in the terminal (LInux):
$ bin/gpm install devtools
$ bin/plugin devtools newtheme // It will ask you if you want to inherit
Adding variable:
When settings are on a page-by-page basis, you can add a variable to the header of the page:
---
title: My page
add_gradient: true|false
---
Then in Twig, in the correct template, use something like:
{% if page.header.add_gradient %}
# Add as class to an element to create a gradient
{% endif %}
If all pages (of a certain type) need a gradient, you might be better off adding the variable to /user/config/themes/<theme in use>.yaml and use it in Twig as follows:
{% if theme.add_gradient %}
# Add as class to an element to create a gradient
{% endif %}
Note: Replace <theme in use> with the theme set in /user/config/system.yaml:
pages:
theme: your_theme
Hope this helps!
3 Likes
@pamtbaau
Thanks very much for the help, that sets me in the right direction.
If it’s ok, could I pop in here every so often for your help?
O a quick question, when I edit the /user/config/themes/quark.yaml is that in the original theme or is it possible to work on the inherited theme without damaging the original?
@daredevil,
If it’s ok, could I pop in here every so often for your help?
No, you may not ask for my help… But you may ask the community for help 
O a quick question, when I edit the /user/config/themes/quark.yaml is that in the original theme or is it possible to work on the inherited theme without damaging the original?
It is not in either theme, it is in the general config section of the site. But you do need to use the name of the theme as the name of the *.yaml. E.g mytheme.yaml if you have an inherited theme called ‘mytheme’, or quark.yaml if the Quark theme is still in use.
I’ve added some clarification in my previous reply.
1 Like
Hi @daredevil, you might also find it helpful to explore my Quark Open Publishing theme as an extensive example of an inherited version of Quark that has been customized (more behaviorally than visually though).
Open Publishing Space Skeleton download at https://getgrav.org/downloads/skeletons
Quark Open Publishing theme at https://github.com/hibbitts-design/grav-theme-quark-open-publishing
2 Likes
Thanks very much Paul.
The help here has been great, at the phase where I’m trying to understand it all.
I will look over your work and thanks for letting me know.
Could I ask a question though -
I’m trying to include a div that contains a css animation. I would like it be be right at the top of the page under the navigation just like a hero image would appear.
Where would the best place be for me and the safest to make that change?
Please see an example of what I mean, right now it’s fitting in below the navigation.
https://streamcapital.live/aor
I would like it to fit like this -
https://demo.getgrav.org/onepage-skeleton/
If I understand correctly, likely this Twig template file (but a copy of it in an inherited theme setup):
Hi Paul, thanks ver much,
So I should edit the hero.html.twig?
Also another questions, would it be possible for me to create a new modular page type by copying the hero.html.twig file and modding it to allow for that animation div I post previously and rename it to animation.html.twig
Then in my new page name the new markdown file animation.md instead of hero.md?
@daredevil, Please use a new post with a matching title for a new question.
Hi @daredevil, based on your earlier description I think editing the hero.html.twig (in an inherited theme) would be one approach.
@daredevil - Welcome to the Forum and a WAY better way of CMS development. We also recently switched from WP to Grav and immediately loved it.
I agree with what @paulhibbits says above and I would also encourage you to take a look at the Grav Skeletons (https://getgrav.org/downloads/skeletons) and start tweaking the ones with frameworks you may be familiar with. We started with the BootStrap4 skeleton and found it very easy to understand the structure, processing and clean separation of Model, View and Control.
1 Like
@RandomCanadia, thanks very much, I’ll have a look at that one.