Text align quark theme modular page

Support
1

Working through some of the documentation. So using the Quark theme.
The “default.md” as shown in the “Basic Tutorial” (Basic Tutorial | Grav Documentation) has text left-aligned.
The “modular.md” as shown on Content/Modular pages (Modular Pages | Grav Documentation) 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.

2

@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:
    <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:
    .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.

3

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 sass - Setting up SCSS compilation in a custom theme in Grav CMS - Stack Overflow

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…

4

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