Theming has been a core component of Invision Community since its inception, and this continues with Invision Community 5, but in a very different way.
If you haven't already seen Ehren's blog on the new Theme Editor, please do take the time to watch it. The all-new theme editor reduces the complexity of theming by taking complex concepts like HSL CSS variables into a pretty slick UI that almost any Invision Community owner can use to personalise or brand match to any existing properties.
Ehren will talk more on the technology behind the theme editor in another developer blog soon, but the short version is that the CSS framework has been completely rewritten from scratch with a new approach to how CSS classes interact with page elements.
Of course, if you're reading this, you'll want to know what tools you have for more advanced theming in v5.
Custom templates and template hooks
Invision Community 5 merges the concepts of custom templates and template hooks into a single feature. In the past, you could edit templates directly and create theme hooks. With Invision Community 5, these features are replaced with the new custom template system.
You can create new templates, which you can use in other custom templates via the short tag: {customtemplate='key'}.Â
You can also hook into specific areas with a custom template allowing you to insert code before the opening tag, after the opening tag, before the closing tag or after the closing tag.
Â
For example, if you wanted to add something custom before the reply editor when viewing a topic, you would target that area like so:
The result, when viewed on the front end, is as follows:
These hookable areas are defined by a special tag that we add to the core templates. We would expect a lot of requests through the beta release and will likely create a request form so we can process them. We will try and accommodate as many areas as possible.
While direct template editing is no longer possible in Invision Community v5, the new custom template and hook system allows you to add new functionality, while the new CSS framework makes it easier to target and change elements without the need to edit templates.
We also added a suite of new development tools to enable you to target menus, data attributes and other areas where developers commonly had to edit templates before.
The good news is that now custom templates are not built on top of our 'master' template engine; they are virtually upgrade-proof and do not require manual merging.
Theme Designer Mode
Those who create themes for others have some extra tooling to enable them to build truly custom themes.
Even though the theme editor has space for custom CSS, there is always a need for CSS that your customers cannot edit, and Invision Community 5 has a special area for that once Theme Designer Mode has been enabled.
You also can add any ad-hoc javascript for when you want to hide elements or provide custom interactions.
As direct CSS editing and direct template editing are no longer possible with Invision Community 5, there is no need for a 'sync' tool to copy from the filesystem.
Conclusion
The new front-end theme editor is now the primary way to manage themes. This is where you upload logos and toggle settings.
As you can see, theming may look different in Invision Community v5. Still, the new custom templates, theme designer tools and UI extensions provide a lot of functionality that means you can do nearly everything you did in v4, but often in an easier way.
I'm sure you'll have many questions, so please add them below, and we'll do our best to answer them for you.
Recommended Comments