Customizing UI Page Structure

Document created by steve222 on Sep 10, 2008Last modified by steve222 on Mar 17, 2009
Version 13Show Document
  • View in full screen mode

You can change the structure of a page by customizing the Freemarker FTL template file that the page is rendered from. An FTL 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 FTL file that corresponds to it.
  2. Create or edit the theme that will contain the custom template.
  3. Under Create Custom Template, select the FTL 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 FTL 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

    Before

    screen_blog_change_before.png

    After

      screen_blog_change_after.png

Attachments

    Outcomes