Styling Options
Open WP Stories (under the WB Plugins menu) and select the Styling Options tab to match stories to your site. Every setting here is optional: left at its default, WP Stories follows your theme, including its dark mode.
Story Circles
Section titled “Story Circles”These apply to the Instagram display style (see General settings). The Square and List styles keep their own card sizes.
Circle Size
Section titled “Circle Size”How big the story circles, including Your story, are.
| Size | On a phone (390px wide) | Largest size |
|---|---|---|
| Small | 62px | 72px |
| Medium (default) | 70px | 90px |
| Large | 86px | 110px |
Circles grow with the screen and stop at the largest size, so one choice works on phones, tablets and desktops. Medium is the size WP Stories has always used.
Need an exact size? Set the --wpst-circle-size CSS custom property instead (see
Hooks and filters).
Border Style and Color
Section titled “Border Style and Color”The coloured ring around a story that has not been watched yet: one colour (Normal) or a two-colour Gradient. Leave the colours empty to keep the default ring. Watched stories always show a grey ring.
Title Style
Section titled “Title Style”Title Color
Section titled “Title Color”The colour of the names under the story circles. Leave it empty to use your theme’s text colour, which also follows the theme’s dark mode. Set a colour only if you want the same colour in light and dark mode.
Names on stories a member has already watched are shown slightly dimmed.
Story Viewer Background
Section titled “Story Viewer Background”The background behind a photo that does not fill the screen, for example a landscape photo on a phone.
By default the viewer shows a soft, blurred copy of the photo behind it, the way Instagram does. Choose a Normal colour or a two-colour Gradient to show your own background instead; the blurred copy is then turned off.
Button Style
Section titled “Button Style”The link button a member can add to a story item (for example “Read more”) sits on top of the photo in the viewer. Set its background (Normal or Gradient), text colour, font size, padding and corner radius. Because it sits on the photo rather than on your page, it keeps these colours in light and dark mode.