Advanced CSS custom design with <body> classes
For each page on your UserVoice site, classes are added to the
<body>element to allow you to add specific styles for different
pages or other states of the page.
For example, when viewing an article, the
uv-article-page class is added to the
<body>. When viewing an idea, the
uv-suggestion-pageclass is added. In your custom CSS, you could
use these class names to style the same elements on the page differently (like
the header, sidebar or footer).
This is what the
UserVoice’s General Feedback forum index page’s
<body> element looks like:
<body class="uv-primaryColor-dark uv-locale-en uv-direction-ltr uv-forum uv-forum-1 uv-no-user uv-forum-page">
This tells us that the primary custom color is dark, the local is set to en (English), the text direction is left-to-right, it’s a forum, the specific forum id is 1, the user is not signed in, and we’re specifically looking at a forum page (index).
Global Attributes
Global attributes are persistently available on every page. The
[value]
appended to the class name depends on which attribute the page
has (explained in the
Description listed next to each
Class name).
| Class name | Description |
|---|---|
uv-primaryColor-[light|dark]
|
Tells whether the site’s primary color is
light or dark.
|
uv-locale-[locale]
|
The the page’s current locale.
e.g., uv-locale-de
|
uv-direction-[direction]
|
The direction of the current language (rtl or
ltr).
|
Session Attributes
Session attributes change based on a user’s current session status. Multiple session attributes can be available at a time.
| Class name | Description |
|---|---|
uv-no-user
|
no user is signed in |
uv-user
|
a user is signed in |
uv-user-admin
|
current user is an admin of this site |
Page Type (mutually exclusive)
The page type is specific to the type of page being viewed. Only onePage Type can be specified at a time.
| Class name | Description |
|---|---|
uv-home-page
|
Home page |
uv-helpdesk-page
|
Helpdesk index (will be deprecated once this page is merged with the homepage) |
uv-forum-page
|
Forum index pages |
uv-suggestion-page
|
Suggestion detail pages |
uv-topic-page
|
Helpdesk Topic index pages |
uv-article-page
|
Helpdesk Article pages |
uv-error-page
|
Error pages |
uv-profile-page
|
User profile pages |
uv-tos-page
|
Terms of Service page |
uv-signin-page
|
Standalone sign-in page |
uv-password-page
|
Reset password page |
Page Attributes
Page attributes describe the current page, including what primary section
it’s a part of, what particular record it is (forum, topic, or idea id),
and other attributes. Multiple attributes may be available at a time (e.g.,
class="uv-feedback uv-forum-123 uv-forum-private").
| Class name | Description |
|---|---|
uv-helpdesk
|
Current page is part of the helpdesk
/knowledgebase… |
uv-forum
|
Current page is part of a feedback forum
/forum… |
uv-topic-private
|
Page is part of a private helpdesk topic |
uv-topic-[topic_id]
|
Current helpdesk topic’s id |
uv-forum-private
|
Page is part of a private forum |
uv-forum-access-denied
|
User does not have access to private forum |
uv-forum-[forum_id]
|
Current forum’s id |
uv-category-[category_id]
|
Category id, if page is part of a forum category |
uv-profile-mine
|
Profile page is current user’s |
uv-error-[error_id]
|
Error code for error page |
