Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Telligent Community 10.x
  • Verint Community
Telligent Community 10.x
User Documentation How do I customize the look and feel of my community?
  • Ask the Community
  • User Documentation
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • +Telligent Community 10.x User Documentation
  • Changing system terminology
  • Community and GDPR
  • How are wiki page editing conflicts handled?
  • How can I adjust what makes a thread popular within forums?
  • How can I administer available emoticons and emoji?
  • How can I allow members to customize their homepage/dashboard?
  • How can I allow users to delete their own accounts?
  • How can I change the requirements for requesting friendships?
  • How can I configure how members can join the site and their initial experience?
  • How can I control the RSS feeds that are provided for a blog?
  • How can I control the types and sizes of files that members can upload?
  • How can I control types, number, and total storage allowance for files in a media gallery?
  • How can I control whether forum thread and reply authors can edit or delete their own posts?
  • How can I control which actions members can perform on a blog?
  • How can I control which actions members can perform within a forum?
  • How can I control which actions members can perform within a media gallery?
  • How can I control which types of files can be embedded within forum threads and replies?
  • How can I customize messaging to new members?
  • How can I customize the content in aggregate blog RSS feeds?
  • How can I customize the content or delivery time of email digest?
  • How can I customize the fields available on members’ profiles?
  • How can I diagnose a problem or get help?
  • How can I enable a guest blogger on a blog?
  • How can I enable authentication via Windows / Active Directory (AD)?
  • How can I enable multiple members to manage a single blog?
  • How can I enable single sign-on (SSO) with another Microsoft .net-based website?
  • How can I enable single sign-on (SSO)?
  • How can I enable support for emailing to start or reply to a forum thread?
  • How can I enable visitors to authenticate through Facebook?
  • How can I enable visitors to authenticate through Google?
  • How can I enable visitors to authenticate through LinkedIn?
  • How can I enable visitors to authenticate through Live Connect?
  • How can I enable visitors to authenticate through Salesforce?
  • How can I enable visitors to authenticate through Twitter?
  • How can I enable visitors to contact the owners of a group?
  • How can I hide a member's forum posts from the community?
  • How can I identify abuse or SPAM within the community?
  • How can I impersonate a user to act on their behalf?
  • How can I include forum behavior in an external website?
  • How can I integrate my community with other websites and services?
  • How can I join a group?
  • How can I limit who or when someone can comment or trackback on a blog post?
  • How can I make a thread stick to the top of the thread list within a forum?
  • How can I manage blog posts with Open Live Writer (formerly Windows Live Writer)?
  • How can I mirror content from another blog or RSS feed?
  • How can I moderate tags within an application?
  • How can I move content from one area of my community to another?
  • How can I prevent SPAM accounts from being created using the ReCaptcha service?
  • How can I prevent spam content from being shown on my community?
  • How can I provide new members with a default set of friends?
  • How can I rebrand my community in an upgrade-safe way?
  • How can I render previews of documents (Word, Excel, PowerPoint, PDFs) in my community?
  • How can I require acceptance of terms of service before member registration?
  • How can I set the default theme and theme selection options for all blogs?
  • How can I set the default theme and theme selection options for all groups?
  • How can I show or require additional profile fields to be completed when members join my community?
  • How can I specify which types of member avatars are allowed and the default member avatar?
  • How can I split a forum thread into multiple threads?
  • How can I start or stop the job service?
  • How can I stop receiving updates from a forum thread?
  • How can I synchronize Active Directory (AD) groups with Telligent Community roles?
  • How can I uninstall the job service?
  • How can I use snippets within blogs to save time or reuse content when writing posts?
  • How can I use the REST API to automate data migrations or data modifications?
  • How can I write blog posts using email?
  • How do I add a community member?
  • How do I add an Achievement?
  • How do I add an idea to an ideation?
  • How do I add or upload a file to a media gallery?
  • How do I administer members?
  • How do I allow users to export their data?
  • How do I ask a question or start a discussion in a forum?
  • How do I automatically create a blog for each new member of the community?
  • How do I ban or disapprove a member?
  • How do I cancel an event in a calendar?
  • How do I capture a forum thread to a wiki?
  • How do I change my avatar?
  • How do I change the types of threads or thread answer and auto-locking configuration for a forum?
  • How do I chat with another member?
  • How do I compare wiki page revisions?
  • How do I configure email integration?
  • How do I configure Telligent Community to meet the privacy requirement of my locale?
  • How do I connect my community to my Verint Knowledge Management site?
  • How do I control the type and functionality of content that can be posted on my community?
  • How do I control types and sizes of files that members can upload?
  • How do I control whether members can post status messages within a group?
  • How do I control which Active Directory (AD) fields are synchronized and editable on member profiles?
  • How do I create a custom page within a theme?
  • How do I create a group?
  • How do I create a Knowledge Collection?
  • How do I create a wiki page?
  • How do I create an application?
  • How do I create an event in a calendar?
  • How do I create rules to automate my community?
  • How do I customize direct communication options such as email, notifications, and private messages?
  • How do I customize email sent from the community?
  • How do I customize the look and feel of my community?
  • How do I delete a blog post?
  • How do I delete a group?
  • How do I delete a Wiki Page?
  • How do I delete an application?
  • How do I delete an event from a calendar?
  • How Do I Deploy my Site to Microsoft Azure?
  • How do I edit a blog post?
  • How do I edit a file or URL in a media gallery?
  • How do I edit a forum thread or reply?
  • How do I edit a wiki page?
  • How do I edit an Achievement?
  • How do I embed custom forms in my community?
  • How do I enable moderation within a forum?
  • How do I enable moderation within a media gallery?
  • How do I enable visitors to contact me through my blog?
  • How do I export my data?
  • How do I get to the administration panel?
  • How do I get to the contextual management panel?
  • How do I implement single sign-on (SSO) with an existing authentication system using cookies?
  • How do I insert a poll into content?
  • How do I install chat support?
  • How do I install Telligent Community?
  • How do I lock a wiki page?
  • How do I manage advertisements in my community?
  • How do I manage comments?
  • How do I manage licenses?
  • How do I manage membership within a group?
  • How do I manage registrations for a calendar event?
  • How do I manage roles and permissions to control what members can do on the community?
  • How Do I Migrate My Existing File Storage to Azure?
  • How do I moderate a forum to move, split, merge, lock threads?
  • How do I moderate content a member creates?
  • How do I monitor the health of my community?
  • How do I preview UI changes in the community?
  • How do I register for an event?
  • How do I rename, change the avatar, or move a group?
  • How do I revert to a previous version of a wiki page?
  • How do I see download counts of files in a media gallery?
  • How do I send an ad-hoc mass email to community members?
  • How do I set the default timezone and date/time formats for my community?
  • How do I setup an about page for a blog?
  • How do I store some files in different locations than others?
  • How do I translate my community?
  • How do I update the status of an idea?
  • How do I upgrade Telligent Community?
  • How do I upgrade the user experience of my community?
  • How do I use the content editor?
  • How do I use wiki link syntax?
  • +How do I view reports?
  • How do I vote on ideas?
  • How do I write a blog post?
  • How does moderation and abuse work?
  • How does Telligent Community support mobile devices?
  • How does Telligent ensure the quality of Telligent Community?
  • How should I define groups and applications in my community?
  • How should I store user contributed media?
  • How should I support multiple languages on my community?
  • Release Notes
  • What are jobs?
  • +What are the system requirements?
  • What best practices should be followed when customizing the user interface?
  • What is a blog?
  • What is a calendar?
  • What is a forum thread?
  • What is a forum?
  • What is a gallery?
  • What is a group?
  • What is a hashtag?
  • What is a Knowledge Document?
  • What is a mention?
  • What is a theme?
  • What is a wiki?
  • What is an Achievement?
  • What is an activity stream?
  • What is an application?
  • What is chat?
  • What is document preview?
  • What is featured content?
  • What is friending and following?
  • What is ideation?
  • What is liking?
  • What is private messaging?
  • What is RSS?
  • What is the question and answer workflow in forums?
  • What type of video files can I embed in my community?
  • What types of videos can I embed in or attach to content?

How do I customize the look and feel of my community?

The look and feel of a community is fully customizable using drag and drop rearrangement to fully custom development and integration with external site and applications.

[toc]

Themes

User interface customization is based on the concept of themes. Themes define the visual organization and styling for the community user experience. To learn more about the components and purposes of a theme, see What is a theme?

Basic Editing

Editing themes is primarily handled within the management panels. To access the theme options,

  1. Go to Manage > Manage Site Theme (or Group Theme or Blog Theme).
  2. The available options for editing the theme are then presented. To edit the default version of a theme, select the Manage Default Site Theme (or Group Theme or Blog Theme) from the list of theme management options (note that the site theme does not have a default implementation). 
  3. Select Edit this Page. 

You are now viewing the page editor. Each widget on the header, page, and footer now includes a header. When you place your mouse over the header, you'll be given options to configure the widget (if it supports configuration), manage its responsive behavior (if the theme supports responsive reflowing), change the widget's format, and remove the widget from the layout.

Configuring a widget

When hovering over a widget, select the  option to configure the widget (not all widgets support configuration options):

Each type of widget exposes its own set of configuration options. In the screenshot, a Generic Content widget was selected for configuration, so the configuration form allows for the title, content, and style options to be defined. Some widget expose multiple sets of configuration options and, in those cases, a row of tabs appears at the top of the configuration form to enable switching between the different types of configuration options exposed by the widget.

When you're done making changes, click Save. Note that this has not committed any changes and other visitors to the community are not affected. The save is only to your current in-process edit of the page. The widget that you configured will have its preview updated to reflect your configuration changes.

Changing responsive behavior

If the theme supports responsive reflow behavior for small screens, the  icon in the widget toolbar will appear. Clicking it shows the options for responsive reflow behavior:

Select the behavior you'd like for this widget:

  • Always shown, Priority 1 in single column mode: The widget will be shown in the multi-column layout and single-column layout. When in single column layout, the widget will have a priority of 1 with respect to other widgets.
  • Always shown, Priority 2 in single column mode: The widget will be shown in the multi-column layout and single-column layout. When in single column layout, the widget will have a priority of 2 with respect to other widgets.
  • Always shown, Priority 3 in single column mode: The widget will be shown in the multi-column layout and single-column layout. When in single column layout, the widget will have a priority of 3 with respect to other widgets.
  • Only shown in single column mode: The widget is only shown in the single-column layout. It is hidden from the multi-column layout.
  • Hidden in single column mode: The widget is only shown in the multi-column layout. It is hidden in the single-column layout.

For more details on responsive reflow and mobile support, see How does Telligent Community support mobile devices?

Changing the widget's format

A widget's format is a theme-defined list of options controlling how the widget should be styled, selecting the  option shows the list of formats:

Select the format for the widget from the available options. For the default theme, these options are:

  • No Border with No Spacing: The widget will have no borders and no spacing between itself and the widgets around it.
  • No Border with Spacing: The widget will have no borders, but will have spacing between itself and the widgets around it.
  • No Border with Spacing and Header: The widget will have no borders, will have spacing, and will show its title/header.
  • Top Border: The widget will have a top border.
  • Top Border and Header: The widget will have a top border and will show its title/header.

Locking a widget

When editing a header, footer, or default version of a page, the widget toolbar will include a lock icon which can be toggled on or off to lock the widget in child contexts. To learn more about locking and inheritance, see What is a theme?

Removing a widget

To remove a widget, select the  option from the widget's toolbar. Note that this change is not committed until the entire page is saved or previewed.

Moving a widget

You can drag and drop widgets to change their order or region within the page. Start dragging anywhere on the widget (its toolbar or content).

Adding a new widget

To add a widget, find the type of widget you'd like from Edit this Page management panel and drag it onto the page where you'd like it to be placed:

Once the widget is placed on the page, it's preview will load and you can use the toolbar options to further configure the widget.

Switching between page, header, and footer editing

The same editing session can be used to make changes to the header, page, or footer. To switch between the header, page, or footer, hover over the area you'd like to edit and click it's Edit Header (or Footer or Page) button:

This will change the Edit this Page management panel to control customizing the layout and widgets in the newly selected area (header, page, or footer).

Changing the Layout

To change the layout, go to the Edit this Page panel and select the Layout tab:

Click on the layout you'd like to use for the current area (page, header or footer) being edited. The existing widgets will be rearranged into the new layout so you can preview the changes easily before fine tuning widget placements by dragging and dropping widgets.

Reverting

As you make changes, you may find that you want to revert changes that you haven't yet published or revert changes to the default for the community. To do this, click Revert on the Edit this Page panel:

You'll see the header, page, and footer with the current published and unpublished state of each area. To revert an area, click it to see the reversion options. Depending on the edited state, you may be able to revert to the factory default, the configured default, or revert your staged or unsaved edits. As you select to revert areas, the changes will be shown on screen to allow you to make other changes, but they are not yet committed. You'll still need to preview or save/publish them.

Previewing and Saving

When you've made enough changes that you'd like to see a live version, you can chose to preview or save the changes.

Previewing

To preview your changes, click Preview on the Edit this Page management panel. This will save your changes to your personal staging area in Telligent Community. Your changes are saved but will not affect or be visible to any other visitor of the community. This will also enable preview mode where, as you navigate around the community, your staged changes are visible to you and only you. This means that you're viewing the community and are able to interact with it and fully review your changes on any device you're signed in on. 

When you initially enter preview mode any device you are signed in on will enable preview mode and allow you to preview your staged changes. If you open a new browser or connect to the community on a device after preview mode is enabled, you'll need to go to Manage > Manage Site Theme (or Group Theme or Blog Theme) > Preview Stated Changes and enable previewing.

As you navigate around the community in preview mode, the preview indicator will show on the top left of the browser window. You can click the preview indicator to open the Preview Staged Changes panel and approve / deny changes. See How do I preview UI changes in the community? for more details.

Saving

To save and publish without previewing, click Publish on the Edit this Page panel. The changes you've made will be immediately published and live on your community.

Advanced Editing

For more advanced editing techniques, see How can I rebrand my community in an upgrade-safe way?

Managing Pages and Creating Custom Pages

To view a list of all available pages in a theme or to create a new custom page, go to Manage > Manage Site Theme (or Group Theme or Blog Theme) > Manage Pages:

Here you'll be presented with a list of all of the current pages defined for this theme. For platform-defined pages, select the page name for a description of the page and options to view the page or to edit the page's layout. For custom pages, you can view, edit the layout, edit the definition of the page, or delete the custom page complete.

To add a new custom page, click Add Custom Page.

Customizing Theme Options

To customize options exposed by the current theme, go to Manage > Manage Site Theme (or Group Theme or Blog Theme) > Theme Options (before 10.2, the panel was named Edit Theme) and review the available options. What options are available depends on the version of Telligent Community, the state of the UI migration or upgrade, and what developer-defined options are exposed by the theme. If no options are exposed for customization, the Theme Options panel will not be listed when managing the theme.

Review the available options and make changes. You can preview your changes privately before publishing using the Preview button or Publish immediately.

Creating and Editing Widgets

Widgets themselves can be created or edited to implement new or different functionality. To learn more about widget development, see Widgets in developer training.

Importing/Exporting

Contextual and default theme components are imported/exported from the management panels. Factory defaults can be imported/exported from the administration UI.

Importing/Exporting Default and Contextual Themes

Default and contextual themes are imported/exported from the management panel within the context of the theme you want to import/export. To access importing/exporting:

  1. Go to Manage > Manage Site Theme (or Group Theme or Blog Theme).
  2. If you want to import/edit defaults, select Manage Default Site Theme (or Group Theme or Blog Theme).
  3. Select Import Theme or Export Theme.

When exporting the default or contextual theme, you can either export the current page (if you are currently looking at a page within the theme) or the entire theme. The entire theme contains the header, footer, all effective pages, theme configuration, shared widget configuration options associated to the theme. The export includes defaults or factory defaults if the requested context is not available (according to theme inheritance logic). Note that the default/contextual export is suitable for importing on sites that already have the theme installed, but cannot be used to install a theme that doesn't yet exist on another site (you'll want the factory default export to create the theme on another site).

When importing the default or contextual theme, the Import Theme management panel will show a list of applicable changes from the file being imported. Note that if there are no changes from the current effective configuration of the theme, no options will be presented to be imported. One or more options can be selected and imported for previewing within the current theme being viewed. The imported changes are always staged for your preview -- the changes are not published for other users until you publish them enabling you to make adjustments to imported theme components before publishing.

Importing/Exporting Full Themes

Full themes are imported/exported through the administration UI:

  1. Go to Manage >  Administration > Interface > Themes.
  2. Before 10.2: To import, click Import. To export, locate and select the theme to export and click Export. In 10.2+: To import, select the import icon from the toolbar below the Themes panel name. To export, select export from the ellipsis menu associated with the theme you'd like to export.

The full theme export includes the same theme options as the default/contextual export but also includes all of the widgets referenced by the header, footer, or any of the pages in the theme. The full theme export is suitable for sharing with other sites that don't yet have the theme installed (since it includes the widgets as well).

When importing, the theme components will be staged to allow previewing and editing before publishing. Prior to 10.2, importing a full theme would immediately publish the theme.

Best Practices

For a guide to best practices when customizing the Telligent Community user experience, see What best practices should be followed when customizing the user interface?

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2022 Verint, Inc.
Powered by Verint Community