Create Background with CSS

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!

1 Like

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.

1 Like

Hey @Jen_NYCP,

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

Beautiful Design App

1 Like

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.

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

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:

4 Likes

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.

1 Like

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.

3 Likes

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

1 Like

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

1 Like

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

1 Like
<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

4 Likes

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

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.

2 Likes

Perfect

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

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.

2 Likes

As I said here…

2 Likes

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.

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

3 Likes

Yess that worked. Thank you!!

1 Like