Tell Glide how you use CSS

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

  1. 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;
}
17 Likes