Customizing AI TL;DRs with CSS

AI TL;DRs 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 TL;DR block to better match your site’s design, including the background color, border, spacing, typography, list style, and badge styling.

CSS Selectors for AI TL;DRs

AI TL;DRs are wrapped in an HTML container with the following selectors:

CSS ID: #wpra-ai-tldr
CSS Class: .wpra-ai-tldr

You can use either the ID or the CSS classes in your custom CSS.

HTML Structure

When displayed on your site, an AI TL;DR uses a structure like this:

<div id="wpra-ai-tldr" class="wpra-ai-content wpra-ai-tldr">
    <ul>
        <li>Your first AI TL;DR point appears here.</li>
        <li>Your second AI TL;DR point appears here.</li>
    </ul>
</div>

This is the element you can target when applying custom styling.

Example CSS for AI TL;DRs

Use the CSS code below to achieve a similar style to the example above:

.wpra-ai-tldr {
    position: relative;
    overflow: hidden;

    margin: 40px 0;
    padding: 36px;

    color: #1f2937;
    background: linear-gradient(
        135deg,
        #eef4ff 0%,
        #f7faff 100%
    );

    border: 1px solid #dbe5ff;
    border-left: 6px solid #7ea2ff;
    border-radius: 28px;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* TL;DR badge */
.wpra-ai-tldr::before {
    content: "⚡ AI TL;DR";

    display: block;
    width: fit-content;

    margin-bottom: 24px;
    padding: 10px 16px;

    color: #4c68b5;
    background: rgba(126, 162, 255, 0.12);

    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    border-radius: 999px;
}

/* List container */
.wpra-ai-tldr ul,
.wpra-ai-tldr ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Individual list items */
.wpra-ai-tldr li {
    position: relative;

    margin-bottom: 18px;
    padding-left: 32px;

    font-size: 1.08rem;
    line-height: 1.8;
}

/* Custom bullet */
.wpra-ai-tldr li::before {
    content: "•";

    position: absolute;
    top: -1px;
    left: 0;

    color: #7ea2ff;

    font-size: 1.5rem;
    font-weight: 700;
}

/* Remove margin from the last item */
.wpra-ai-tldr li:last-child {
    margin-bottom: 0;
}

/* Optional hover effect */
.wpra-ai-tldr: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, badge text, and list styling.