Create Background with CSS

[Jen_NYCP]

Hi!

I am trying to create the blue background you see below. Does anyone have an idea of how I can do that? The image is an inline list pulling a single image.
Also once I create a CSS template column, how do I apply it to the tab?

Thanks!

[kyleheney]

The inline list would be filtered to show the value you’re hoping to show (so you could have a column in your sheet with a value “true” for the row you want to show, then filter the list to only show true rows).

CSS can be applied by adding it as a rich text component. I don’t think this is actually supported by Glide though, so use at your own risk.

[SantiagoPerez]

Hey @Jen_NYCP,

I don’t know if I understood your question correctly but CSS was discussed here in this thread.

Beautiful Design App

[Jen_NYCP]

Oh yes, the inline list is being shown as I want it. Its the background I am trying to create. I just have no idea what the code would look like.

[Jen_NYCP]

Yes, I think they are using image components instead so not sure if its the same code.

[Deena]

I added the code that turns my entire background black, but maybe you can fidget with it or until someone can give you a better resource:

https://docs.google.com/document/d/1F0iwtlecciW8hlk84nA5hLDXroxhhPTvSZkKDDZIn8o/edit?usp=sharing

And did you catch this:

Beautiful Design App

Several ways. Depends what else is on the screen. You can use an image component and then style it. I’m using a round tile component, setting it to 2 tiles per row and then creating a Rich text box with this CSS: .fdeRBK { grid-template-columns: repeat(1, 1fr); width: 200px; margin: auto; } If you want the colored background, I placed the rich text box with the CSS at the very top and included this CSS: <pre> <span><style> [data-test=app-markdown-view] { background-image: url("…

[Jen_NYCP]

Yes, I tried Robert’s, but it just adds a BG to the subtitle.

For yours, where is the hex code or where does the black color come in? I don’t see anything like that in the Background code.

[Deena]

I have no idea. lol. I was actually thinking the same thing when I sent it to you. But try this thread. @Lucas_Pires is the king of design - and he gives instructions in this thread.

Salon Beauty/ Barber Shop app💈

Hey hey, Gliders! First topic here! I’ve been using and abusing glide all over my days for months. And to open this topic, I wanna introduce you my new brand Salon Beauty/ Barber Shop app! What will you see here? Circle Profile Image using Rich Text (not tiles); Screens and Font Color totally personalized by the theme and for each person. And much more. Let’s take a look. I made two apps for Salon Beauty/ Barber Shop app! : Admin Clients Admin htt…

[Jen_NYCP]

Hmm, doesn’t work just adds a big white space. It’s working inside the image, not outside of it.

[Deena]

Ughhhh! Well then, we wait for @ThinhDinh to wake up.

[Jen_NYCP]

Lol! Thanks for your help!
I’ll play around with it a little more.

[Lucas_Pires]

<a style="position: absolute; 
    width:100%; 
    top:-86px; 
    right: 0%; 
    z-index:-1; 
    opacity: 1;">
    <div style="background-color: #161172; margin: 0%; padding: 130px;">

Change: background-color and padding to change the size

Tip: put rich text as first component

[Lucas_Pires]

And where is the tab name, its a nav-bar. Is it possible to change? yes.
But we gotta use advanced CSS to change it

[Robert_Petitto]

Right. Create a rich text box as the top component
In the box, use CSS to set the position as absolute. Then you can adjust the size, background color and z index of the box to achieve your mock-up.

[Lucas_Pires]

Perfect

[Jen_NYCP]

Oh nice!! Thanks! Before seeing this, I ended up using the code Lucas mentioned here, it almost works, but…

@Lucas_Pires

@adelhammoud a lil’ trick may help you

In Data editor, create a Template column and add this code:

<a style="position: fixed;
width: 100%;
top:10%;
right: 0%;  z-index:-1;">
<img src="URL" /></a>

Replace URL to the Pic column. In the screen you wanna add this background, add a Rich Text component and the result will something like this

(The code is not 100%, but when I improve it, it’s cool to fit the image in the whole screen)

it shows up differently on the front end from what I see in the builder. Also trying to get the blue background all the way to the top.

[Lucas_Pires]

@Lucas_Pires

Tip: put rich text as first component

As I said here…

[Jen_NYCP]

Is it at the very top. The first block. You can see in the first one on the builder shows it correctly, but on the user end it does not.

[Lucas_Pires]

Have you change top in the code? This must be top:0px;

[Jen_NYCP]

Yess that worked. Thank you!!