# Tab banner customization

**URL:** <https://community.glideapps.com/t/tab-banner-customization/22172>\
**Category:** Ask for Help\
**Tags:** actions\
**Created:** [February 3, 2021, 10:30am UTC](https://community.glideapps.com/t/tab-banner-customization/22172 "2021-02-03T10:30:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexh](https://avatars.discourse-cdn.com/v4/letter/a/6f9a4e/32.png) [@alexh](https://community.glideapps.com/u/alexh)\
**Post date:** [February 3, 2021, 10:30am UTC](https://community.glideapps.com/t/tab-banner-customization/22172/1 "2021-02-03T10:30:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 3, 2021, 10:45am UTC](https://community.glideapps.com/t/tab-banner-customization/22172/2 "2021-02-03T10:45:46Z")

</div>

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

> [@Create Background with CSS](https://community.glideapps.com/t/create-background-with-css/16403/45):
>
> 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 🙂

---

<div class="post-metadata">

**Author:** ![alexh](https://avatars.discourse-cdn.com/v4/letter/a/6f9a4e/32.png) [@alexh](https://community.glideapps.com/u/alexh)\
**Post date:** [February 3, 2021, 11:01am UTC](https://community.glideapps.com/t/tab-banner-customization/22172/3 "2021-02-03T11:01:26Z")

</div>

thanks, where do you need to put this CSS ?

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [February 3, 2021, 11:06am UTC](https://community.glideapps.com/t/tab-banner-customization/22172/4 "2021-02-03T11:06:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NoCodeAndy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nocodeandy/32/62530_2.png) [@NoCodeAndy](https://community.glideapps.com/u/NoCodeAndy)\
**Post date:** [January 17, 2024, 4:53pm UTC](https://community.glideapps.com/t/tab-banner-customization/22172/5 "2024-01-17T16:53:43Z")

</div>