Custom CSS

Custom CSS is for styling what AjaxPress itself puts on screen: the loading bar or spinner, and your persistent players. It’s under Settings → AjaxPress → Advanced → Custom CSS, and it’s free.

What it reaches, and what it doesn’t

With AjaxPress, each of your pages is shown inside a frame, and AjaxPress’s own elements sit above that frame. Custom CSS is added to that outer layer, so:

Styled by Custom CSS	Not styled by Custom CSS
The progress bar and the spinner	Your pages’ content, header and footer
Persistent players, once they’re lifted out of the page	Anything else inside the page
The loading cursor

To style your site itself, use your theme: Appearance → Customize → Additional CSS, the Site Editor’s styles, or your child theme.

Selectors

Selector	Element
.ajaxpress-progressbar	The progress bar’s track
.ajaxpress-progressbar-bar	The moving bar
.ajaxpress-spinner	The spinner, including its overlay
.ajaxpress-spinner-overlay	The spinner’s backdrop
.ajaxpress-spinner-content	The icon and message together
.ajaxpress-spinner-image	The spinner icon
.ajaxpress-spinner-text	The loading message
html.ajaxpress-cursor-active	Present while a page loads
#ajaxpress-persist	The container that holds persistent players
#ajaxpress-persist [data-persist-key="…"]	One persistent player, by its key

Examples

A rounded, glowing progress bar:

.ajaxpress-progressbar-bar {
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgb(3 123 255 / 0.6);
}

Keep the progress bar above a sticky header with a very high stacking order:

.ajaxpress-progressbar {
  z-index: 2147483647 !important;
}

Pin a persistent player to the bottom of the screen:

#radio-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

More player styling is in Position and style a persistent player.

Good to know

• Try it in the preview. The preview on the Animations tab uses your Custom CSS, so you can check loader styles before saving. To see changes on your site, save, then reload the page.
• Clear your page cache after saving if your site uses one.
• !important is sometimes needed. AjaxPress sets some styles directly on its elements, and those win over a normal rule.