In Telligent Community 6.0, themes are completely portable and customizable for your community's experience.
A theme is a set of styles, images and layouts that describe the end-user interface of a community site that is based on the Telligent Evolution platform. If you think of your community as a car, the theme would be the body style, the paint color, the layout of the interior, and the dashboard. The rest of the community (the platform itself) would be the engine, suspension, transmission, and everything else that actually makes the car go.
Any application that is built on the Telligent Evolution platform ships with at least one theme, designed and tested for that particular application. The theme is intended to provide the layout for a general-purpose Internet-based community. The Telligent Community application, for an external community, uses the Fiji theme.
We designed these default themes and the theme framework while keeping in mind that one size rarely fits all. There are varying degrees of customizations that are offered in the platform - ranging from simple changes that require no development knowledge or experience all the way to large-scale changes that allow a developer to tweak a site to their precise specifications. This document describes ways to customize themes in Telligent Community.
In more technical terms, themes are a set of script files, cascading style sheet (CSS) files, images, and theme configuration XML that describes the default "look-and-feel" of the community and any changes to the generic layout of the default widgets on each page (we explain widgets in detail throughout this guide). These themes are stored in / filestorage for this release
We also provide a theme titled Generic (located in the themes/generic folder) which contains the ASPX code that defines the default layouts of each page in any theme.
top
Types of themes and how to set the default theme
Although we generally refer to a single theme when talking about a complete community site, there are actually four separate theme types: site-wide, group, blog, and user. With these four different theme types, portions of a community can be themed differently from others. For example, if you had three different groups on your site, each representing a separate product your organization sells, you could create a separate group theme for each of the three groups to incorporate product branding and colors. A similar approach is available for blog themes.
The user theme type is used for layouts and themes that would be specific to a single user, but is only currently used in the application for user dashboards. So as long as a user is in a role granted the Site - Customize Dashboard permission, he/she has the ability to customize the layout and widgets on their own dashboards.
In the Control Panel Dashboard, it is possible to change the current site theme, set a default group and blog theme, and change individual group and blog themes for any given group or blog.
top
Change the site-wide theme
- Log in as an administrator.
- Navigate to Control Panel Dashboard > System Administration > Site Administration > Site Content > Site Theme.
- Use the Select Site Theme drop-down box to select one of any available site-wide theme.
When you change the site-wide theme, you may need to perform a hard refresh in the browser to make the page width appear correctly. To perform a hard refresh, press CTRL/F5.
Change the default group theme
To change the default group theme (affects all groups in your community for which you have not customized their individual theme):
- Log in as an administrator or as the owner of the group.
- Navigate to the Control Panel Dashboard > System Administration > Group Administration > Configuration > Default Group Theme.
- Use the Default Theme drop-down box to select one of any available group themes.
top
Change the theme for a single group
To change the theme for a single group:
- Log in as an an owner of the group (or a user with the site-wide Group - Edit Theme permission).
- In the Group Administration widget that is in the default layout, select Edit this Theme.
- Use the Theme drop-down box to select one of any available group themes.
top
Change the default blog theme
To change the default blog theme (affects all blogs in your community for which you have not customized their individual theme):
- Log in as an administrator.
- Navigate to the Control Panel Dashboard > System Administration > Blog Administration > Configuration > Default Presentation.
- Use the Default Theme drop-down box to select one of any available blog themes.
top
Change the theme for a single blog
To change the theme for a single blog:
- Log in as the author of a blog or anyone with the Blog - Edit Blog Settings permission for that blog (could be a group owner or an administrator).
- In the Options widget that is in the default layout, select Edit blog settings.
- Navigate to the Themes tab.
- In the Available themes drop-down box, select one of any available theme.
top
Theme components
Header, footer and content widgets
The widgets that appear throughout a theme are divided into three distinct types: header, footer and content widgets. The header widgets are configured through the GUI in Telligent Community 6.0 and appear above the configurable content area. A footer widget is similar to a header widget in that it is configured in the GUI, but it renders below the configurable content area of your site. All other content widgets appear within the configurable content area which it is configurable through the user interface. We describe below how to configure each of these types of content widgets and create new content widgets that you want to include on within your community.
top
Standard markup
All headers, footers, and content widgets included in Telligent Community 6.0 are implemented using widgets. Telligent-defined widgets generally follow the guidelines of the Style/Markup guide.
All widgets can be customized via the widget editor within the Control Panel to support alternative HTML, CSS, and behavior. See Customize with widgets for more information.
top
Cascading style sheets (CSS)
All style and image inclusion in the themes for applications built on the Telligent Evolution platform are defined using CSS, a style-definition language that enables a hierarchy of styling options. You are able to customize the theme without editing the base styles. The standard markup supports CSS targeting, enabling generic and specific styling. All default themes support adding custom CSS styling rules through the theme's configuration page in the Control Panel Dashboard (System Administration > Site Administration > Site Content > Site Theme > Custom Styles).
top
Read more...