Skip to main content
Question

CSS Code to make the global search bar larger and the text bigger

  • June 26, 2025
  • 4 replies
  • 54 views

Forum|alt.badge.img+1

Hello, we are re-designing our landing page and wondered if anyone has any CSS code to allow us to make the search bar more prominent?  I have exhausted AI suggestions!

Many thanks in advance, Lisa

4 replies

Forum|alt.badge.img

Did you ever find a solution for this? I’m interested as well.


Forum|alt.badge.img+1
  • Author
  • Influencer III
  • March 12, 2026

Did you ever find a solution for this? I’m interested as well.

No, unfortunately not.


Forum|alt.badge.img

Did you ever find a solution for this? I’m interested as well.

No, unfortunately not.

So, I was digging around using the inspector window to try to target the right element to make changes. To make the global search bigger, the whole top bar needs to be bigger which then impacts how all of those elements look, so that was a bust for us at this point. However, I DID find that if you can find the element for the search box, you can change the color of the border and make the border thicker, which I think helps draw the eye. 

I’ve only played a bit in our sandbox, and even the elements I’ve identified I haven’t yet been able to target in my CSS, or ensure it doesn’t impact other parts of the platform, but fingers crossed about getting there. 


Moshe.Machlav
Novice III
Forum|alt.badge.img

Hi ​@Lisa D & ​@ariel.zimmerman ,

Before you invest time in custom CSS for the search bar — it's worth knowing that Docebo is in the middle of a significant platform-wide UX redesign as part of their AI-First transformation. The modernized interface includes a new design language, improved navigation hierarchy, and refreshed page layouts. The next primary release is scheduled for April 27–29, and these UI changes are rolling out progressively across the platform.

In organizations I've worked with, we've learned the hard way that custom CSS applied to Docebo's current markup can break when a primary release changes the underlying HTML structure or widget IDs. If you're planning a landing page redesign, I'd recommend checking the sandbox preview (available ~8 weeks before each primary release) to see what's changing before committing to CSS customizations.

That said, if you do want to move forward now, Docebo identifies every page and widget with a unique CSS ID, so you can target the search bar specifically. The community HTML & CSS section has several threads on search bar styling. And here's the official guide on applying custom CSS to your platform: Configuring the branding, look and feel.

Just keep an eye on the Product Updates page so you're not caught off guard by UI changes. Happy to share more detail on what to watch for.