Mapping custom themes to UI

As you plan your customizations, their scope will mean a lot. Do you want the changes to be seen across the UI, only in a particular community, or only in selected patches of the UI reached by certain URLs? You use scope to map your custom themes to the UI so you can test your changes. Without this mapping, it won't be possible to really see how things are shaping up. The scope decisions are built on your design goals.

Overview

If you're making more than just a few minor changes, you may find it's useful to think in terms of UI boundaries. Will your changes impact certain kinds of content or certain communities, or certain content in certain communities? Your conceptual decision related to UI boundaries translates into implementation decisions about themes and their mappings.

You should group your change ideas into batches that correspond to the UI globally, or to communities, or to specific URLs. Then create custom themes corresponding to those groups, add custom templates to the themes, and map the themes to the UI scope you defined.

Template hierarchy

Jive applies custom templates by using the hierarchy in which more specific levels override broader ones.

The precedence from specific to general is URL > Community > Global, as described here:

  • If you map a theme to a particular URL, templates in that theme are the only customization used for UI at that URL. All templates from themes mapped to a containing community or from global themes are ignored.
  • If you map a theme to a particular community, templates in that theme are used unless you've mapped a URL-specific theme in the scope of that community. Templates in a global theme are ignored.
  • If you make the theme the global theme, its templates are used except in any part of the UI where you've mapped a community- or URL-specific theme.

Global

You should make a theme the global theme when you want its templates to impact UI across the application. Note that if you separately customize those same templates in themes that are mapped to communities or URLs, those more specific mappings take precedence.

The word "global" is used in the path names for some templates. The name doesn't mean that the templates are always applied globally, but rather than they guide UI that's not specific to certain content types. A "global" template is applied only to the parts of the UI its containing theme is mapped to.

Mapping to community

You should map a theme to a community for community-specific look and feel. By using custom templates for blogs, communities, or discussions, you can have those content look like they belong together in a particular community. "Global" custom templates guide the look of their UI elements only in that community.

Note that if you separately customize those same templates in themes that are mapped to URLs, the more specific mappings take precedence.

Mapping to a URL

Mapping a theme to a URL is a way to customize very specific parts of the UI, such as blogs or user profiles (or even just one person's blog and profile).

When specifying the URL to map to, you can use regular expression syntax. For example, a dot (.) means "any character" and an asterisk ( * ) means "any number of characters."

For example, blog URLs follow this form:
<context_root>/blogs/<blog_name>/<post_year>/<post_month>/<post_date>/<post_title>
The following would map a theme to "any blog posts from 2010":
.*/blogs/.*/2010.*

You should fill a theme with custom templates that guide blog appearance, along with some cross-content UI, then map that theme to this URL to call out content in blog years.

Here are a few more examples in which the instance root is merely "community".

  • All blogs: This reads as "any number of any characters followed by 'community/blogs' followed by any number of any characters."
    .*community/blogs.*
     // Or more universally:
     .*blogs.*
  • Just the blogs main page: This reads as "any number of any characters followed by 'community/blogs' and nothing else."
    .*community/blogs
     // Or more universally:
     .*blogs
  • A specific user's blog: This reads as "any number of any characters followed by 'community/blogs/gladys' and any number of any characters." In other words, this maps to all posts in Gladys' blog.
    .*community/blogs/gladys.*
     // Or more universally:
     .*blogs/gladys.*