In this Article

In Telligent Enterprise 3.0, you have the options to customize pages, headers, and footers.

Telligent Enterprise includes built-in tools to allow you to customize the user interface of an existing theme to meet the unique needs of your community without any need for custom development. We provide an overview of the customization tool set and then walk you through the step-by-step instructions for customizing each area of your theme.

    Customization overview

    In this section, we introduce you to:

    Two customization levels

    We provide two levels of access to customizations:

    1. Page-level customization - Individual pages can be customized by authorized users using customization mode to add, edit or delete tabs; customize individual page or tab layouts; and add, edit, delete or configure individual widgets. When configured, these changes can be exported and imported for sharing or version capturing.

    2. Site-wide customization - Administrators can use the administrative edit mode to configure all pages of a theme and set defaults that will be used by all users. Additionally, administrators can set theme-wide configuration options within the Control Panel to adjust settings such as layout width (static or fluid), branding, and navigation options.

    How to enter Edit mode

    Telligent Enterprise includes a rich, widget-based editor for all public-facing pages. Edit mode can be entered via the Edit Page button.

    Telligent Enterprise (Evolution2 theme)

    Users with permissions to edit the current page or theme can click Edit Page, which opens the edit mode to enable page layout editing and easy navigation between configurable pages within the current theme and theme type.

    When in edit mode, you see the editing panel from which you can drag and drop new widgets onto the page or adjust the page layout.

    Telligent Enterprise (Evolution 2 theme)
    <

    As a site theme administrator (who has been granted Site - Edit Site Theme permission), when in edit mode, you have additional options shown in the administration bar at the top of the page.

    1. Import/Export - Export a page file as an XML file, or import a file for this page.
    2. Select page - Choose which page you want to edit if it is different from the page you were on when you entered edit mode. With this option, you can edit the layout of pages you cannot easily navigate to (e.g., the login/logout pages and user registration pages).
    3. Save page gives you options to;

      • Save contextually for  only the current user, blog, forum, or wiki
      • Save as the new default version, don't apply as the new default version - meaning existing modifications will not be overwritten, but new pages for this context will use the default layout you're saving
      • Save as the new default version, apply the new default to all (in the context) - meaning all existing pages (such as all blogs), including those with modifications, will be overwritten with this default.
    4. Cancel - Leave edit mode to return to regular viewing mode. If you do not save anything prior to clicking this link, you will lose any work you've done on the layout of the page. (In this way, it acts as a Cancel link.)
    5. Edit header - Use this link to add, remove, or relocate the widgets in Telligent Enterprise's header - including the navigation,search, and logo (or other content).
    6. Edit footer - Use this link to add, remove, or relocate the widgets in Telligent Enterprise's footer - such as a logo file you want to place at the bottom of the page, or the User- Hover widget.

    Configure tabs

    In Telligent Enterprise 3.0, navigation tabs are configured using the User - Navigation Widget or Navigation - Custom widget.

    Change basic page layout

    When in edit mode, you can change the layout of page to one of many standard page layout options by clicking Change page layout.

    We show you a graphical representation of the different layouts and allow you to scroll through all that are available.

    To change the page layout, click the image that resembles the layout you want to use. When you change the page layout, Telligent Enterprise will intelligently determine where to place widgets. For example, if you switch from a right sidebar layout to a left sidebar layout, the widgets in the right sidebar will be moved to the left sidebar, with the widgets in the main column staying in the main column. If you switch from a layout with both sidebars to a left sidebar layout, those widgets in the right sidebar will be moved to the bottom of the left sidebar. Be sure to save the changes prior to navigating to another area of your community.

    Use widgets to define the content on the page

    You can customize a page by adding and removing widgets to and from the page layout, and by moving and reordering widgets on the page. To customize a page:

    1. Enter Edit mode.

    2. The widgets available to you to add to your page are displayed in a scrollable list at the top of the page. The list of widgets to choose from is determined by the page's location (dashboard, group, blog, or user) and the widgets allowed for that area of the site. The list of available widgets in each area is configurable by administrators. Up to twelve widgets are displayed at one time and if more are available, the arrows to the left and right of the list may be used to scroll to other widgets.

    3. You can filter the widget list using the search box.

      1. Navigate within the Control Panel to Site Administration > Site Content > Site Theme.
      2. To implement a fixed-width layout for your community, set Maximum Width, Minimum Width, and Width to the same value (e.g., 960 px).
      3. To implement a fluid width layout for the site, use different values for Maximum Width and Minimum Width and a percentage-based value for Width.
        For example:
        • Maximum Width: 1600px
        • Minimum Width: 940px
        • Width: 90% (the percentage of the window's width that should be used for the layout with respect to the maximum and minimum width)
        Additional parameters you can change include:

      Add a widget

      To add a widget to the current page or tab, click and drag the widget from the widget list to the desired location on the page. An outlined box will appear under the mouse indicating where the widget would be placed when dropped.

      Format widget header or border presentation

      You can format the border display of any widget with one of several options by clicking the Formatting icon on the widget toolbar.

      Option Displays...
      Full Border Full border around the widget, but without the widget's header/title.
      Full Border (with Header) Full border around the widget and includes the widget's header/title.

      Top and Side Borders Only

      		 Borders along only the top and both sides of the widget and excludes the widget's header or /title. This mode is useful when combining multiple widgets together. (Use this format for the top widget in the combination.)
      Top and Side Borders Only (with Header) Borders along only the top and both sides of the widget and includes the widget's header or title. This mode is useful when combining multiple widgets together. (Use this format for the top widget in the combination.)
      Side Borders Only Borders only on the sides of the widget and excludes the widget's header or title. This mode is useful for widgets between the top and bottom of a grouping of similar widgets.
      Side Borders Only (with Header) Borders only on the sides of the widget and includes the widget's header or title. This mode is useful for widgets between the top and bottom of a grouping of similar widgets.
      Side and Bottom Border Only Borders only on the sides and bottom of the widget and excludes the widget's header or title. This mode is useful for the bottom widget in a grouping of similar widgets.
      Side and Bottom Border Only (with Header) Borders only on the sides and bottom of the widget and includes the widget's header or title. This mode is useful for the bottom widget in a grouping of similar widgets.
      No Wrapper with No Spacing No border or additional spacing around the widget and displays no header or title. This mode is useful for rendering raw content.
      No Wrapper with No Spacing (with Header) No border or additional spacing around the widget, but displays the header or title. This mode is useful for rendering raw content.
      No Wrapper with Spacing No border or header or title, but applies the regular or configured widget spacing. This mode is useful when rendering custom content.

      No Wrapper with Spacing (with Header)

      		 No border, but applies the regular or configured widget spacing and displays the header or title. This mode is useful when rendering custom content.
      No Wrapper with Extra Spacing No border or header or title, but includes extra spacing. This mode is useful when rendering only a single widget on a page.

      Set fixed-width or fluid layout

      The theme included in Telligent Enterprise supports both fluid and fixed width layouts. Fixed-width layouts do not allow the theme components to expand beyond a specific width, whereas fluid layouts allow the theme components to expand to a specified maximum width and keep borders per a specific percentage of the window area. Note: Internet Explorer 6 does not support minimum and maximum widths and will only honor the value specified for Width.

      Add custom styling

      Telligent Enterprise 3.0 allows you to completely customize HTML headers and formatting; media settings and CSS, and to add supplementary files and preview the changes. For in-depth information about these, options, see the Developer wiki.

      Customizations are deployed and active for all affected users as soon as you save the changes. You can, however, stage and review changes before deploying using a staging environment. Configure a single Web instance of your community (using Telligent Enterprise) that accesses a backup of the production database. Test and review customizations in that staging environment before deploying those theme-related changes to the production environment via export and import. In the case of site and application themes, you can also preview your theme changes using the Preview tab.

      Type Location to export/import Description
      Default theme changes Control Panel Dashboard: Site Administration > Site Content > Manage Themes
      Site theme changes Control Panel Dashboard: Site Administration > Site Content > Site Theme
      User theme changes N/A Affect only the accessing user and do not require the staging of changes
      Group theme changes Control Panel Dashboard: Site Administration > Site Content > Manage Themes, or Control Panel Dashboard: My Groups > [group] > Configure > Themes.
      Blog theme changes Control Panel Dashboard: Site Administration > Site Content > Manage Themes, or Control Panel Dashboard: My Groups > [group] > Configure > Themes.

      Without a staging environment, you can stage certain types of theme changes by using a staging-specific blog or group.

      Limitations

      If customization efforts require any of the following, a new or edited physical theme will be required:

      In Telligent Enterprise 3.0, all themes are self-contained in importable and exportable files instead of residing partially in configuration files.

      Although physically modifying theme files will increase the effort required to upgrade to future versions of  Telligent Enterprise, you can physically create or edit themes while minimizing upgrade effort.