Feed advanced CSS

Staff can turn on Advanced styling in Feed Studio (Communities → Apps → Feed / Socials) and write custom CSS for the Muse Feed Discord Activity. Rules are sanitized and auto-scoped so they only affect the feed shell.

Scoping

Every selector is rewritten under [data-feed-shell].
:root, html, and body become [data-feed-shell] (safe for custom tokens).
@media, @supports, @container, and @layer are kept; inner rules are scoped.
@keyframes names are not prefixed.
@import, javascript: URLs, and similar constructs are blocked.
Soft limit: 12 KiB of stored CSS.

Do not rely on hashed CSS-module class names from the Activity UI — they change between builds. Use the stable hooks below.

Stable class hooks (`mm-feed-*`)

Hook

Where

.mm-feed-stage

Outer Activity stage (data-feed-preset)

.mm-feed-shell

Skin shell ([data-feed-shell])

.mm-feed-chrome

Header chrome

.mm-feed-identity

Title + icon row

.mm-feed-eyebrow

Preset eyebrow (Forum / Headlines)

.mm-feed-heading

Main title

.mm-feed-subtitle

Community / subtitle line

.mm-feed-tabs / .mm-feed-tab / .mm-feed-tab-active

Feed tabs

.mm-feed-stream

Scrollable stream ([data-feed-stream])

.mm-feed-list

Post list ([data-feed-list])

.mm-feed-post

Post row ([data-feed-post], [data-feed-layout])

.mm-feed-author

Author name

.mm-feed-avatar

Avatar image / fallback

.mm-feed-timestamp

Relative or absolute time

.mm-feed-forum-title

Forum topic title

.mm-feed-headline-title

Headlines story title

.mm-feed-body

Post body

.mm-feed-media

Image grid

.mm-feed-actions / .mm-feed-action

Reply / like / repost row

.mm-feed-thread / .mm-feed-reply

Detail thread + reply rows

.mm-feed-back

Back control

.mm-feed-empty

Empty states

.mm-feed-compose-fab

Floating Post button

.mm-feed-compose

Compose / reply composer shell

.mm-feed-compose-mode

Embed vs plain-text hint ([data-feed-compose-mode])

.mm-feed-muse-picker

Reply-as muse picker ([data-feed-muse-picker-force="1"] when ambiguous)

.mm-feed-post-pending

Optimistic / in-flight posts

.mm-feed-tab-unread

Unread dot on inactive tabs

.mm-feed-profile / .mm-feed-profile-header

In-feed muse profile

.mm-feed-dm-inbox / .mm-feed-dm-thread / .mm-feed-dm-bubble

DMs

Data attributes

Attribute

Meaning

[data-feed-shell]

Scope root

[data-feed-preset="timeline|forum|headlines|dms"]

Active stage preset

[data-microapp-skin]

Skin id on the shell

[data-feed-layout="timeline|forum|headlines"]

Layout of a post

[data-feed-list="…"]

List mode

[data-feed-post] / [data-feed-title]

Post / title nodes

[data-feed-tabs] / [data-feed-stream] / [data-feed-scroll]

Chrome regions

[data-feed-compose-mode="embed|plain"]

Compose delivery mode

[data-feed-muse-picker-force="1"]

Muse picker awaiting explicit choice

[data-feed-custom]

Injected <style> tag

Examples

Accent the active tab:

.mm-feed-tab-active {
color: #ff8a5c;
border-bottom-color: #ff8a5c;
}

Forum titles a bit tighter:

.mm-feed-forum-title {
letter-spacing: -0.02em;
font-size: 1.12rem;
}

Headlines-only body color:

[data-feed-layout="headlines"] .mm-feed-body {
color: rgba(247, 236, 212, 0.9);
}

Token override for the whole shell:

:root {
--skin-accent: #5ac8be;
}

Safety

Custom CSS is optional and staff-only in Studio.
Dangerous constructs are stripped before save and again before inject.
Prefer small, intentional overrides over rewriting the entire layout.
Visual presets (Timeline / Forum / Headlines) already change structure and typography — use advanced CSS for community branding on top.

Feed Advanced CSS