Appearance

What This Page Covers

Summaries and FAQs are your words on your page, so they should look like the rest of your

site. AIO Radar → Content → Summaries → Appearance and **AIO Radar → Content → FAQs →

Appearance** each set three colours, a display mode and whether the label shows, for that

component across your whole site. Any single page can override the lot from its editor

sidebar.

Why This Matters

An enrichment that looks bolted on gets removed, and an enrichment that gets removed stops

being cited. Making it match your theme is what keeps it on the page.

The Font Is Always Your Theme's

AIO Radar never sets a font. Summaries and FAQs inherit whatever your theme uses for body

text, at whatever size the surrounding content uses. There is no typography control and

there is not going to be one — a second font on the page is how these blocks start looking

like an advert.

Display Mode

Each component is either Open or Collapsed.

Collapsed uses the browser's own <details> element. No JavaScript runs on your front end

for either mode, and the answer text is in the HTML in both cases — a collapsed FAQ is still

fully readable by crawlers and assistants, which is the point.

Pick Collapsed when the page is long and the enrichment would push your real content down.

Pick Open when the summary or the answers are what the visitor came for.

Colours

Three colours per component, and each one is optional:

Each row pairs a colour picker with a hex field. The hex field is what gets saved — the

picker only fills it in. Clearing the field, or pressing Use default, returns that colour

to the default in the table above, which is what you want most of the time: a transparent

background and inherited text is what makes the block look like part of the page rather than

a widget dropped onto it.

Only values you actually set are emitted, as CSS custom properties on the page:

:root {
  --aio-summary-bg: #f7f7f5;
  --aio-summary-fg: #1e1e1e;
  --aio-summary-accent: #0891b2;
  --aio-faq-bg: #ffffff;
  --aio-faq-fg: #1e1e1e;
  --aio-faq-accent: #0891b2;
}

The Preview

Both Appearance tabs show a live preview using the same stylesheet your visitors get, with

sample text. Change a colour or a mode and it redraws immediately. Nothing is saved until you

press Save appearance.

Per-Page Overrides

The AI Optimization - Markdown box in the page editor sidebar — the AIO Radar box — can

override the site settings for that one page: a display mode for summaries, a display mode for

FAQs, and one set of three colours that applies to both blocks on that page.

Every field starts at Use site appearance. Leave them there and the page follows your site

settings; change one and only that one is overridden. Set every field back to "Use site

appearance" and the override is removed from the page entirely.

Use this sparingly. A page with a dark hero might need a light-on-dark summary; a landing page

might want its FAQs open where the rest of the site collapses them. Beyond that, the site

setting is the one to change.

Custom CSS

One Custom CSS field, shared by summaries and FAQs, shown on both Appearance tabs. It is

added after everything else, so it wins over the colours above and over the plugin's own

stylesheet.

The field holds up to 20 KB. Anything past that is trimmed when you save, so keep long

rulesets in your theme or a child theme and use this for adjustments.

What you type is CSS, not markup: tags are stripped on save, along with expression( and

javascript:. The result is written into the page inside a style element, so a truncated rule

is the worst a 20 KB overrun can do.

Saving this one field needs the unfiltered_html capability. On a single site that is any

administrator, so it just works. On a multisite network only a super admin has it, and an

ordinary site administrator does not — if they save the form, the colours and the display modes

save as normal, the Custom CSS is left at its stored value, and the screen says so.

Classes You Can Target

Summaries:

FAQs:

The block wrappers .wp-block-aio-optimiser-summary and .wp-block-aio-optimiser-faq sit

around the skeleton when you use the Gutenberg blocks, so you can style block placements

differently from shortcode placements if you need to.

Examples

Give the summary a left rule in your accent colour instead of a background:

.aio-summary {
  border-left: 3px solid var(--aio-summary-accent, #0891b2);
  padding-left: 1rem;
}

Tighten the spacing between FAQ items:

.aio-faq-item + .aio-faq-item {
  margin-top: 0.5rem;
}

Put the collapsed disclosure marker on the right:

.aio-faqs--collapsed .aio-faq-question {
  display: flex;
  justify-content: space-between;
}

Match a dark theme without touching the colour fields:

@media (prefers-color-scheme: dark) {
  .aio-summary,
  .aio-faqs {
    --aio-summary-bg: #1a1a1a;
    --aio-faq-bg: #1a1a1a;
  }
}

Troubleshooting

My custom CSS isn't applying

Custom CSS is added after the plugin's stylesheet, so it should win without !important. If

it doesn't, your theme is likely more specific — prefix your selector with the block wrapper,

for example .wp-block-aio-optimiser-summary .aio-summary.

The colours changed on one page only

That page has a per-page override. Open it in the editor, find the **AI Optimization -

Markdown** box in the sidebar, and set the appearance fields back to "Use site appearance".

The collapsed mode shows no arrow

Some themes reset details > summary. Add your own marker in Custom CSS, or switch that

component to Open.

Related