Beautiful Design App

[Lucas_Pires]

[ehdubya]

This looks great Lucas!

One question: how did you get the top-banner to be a picture “on top” or “behind” the Title picture?

[Lucas_Pires]

2nd code in this topic

Tell Glide how you use CSS

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"] { conte…

[ehdubya]

Wicked! Thank you!

[Elisaul_Espinoza]

Como le puso su foto alli

[Cokorda]

Very cool!! Thanks for sharing

[Harry_OBrien]

Looking good

I’m curious, is there a way to apply this CSS globally without having to add the same rich text component to every tab?

[ThinhDinh]

As far as I aware there isn’t one.

[Harry_OBrien]

I really need this compact design Bob - care to share the trickery?

[Robert_Petitto]

The one with the button in the title?

Beautiful Design App

Ya…messing around with some CSS and placement of items… [Screen Shot 2021-05-14 at 10.57.21 PM]

[Harry_OBrien]

Yep

[Robert_Petitto]

I think this is the one (I’m away from my computer at the moment).

<pre><span><style>
[data-test="app-summary"] {
margin-top: -90px;
}

[data-test="glide-app-bar"] :nth-child(1) {
background: transparent !important;
}

[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background:transparent;
    -webkit-backdrop-filter: blur(2px);
    }

#app-root div[opacity='1'] {
      color: transparent; 
    }

[data-test="app-summary"] >:nth-child(1) {
height: 150px !important;
}

[Harry_OBrien]

That’s great help, tinkering with it now

[Mark_Turrell]

The trick is to make a template column in the sheets you reference (or in your sheet named as the ‘User Profile’ as you can always reference these values (mostly) ) and put your CSS in the template.

[Harry_OBrien]

Yep, already doing this.

Just have to add the component to all pages and it doesn’t work on Non-Detail Views where it’s not possible to add components.

[Lucas_Pires]

Edit: the client didnt keep with the app, but the design is still really cool!

[Robert_Petitto]

Love this:

[Harry_OBrien]

Nothing special, but here’s an alternative design for the Choice Bar component

Code:

[data-test="app-inline-picker"] .ips-inner {
background: #fff;
}

.bYahys {
color: rgb(0 0 0);
}

To edit the the active Choice

.dMZZie {
   box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
   color: #ffffff;
   background-color: #000000;
}

[ThinhDinh]

Thank you for sharing, this looks great. However the class name in the second one might vary from app to app.

[Harry_OBrien]

Edited out