Project wide CSS

šŸ’¬ App Building
1

Hi, I have some CSS that I would like to apply to every container in every app.

I tried to put it in ā€œsettingsā€ ā†’ ā€œAdvancedā€ tab, but still didnā€™t work, I had to apply it to every app, container by container like this

._retool-navigation4 button:hover {
  cursor: pointer;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03); /* subtle highlight */
}

Is there a more scalable way to do this?

2

Hey @wonka! As far as I know, custom CSS still needs to be applied at the app level in the Custom CSS section of the Advanced Settings tab.

But, you don't have to style each container individually using substring matching, which I have a detailed post on here. Essentially, as long as the name for each container in your app starts with ā€˜containerā€™ like they always do by default (i.e. container1, container2, etc.), you can target them all at once by using the following in place of what you have if applied in the Custom CSS section in the Advanced Settings tab:

[data-testid*="container"] button:hover {
  cursor: pointer;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

Or, if you need to target each container AND each navigation component before hitting your button:

[data-testid*="container"] [data-testid*="navigation"] button:hover {
  cursor: pointer;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}
1 Like
3

Awesome thank you!

1 Like
4

Any time! If you still have any issues settings things up let me know and I hope it was the solution you were looking for!