Skip to main content
Question

Add course information

  • February 20, 2026
  • 1 reply
  • 24 views

Bkatzman
Influencer III
Forum|alt.badge.img+1

Is it possible to use CSS to add another dot and text after this?

 

 

1 reply

Moshe.Machlav
Guide I
Forum|alt.badge.img+1

Hi ​@Bkatzman ,

The short answer is no. 

The Technical Reality: Shadow DOM Barriers

The cards inside your carousel widget are built using Docebo’s modern UI component structure (data-dcb-ui-version="1"). These modern modules use strict browser-level Shadow DOM encapsulation.

The shadow root acts as a complete architectural firewall. This means global CSS styles injected into your admin branding panel are mathematically blocked by the browser from piercing inside or modifying internal layout elements like the language container (.ui-card-language). Custom CSS overrides on these specific text properties are structurally impossible.

A Warning on the Docebo UI Roadmap

Even if a complex CSS workaround could bypass this layout layer, now is a highly risky time to implement deep custom stylesheets. Docebo is actively modernizing its core template editors and front-end theme frameworks.

As they phase out unstructured styling across monthly updates and migrate legacy widgets into encapsulated component modules, custom style hacks are incredibly fragile and prone to breaking unexpectedly.

2 Future-Proof, Low-Maintenance Alternatives

Instead of fighting code constraints, you can achieve your design goals cleanly by using native configuration properties:

  • The Thumbnail Approach (Highly Recommended): Have you considered embedding your visual dot and text indicator directly onto the Course Thumbnail Image itself? Designating a small, standardized banner layout or badge corner right within your course thumbnail graphics lets you clearly denote tracks or internal designations. This is completely immune to future theme deprecation, displays flawlessly across both grid and carousel views, and requires zero lines of maintenance code.

  • The Localization Tool Method: If the text you want to append after the code is static (for example, if you want "EN" to universally display as "EN • Certified"), you can modify the core text string inside the platform's native Localization Tool. Overriding the layout terminology at the core system string level allows the platform to render your text natively inside the modern web component boundary.

To review guidelines for asset parameters and language string configurations, check out the official Managing thumbnails and header images and Managing the localization tool and platform languages articles in the Docebo Help Center.