Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

Text align quark theme modular page

first-time

Solved by Klaas View solution

Started by Klaas 3 years ago · 3 replies · 541 views
3 years ago

Working through some of the documentation. So using the Quark theme.
The "default.md" as shown in the "Basic Tutorial" (https://learn.getgrav.org/17/basics/basic-tutorial) has text left-aligned.
The "modular.md" as shown on Content/Modular pages (https://learn.getgrav.org/17/content/modular) shows text center-aligned. Except for going modular, content hasn't changed.

Where is that setting? Is there a way to change to left-aligned text for all modular pages?

Thanks for help and best regards.

3 years ago

@KlaasHDec, There is no single way how pages are laid out and styled and each theme (developer) may have its own way of doing things.

Basically it is an interplay between:

  • Settings allowed by the theme for different page/module types. See /user/themes/quark/blueprints/modular/features.yaml which has a property header.class. This setting can be set when creating a module based on the "Feature" template.
  • A template can set hardcoded classes to elements, or it can use classes set in the blueprint variables which are saved in the header of the page/module.
    See /user/themes/quark/templates/modular/features.html.twig which uses hardcoded and variable classes:
    TWIG
    <section class="section modular-features {{ page.header.class}}">
    
  • Styling available in stylesheets.
    See /user/themes/quark/scss/theme/_onepage.scss, in which class modular-features is being defined as:
    CSS
    .modular-features {
    text-align: center;
    ...
    }
    
  • And sometimes Twig variables are being defined in PHP. See /user/themes/quark/quark.php lines 32-54

In short, every theme (developer) has its own preferences. When using a downloaded theme, you'll mostly need to look at the theme's variables, its blueprints, its templates and its stylesheets. Just to make it easy...

When you want to make changes to templates and/or blueprints, you must use an inheriting theme, else your changes will be lost when a new version of the theme overrides the altered files.

last edited 02/10/23 by pamtbaau
3 years ago

I create a Quark-inheriting theme.

I create a ../themes/mytheme/scss/theme/_onepge.scss that says
.modular-features {
text-align: left;
...
}
That doesn't seem to make a difference.

Reading the inheritance thing more attentively I spot the phrase
"compiling the resulting CSS into a local css-compiled/ folder."

So I do, following https://stackoverflow.com/questions/63000219/setting-up-scss-compilation-in-a-custom-theme-in-grav-cms

It turns out somewhere deep down there is a python2 dependency (print rather than print()). Maybe via the npm version I have installed. That complicates things.
Going to scratch my head for a while...

3 years ago Solution

Solved. Sort of.
I ended up cheating: copy-and-edit of the css-compiled files rather than actual compiling.

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
3 90 2 hours ago
Support · by Anna, 3 days ago
2 92 22 hours ago
Support · by Justin Young, 23 hours ago
1 40 23 hours ago
Support · by Duc , 1 week ago
2 98 6 days ago
Support · by Colin Hume, 1 week ago
2 90 6 days ago