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.
Themes
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.
Styling
Leverage LESS variables for global restyling
In Manage > Manage Site Theme > Edit this Theme > Supplementary Files, the variables.less file contains a list of base configuration options for all of the styling of the Social theme:
A good starting point for customizing the Social theme to match the fonts, colors, spacing, etc of your intended design is to review and update the variables within the variables.less file. These variables are used throughout all of the other LESS-based stylesheets included in the Social theme.
Make use of banner-level branding options instead of widget and style customizations
Telligent Community provides configuration-based options to adjust the visual style and functionality of primary UI components, such as the location banners and footers. Whenever possible, use the included widgets and their configuration options to minimize upgrade costs. For more information about branding Telligent Community in an upgrade-safe way, see How can I rebrand my community in an upgrade-safe way?
Prefer overriding CSS with new files over editing
With the exception of the variables.less file, keep any other style customizations in the Custom Style Sheet (Manage > Manage Site Theme (or Group Theme or Blog Theme) > Edit this Theme > Custom Styles) or in new files within the CSS Files list (Manage > Manage Site Theme (or Group Theme or Blog Theme) > Edit this Theme > HTML Headers). This will allow you to more easily review upgrades to platform-defined stylesheets since you can merge theme changes at the file level (so you can include updated base stylesheet files and keep your overrides for further review post-upgrade).
While it is tempting to edit the existing LESS files within the theme, it will be more difficult for your development team to review updates at upgrade time.
See "Customizing Styling" in How do I customize the look and feel of my community? for more details.
Layouts
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 development 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?
Widgets
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.
Edit vs. Save As
When working with widgets, it is important to edit existing platform-defined widgets instead of using the "Save As" feature in most cases, specifically:
- Edit the widget when the changes you plan to make to not significantly affect the purpose or functionality of the widget. 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.
- Save As when the widget you're creating serves a different purpose but is otherwise similar in implementation to the source widget. If you're making a completely new widget that works very differently (or on different data) than the source widget, Save As is a good way to get started. Note that when using Save As, the new widget will not have a platform-related upgrade path since you're creating a completely new widget. Your development team is responsible for maintaining and upgrading the functionality of the widget.
Staying on the upgrade path best enables your site to stay up-to-date as changes are published to Telligent Community. The upgrade process includes workflows for reviewing platform-defined edits to existing widgets. When new widgets are created (via Save As), they are unique to the site and disconnected from the set of platform-defined widgets so they have no platform-defined upgrade path.
For more details about the widget and UX upgrade process, see How do I upgrade the user experience of my community?