Issue with theme inheritance

Archive
1

I’m having some issues with theme inheritance. I’ve used it fine before with the Twenty theme, but on this site with Alpha all the pages look like the CSS is missing. I created a folder in themes called mytheme and put this code in:

streams:
schemes:
theme:
type: ReadOnlyStream
prefixes:
’’:
- user/themes/mytheme
- user/themes/alpha

Any thoughts on what the problem is?

2

Did you change the default theme in the system YAML file (user/config/system.yaml) too?

3

Yes, I did. Also, the site looks fine if I remove the line that says
– user/themes/mytheme
but then that kind of defeats the point of theme inheritance. Also, I should probably mention that this site is running on a local XAMPP environment on Windows.

4

If you making a theme which is based on twenty, you also have to modify patches inside" js/init.js, especially this one:

			global:		{ range: '*', href: 'user/themes/twenty/css/style.css', containers: 1400, grid: { gutters: 50 } },
			wide:		{ range: '-1680', href: 'user/themes/twenty/css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
			normal:		{ range: '-1280', href: 'user/themes/twenty/css/style-normal.css', containers: 960, viewport: { scalable: false } },
			narrow:		{ range: '-980', href: 'user/themes/twenty/css/style-narrow.css', containers: '95%', grid: { gutters: 30 } },
			narrower:	{ range: '-840', href: 'user/themes/twenty/css/style-narrower.css', containers: '95%!' },
			mobile:		{ range: '-736', href: 'user/themes/twenty/css/style-mobile.css', containers: '100%!' }

Eventually remove no script from base.html.twig (but this may cause js problems)

<noscript>
  {{ assets.css() }}
</noscript>
5

In Alpha (The theme I’m using) that section says this:

global:		{ range: '*', href: theme_url + '/assets/css/style.css', containers: '60em', grid: { gutters: ['2em', 0] } },
			wide:		{ range: '-1680', href: theme_url + '/assets/css/style-wide.css' },
			normal:		{ range: '-1280', href: theme_url + '/assets/css/style-normal.css', viewport: { scalable: false } },
			narrow:		{ range: '-980', href: theme_url + '/assets/css/style-narrow.css', containers: '90%' },
			narrower:	{ range: '-840', href: theme_url + '/assets/css/style-narrower.css', containers: '90%!', grid: { zoom: 2 } },
			mobile:		{ range: '-736', href: theme_url + '/assets/css/style-mobile.css', containers: '100%!' },
			mobilep:	{ range: '-480', href: theme_url + '/assets/css/style-mobilep.css', grid: { zoom: 3 } }

Also, I don’t see a base template in Alpa. In default.html.twig there’s this:

        <noscript>
          <link rel="stylesheet" href="{{ url('theme://assets/css/skel.css') }}" />
          <link rel="stylesheet" href="{{ url('theme://assets/css/style.css') }}" />
          <link  rel="stylesheet" href="{{ url('theme://assets/css/style-wide.css') }}" />
        </noscript>

So maybe theme inheritance only works with Antimatter right now?

6

Can you provide url to your working website ? Then i can really check what’s going on. I never used Alpha before. Anyways i think:

/assets/css/

patches should be changed to

user/themes/alpha/assets/css/
7

So, those theme_url + '/assets/css/style-wide.css' lines in your init.js are referencing a theme_url variable that is defined on line 36 of alpha/templates/default.html.twig

That value is set to your_site_folder/user/themes/mytheme, which means all those CSS files (your_site_folder/user/themes/mytheme/assets/css/style-wide.css etc), can’t be loaded because we can’t handle that part with Grav’s streams.

You have two options here:

  • copy all those css files into your inherited theme (so your_site_folder/user/themes/mytheme/assets/css/style-wide.css etc do exist)
  • copy the alpha/templates/default.html.twig to your theme and manipulate the theme_url variable directly.

Example code for option two would be (l24-27):

<script>
        var base_url = '{{ base_url }}',
        theme_url = '{{ theme_url }}'.replace('/mytheme', '/alpha');
</script>
8

exactly Gert. This is how i did it with latest template I’m working on (striped):=. I created twig file from js file and used template variables like you said:

https://github.com/getgrav/grav-theme-striped/blob/develop/templates/partials/init.html.twig

9

Thanks for the help guys. I do believe you’ve hit it sir Gert. I haven’t had a chance to try it yet, but I think that will work. Excellent community you’ve got going here guys. :]

10

Happy to help :slight_smile: