Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Telligent Community 10.x
  • Verint Community
  • More
Telligent Community 10.x
User Documentation What best practices should be followed when customizing the user interface?
  • 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?

What best practices should be followed when customizing the user interface?

Telligent Community provides many ways to customize the look and behavior of your community. Below are best practices to both enable customization but minimize upgrade costs.

Table of Contents

  • For Community Managers
    • Use the Social theme to better enable future UX upgrades
    • Leverage theme options to rebrand the community
    • For widget-specific behavior and styling changes, utilize widget options
    • Use staging and preview to test changes before publishing
    • Review the UI on varying window sizes
    • Use Unfiltered HTML or Generic Content widgets instead of creating new widgets when applicable
  • For Developers
    • Editing vs 'Save as Copy'
    • Styling
    • FORM elements

For Community Managers

Use the Social theme to better enable future UX upgrades

When upgrading, Telligent Community is committed to updating the Social theme and its components.

If you want to implement a radically different theme, you are free to do so by creating a new theme and fully defining it. The cost to a completely custom theme is that your development team will be responsible for the upgrade. Telligent Community APIs are upgrade safe and will continue to function, however, your development team will be responsible for including any new functionality provided by updates to the Telligent Community platform.

To ease upgrading costs, use the Social theme and reconfigure it using the other best practices in this guide. When you upgrade, you'll be able to make full use of the UX upgrade tools: See How do I upgrade the user experience of my community? for more details regarding upgrading.

Leverage theme options to rebrand the community

The Social theme exposes options to easily brand and customize the site-wide styling of the community. These options can be customized by going to Manage > Manage Site Theme > Theme Options:

From here, you can adjust the base colors, fonts, and icon. Many widgets in the community are styled using selectable palettes. Within the theme options panel, you can also specify the default for palettes to be used within the theme.

For widget-specific behavior and styling changes, utilize widget options

Individual widgets expose options to enable customizing their behavior on individual pages. Options may be functional or stylistic. To review the options available for a specific widget, edit the page containing the widget and configure it. 

Use staging and preview to test changes before publishing

Telligent Community includes tools to enable staging multiple UI-related changes and previewing those changes before publication. This enables customization to occur in production environments (reducing the cost of setting up a staging environment, copying data, and deploying changes) and allows you to see how your changes will look with live data immediately and without affecting any other visitors to your site. For more details about how to use the staging and previewing functionality, see How do I preview UI changes in the community?

Review the UI on varying window sizes

Be sure to review your styling and layout changes on multiple devices and at multiple window sizes. Spot test with a handheld iOS and Android device, iOS and Android tablets, small desktop browser windows and large desktop browser windows. Make use of the responsive reflow options to optimize interaction on small handheld devices. For more information about supporting mobile devices, see How does Telligent Community support mobile devices?

Use Unfiltered HTML or Generic Content widgets instead of creating new widgets when applicable

There are reasons to create widgets, even just to render static content, to enable reuse throughout the community. In cases where you need to simply place some static content or some HTML embed code, consider using the Generic Content or Unfiltered HTML widgets to decrease development time. See "Inserting Custom HTML and Content" in How can I rebrand my community in an upgrade-safe way? for more details.

For Developers

Editing vs 'Save as Copy'

When working with widgets and themes, it is important to edit existing platform-defined widgets or themes instead of using the "Save as Copy" feature in most cases, specifically:

  • Edit when the changes you plan to make to not significantly affect the purpose or functionality of the widget or theme. If you're making changes to simplify or embellish the widget or to enable a unique layout, you're better off editing the existing widget. Editing existing widgets/themes will ensure that they are reviewed in upgrades for changes to implementation and the platform tooling for diffing and merging will be enabled to add new platform-defined functionality in customized widgets.
  • Save as Copy when the widget or theme you're creating serves a different purpose but is otherwise similar in implementation to the source widget or theme. If you're making a completely new widget, for example, that works very differently (or on different data) than the source widget, 'Save as Copy' is a good way to get started. Note that when using 'Save as Copy', the new widget/theme will not have a platform-related upgrade path since you're creating a completely new instance. Your development team is responsible for maintaining and upgrading the functionality of the new widget/theme.

For more details about the widget and UX upgrade process, see How do I upgrade the user experience of my community?

Styling

For theme-wide styling, add a new top-level stylesheet, preferably with your site's name to the existing Social theme. This can define overrides or new global styling.

For widget-specific styling, consider adding a new stylesheet to the widget itself and have the widget render the stylesheet when appropriate. Keeping the styling of widgets with the widget implementation will help when upgrading because the widget-with-styling will be considered a single unit of change when reviewing changes. If, in an upgrade, you want to keep your customizations to one widget but take the platform updates to others, it'll be easier to keep the custom widget with its styling if its versioned together as a single unit and it's styling is separate from other custom styles.

Whether you are implementing a stylesheet in a theme or a widget, make use of theme and widget configuration using the Telligent Community LESS functions. This will enable your custom styles to take advantage of existing configuration options (for example, the colors defined in the site theme) and be more easily managed by community managers.

FORM elements

In 10.2, the global FORM element is being phased out. Prior to 10.2, all HTML pages generated by Telligent Community included a single global FORM element nested directly within the BODY tag. In 10.2, only upgrades will have the global FORM element enabled by default and it can later be disabled in Administration > Interface > Legacy Options. When implementing form inputs in widgets, ensure that your widget renders the appropriate FORM wrapping element. When the global FORM element is enabled, widget-rendered FORM elements will be removed, but, when the global FORM element is disabled, many HTML forms will require that inputs be placed within FORM elements.

As a general practice, then, for 10.2 widget development, ensure that you are always rendering FORM tags when appropriate.

  • 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 2021 Verint, Inc.
Powered by Verint Community