CSS Classes for Current User's Groups

Theme component
1
:discourse2: Summary CSS Classes for Current User’s Groups adds the groups that a member is a part of as CSS classes on the <body> tag.
:eyeglasses: Preview Preview on theme-creator.discourse.org
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-groups-css-classes-in-body
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Before:

image

After:

image
image805×44 13.5 KB

Discourse only adds the current user’s primary group as a CSS class by default. This component changes that so that all of the groups that the current user is a member of are added as classes - including the built-in ones like trust-level.

The component takes each group name and adds it as a CSS class like so

group-NAME

Once you install and activate this theme component, you can add CSS to your theme that targets specific groups like so

.group-NAME {
  .some-selector {
    color: red;
  }
}
25 Likes