Try Badge Studio first
Most sites never need this page. Badge Studio, in the plugin dashboard, already lets you change the colour, the text colour, the shape, the corner it sits in, the border, the shadow, the rounding, and the wording for each type of image. You can also switch to the official EU icons, or turn the badge off for any type you do not want labelled.
All of that is a few clicks, it is saved with your settings, and it keeps working when the plugin updates. Start there.
This guide is for the case Badge Studio cannot reach: you need a badge, label or notice that looks like nothing the dashboard offers. Perhaps it has to match a design system, sit below the image instead of on it, or look different for AI-generated and AI-edited pictures. That is what the rest of this page is for.
What the plugin puts on your page
You cannot style what you cannot name. Before anything else, check which badge style you are on, because the plugin builds two different elements and most styling mistakes start here.
AIM, the default, and the official EU icons. The badge is fixed by the disclosure standard, so its colours and rounding are set by the plugin and are not meant to be repainted:
<span class="aicl-badge aicl-eu aicl-tl"
role="note"
data-aicl-type="trainedAlgorithmicMedia"
data-aicl-label="AI Generated"
aria-label="AI generated">
<span class="aicl-eu-ai">AI</span>
<span class="aicl-eu-word">Generated</span>
</span>Pick the official EU icons instead and the class is aicl-eu-svg, with the Commission's PNG inside as .aicl-eu-img.
Custom. This is the one built for restyling, and it is the one the rest of this guide uses. Set Label style to Custom in Badge Studio and the plugin renders this instead:
<span class="aicl-badge aicl-shape-pill aicl-tl aicl-clickable"
role="button"
data-aicl-type="trainedAlgorithmicMedia"
data-aicl-label="AI Generated"
title="AI Generated">AI Generated</span>There are four groups of class, and each one is something you can target:
| Class | What it is |
|---|---|
.aicl-badge | Every badge, always. The one selector that matches all of them. |
.aicl-shape-* | Custom style only. The shape you picked: pill, square, sharp, soft, tag, ticket, ribbon, corner, banner, outline, underline, double. |
.aicl-eu .aicl-eu-svg | The AIM and official EU styles. If you see one of these, there is no .aicl-shape-* to match. |
.aicl-tl .aicl-tr .aicl-bl .aicl-br | Which corner it sits in. |
.aicl-clickable | Only there when click-to-disclose is on. |
The badge sits on top of the image using position: absolute, and the plugin makes the container around your image position: relative so the badge has something to sit against.
The six values you can change
The plugin publishes its badge design as CSS variables. Whatever you chose in Badge Studio ends up in these. They are for the Custom badge style: on AIM and the official EU icons the colours and rounding are fixed so the mark stays faithful to the standard, and setting them there does nothing.
| Variable | Changes | Reaches |
|---|---|---|
--aicl-bg | Background colour | Custom, except outline and underline |
--aicl-color | Text colour | Custom, except outline and underline |
--aicl-radius | Corner rounding | The pill, soft and square shapes |
--aicl-border-width | Border thickness | Custom |
--aicl-border-color | Border colour | Custom |
--aicl-shadow | The whole shadow value | Everything but the EU icon and the banner shape |
Set any of them again and the badge follows. Put them on body rather than :root. The plugin writes its own values to :root, and anything you set on body beats that for everything inside the page, so you never need !important.
body {
--aicl-bg: #1f2937;
--aicl-color: #f9fafb;
--aicl-radius: 4px;
--aicl-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}This is the method to reach for first. It is short and it survives plugin updates well. Where a shape sets its own value, as the third column shows, the variable cannot reach it and you match the shape directly instead:
/* The tag shape carries its own 4px rounding, so --aicl-radius will not move it. */
.aicl-badge.aicl-shape-tag { border-radius: 12px; }Why your CSS did nothing
This one costs people an afternoon, so it is worth saying plainly. On the Custom style, the rule below looks right and loses:
/* Loses on the custom style. */
.aicl-badge { border-radius: 2px; }Each shape sets its rounding with two class names together, .aicl-badge.aicl-shape-pill. Two class names beat one, so your rule loses wherever you put it. Match the same two, or set the variable:
/* Match the two class names. */
.aicl-badge.aicl-shape-pill { border-radius: 2px; }
/* Or set the variable, which the pill, soft and square shapes read. */
body { --aicl-radius: 2px; }Neither of those does anything on the AIM style, because there is no shape class to match there and nothing reads a rounding variable. On that one the plain rule above is the right rule, and a single class name is enough, because your stylesheet loads after the plugin's. The official EU icon is different again: it sets its own rounding with two class names, so it needs .aicl-badge.aicl-eu-svg.
Background runs the other way round. On most shapes it comes from a single class name, so .aicl-badge { background: #2980b9 } is fine. Four places set theirs with two: the AIM badge, the EU icon, and the outline and underline shapes. If a change seems to do nothing, open your browser inspector, find the rule that is winning, and count its class names. If it has two, yours needs two.
A shortcut if you would rather not check
Write .aicl-badge[class*="aicl-shape-"]. An attribute counts for exactly as much as a class, so this does not beat the plugin's two-class rules, it ties with them and wins on being loaded later. Additional CSS and a child theme both are. It covers whichever shape is active, and it still does not need !important.
A different badge for each kind of image
Every badge carries the kind of image it describes in data-aicl-type. Badge Studio does not offer this, and it is the main reason to write CSS by hand: you can treat a fully generated picture differently from a photograph that was edited.
/* Made entirely by AI: solid and firm. */
.aicl-badge[data-aicl-type="trainedAlgorithmicMedia"] {
background: #4c1d95;
color: #ffffff;
}
/* A real photo that AI edited: lighter, because the claim is smaller. */
.aicl-badge[data-aicl-type="compositeWithTrainedAlgorithmicMedia"] {
background: rgba(76, 29, 149, .12);
color: #4c1d95;
}The values are the same ones written inside the image file: trainedAlgorithmicMedia, compositeWithTrainedAlgorithmicMedia, algorithmicMedia, digitalCapture, digitalCreation, composite. The readable name is on data-aicl-label if you prefer to match that.
One thing worth taking seriously. A badge is a disclosure, and the point is that a visitor notices it. Making it quieter for edited photos is a fair editorial choice. Making it invisible is not a disclosure at all, and the law asks for something a person can actually see. If you find yourself typing opacity: .2, it is more honest to turn the badge off for that type in Settings.
Putting your own logo in the badge
The dashboard does this for you. In Badge Studio, under Your logo, give it an image address or upload one. A small PNG or SVG with a transparent background sits best. Nothing on this page is needed to make it appear.
Two things about it are worth knowing before you style it.
It shows on the AIM and Custom badge styles only. It never appears on the official EU icons, because that mark is fixed by the disclosure standard and putting a company logo inside it would misrepresent it.
When it is on, the plugin puts an image first inside the badge:
<span class="aicl-badge aicl-shape-pill aicl-has-logo">
<img class="aicl-badge-logo" src="/your-logo.svg" alt="" loading="lazy" />
AI Generated
</span>
AI Generated
AI Modified
Notice there is no dot. The custom badge normally draws a small dot before its label, but a logo is already a mark, and two of them side by side read as clutter. From version 2.1.6 the plugin adds aicl-has-logo to the badge and hides the dot for you. If you would rather keep both, one line brings it back:
.aicl-badge.aicl-has-logo::before { display: block; }You can also turn the dot off on its own, with no logo involved. From 2.1.6 that is a switch in Badge Studio under Design, called Show the small dot. No CSS needed. Here is the same set of badges with it on and with it off:
If you are on an older version, or you only want it gone on certain pages, one rule does the same job. The plugin draws the dot with a single class name, so a single class name is enough to remove it:
.aicl-badge::before { display: none; }The words still carry the disclosure, so nothing a visitor needs is lost either way.
It ships at 15px tall, automatic width, never wider than 64px, with slightly rounded corners. Those three size rules carry !important, because themes tend to style every img on the page and would otherwise stretch the badge out of shape.
So resizing it is the one place in this guide where you do need !important:
/* Does nothing: the plugin's rule is !important. */
.aicl-badge-logo { height: 24px; }
/* This works. */
.aicl-badge-logo {
height: 22px !important;
max-width: 90px !important;
}Everything else about it behaves normally, no !important needed. Round it off, mute it, or move it to the other side of the words:
.aicl-badge-logo {
border-radius: 50%;
filter: grayscale(1);
order: 2; /* puts the logo after the text */
}The chatbot notice can carry a logo too. That one is .aicl-ai-notice-logo, it ships with no CSS of its own beyond a height attribute, and the plugin only accepts an image address ending in .png, .jpg, .gif, .webp or .svg.
One judgement worth making deliberately. Your logo beside the words makes the badge look like part of your brand, which is usually what you want. It should not end up looking like a quality seal you awarded yourself. The badge says how a picture was made, not that you approve of it.
Shortcodes and the chatbot notice
[aicl_disclosure] and [aicl_ai_notice] produce the same structure, so one set of rules covers both:
<span class="aicl-ai-notice aicl-ai-notice-inline" role="note">
<span class="aicl-ai-notice-mark" aria-hidden="true">AI</span>
<span class="aicl-ai-notice-text">This content was generated by AI.</span>
</span>The second class follows the style you passed to the shortcode: aicl-ai-notice-inline, -badge or -banner. The banner version is a div because it is a block. The small AI circle is .aicl-ai-notice-mark and the sentence is .aicl-ai-notice-text, so you can change them separately.
One thing to watch. The notice ships as white text on near-black, so if you give it a light background you have to set the text colour too, and the little AI circle with it. Its pale fill was made to sit on a dark pill:
.aicl-ai-notice-banner {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-left: 3px solid #0f172a;
background: #f8fafc;
color: #0f172a;
}
.aicl-ai-notice-banner .aicl-ai-notice-mark {
background: #0f172a;
color: #ffffff;
}The AI square is hidden from screen readers on purpose, so a listener hears the sentence rather than the letters read out first. If you want to hide it visually, use display: none and leave the sentence alone.
The line on AI-written posts
The line a disclosed post carries looks like this:
<p class="aicl-text-disclosure aicl-text-disclosure--custom" style="--aicl-td-bg:#f4f4f5;…">
<span class="aicl-text-disclosure__mark aicl-text-disclosure__mark--custom">AI</span>
…
</p>The second class is the style you picked: --plain, --subtle or --custom. The small mark beside the sentence is .aicl-text-disclosure__mark.
This one works differently from the badge, so read this bit. The plugin writes the text line’s colours into a style attribute on the element itself, not into :root. An inline style beats anything you set elsewhere, so setting --aicl-td-bg on body does nothing at all. We tested it, and it does not work.
Style the class directly instead. No variables, no !important needed:
.aicl-text-disclosure {
background: #f1f5f9;
color: #0f172a;
border-radius: 6px;
}
.aicl-text-disclosure__mark {
background: #0f172a;
color: #ffffff;
}AIParts of this article were written with AI assistance.
Use [aicl_text_disclosure] if you want the line in a particular place rather than automatically above or below the content. It prints nothing on a post you have not marked, so it is safe to drop into a template.
Building a badge the dashboard cannot make
Pick Custom as the badge style so the plugin stops applying its own look, then take over. This one sits under the picture instead of on it, in your own type, with a colour for each kind of image:
/* Take it off the picture and put it underneath. */
.aicl-badge[class*="aicl-shape-"] {
position: static;
display: inline-flex;
align-items: center;
gap: 6px;
margin: 8px 0 0;
padding: 5px 10px;
border-radius: 4px;
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1;
box-shadow: none;
}
/* A small dot before the words. */
.aicl-badge[class*="aicl-shape-"]::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: currentColor;
}
.aicl-badge[data-aicl-type="trainedAlgorithmicMedia"] {
background: #ede9fe;
color: #5b21b6;
}
.aicl-badge[data-aicl-type="compositeWithTrainedAlgorithmicMedia"] {
background: #e0f2fe;
color: #075985;
}Setting position: static is what lifts it out of the corner. The badge is a real element in your page, not a pseudo-element, so everything else behaves the way you would expect.
Where to put the CSS
Appearance › Customise › Additional CSS is fine, and it survives theme updates. A child theme stylesheet is fine. If you load your own file and want to be sure it comes after the plugin's, name the plugin stylesheet as a dependency. Its handle is aicl-badge:
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style(
'mysite-aicl-overrides',
get_stylesheet_directory_uri() . '/aicl-overrides.css',
array( 'aicl-badge' ),
'1.0.0'
);
}, 20 );Two honest notes to finish on. The variables and the data- attributes are the parts we mean for you to use and expect to keep. The class names are steady in practice and this page is the record of them, but they describe how the badge is built, and a redesign could move them. If that happens it will be in the changelog.
And none of this changes what is written inside your image files, or the machine-readable note on the page. Styling changes what a visitor sees. It does not change what you have recorded.
Related guides
Each one stands on its own, in plain English, with the exact steps for a WordPress site.
The lawThe EU AI Act and WordPress (Article 50)
Who Article 50 covers, the 2 August 2026 deadline, the penalties, and exactly what a WordPress site owner must do, in plain English.
Read guide
The how-toHow to label AI images in WordPress
A step-by-step walkthrough: install the plugin, flag an image from the Media Library, and get the badge, embedded metadata and JSON-LD automatically.
Read guide
The metadataWhat IPTC DigitalSourceType actually is
The machine-readable tag behind “AI-generated”: what the IPTC DigitalSourceType vocabulary means, the values AIM Transparency writes for AI and human provenance alike, and why it future-proofs your images.
The shopDisclose AI product images in WooCommerce.
Selling with AI product photos? Put the “AI Generated” badge across your shop grid, your categories and the single-product gallery, free, plus embedded provenance, on any theme. Compliance and buyer trust, in one move.
Read guide
Written textHow to disclose AI-written text in WordPress
The half of Article 50(4) nobody quotes. Whether the text duty reaches your site at all, how to record it per post, and why human review on its own is not the exemption.
Read guide
ChatbotsHow to disclose an AI chatbot on WordPress
Article 50(1) is the other half of the law: if visitors interact with an AI, you have to tell them. Where the notice belongs, and how to find widgets already running.
Read guide
LanguagesYour AI disclosure has to be in a language visitors read
Article 50 asks you to inform the person. An English badge on a Polish shop does not. How disclosure works across 22 EU languages, and where the wording comes from.
Read guide
The releaseWhat WordPress 7.1 changes for AI image provenance
7.1 can rebuild your images in the browser before they ever reach your server. What that does to provenance written inside the file, what we measured against the release candidate, and the one line that turns it off.
Read guide