Hi all, I’ve been starting to look into CSS usage in Glide and how we can better serve you. I would love if y’all could help me with this task by doing a few things. Give me a description of what you are using CSS for. Give me some before and after screenshots of what your CSS does. If it adds motion an movie would be amazing. If you are open to it, include your CSS snippet as an inline code block. Keep it short! I want to gather a large gallery and it will really really help me actually understand and better service everyones need if everyone really tries to keep things on topic and pithy. Jason

here you go: LINK [Screen Shot 2021-06-06 at 7.02.24 AM]

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

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.

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

@Jason another little sugestion/variation of separator component [image] Beautiful Design App Project Showcase Check this out! Using CSS to turn our Separator: Small into a divider that rounds out the components above and below! Note, this only works with Light Theme. Dark theme apps should use this as the background/box-shadow colors: rgb(30, 34, 43); [Screen Shot 2021-06-06 at 9.57.37 PM] [Screen Shot 2021-06-06 at 9.57.46 PM] [data-test="app-hr"] { background-color: rgb(246, 246, 246); } [data-test="app-hr"]:after { content: ""; position:absolute; top:-40px; right:0…

Thank you all, please keep these coming.

Tab Horizontal [image] CSS page with Tab (horizontal, vertical) Community Resources Hello, Here is a CSS to organize your page with tabs [image] https://streamable.com/iw38x5 Tab Vertical [image] CSS page with Tab (horizontal, vertical) Community Resources In the tab version, here is the vertical version !! [image]

This is a great great initiative @Jason !

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

Tell Glide how you use CSS

General

Lucas_Pires June 7, 2021, 2:42pm 40

@Jason another little sugestion/variation of separator component

Topic		Replies	Views
Beautiful Design App Project Showcase	818	40249	November 16, 2021
CSS for hiding stuff! Community Resources tutorial	89	9146	March 6, 2024
⚠️ Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks General	132	6971	September 6, 2022
Floating Form Button Feature Requests	122	7966	February 9, 2021
Pages Missing Components Feature Requests	96	3533	August 20, 2023

Tell Glide how you use CSS

Related topics