Tab banner customization

[alexh]

Hello,

I would like to customize the top banner of the tab.
center the name of the tab, or change and put a image, …
is there a way to do this ?
thanks

[Darren_Murphy]

Although not officially supported by Glide, it is possible with CSS. Here is an example:

Create Background with CSS

Here is some CSS that I’ve used to put a progress bar at the top of the screen: <!-- Progress Bar --> <pre><span><style> #app-root div[opacity='1'] { content: ""; color: transparent; display: block; height: 45px; background-image: url("IMAGE_URL"); background-size: 260px 20px; background-repeat: no-repeat; background-position: 55% 45%; } Replace IMAGE_URL with a pointer to the image you want to use. You may need to fiddle with it a bit for your specific use case.

NB. When I say “not officially supported”, that means that it could break at any time if Glide release a change that alters the class names. So use at your own risk

[alexh]

thanks, where do you need to put this CSS ?

[Darren_Murphy]

The usual way is to put the CSS in a template column, and then use that template column in a Rich Text component.

You could put it directly in a Rich Text component, but using a template makes it easily re-usable throughout your app.