AI Summaries are added to imported posts inside a dedicated HTML container, which means you can customize their appearance with custom CSS.
This allows you to adjust the look of the summary block to better match your site’s design, including the background color, border, spacing, typography, and label styling.
CSS Selectors for AI Summaries
AI Summaries are wrapped in an HTML container with the following selector:
CSS ID: #wpra-ai-summary
CSS Class: .wpra-ai-summary
You can use either the ID or the CSS classes in your custom CSS.
HTML Structure
When displayed on your site, an AI Summary uses a structure like this:
<div id="wpra-ai-summary" class="wpra-ai-content wpra-ai-summary">
<p>Your AI Summary appears here.</p>
</div>This is the element you can target when applying custom styling.
Example CSS for AI Summaries
Use the CSS code below to achieve a similar style to the example above:
.wpra-ai-summary {
position: relative;
overflow: hidden;
margin: 40px 0;
padding: 36px;
color: #222;
background: linear-gradient(
135deg,
#eef5df 0%,
#f7faef 100%
);
font-size: 1.15rem;
line-height: 1.9;
border: 1px solid #dfe8c7;
border-left: 6px solid #9bb16d;
border-radius: 28px;
box-shadow:
0 4px 20px rgba(0, 0, 0, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* AI Summary badge */
.wpra-ai-summary::before {
content: "✨ AI SUMMARY";
display: block;
width: fit-content;
margin-bottom: 24px;
padding: 10px 16px;
color: #5f6f3c;
background: rgba(155, 177, 109, 0.12);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
backdrop-filter: blur(4px);
}
/* Better paragraph spacing */
.wpra-ai-summary p {
margin: 0;
}
/* Optional hover effect */
.wpra-ai-summary:hover {
transform: translateY(-1px);
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}You can adjust the CSS to better match your theme or brand, including the colors, spacing, border style, font size, and label text.