Tell Glide how you use CSS

here you go:

LINK

2 Likes

Uzo and Manu masters of Css on Glide!!!

Hi Lucas,

Would love to better understand how you set css for specific component on the page.

Can you share an example of how I should use the css you posted?

Thanks

2 Likes

That CSS targets the component by its order number on the screen, top-down, visibility conditions taking into account. The best use case is you want to change a component on the screen, but not its other siblings (let’s say the 1st hint text but not the 2nd or 3rd).

Assuming you know the specific characteristics of the component you want to edit already, and it’s at first place, you can be confident putting number 1 in there and it will never fail to do its work when it’s visible.

However let’s say you want to change a component at number 3, but your component number 2 has a visibility condition. When it’s visible your specific code will work, but when your component number 2 is not visible then your “3” will become “2”, thus break the logic.

So please think through about all the possibilities to construct the right rich text components and its visibility conditions.

1 Like

Thank you. I think I understood. Will play with this and see how it works

2 Likes

@Jason another little sugestion/variation of separator component

5 Likes

Thank you all, please keep these coming.

4 Likes

Tab Horizontal

Tab Vertical

This is a great great initiative @Jason !

I want all the things I read here without css :wink:

7 Likes

First I want to say this is amazing what the guys here are doing and @Jason this is awsome initiative.
second, mt 2 cents on things I’m doing

  1. align text right, for everything, basically, beside the action text component which is working correctly in RTL (comma, question mark etc. are in the right place and not align left even when aligning the text to right). So, using CSS for aligning all the components.

  2. Pop-up box with image to clode the pop-up:

  3. sticking choice to the top as a selection menu:

and then:

  1. Turning choice to bottons:

  1. Changing size and design for input components (would love to be able to put 2 next to each other and also input + text component next to each other)

  2. Design buttons:
    image

  3. Change inline list to fit more items and decrease size etc.:

  4. tables:
    image

  5. Padding components like map, video etc.

  6. Replacement for the Hint:

9 Likes

see here

1 Like

thanks!!! found it few min before you sent. you do amazing stuff with CSS

2 Likes

another example for your collection :wink:

Hey Robert. I’ve been trying to achieve this in the switch title but with no luck. If I use the inspect element it changes fine, but when applying it in the app with this code, or other codes it won’t work, any advice?

Thanks in advance

Does it work if you add !important;?

It doesn’t

Do you mean the switch component’s title?

Yes! :grinning:

is working… maybe you are applying it wrong?
try it in action here