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-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-[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

Other Articles You Might Find Helpful:

Feedback and Knowledge Base