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:

   coderedcms/coderedcms/settings.py

   Line 127 in 67871b2

   'FRONTEND_TEMPLATES_BLOCKS': {

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: #476 (comment)

[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.