Bug when theme and framework is customised

[marksweb]

So I've got a theme from bootstrap so what I want to do is override the templates to ensure they're using the right markup from this theme.

Having thought about how to do this, I'm using a theme app and then naming the framework after the theme name. This should allow additional themes to be added to the theme app.

DJANGOCMS_FRONTEND_FRAMEWORK = 'around'  # Bootstrap theme
DJANGOCMS_FRONTEND_THEME = 'themes'

However this then results in this stacktrace;

  File "/Users/mwalker/Sites/consoles/djangocms_frontend/settings.py", line 72, in <module>
    framework_settings = importlib.import_module(
  File "/Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/importlib/__init__.py", line 127, in import_module
    return _bootstrap._gcd_import(name[level:], package, level)
ModuleNotFoundError: No module named 'djangocms_frontend.frameworks.around'

So it looks like the following setting needs to change;

framework_settings = importlib.import_module(
    f"djangocms_frontend.frameworks.{framework}"
)

[fsbraun]

Use

DJANGOCMS_FRONTEND_FRAMEWORK = 'bootstrap5'  # Theme is based on Bootstrap 5 as opposed to Bootstrap 4
DJANGOCMS_FRONTEND_THEME = 'around'  # or 'around_theme' 

Important: The theme name is also the name of an app to be present in INSTALLED_APPS.

[fsbraun]

For the time being, I might add a ImproperlyConfigured error if DJANGOCMS_FRONTEND_FRAMEWORK is different from bootstrap5.

[marksweb]

@fsbraun This screenshot better illustrates what I've built based on the above settings;

I may have missed or misunderstood something, but importing any mixins is done from the framework_settings path, I think. So in the above image you can see I'm importing my render mixins to reference custom templates which will utilise my bootstrap theme.

Until I'd made the above changes, I wasn't seeing my templates being loaded instead of the defaults.

[fsbraun]

@marksweb I'm afraid, if you want to extend djangocms_frontend based for a Bootstrap theme you will have to keep DJANGOCMS_FRONTEND_FRAMEWORK = 'bootstrap5' (or rather not set it at all). Otherwise you will first have to reimplement each(!) component for your framework in djangcms_frontend itself.

To have alternative templates rendered, the easiest way is to create a RenderMixin in themes/frameworks/bootstrap5.py which declares a new render_template, e.g. render_template = "djangocms_frontend/around/accordion.html".

If your theme only requires the addition of classes, the proper way is to have a render method that calls instance.add_classes. The reason is that HTML allows not more than one class attributes and that is controlled by the instances attributes field and render method.

The rule of thumb should be: Only replace templates if they have to be structurally different (more nested divs) otherwise use the render method to tweak attributes of the existing plugin.

If you can share an example template (accordion, alert, just pick one) I can maybe see what type of change the theme requires and offer an opinion on how to implement the easiest way.

[fsbraun]

@marksweb I just had a look at the around docs and to me it seems that at least for accordion and alert you will only need to load the theme's css and you'd be fine with the existing templates. Or am I missing something?

I have only glanced at it but to me it seems that you only might want to extend djangocms_frontend for:

• card-hover (checkbox or simply add the class in the extended settings tab)
• Portfolio/team components (as new components or card extensions?)
• Around carousel (it seems to be independent of Bootstrap 5, I'd suggest a separate component and removing contrib.carousell from INSTALLED_APPS)
• Charts (new component)
• Contact cards (new component)
• Frame (new component based on container)
• Gallery (new component)
• Parallax (new component)
• Testimonial (new component)

Some elements are just bootstrap 5 templates (e.g., the pricing component).

[marksweb]

@fsbraun You're not missing anything. From what I've seen, all the templates are the same and I'm just figuring out what classes should be added for the theme and also what media is needed.

I was just using this to understand how things might be done. I'll re-implement & close this 👍