Features Pricing
Blog Documentation Changelog API Reference
Sign In
Get Started

Custom CSS

3 min read

Override the audio player styles with your own CSS when the built-in color and layout options are not enough. Works on both the inline player and the sticky footer variant.

Where to add custom CSS

Use your theme's customizer:

  1. Appearance → Customize → Additional CSS
  2. Paste your rules
  3. Publish

This survives theme updates and child-theme swaps.

Plugin-level

In Text to Speech → Advanced → Custom CSS, paste CSS that loads only on pages with the player. Useful for styles you want to tie to the plugin specifically.

Player elements you can target

Every element in the player has a stable class name. Key selectors:

/* The whole player container */
.mementor-tts-player { }

/* Play button */
.mementor-tts-play-button { }

/* Progress bar (linear) */
.mementor-tts-progress { }

/* Waveform bars (PRO) */
.mementor-tts-waveform-bar { }

/* Time display */
.mementor-tts-time { }

/* Speed selector */
.mementor-tts-speed { }

/* Volume slider */
.mementor-tts-volume { }

/* Download link */
.mementor-tts-download { }

/* Sticky footer (PRO) */
.mementor-tts-sticky-footer { }

Use browser inspector to explore the full HTML tree and find exactly what you want to target.

Common examples

Match your theme's border radius

.mementor-tts-player {
    border-radius: 12px;
}

Hide a specific control

.mementor-tts-loop {
    display: none !important;
}

Use the plugin's UI settings first. Only override with CSS when the setting is missing.

Make the play button bigger

.mementor-tts-play-button {
    width: 56px;
    height: 56px;
}

.mementor-tts-sticky-footer {
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
}

Custom typography

.mementor-tts-player {
    font-family: "Your Theme Font", sans-serif;
}
.mementor-tts-time {
    font-variant-numeric: tabular-nums;
}

CSS variables

The player exposes CSS custom properties you can override:

.mementor-tts-player {
    --player-bg-color: #your-color;
    --player-text-color: #your-color;
    --player-play-color: #your-color;
}

This is the cleanest way to restyle colors without overriding specific rules.

Specificity gotchas

TTSWP uses html body .mementor-tts-* selectors in its default CSS to beat out theme overrides. To override from your theme, match or exceed this specificity:

html body .mementor-tts-player {
    background: #000;
}

Or use !important sparingly.

Test with the browser inspector

After adding custom CSS:

  1. Open any post with audio on the front-end.
  2. Right-click the player → Inspect.
  3. Check the Computed panel to see which rules are winning.