Official theme support

[vsalvino]

We already have the basis of a framework for 3rd party themes. But I think a good step would be actually trying to create an example 3rd party theme, documenting how this is done, and making whatever changes would be necessary in the cms to support this. The first example could be simple, still based on Bootstrap. It is possible to build a theme that swaps out bootstrap for something like foundation, materialize, skeleton, etc., but that is a task for a different day.

Requirements for the theme would be:

• Custom templates that override coderedcms templates
• Custom page and block templates in addition to coderedcms templates, utilizing the Layout or Adv Settings > Template chooser dropdown.
• Custom css and js added to base.html, to show how to properly do that.
• MAYBE some extra blocks or models that are part of the theme, to show how to integrate those into the cms as well.

The theme itself should be a separate pip package. But docs and any enhancements to support theming should be integrated into the CMS.

Theme support is currently possible, but is partially blocked by issues #8 and #56

[hayleyhartman]

Beans this one seems pretty simple but definitely different from bootstrap and has been used to make a lot of different looking designs https://www.getbeans.io/showcase/ https://github.com/Getbeans/Beans

Openstrap Looks significantly different from bootstrap in the nav bar area, seems to be pretty multi-purpose https://www.opencodez.com/free-themes/openstrap https://github.com/pavansolapure/openstrap

StartBootstrap Creative This one is the most polished and modern looking I have seen so far and would probably require little restyling when we're implementing, I could also see a client wanting to implement this theme off the bat because it does look and function really nice. https://startbootstrap.com/themes/creative/ https://github.com/BlackrockDigital/startbootstrap-creative

StartBootstrap Agency Also pretty polished and modern looking and looks like the components on there are significantly different from standard bootstrap components. I could also see clients wanting to use this theme out of the box, it looks really nice. https://startbootstrap.com/previews/agency/ https://github.com/BlackrockDigital/startbootstrap-agency

[vsalvino]

Nice finds, the StartBootstrap themes are kind of what I was picturing. Although I wouldn't mind finding themes/templates that look less bootstrap-y, such as some of the designs at https://html5up.net/ Granted, many of those are limited one-pagers - but I'd be open to us extending or interpolating those designs to fit within our bootstrap + coderedcms layouts.

We would mainly need to provide nice themed defaults for these layouts:

• Hero Units / cover images
• Cards (ideally a couple different styles of cards)
• Article Landing Page
• Article Page
• Potentially, a pre-built layout for the home page (i.e. dummy content that gets pre-populated after installing the theme). Basically every theme out there already provides dummy content though.

[esandorfi]

Could you tell us a best pratice code for rel 0.16 to add our own page templates (in ArticlePage class) ? It looks I need to add my own list from DEFAULTS in the coderedcms\settings 'FRONTEND_TEMPLATES_PAGES'... Is it the way ? Same for blocks ?

[vsalvino]

@parleweb That feature is sort of "use at your own risk", because it is a bit buggy still, which is why it is not documented.

However, here is how you can do it:

1. Create a template (e.g. website/templates/website/pages/custom_articlepage.html which is a copy of one of our page/block templates at https://github.com/coderedcorp/coderedcms/tree/master/coderedcms/templates/coderedcms

2. Modify the template as needed.

3. In your settings (base.py), add CODERED_FRONTEND_TEMPLATES_BLOCKS= or CODERED_FRONTEND_TEMPLATES_PAGES= which is a copy of: https://github.com/coderedcorp/coderedcms/blob/67871b2bd871d6f76613f297666a468894bd6a4b/coderedcms/settings.py#L127

4. Add an entry to that list named the same as your model name e.g.:

   "articlepage": ("website/pages/custom_articlepage.html", "My custom article"),

   Or name it "*" if you want it to be available to all page types (not recommended).

~5. IMPORTANT!!! Now run python manage.py makemigrations website. It is important that you only run makemigrations with specific apps, NEVER RUN a catch-all python manage.py makemigrations, otherwise it will trigger a migration problem and could create a lot of headache on your site.~

5. Now run python manage.py makemigrations and python manage.py migrate. Edit: crossed out notes above are no longer relevant as that issue has been fixed in recent releases.

6. You can now toggle the template on any ArticlePage in the wagtail admin.

We are stilling working on making this process easier and more stable, and it is one of the biggest blockers to having true theme support. Use at your own risk, hope it helps.

---

Edit: Additional comment / instructions here: https://github.com/coderedcorp/coderedcms/issues/476#issuecomment-1152672614

[thenewguy]

It would really be cool if the SASS variables were exposed somehow in the dashboard and you could "visually" modify the theme.

Perhaps using a inheritance approach where the theme can be picked for a site and also for pages

[autoferrit]

I was just curious what the current status on this was. So far what I have done is to create a root directory theme folder and make sure it is included in settings. And just copy any admin/wagtail/codered templates I need to override. But that is also forcing me into only that one theme.

Is the above workaround the recommended workaround for now? Has there been any updates on #8 ?

I appreciate the work you guys do! I am trying to learn it more but I don't think I'm familiar enough to contribute to this yet.

[vsalvino]

@autoferrit you have the right idea by creating a theme django app containing override templates. Our end approach will be something similar to that.

On this issue and also on on #8, not much has been implemented so far. Normally for these big feature to get implemented we either need a sponsor/client, or a volunteer who is willing to spend personal time usually at a sprint. For this reason we still have the project in "beta" status until some of those blocking issues are implemented.

Development tends to ebb and flow based on our project load of new website projects we are doing internally at CodeRed. It will get there slowly but surely 🙂 On a related note we will most likely be sprinting at PyCon US for a day or two - all are welcome to join.

[safaci2000]

@vsalvino What I would love to see is have the ability to choose a page Type and site and assign it a default theme. You can i suppose have the theme as an option every time you make a post but that seems overkill. I imagine you're not likely to want a page to have more then one theme and if you do you probably want to extend the model.

I was working on doing this in wagtail for my current impl, but I'd love to see codered have this built in.

Just my 2 cents.

[vsalvino]

Theming would definitely be site-wide (not sure how to handle multi-site yet). However on each page you can select the individual template (this works today with the instructions a few posts above). And in the settings we would have the ability to select a theme variant (think of it like a sub-theme, such as variants for a side menu versus a top menu, etc.). Right now the theme variant selects from bootswatch themes, but the idea is to make this customizable. This is all a very similar approach as WordPress has, which I think works well.

What we need to do is to fix issue #56 which will then open up many possibilities. #8 is also loosely related to #56 which is what causes potential problems with migrations and will also be required for good theme support (e.g. custom blocks and models in your theme that hook into coderedcms).

So... making things dynamic in Wagtail is hard and will be somewhat time consuming. These are definitely our largest issues. I'm somewhat hopeful that our upcoming CodeRed.cloud service might spur additional interest in coderedcms which will help fund development.

[autoferrit]

I am also interested in this because I want to use a css framework other than bootstrap. Tailwind, probably using django-tailwind which means i would also have to re-style all the blocks/components.

For you above suggestion about templates, would it make sense to override the makemigrations/migrate commands to not allow a catch all usage to make the dev specify an app and provide an error?

[joeyjurjens]

It would really be cool if the SASS variables were exposed somehow in the dashboard and you could "visually" modify the theme.

Perhaps using a inheritance approach where the theme can be picked for a site and also for pages

I think this would be a great option in for example the layout settings (or just django settings). I think however, that bootstrap will have to be loaded as SCSS instead of CSS here.

This way, you can easily change the site's "theme" by simply re-setting the bootstrap "primary" and "secondary" color. I know this isn't exactly a theme, but you can match the brand's colors easily with assigning bootstrap variables.

The entered variables will then retrieved by a custom SCSS function using: libsass-python

See for example the bootstrap variables, you could change all those to your liking and you can create a whole different look by just changing these.

I could work on something like this, though I'd have some questions if this seems like something you guys do like.

Let me know :)

[mwort]

@vsalvino Thanks for those 6 steps to add a new template to page layout settings ^^. I step 5 was not necessary for me anymore (No changes detected in app 'website') and the custom templates don't seem to work with page previews. When I hit "Preview" in the Wagtail editor, I get redirected to the edit page again (page closes again). Preview works with the default template.

[vsalvino]

@mwort is it possible your preview error is related to discussion in this thread? https://github.com/coderedcorp/coderedcms/issues/262#issuecomment-742804565

[mwort]

I don't think so. I was referring to the admin editor preview (button next to Save draft) that opens a new tab. I'm not getting any errors either, just:

[13/Jan/2021 00:43:48] "POST /admin/pages/19/edit/preview/ HTTP/1.1" 200 19
[13/Jan/2021 00:43:49] "POST /admin/pages/19/edit/ HTTP/1.1" 302 0
[13/Jan/2021 00:43:55] "GET /admin/pages/19/edit/ HTTP/1.1" 200 1218037

The page is published and it works if I choose one of the default (*) templates.

On 12 Jan 2021, at 23:59, Vince Salvino notifications@github.com wrote:

@mwort https://github.com/mwort is it possible your preview error is related to discussion in this thread? #262 https://github.com/coderedcorp/coderedcms/issues/262 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/coderedcorp/coderedcms/issues/44#issuecomment-759090752, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB6KXMKHXIJSRCAAH2ISYNLSZTH4BANCNFSM4GJHGP6Q.

[vsalvino]

After the error happens and it redirects you back to the page editor, does it indicate any errors? Can you look in the Layout tab and see if there is a field error present under the template?

[mwort]

No, there are no errors in the console and the Layout tab does not show an error either. But I've dug a bit deeper and the form is not valid in the wagtail.admin.pages.PreviewOnEdit.post method and the form.errors gives this: {'custom_template': ['Select a valid choice. coderedcms/pages/page_blank.html is not one of the available choices.']}. Keep in mind that the template renders fine on the published page, only the preview doesn't work.

This seems to have something to do with the fact that I provided this template choice for a specific page type in the CODERED_FRONTEND_TEMPLATES_PAGES settings. If I put it into the * entry, the preview works.

[vsalvino]

Thanks for digging... I will see if I can replicate this behavior.

[msantoshk]

No, there are no errors in the console and the Layout tab does not show an error either. But I've dug a bit deeper and the form is not valid in the wagtail.admin.pages.PreviewOnEdit.post method and the form.errors gives this: {'custom_template': ['Select a valid choice. coderedcms/pages/page_blank.html is not one of the available choices.']}. Keep in mind that the template renders fine on the published page, only the preview doesn't work.

This seems to have something to do with the fact that I provided this template choice for a specific page type in the CODERED_FRONTEND_TEMPLATES_PAGES settings. If I put it into the * entry, the preview works.

@mwort you are right I am also facing this preview issue after adding custom template following the documentation. the custom templates work perfectly but when I edit a blog page and click on the preview is not showing any error but when I open it in a new tab it is showing a bad gateway.

[sebastian-muthwill]

I would like to add to this discussion that there is currently a law sue wave in EU/Germany because according to EU GDPR laws loading google fonts from the google API is not allowed because of data privacy issues.

That means the automatically loaded themes (that contain google fonts API) should be somehow customizable to avoid loading fonts from google API and serving them directly with the site.

Or even better, serving all necessary files like CSS, Fonts etc. directly via static.

I did a monkey patch for that here: #541

[chr-chr]

Keep in mind that the template renders fine on the published page, only the preview doesn't work.

This seems to have something to do with the fact that I provided this template choice for a specific page type in the CODERED_FRONTEND_TEMPLATES_PAGES settings. If I put it into the * entry, the preview works.

Have the same issue :/