Customizing UI Page Structure

Customizing UI Page Structure

You can change the structure of a page by customizing the /template file that the page is rendered from. A theme file defines the arrangement of UI elements on a page (or a section of a page), along with the data displayed on the page. The custom template is part of a theme that you map to the user interface.

When adding custom templates to a theme, be sure you're picking a theme that is (or will be) mapped to the part of the UI you want to affect. For more information, see Mapping Themes to the UI.

  1. Identify the part of the UI that you want to customize, then identify the theme file that corresponds to it.
  2. Create or edit the theme that will contain the custom template.
  3. Under Create Custom Template, select the theme file you're going to customize, then click Create Template.
    Note: As with the CSS template, the application will copy your saved template to the <jive.instance.home>/themes/<theme_name> directory of your installation. You can edit the theme file in the Admin Console, of course, but you'll most likely find it easier to edit in an editor that is designed for code (such as an HTML editor).
  4. Make changes to your custom template. The following code takes a blog post title from elsewhere in the page and moves it so that the title follows the blog name.

      screen_edit_template_code.png

  5. If you haven't already, map the theme that contains the custom template to the user interface. This example maps the theme to a URL in order to have it effect all blogs (which aren't contained within a community).
    screen_map_theme_url.png