CSS Classes

All CSS is in public/css/buddypress-status-public.css (and a minified variant). The classes below are taken from that file and from the template partials in public/inc/. Override them in your theme’s stylesheet — the plugin does not use !important on layout rules, only on Font Awesome display fixes.

Status Form

The status form renders inside the BuddyPress profile’s Status sub-page and inside the activity post form.

Class / ID	Element	Notes
`.bpsts-status-form`	`<div>` wrapping the form	Outermost container for the input area
`.bpsts-status-input-wrapper`	`<div>` inside `.bpsts-status-form`	Wraps the textarea and toolbar
`#bpsts-status`	`<textarea>`	The status input field
`.bpsts-status-toolbar`	`<div>` below the textarea	Contains emoji trigger and action buttons
`.bpsts-add`	`<a>` or `<button>`	Submit (add) button; receives `data-userid` and `data-setcurrent` attributes
`.bpsts-update`	`<a>` or `<button>`	Submit button in edit mode
`.bpsts-update-actions`	`<div>`	Wraps the update/cancel buttons during inline edit
`#bpsts-charleft`	`<span>`	Displays remaining character count
`#bpsts-error-message`	`<div>`	Error container, hidden by default
`.bpsts-empty-status`	Applied to `#bpsts-status`	Indicates the textarea was submitted empty

Saved Status Table

The profile Status tab lists saved statuses in a <table class="bpsts-statuses-table">.

Class	Element	Notes
`.bpsts-statuses-table`	`<table>`	Container for all status rows
`<tr class="bpsts-active-status">`	`<tr>`	Applied when the row’s status ID matches `bpsts_current_status`
`.bpsts-user-status`	`<td>`	Cell showing the status text
`.bpsts-status-actions`	`<td>`	Cell with action links (set current, edit, delete)
`.bpsts-current-status`	`<a>`	“Set as current” link inside `.bpsts-status-actions`
`.bpsts-edit-status`	`<a>`	“Edit” link inside `.bpsts-status-actions`
`.bpsts-del-status`	`<a>`	“Delete” link inside `.bpsts-status-actions`
`.bpsts-placeholder-status`	`<td>`	Shown when the table is empty
`.bpsts-user-status-icon`	`<td>`	Cell in the icon row (separate from text rows)

Profile Header and Members Directory

Class	Notes
`.bpsts-current-status` (container)	Wraps the status display in the profile header
`.bpsts-user-status` (span)	The status text in the header display
`.bp-status-member-icon`	Container for the emoji icon shown next to member names in the directory
`.bpsts-name-icon`	Applied to the inline SVG or image used as the user’s status icon
`.bpsts-name-icon.bpsts-svg-icon`	Variant class when the icon is rendered as SVG
`.bpsts-svg-icon svg`	The `<svg>` element inside the icon container

Emoji Picker

The emoji picker is an absolutely positioned popup toggled by .bpsts-emoji-trigger.

Class	Element	Notes
`.bpsts-emoji-trigger`	`<button>`	Opens/closes the emoji picker
`.bpsts-emoji-picker-popup`	`<div>`	The popup panel; `show` class controls visibility
`.bpsts-emoji-picker-popup.show`	—	Visible state
`.bpsts-emoji-picker-header`	`<div>` inside the popup	Contains the title and close button
`.bpsts-emoji-picker-close`	`<button>`	Closes the picker
`.bpsts-emoji-picker-tabs`	`<div>`	Tab bar for emoji categories
`.bpsts-emoji-tab`	`<button>`	A category tab
`.bpsts-emoji-tab.active`	—	The selected category tab
`.bpsts-tab-label`	`<span>` inside `.bpsts-emoji-tab`	Tab label text
`.bpsts-emoji-picker-search`	`<input>`	Search field inside the picker
`.bpsts-emoji-grid`	`<div>` or `<ul>`	Grid of emoji items
`.bpsts-emoji-holder`	`<div>`	Wrapper for a single emoji entry
`.bpsts-emoji-div`	`<div>` inside `.bpsts-emoji-holder`	Clickable emoji item
`.bpsts-emoji-icon`	`<img>` or `<span>`	The emoji glyph
`.bpsts-emoji-item`	`<span>` or `<a>`	Clickable emoji in the quick picker (activity form)

Feeling and Activity Picker

The feeling/activity picker is a two-tab panel that appears when the member clicks the mood button in the activity post form.

Class	Element	Notes
`.bp-status-feeling-tab`	`<div>`	Tab wrapper for Mood and Activity tabs
`.bp-status-feeling-tab button.tablinks`	`<button>`	A picker tab
`.bp-status-feeling-tab button.tablinks.active`	—	Active tab state
`.bp-status-feeling-tabcontent`	`<div>`	Content panel for a tab
`.bp-status-feeling-tabcontent.active`	—	Visible panel
`.bp-status-feeling-activities`	`<div>`	Container for the activities list
`.bp-status-feeling-activities-list`	`<ul>`	List of activity items
`.bp-status-feeling-activities-list-item`	`<li>`	A single activity entry
`.bp-status-feeling-activities-list .bp-status-feeling-item-img`	`<div>`	Icon area inside an activity item
`.bp-status-feeling-activities-list .bp-status-item-left`	`<div>`	Left column (icon)
`.bp-status-feeling-activities-list .bp-status-item-right`	`<div>`	Right column (text)
`.bp-status-feeling-list`	`<ul>`	Mood emoji list
`.bp-status-feeling-list-item`	`<li>`	A single mood emoji entry
`.bp-status-feeling-list .bp-status-feeling-item-img`	`<div>`	Icon area for mood items
`.bp-status-feeling-item-content`	`<div>`	Text content next to an icon
`.bp-status-feeling-item-title` / `.bp-status-item-title`	`<span>`	Title label inside a list item
`.bp-status-list-selected-items`	`<div>`	Preview of the selected mood/activity
`.bp-status-feeling-selected-item`	`<div>`	Single selected item in the preview
`.bp-status-feeling-submit-button-wrapper`	`<div>`	Wraps Submit and Back buttons
`.bp-status-feeling-submit-button`	`<button>`	Confirms the selection
`.bp-status-feeling-go-back`	`<button>`	Returns to the previous step
`.bp-status-feeling-search-input`	`<input>`	Search field within a picker tab

Activity Stream

Activity items created with a mood or feeling display an icon in the activity action line.

Class	Notes
`.bp-status-mood-feeling-icon`	Wraps the Font Awesome icon shown in the activity action string
`.bp-status-mood-feeling-icon i`	The `<i>` element for the FA icon; font-size 20px, color #333
`.bp-status-activity-mood`	Container on the activity item when a mood is set

Admin Interface

These classes apply to the wp-admin settings pages only. Admin CSS is in admin/css/.

Class	Notes
`.bpsts-role-checkboxes`	Grid of role checkboxes on the General tab
`.bpsts-role-item`	A single role checkbox container
`.bpsts-role-actions`	Select All / Deselect All row above the checkboxes
`.wbcom-settings-section-wrap`	Wbcom admin framework wrapper for settings sections

Overriding Styles

Load your overrides after the plugin’s stylesheet. Because the plugin is enqueued with the handle buddypress-status, you can register a dependent stylesheet:

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_style(
        'my-bpsts-overrides',
        get_stylesheet_directory_uri() . '/css/bpsts-overrides.css',
        array( 'buddypress-status' ),
        '1.0.0'
    );
} );

Example override — widen the emoji picker and change the active tab color:

.bpsts-emoji-picker-popup {
    width: 360px;
}

.bpsts-emoji-tab.active {
    border-bottom-color: #0073aa;
    color: #0073aa;
}