Problems with rendering

[the-moog]

Trying to install Joyous into a site based on the Backery Demo.

The calender seems to render without any formatting.

I create a new simple site and I get a similar result.
new virtualenv
pip3 install wagtail
wagtail start caltest
cd caltest
pip3 install -r requirements.txt
./manage.py migrate
add ls.joyous to the settings/base.py
New page -> calender.

looks like this (crammed into one corner of browser window).

Working site: https://pasteboard.co/IuDxQio.png
New simple site: https://pasteboard.co/IuDwuNd.png

[linuxsoftware]

Version 0.9.0 did have substantial changes to the CSS
https://joyous.readthedocs.io/en/latest/releases/0.9.0.html#css

https://pasteboard.co/IuDwuNd.png is how I would expect a plain simple site to look.

Joyous does not push colour or font choices. But there are theme CSS files available which you can optionally choose from to import if you like.

• joyous_coast_theme.css: Greys and gold.
• joyous_forest_theme.css: Greens.
• joyous_stellar_theme.css: A dark background theme.

You can either alter your base template, or to make things easy you can set the setting JOYOUS_THEME_CSS to the path of a theme CSS file you wish to include.

https://pasteboard.co/IuDxQio.png does not look so good. It looks like joyous.css is not being loaded at all - perhaps clearing your browser cache (ctrl-F5) is needed. Or perhaps the bakery demo CSS has overridden all the Joyous CSS?

[linuxsoftware]

I have installed the latest Bakery Demo from https://github.com/wagtail/bakerydemo and now see why joyous.css is not included.

The base template of the Bakery Demo https://github.com/wagtail/bakerydemo/blob/master/bakerydemo/templates/base.html does not have the blocks extra_css and extra_js that a Wagtail project based upon the default template would have. The blocks content, extra_css and extra_js are required in the base.html template for the Joyous templates to work.

To fix this you can add extra_css : (Note you cannot add a block to an include, so it cannot go inside "includes/head.html")

{% block head %}
    {% include "includes/head.html" %}
    {% block extra_css %}
    {# Override this in templates to add extra stylesheets #}
    {% endblock %}
{% endblock head %}

and add extra_js :

    {% block extra_js %}
        {# Override this in templates to add extra javascript #}
    {% endblock %}
</body>

This will allow joyous.css and optionally a Joyous theme CSS file to be included.

Hope this helps?

[the-moog]

Hi,

Thanks for that, it did the trick.
I'll raise a bug with the authors of the Backery Demo stating that it diverges from the build in boilerplate of comtemporary Wagtail.
May be worth putting a note on your install notes if that sort of omision is common?