Tell Glide how you use CSS

Jason · June 4, 2021, 4:09pm

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

ThinhDinh · June 4, 2021, 4:11pm

@Lucas_Pires and me have a library of codes on Notion. If Lucas hasn’t sent it over by morning my time I will include it here. Thank you for taking the time to look into this!

AyS_0908 · June 4, 2021, 4:13pm

You should find more than you need here thanks to @Uzo

Jason · June 4, 2021, 4:14pm

Thank you!

Darren_Murphy · June 4, 2021, 4:22pm

oh wow, @jason you’re really opening a HUGE pandoras box here

gee, where to start…

I use CSS a lot for tables. Here is a recent example that I posted (includes a short video and the CSS/HTML used):

I also use CSS a lot for hiding stuff and controlling user flow. Hiding the back “button”, etc
I’ve also used CSS for generating a customised calendar view for displaying a shift roster (thanks to some awesome help from @Jeff_Hager)

That’s just a couple of examples off the top of my head. This is going to be a really long thread

Joe_Gabriele · June 4, 2021, 4:22pm

Oh man… this would be awesome if we could use CSS the right way. Super exciting to hear that its being looked at!

I use CSS mainly to style buttons, implement full background images, change the color of fonts, change padding/margins. In addition, I give users the ability to modify their color choices for their buttons and background opacity.

Before:

After:

<div class="background"></div>
<pre><span><style>
.background {
position: fixed;
margin-top:0;
height: 100%;
width: 100%;
top:0;
right:0; 
left: 0%;
z-index:-100;
opacity: .3;
background-image: url("URL"); 
background-size: cover;
background-position: center center; 
}

<pre><span><style> 

[data-test="app-summary"] > div > div > div > div {
color: #FFF; }

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left; 
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}

<pre><span><style> 

[data-test="app-summary"] > div > div > div  {
color: #FFF; 
}

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 1px;
margin: 0px 16px 0px 20px;
justify-content: left;
}

<pre><span><style>

.hUuORH.hUuORH {
color: #TEXT !important;
background-color: #BACKGROUND !important;
border-color: #BORDER !important;
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left;
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}
[data-test="app-tag-overlay"] {
background-color: #BACKGROUND;
color: #TEXT;
}

Jason · June 4, 2021, 4:24pm

If everyone could do their best to emulate Joes format that would be amazing.

Uzo · June 4, 2021, 4:38pm

And I got so addicted to CSS, that there is not a single element in that screen… originally from Glide…LOL.

Lucas_Pires · June 4, 2021, 5:23pm

This is great, @Jason! But i have many as @ThinhDinh said. Where do I start from?

Jason · June 4, 2021, 5:24pm

Just start posting. Go wild

Uzo · June 4, 2021, 5:27pm

please post codes with proper targeting, so it will work on any device and OS, people are using them without releasing, that is not working for users on deferent devices than yours.

Lucas_Pires · June 4, 2021, 5:28pm

They are, but they’re majority to use in mobile

Jason · June 4, 2021, 5:31pm

At the moment I really just need a large sampling of what people are using. I need the visuals and the code. I want to see what yall are doing, try to figure out how I can make it less prone to insane breakages, and provide better functionality, etc.

Uzo · June 4, 2021, 5:34pm

Jason · June 4, 2021, 5:36pm

Oh yeah I have been digging into that I was hoping to find even more from the rest of the community.

Uzo · June 4, 2021, 5:40pm

tones of samples and discussion there:

Pratik_Shah · June 4, 2021, 5:52pm

This is fabulous.

Lucas_Pires · June 4, 2021, 5:57pm

Summary

One the Most important and used

Styling a Component by the order in the Screen

<span/>
<style> /* Replace # for the number of the component in the screen */
div[id*='screenScrollView'] > div > div:nth-of-type(#) { 

[here I set what I wanna change]

}

Nav bar, Background image, Moving up some components..

Icon in Nav-bar
Transparent Nav-bar
Hide Nav-bar name
Bringing Image (2nd component) up

<span/>
<style>
[data-test="nav-bar"] {
  content: "";
  display: flex;
background-image: url(https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/Hyc06jcwxpwF0p3GNTZi/pub/EpMfBYoYysfDFBqRaLA5.png);
  background-size: 45px 45px;
  background-repeat: no-repeat; 
background-position: center, center;
;}
[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
}
#app-root div[opacity='1'] {
  color: transparent;
}
div[id*='screenScrollView'] > div > div:nth-of-type(2) {
z-index: -2 !important;
opacity: 1 !important;
margin-top: -145px !important;
}
div[id*='screenScrollView'] > div > div:nth-of-type(3) {
z-index: 1 !important;
margin-top: -95px !important;
margin-bottom: -65px !important;
}

</style>

Color of 2 items independently - Inline Card Style

Changing colors of Avatar Text dynamically by profit (green or red)

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(8) :nth-of-type(1) .floating-overlay-text {
color: #COLOR1;
font-weight: 800;
}
div[id*='screenScrollView'] > div > :nth-of-type(8) :nth-of-type(2) .floating-overlay-text {
color: #COLOR2;
font-weight: 800;
}

Title Color - Inline List Style

Blue Subtitle in a List style Inline list

<pre><span><style>
[class="textContainer"] .textDetailStyle {
color: #08A8BF;
    font-weight: 800;
}
[class="textContainer"] .textCaptionStyle {
    font-weight: 600;
    font-size: 0.95rem;
}

Uzo · June 4, 2021, 6:03pm

cool tutorial!

Manu.n · June 4, 2021, 6:08pm

Hello @Jason

Personally I use CSS to supplement or create objects that I need (or at the request of some Glide users).

Here are my few observations (with my small level in CSS):

it is quite difficult to make a “responsive” CSS (rwd?!) for the 3 screens: phone, tablet, desktop
I also often have surprises between rendering under the editor, desktop or on the mobile, probably a lack of knowledge on my part on the problems of cross-platform PWA.
It would be nice to publish a guide to good or bad practices (so as not to disrupt the entire application).
Finally The Most Important (for me): As now we can name the components,
is it possible to have class or id names in relation to the names. it would then be easy to identify.

Here are some recent examples:

Calendar

Message box

Edit text

Choice

multi choice

Date picker

other

That’s all for the moment !!

Topic		Replies	Views
Beautiful Design App Project Showcase	819	36851	November 16, 2021
CSS for hiding stuff! Community Resources tutorial	89	8628	March 6, 2024
⚠️ Unsupported HTML/CSS in the Rich Text component will completely break in the coming weeks General	133	6268	September 6, 2022
Floating Form Button Feature Requests	123	7308	February 9, 2021
Pages Missing Components Feature Requests	97	3129	August 20, 2023

Tell Glide how you use CSS

Summary

Related topics