CSS on element level

Feature Requests
1

Hi,

I am loving customizing my apps using custom css but would love to have a bit more flexibility when it comes to applying css classes to elements within an element.

Example:

If I add 2 buttons to a section, the css class can only be applied to both buttons not an individual button unless you dive into the code and search for the default class name.

I think being able to customize individual elements within a component would be awesome!

2

You can style each button differently depending on its index or its text

1 Like
3

But you have to write custom css for each instance instead just applying a class name to element.

Ideally I want to apply a class to a button or image regardless of screen and text

1 Like
4

I would love to see better CSS application, but Glide has never really prioritized CSS and has always been pretty hacky.

5

This requires a bit of trickery and understanding of the page structure. Since nowadays there’s a ton of CSS selectors and pseudo-classes, there are so many options to achieve the desired styling that I won’t even try to put them all into words here. However, I can throw in some ideas from pesronal experience on how to make this more reliable and manageable for you.

Good apps are consistent. Assuming you’re aiming to build a consistent UI&UX, the components are likely to be used the same way in different places of the app. For instance, you tend to have a component with 2 buttons for Editing and Deleting and you want to color the Delete button red. You can then assign a classname (e.g. .delbtn) for each component that has a delete button you want to style and then make sure there’s a distinction between the Delete button and another button, so you can style it independently. To make that distinction, you can make the Edit button accented while the Delete button is not, so Glide gives them different classnames (.filled and .bordered respectively). Then you can use the following CSS to style the Delete button:

.delbtn button.bordered {
background-color: #ffc2c2;
border-width: 1px;
border-color: red;
}

In the natural language that would sound like

In each component that has a .delbtn class, look for button elements that have a .bordered class and make their border 1px wide and red, and change background color to #ffc2c2 (different red)

The result is the following:

image
image1231×136 6.58 KB

You see how custom CSS is often about balancing between what’s already coded in Glide and what you can add to this. My example is far from perfect because if I would wanna use the same class for a button block with more than 1 outlined button, they will all become red and I would have to update the styles to only target one button. It’s crucial to really understand what you target and try to be as specific as possible so your styles aren’t applied elsewhere unexpectedly. When you inspect the page, you can see lots of selectors that can be helpful and harmful depending on the context. Auto-generated attribures, such as classnames and IDs are subjects to change, so try using the most comprehensive and explicit ones. Not only they seem less prone to change, but even if at some point your styles break due to Glide design updates, it’s easier to fix it when you see something like .delbtn button.bordered instead of .sc-kOHTFB wire-button___StyledWireButtonStyle-sc-1tlscdy-0.ivaBOY.ZOSJl.wire-hero-lib___StyledWireButton2-sc-77hcmj-27.md.bordered.has-icon-left (these 2 snippets target the same button!)

I hope that helps and feel free to reach out if you need help with a specific use case. The community is full of Glide :left_right_arrow: CSS sorcerers, so we’ll figure the best CSS together :grinning:

6 Likes