Jump to content
Matt

By Matt

 Share

IC5: Theme Tools

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.

Could contain: File, Webpage, Computer, Electronics, Pc, Text

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:

Could contain: Page, Text, File, Computer Hardware, Electronics, Hardware, Monitor, Screen

The result, when viewed on the front end, is as follows:

Could contain: Text, Person, Head

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.

Could contain: File, Page, Text, Computer Hardware, Electronics, Hardware, Monitor, Screen, Webpage

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.

Could contain: File, Webpage, Computer, Electronics, Pc, Text

 Share

Comments

Recommended Comments

opentype

Real-world example:
for my many Pages databases, the output of the database relationship field as comma-separated list is usually insufficient, so I would replace what’s in cms -> front -> global -> basicRelationship and add record images, grid views and so on. How would I do that now? From what I understand from the article, I would only be able to add stuff at dedicated locations, not replace anything. 

Edited by opentype
Link to comment
Share on other sites
TSP

A few questions at the top of my mind, I'll probably have some later too. 

Currently I've made a shared core theme where all our customizations for five different forum installations are. So the HTML, Javascript and CSS is kept the same, but some different output, logic and elements are displayed or utilized based on logic that depends on the value in custom theme variables. 

  • I assume there is still some tool to export and import/upgrade custom templates and template hooks? Having to log in to each admin panel and define all these custom templates and hooks would be a pain.
     
  • Is custom theme variables still a thing and accessible within these templates? And will theme variables that have been modified on the installation be reset or kept upon upgrade/import of a theme?
     
  • Will the same variables and functions we have available to us when making a template hook today be available to us from these new custom templates and hooks? I realize the names of methods, how you may invoke them, template logic etc., will be different, but my point is; will all the variables and functions that can be used in the template we hook into be available to us? 
Link to comment
Share on other sites
  • Management
Matt
  • Management

Pages is its own thing, I'd imagine more complex templating for databases will be retained for that.

1 minute ago, TSP said:

I assume there is still some tool to export and import/upgrade custom templates and template hooks? Having to log in to each admin panel and define all these custom templates and hooks would be a pain.

Yes, theme export still works as you'd expect containing theme editor settings, any custom CSS from the admin and any designer CSS/JS.

 

2 minutes ago, TSP said:

Is custom theme variables still a thing and accessible within these templates? And will theme variables that have been modified on the installation be reset or kept upon upgrade/import of a theme?

Yes, they are retained. The default theme does not have any custom settings, so the tab isn't shown.

2 minutes ago, TSP said:

Will the same variables and functions we have available to us when making a template hook today be available to us from these new custom templates and hooks? I realize the names of methods, how you may invoke them, template logic etc., will be different, but my point is; will all the variables and functions that can be used in the template we hook into be available to us? 

Yes, you can use existing template syntax in the custom templates.

Link to comment
Share on other sites
TSP

Yeah, I have to say I'm also worried about ad placement. We need a lot of control over how and where they are included. For example we have some ads which should display as a "horseshoe" around the content. To achieve this currently we have our own wrapper class around the necessary elements etc. 

Also, from looking in the video from Ehren there is a lot of settings to control and clicking into all sorts of menus with settings. Will there be some way to control it by editing a json file instead for example? That would make it easier and faster for many of us frontend and backend programmers to copy theme settings between different installations etc. Essentially what I'm asking for would be a "source mode" for the theme editor settings view on the frontend.

Edited by TSP
Link to comment
Share on other sites
Esther E.
3 hours ago, TSP said:

Yeah, I have to say I'm also worried about ad placement. We need a lot of control over how and where they are included. For example we have some ads which should display as a "horseshoe" around the content. To achieve this currently we have our own wrapper class around the necessary elements etc. 

Current goal with ad placement is to implement additional locations where they make sense, and to make the existing ad locations a little more flexible. That said, we're open to suggestions. Can you elaborate on what your custom ads look like? 

Link to comment
Share on other sites
  • Management
Matt
  • Management
10 hours ago, TSP said:

Yeah, I have to say I'm also worried about ad placement. We need a lot of control over how and where they are included. For example we have some ads which should display as a "horseshoe" around the content. To achieve this currently we have our own wrapper class around the necessary elements etc. 

Also, from looking in the video from Ehren there is a lot of settings to control and clicking into all sorts of menus with settings. Will there be some way to control it by editing a json file instead for example? That would make it easier and faster for many of us frontend and backend programmers to copy theme settings between different installations etc. Essentially what I'm asking for would be a "source mode" for the theme editor settings view on the frontend.

Those aren't theme settings as you're used to, those are CSS variables and are exported along with the theme, so you can just export/import the theme between installations.

Link to comment
Share on other sites
Jimi Wikman
On 10/19/2023 at 4:46 PM, opentype said:

Real-world example:
for my many Pages databases, the output of the database relationship field as comma-separated list is usually insufficient, so I would replace what’s in cms -> front -> global -> basicRelationship and add record images, grid views and so on. How would I do that now? From what I understand from the article, I would only be able to add stuff at dedicated locations, not replace anything. 

I think this is a very important question, and it seems to have been left without an answer?

I also do a lot of changes to the core functionality when playing around with the templates, and I would like a run-down on how we will work with Pages specifically in the new editor?

Link to comment
Share on other sites
Jimi Wikman

@Matt@Ehren I have not seen anything about Pages yet. Is that because you are saving the best for last? 😉

Will these template changes also impact templating for Pages, and if so, could you show a little of how that would work? For example, how do we create templates from when we link databases and how we can customize forms?

Link to comment
Share on other sites

Invision Community © 2024 IPS, Inc.
×
×
  • Create New...