Custom CSS - No, the sky is NOT about to fall in

TLDR; For those amongst us that generally only use CSS for minor tweaks, there is most likely nothing to worry about.

Since the announcement from David a couple of days ago, there has been quite a stir and a lot of discussion about what is and isn’t supported, and what will and will not break.

Fortunately, I’ve been lucky enough (along with a few others) to be able to preview and test the changes on some of my apps. This topic is a summary of what I’ve found.

But first, the important stuff…

To the best of my knowledge, this remains the official position from Glide on this topic, and that is not changing. The way I interpret that, and the way I’ve always interpreted it is as follows:

“Go ahead and do it if you want, but we won’t guarantee that it will work, or continue to work. And if it breaks, we won’t help you fix it.”

And I’ve always thought that is fair enough - do it at your own risk.

Okay, so with that said, here is what I’ve found. I’ve spent several hours today testing with a couple of apps that use quite a bit of custom CSS. Most of the CSS that I use falls into two broad categories:

  • Category 1: Addressing specific Glide components to modify their appearance, visibility, or position on the screen
  • Category 2: Using my own custom classes or inline styling to format rich text and HTML tables

And I have to say that the news is good. Throughout my testing, I did not find a single instance where my CSS does not work with the new DOM.

There is a third category which I have not tested, because it’s not something that I do. And that is using CSS to modify the structure of the app. And it seems that this is where it would be most likely to break. Here is a direct quote from @Mark:

“If your CSS makes changes to the structure of the app it’ll likely break. But if you just modify components you could be fine.”

And that is pretty much what I’ve found. Of course, it won’t be the same for everybody, because not everybody uses CSS in the same way. I’m sure there are some advanced users out there (way more advanced than me) that are going to find breakage after the change. However, even if there is - in most cases it should be fixable. But for most of us, the phrase “storm in a teacup” comes to mind :wink:

Below is a summary of some of the things that I’ve tested and found to be working with the new DOM structure:

  • CSS styled HTML Tables - yes, @MattLB your pretty tables should survive the transition :wink:
  • Inline CSS styling in Rich Text components, eg. <div style="color: #f15a29;">blah blah</div> - works perfectly fine.
  • Hiding the Back Button
<pre><span><style> 
[data-test="back-button"] {
	display: none;
}
  • Repositioning Floating Buttons
<pre><span><style>
.fab-target >:nth-child(1) {
  position: fixed;
  top: 10% !important;
  right: 5% !important;
}
  • Restyling the Date Picker
<pre><span><style>
/* Month */
.MuiPickersSlideTransition-transitionContainer > * {
  font-size: 1.5em !important;
}

/* Year & Day */
.MuiPickersToolbarText-toolbarTxt  {
  font-size: 2.125rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.235;
  letter-spacing: 0.00735em;
}

/* Day only */
  .MuiTypography-h4 {
  font-size: 1.8rem !important;
}
  • Adjusting the Basic Table Row height
<pre><span><style>
.sts-row {
  height: 35px !important;
}
  • Forcing Card Titles to wrap
<pre><span><style>
.card-title {
  white-space: pre-wrap !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  }
  • Adjusting Left Padding (indenting) Switch components
<pre><span><style>
[data-test="app-switch-view"] {
  padding: 5px 40px;
}
  • Changing the background colour of Choice options in chips layout
<pre><span><style>
[id*='screenScrollView'] >div >div .current {
  color: white !important;
  background-color: #D2202F;
}
  • Hiding a Tab Title
<pre><span><style>
[data-test="nav-bar"] >div +* {
  color: transparent !important; 
}
  • Suppressing the Image overlay on Inline List Tiles
<pre><span><style>
[data-test="tile-item"] .tile-overlay {
  background: none;
}
  • Tab Notification Labels
<pre><span><style>
button[aria-label="Announcements"]::before {
  content: "{count}";
  position: absolute;
  font-size: 11px;
  font-weight: 800;
  color: white;
  padding: 3px;
  top: 4px;
  right: 50px;
  z-index: 1;
  height: 20px;
  width: 20px;
  background-color: red;
  border-radius: 50%;
}
  • CSS Modal Overlay
<!-- Blurry -->
<a style="top:180px;">
<div style="
position:fixed;
top:50px;
left:-5%;
margin: 0%; 
padding:100%;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(4px);
opacity:0.8;"></style></div>

<!-- Box -->
<div style =" position: fixed;
top: 250px; 
width: 94%;
max-width:680px;
opacity: 1;
margin-left: -5px;
height:180px;
background-color: rgb(150 150 150 / 20%); 
backdrop-filter: blur(8px);
border-radius: 10px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: rgb(0 0 0 / 100%) 0px 4px 10px;
text-align: center;
z-index:0 !important;"
>

<!-- Text-->
<br>
<h3><font color=#ffffff>{tp-nag-intro}</h3>

<pre><span><style>
[data-test="app-button-view"]  { 
position: fixed;
top: 370px; 
margin-left:2%;
width:40%;
max-width:180px;
}

.fab-target >* {
display:none;
}
  • Replacing the tab title with an image
<pre><span><style>
#app-root div[opacity='1'] {
  color: transparent; 
}
.nav-bar-root {
  content: "";
  display: block;
  background-image: url(URL);
  background-size: 200px 40px;
  background-repeat: no-repeat; 
  background-position: center, center;
}

Obviously the above isn’t a comprehensive collection of every single thing that can be done with CSS in a Glide App, but it’s a pretty decent sample.

And I found all of the above to work perfectly with the new Glide DOM.

26 Likes

And now hopefully you’ll get a good night’s sleep tonight, Darren :sweat_smile:

This is good news.

3 Likes

Great news! Thanks Darren.

4 Likes

Great job Darren!

1 Like

Really happy to read that, Thanks Darren ! The first message was perhaps too alarming

1 Like

Thank you, Darren, for making this research :+1:

2 Likes

O frabjous day! Callooh! Callay!

1 Like

Super useful post. Much appreciated.

1 Like

Thank you!

1 Like

Lot of checks you’ve done for everybody! Thanks Darren

1 Like

Very good news!!

I saw a comment on the announcement that Glide will discontinue Custom CSS, here are some people who are against the update and are looking for the best solution and here is the answer.
I am very happy, because custom CSS will still be able to run of course with different rules than before.

there are some people who really avoid Custom CSS and even support Glide for reasons of No-Code. I laughed seeing this comment they can’t do custom CSS but it’s like blaming people who can use custom css.

Use custom css or not it’s their own decision, it’s better not to blame the people who use custom CSS with No-Code reasons.

Sorry if my statement is wrong.

This css can be used in a Glide app, @Darren_Murphy ? I just left this css logo alone on my app :smiley:

Yes, I tested something similar to that and found that it still works. I’ve added the CSS that I tested with to my list above.

3 Likes

ok noted. thanks @Darren_Murphy

Very good ! I can sleep good now!

Do we know when this new DOM will go live?

It’s already live for newly created (not copied) apps.
Don’t know when it will be applied to all apps, but expect it will be soon.

1 Like

Oh great! Just created a new one Im working on last week, so I should be fine? Guessing it doesnt matter that I put it on a legacy Pro plan.