In Telligent Enterprise 4.0, the default theme is Enterprise. The Review Appeals button is also added to the admin bar for those users granted the Group - Manage Abuse permission (which is part of the Abuse social service).
When editing a header or footer, an import header or import footer button appears depending upon the context. You can define whether or not a widget has a header (title) in the UI instead of having to modify the web.config. Support has been added for defining widget wrapping formats within themes.
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:
Page customization
We provide administrators or users with the appropriate permission (such as Site - Customize Dashboard) the ability to customize the layout, widgets, and content of a page. Individual pages can be customized to add, edit or delete tabs; change individual pages or tab layouts; and add, edit, delete or configure individual widgets. The layout can be exported or imported for sharing or version capturing.
How to enter Edit Page mode
Telligent Enterprise includes a rich, widget-based editor for all public-facing pages. Edit Page mode can be entered via the Edit Page button.
Telligent Enterprise, Enterprise theme Edit Page button
Users with permissions to edit the current page or theme can click Edit Page, which opens the Edit Page mode to enable page layout editing and easy navigation between configurable pages within the current theme and theme type.
When in Edit Page 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, Enterprise theme - widgets in Edit Page
As a site theme administrator (who has been granted Site - Edit Site Theme permission), when in Edit Page mode, you have additional options shown in the administration bar at the top of the page.
- Select page - Choose which page you want to edit if it is different from the page you were on when you entered Edit Page mode. With this option, you can edit the layout of pages you cannot easily navigate to (such as the login/logout pages and user registration pages).
- Revert to default - Enables you to revert to the default theme.
- Import/Export - Exports a page layout as an XML file, or imports a file for this page.
- Save pagegives you options to:
- Save for this user only - (At site level) Save changes for the current user only.
- Save for this group only - (At the group and application level) - Save changes contextually for the current group.
- Save for this blog only - (At the specific blog and blog post level) - Save changes contextually for the current blog.
- Apply the new default to all users - All existing pages, including those with modifications, will be overwritten with the default you're saving.
- Cancel - Leave edit page 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.)
- 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).
- 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.
In Telligent Enterprise 4.0, navigation tabs are configured using the Site - User Navigation Widget or Navigation - Custom widget.
Change basic page layout
When in Edit Page mode, you can change the layout of page to one of many standard page layout options by clicking Change page layout.
Telligent Enterprise displays 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 or by moving and reordering widgets on the page. To customize a page:
-
Enter Edit Page mode. The widgets available to you to add to your page are displayed in a scrollable list at the top of the page and are determined by the page's location (such as Dashboard, group, blog, or user). Note that the administrator can also determine which widgets are available in a theme, such as blog, group, site, or Dashboard. The arrows to the left and right of the list may be used to scroll to view other widgets.
-
You can filter the widget list using the search box.
- Navigate within the Control Panel to System administration > Site administration > Site content > Site theme.
- To implement a fixed-width layout for your community in the theme's Layout tab, set Maximum Width, Minimum Width, and Width to the same value (such as 960 px).
- 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:
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.
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. Fluid layouts allow the theme components to expand to a specified maximum width and keep borders per a specific percentage of the window area.
Add custom styling
Telligent Enterprise 4.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.
Recommended staging and deployment strategies
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: My Groups > [group] > Configure > Themes. |
|
| Blog theme changes |
Control Panel Dashboard: My Groups > Blog administration > [blog] > Configuration > Default Presentation. |
|
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 4.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.