The plugin does not apply any visual styling to the quote output. A minimal CSS file is included only for the skeleton loader animation during page load.
Line breaks in the quote field are preserved and displayed.
The output uses BEM-style class names that you can target freely in your theme stylesheet or via the WordPress Customizer.
Available classes
| Class | Element |
.citatly | Outer wrapper <div> |
.citatly__text | The quote text |
.citatly__meta | Wrapper around author and source |
.citatly__separator | Em-Dash before author (default: “— “ |
.citatly__author | Author name |
.citatly__divider | Dot between author and source (default: ” · “) |
.citatly__source | Optional extra field (source, year, etc.) |
The separator (—) and divider (·) between author and source are wrapped in their own CSS classes: .citatly__separator and .citatly__divider. You can hide them with display: none or replace them with custom characters using the font-size: 0 + ::after technique shown in the “Custom” example below.
Interactive Examples
there lies a trembling spring.
When using the class shortcode parameter, the custom class is added to the .citatly wrapper. Use it to apply different styles to different embed locations on the same site.
Skeleton Loader
While the quote is being loaded via the REST API, the plugin displays a skeleton placeholder with a shimmer animation. This minimizes layout shifts (CLS) and provides visual feedback to the visitor.
The skeleton loader is the only CSS the plugin ships — it does not apply any visual styling to the quote itself.
Here you can see the skeleton loader in action. Once the browser has cached the REST API response, the quote loads instantly and the skeleton is no longer visible:
You can customize the skeleton colors to match your theme using two CSS custom properties:
.citatly {
--citatly-skeleton-base: #d0d0d0;
--citatly-skeleton-shine: #e8e8e8;
}The default values are #e0e0e0 (base) and #f0f0f0 (shine), which work well on light backgrounds. For dark themes, use darker values:
.citatly {
--citatly-skeleton-base: #2a2a2a;
--citatly-skeleton-shine: #3a3a3a;
}If you want to disable the skeleton animation entirely, you can hide it with:
.citatly[data-citatly-loading="1"] .citatly__text,
.citatly[data-citatly-loading="1"] .citatly__author {
background: none;
animation: none;
}