Theming

[Tim van Dijen]

Hey all,

I've started working on a custom theme based on the new theming feature, but I'm struggling to get it to work based on the instructions on the Wiki...

I started small, just to experiment a bit.. Here are the steps I followed:

----------------------------------------------------------------------------------------------------

### Set paths according to instructions @ https://github.com/OpenConext/OpenConext-engineblock/wiki/Development-Guidelines#theme-development
diff --git a/app/config/config.yml b/app/config/config.yml
index 6c8bba5..2ee0dab 100644
--- a/app/config/config.yml
+++ b/app/config/config.yml
@@ -57,8 +57,8 @@ twig:
-        "%kernel.root_dir%/../theme/material/templates/modules": theme
-        "%kernel.root_dir%/../theme/material/templates/layouts": themeLayouts
+        "%kernel.root_dir%/../theme/themerijksoverheid/templates/modules": theme
+        "%kernel.root_dir%/../theme/themerijksoverheid/templates/layouts": themeLayouts

### Touch an empty application.js; equal to the OC-theme @ https://github.com/OpenConext/OpenConext-engineblock/blob/master/theme/material/javascripts/theme/openconext/application.js - Without it npm run build will fail
diff --git a/theme/material/javascripts/theme/themerijksoverheid/application.js b/theme/material/javascripts/theme/themerijksoverheid/application.js
new file mode 100644
index 0000000..e69de29

### Equal to the OC-theme @ https://github.com/OpenConext/OpenConext-engineblock/blob/master/theme/material/stylesheets/theme/openconext/_theme.sass
diff --git a/theme/material/stylesheets/theme/themerijksoverheid/_theme.sass b/theme/material/stylesheets/theme/themerijksoverheid/_theme.sass
new file mode 100644
index 0000000..88844a3
--- /dev/null
+++ b/theme/material/stylesheets/theme/themerijksoverheid/_theme.sass
@@ -0,0 +1 @@
+@import "shared/components/_language.css.sass"

### Content referenced from the above theme/material/stylesheets/theme/themerijksoverheid/_theme.sass
diff --git a/theme/material/stylesheets/theme/themerijksoverheid/shared/components/_language.css.sass b/theme/material/stylesheets/theme/themerijkso
new file mode 100644
index 0000000..c1a80a4
--- /dev/null
+++ b/theme/material/stylesheets/theme/themerijksoverheid/shared/components/_language.css.sass

### Add two templates we override
theme/themerijksoverheid/templates/layouts/scripts/default.html.twig
theme/themerijksoverheid/templates/modules/Authentication/View/Proxy/wayf.html.twig

### Run install

npm install

EB_THEME=themerijksoverheid npm run build

composer install

----------------------------------------------------------------------------------------------------

Now when I try and access the engineblock endpoint, I'm facing errors like:

Unable to find template "@theme/Default/View/Error/display.html.twig"

See attachment for full trace...

Now the question is... What am I missing here / doing wrong?

Thanks for helping!

- Tim

[Bas Strooband]

Hi Tim,

It looks like the twig templates couldn't be found in Symfony.
Could you verify if the folder `/theme/material/templates` have the same files as `/theme/themerijksoverheid`?

Kind regards,

Bas Strooband

[Tim van Dijen]

Hi Bas,

Thanks for replying.

I was under the impression that the custom theme only had to include the templates that have changed, but now I understand this is not the case?

- Tim

Op dinsdag 30 juli 2019 10:00:34 UTC+2 schreef Bas Strooband:

[Bas Strooband]

Hi Tim,

With the adjustment of `twig.paths` in app/config.yml the path lookup for the used internal namespaces are changed so all internal
template paths are looking in the supplied path for the templates. If you would like to only override only certain templates you could try to add both paths.

The order in which paths are configured is very important, because Twig will always load the first template that exists.

So then you could change your configuration to the configuration below:

paths:
        "%kernel.root_dir%/../theme/material/templates/modules": theme

        "%kernel.root_dir%/../theme/material/templates/layouts": themeLayouts
        "%kernel.root_dir%/../theme/themerijksoverheid/templates/modules": theme
        "%kernel.root_dir%/../theme/themerijksoverheid/templates/layouts": themeLayouts

I hope this will help you.

Kind regards,
Bas

--
OpenConext - Open For Collaboration
---
You received this message because you are subscribed to the Google Groups "OpenConext Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to openconext+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/openconext/2b0c8918-ec5e-4851-8818-020cdab9514b%40googlegroups.com.

--

--
ibuildings
WEB & MOBILE APP DEVELOPMENT

Bas Strooband
Developer

e-mail: bstro...@ibuildings.nl
phone: +31 88 00 24 000
www.ibuildings.nl

To all agreements with Ibuildings.nl BV, our general terms and conditions apply.

[Tim van Dijen]

Thanks Bas!

That was the missing link for me. The Wiki only suggests changing the default instead of adding paths..

Now how can I achieve the same for stylesheets?

- Tim

Op dinsdag 30 juli 2019 10:37:32 UTC+2 schreef Bas Strooband:

To unsubscribe from this group and stop receiving emails from it, send an email to openc...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/openconext/2b0c8918-ec5e-4851-8818-020cdab9514b%40googlegroups.com.

[Bas Strooband]

Hi Tim,

Glad to hear from you that it worked.

If you would like to include additional stylesheets and you set the EB_THEME environment variable then the file below would be included:

- theme/material/stylesheets/theme/{EB_THEME}/theme.sass

This will resolve to the path below if you use the `EB_THEME=themerijksoverheid npm run build` command you described earlier:

 - theme/material/stylesheets/theme/themerijksoverheid/theme.sass

In this file you could include some additional sass/css files which could be used to add css or to overwrite css.

If you would also like to do the same with javascript you could add code to the file below:

 - theme/material/javascripts/theme/themerijksoverheid/application.js

This will work with 'imports' so you would be able to include other files.

Would you be so kind to let me know in the end what you where missing in the documentation so we could update the wiki and help others.

Thanks,

Regards,

Bas

To unsubscribe from this group and stop receiving emails from it, send an email to openconext+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/openconext/09c8d46a-a659-4bd0-b3e2-6832a8a3ae67%40googlegroups.com.

[Tim van Dijen]

Hi Bas,

Thanks for your help so far.. I'm nearly there!

One thing I can't figure out is how to override the default colors in theme/material/stylesheets/_vars.css.sass

Any hints?

- Tim

Op dinsdag 30 juli 2019 16:36:08 UTC+2 schreef Bas Strooband:

To view this discussion on the web visit https://groups.google.com/d/msgid/openconext/09c8d46a-a659-4bd0-b3e2-6832a8a3ae67%40googlegroups.com.

[Bas Strooband]

Hi Tim,

The problem is the order the sass files are loaded and this was initially overlooked. So if it already has defined variables they couldn't be overridden.

You could fix it for now by moving 'theme/material/stylesheets/shared/_vars.css.sass'  to 'theme/material/stylesheets/theme/[EB_THEME]/shared/_vars.css.sass'.
This way sass will look for the file but it will resolve to the included theme and the custom vars will be used.

I think however that this could be a more permanent fix, to keep the themes splitted:
https://github.com/OpenConext/OpenConext-engineblock/pull/730

Bas

To unsubscribe from this group and stop receiving emails from it, send an email to openconext+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/openconext/fd207666-4a22-46bc-b4fb-4719c02c04ff%40googlegroups.com.