How to write custom CSS in Retool!

hi there,

having a similar issue getting to the root element to change some padding.

you can see the div here with the transform: translate3d css being the item i want to change. essentially, I get dynamic calendars based on a number [i] but they are all sitting on top of each other so I wanted to add some padding.

thanks!

edit: tagging @victoria as the resident css guru!

Hey @fish_hatchery! Since the CSS will vary so much between apps, you'll need to Copy > Copy Selector the element from the inspector tab like you're already doing. It should work!

Here's the selector that worked for me:

#retool-widget-container1 > div > div._hPGyJ > div > div > div > div > span > div > section > div > div > div {

padding: 60px;

}

Out of curiosity, I wonder if we can avoid custom CSS altogether haha. What is the problem you're currently running into?

HI All,

Newbie here - I'm trying to add some styling to a text box on my page.
The text box is called click_text - So i tried this code (using the method above - scripts and styles)..... I'm sure I'm just missing a piece of code to reference the box.

I tried using the inspector to find it, but no such luck. Any help is appreciated:

.click_text {
  padding: 20px;
}

Hi Victoria!

Thanks for honing in on the correct selector, appreciate it. The biggest thing I'm running into is that the container title for the next dynamically actioned container (which appears only if you select multiple people's calendars) doesn't seem to have enough padding around it and runs into the bottom calendar module above. Please see attached screenshot.

Thank you for coming to office hours yesterday! Just wanted to check in, how are things working for you today? :slightly_smiling_face:

There is no css option in my application?
Screenshot 2023-03-15 at 08.58.28

That's super strange! Are you on Cloud or Self-Hosted Retool? If Cloud, would I be able to step into your app?

Cloud, sure!

I'm able to see the CSS tab in your org!

What browser are you on? Could you try in an incognito browser? Perhaps there's some browser extension messing with it? :thinking:

It seems I was trying to apply custom css from a module which doesn't appear to be possible

Ah! Good callout, I didn’t even think of that :man_facepalming:

I believe module CSS is controlled be each parent, so we don’t currently enable specific module CSS.

Is this okay for your use case or were you looking for module CSS?