Create Background with CSS

Hi Lucas,

Does this only work for inline list components or image components as well?

I added this code to the of a tab with an image component and it’s not popping up. There are some text components in between this CSS text block and the image component. Does the CSS have to be right on top of the image component?

Thanks!

This works only in Rich Text component

Yes, the CSS is in a rich text component. The example above was for the background to show up behind an inline list component. What I am trying to do now is for a simple image component.

ok, but you said you added as a imagem component… its not correct

you gotta add in a template column, replace the image column and pick the code as a rich text

1 Like

The code is in a template column, its set up the same way in both examples. Here are some screenshots. The first image (in-line component) the background is displaying, the second it isn’t (image component)


Only works in rich text man…

1 Like

Imagine you’re injecting an external thing to Glide that Glide hasn’t supported yet. It has to be rich text. Image is a “native” component and you have to follow its standard.

1 Like

Is the first component, which has the CSS code template, not Rich Text?

So you mean you have both rich texts in two screens but one works and the other one doesn’t?

Yes!

I see you naming the two columns differently. “TEMP-CSS” and “TEMPLATE-CSS”. Any chance the codes in there are different?

Copied and pasted. Exact same code.

My best bet is the code actually works with the class presented on the first screen, the second screen presents another class that the code has yet got access to.

Yes, that’s what I was thinking initially. An image component being the next block and not an inline component, where the code works.

Yes. CSS that works for inline list won’t work for image. You need to call the correct class

2 Likes

How do you do that? I don’t see anything naming a class in the code.

Does anyone know which class I need to make this happen? Thanks!

You need to view/inspect the page source, find the code for the specific component and see what CSS class name it is using. These are usually pretty cryptic and take some trial and error to find the correct class to modify with added CSS code.

2 Likes

Yes, there is quite a few grouped together when hovering over the same space. I will take a look. Thanks!

1 Like

this thread is a gem!
thanks guys

btw I am seeking to change the background color of my topbar, how do I change it to an image ?