Tell Glide how you use CSS

General
18

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;
}
16 Likes