Unable to Inherit Mache theme to Custom theme, please help, thanks

Support Themes & Styling
1

Hello, I installed Mache skeleton and upgraded from Grav 1.4.5 to 1.7.9 step by step as per the documentation, is working, but slow compared with Grav 1.6 in same server.

My problem is that despite I followed all the steps to inherit Mache theme into custom theme MyMache, it does not take the changes I did in the custom.css file.
Reference; Customization | Grav Documentation

In fact it does not place the reference to the custom theme in the html source, I get:

<link href="/new/user/plugins/form/assets/form-styles.css" type="text/css" rel="stylesheet">
<link href="/new/user/plugins/simplesearch/css/simplesearch.css" type="text/css" rel="stylesheet">
<link href="/new/user/plugins/login/css/login.css" type="text/css" rel="stylesheet">
<link href="/new/user/themes/mache/css/grid.css" type="text/css" rel="stylesheet">
<link href="/new/user/themes/mache/css/style.css" type="text/css" rel="stylesheet">
<link href="/new/user/themes/mache/css/menu.css" type="text/css" rel="stylesheet">
<link href="/new/user/themes/mache/css/jquery.bxslider.css" type="text/css" rel="stylesheet">
<link href="/new/user/themes/mache/css/responsive.css" type="text/css" rel="stylesheet">
<link href="/new/user/themes/mache/css/animate.css" type="text/css" rel="stylesheet">

It is missing:

<link href="/user/themes/mymache/css/custom.css" type="text/css" rel="stylesheet" />

In the Admin module I have selected my custom theme: MyMache

Any help is appreciated
Regards

2

You need to extend a base template and add

{% do assets.addCss('theme://css/custom.css') %}

to the {% block stylesheets %} block

As it’s not possible to extend base template in a normal way, check this recipe how to do that

Your final extended template should look something like this:

{# partials/base.html.twig #}

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

{% block stylesheets %}
    {{ parent() }}
    {% do assets.addCss('theme://css/custom.css') %}
{% endblock %}
1 Like
3

Thanks a lot @Karmalakas for your kind answer.
Let me explain what I did, and please let me know what I did wrong, I am not a programmer.

  1. On file: user/themes/mache/templates/partial/base.html.twig I add:

    {% do assets.addCss('theme://css/custom.css') %}

    to the {% block stylesheets %}
    So the block is now:

     {% block stylesheets %}
   <link href='https://fonts.googleapis.com/css?family=Lato:100,400,300,300italic,400italic,700' rel='stylesheet' type='text/css'>
   {% do assets.addCss('theme://css/grid.css') %}
   {% do assets.addCss('theme://css/style.css') %}
   {% do assets.addCss('theme://css/menu.css') %}
   {% do assets.addCss('theme://css/jquery.bxslider.css') %}
   {% do assets.addCss('theme://css/responsive.css') %}
   {% do assets.addCss('theme://css/animate.css') %}
   {% do assets.addCss('theme://css/custom.css') %}
 {% endblock %}

  2. On custom theme mache0800 on file: user/themes/mache0800/mache0800.php
    I modified the file with this content:

    <?php
namespace Grav\Theme;

 use Grav\Common\Grav;
 use Grav\Common\Theme;

 class Mache0800 extends Mache {
     public static function getSubscribedEvents() {
         return [
             'onTwigLoader' => ['onTwigLoader', 10]
         ];
     }

     public function onTwigLoader() {
         parent::onTwigLoader();

         // add mache theme as namespace to twig
         $mache_path = Grav::instance()['locator']->findResource('themes://mache');
         $this->grav['twig']->addPath($mache_path . DIRECTORY_SEPARATOR . 'templates', 'mache');
     }
 }

    ?>

  3. On custom theme mache0800 I created file: user/themes/mache0800/templates/partial/base.html.twig
    with this content:

     {# partials/base.html.twig #}

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

 {% block stylesheets %}
     {{ parent() }}
     {% do assets.addCss('theme://css/custom.css') %}
 {% endblock %}

  4. On GRAV Admin module I got the following error:

    Error
    Call to undefined method Grav\Theme\Mache::onTwigLoader()

    This occurs on file mache0800.php on this lines:

     public function onTwigLoader() {
    parent::onTwigLoader();

I appreciate if you can point my error, and sorry if it is an obvious error.
Thanks a lot
Regards
joejac

4

You shouldn’t have done the first step at all. You should never edit the extended theme, because you will loose the changes on update. So you can safely revert step one changes.

In recipe example Quark theme is used and it has it’s own onTwigLoader(), but Mache doesn’t have it, so you can safely remove the line parent::onTwigLoader();

1 Like
5

Thank you very much @Karmalakas without your help I could not be able to solve the issue.

I did all the corrections you advised and it Is working now, I will make some changes through the custom theme.
Regards
Namaste :pray:

6

Hello @Karmalakas
I do not know if it is a coincidence or a cause, but after y upgraded the Mache theme to version 1.0.7 two days ago, now my theme mache0800 that was inheriting Mache fine 2 days ago, now is not inheriting the changes. I double checked all the theme configuration and it is fine and should inherit from Mache, but now it is not inheriting. I cleared the cache several times, too.
Is there a way to look inside Grav and to check if a theme is being inherited?
Thank you and regards
joejac

7

It’s difficult to say without seeing, but I have two guesses:

  • Theme mache0800 somehow became inactive
  • You edited custom.css in theme Mache instead of Mache0800