# Beautiful Design App

**URL:** <https://community.glideapps.com/t/beautiful-design-app/16191>\
**Category:** Project Showcase\
**Created:** [September 22, 2020, 12:23pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191 "2020-09-22T12:23:59Z")\
**Posts on this page:** 20\
**Page:** 27

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 15, 2021, 2:56am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/528 "2021-05-15T02:56:26Z")

</div>

> [@Robert\_Petitto](#):
>
> That homescreen is SICK!
> 
> Care to share the CSS?

As far as getting the image full screen goes, I stole the following from @Mark_Turrell:

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

```

```auto
<pre><span><style>

[data-test="glide-app-bar"] :nth-child(1) {
    display: none;

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

<pre><span><style>
.class{
    font-family: 'Source Sans Pro', sans-serif;
}

```

Results in:

 ![Screen Shot 2021-05-12 at 3.23.14 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/9/79a060326af09f76c37733159267148a1f9be91d.jpeg)

There is probably a bit of fluff in there that isn’t required, but I needed something quick and dirty at the time, and haven’t been back to experiment with it since.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 15, 2021, 2:57am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/529 "2021-05-15T02:57:45Z")

</div>

Ya…messing around with some CSS and placement of items…

 ![Screen Shot 2021-05-14 at 10.57.21 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/1/41acb26cab64a303a4367696e39ecdd6cd5dc274.png)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 15, 2021, 3:30am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/530 "2021-05-15T03:30:53Z")

</div>

Funny seeing Netflix using emojis also in “tab’s name” lol

I thought only we did this 🤣

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/a/5a6e73431ed0b3d899bb5e62f92dffda7482341f.jpeg)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 15, 2021, 8:29pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/531 "2021-05-15T20:29:11Z")

</div>

I used this sequence of components in the screen to work well:

- 1st - **A single** Rich text with the code below
- 2nd - Image component (I used 3:2 format in this case)
- 3rd - Text (as header upper the image)

Copy and put it in one rich text component.

Separated by `/*----- What this is for ------*/` you can identify what which one can do.

> ```
> <a style="position: absolute; width:100%; top: 125px; right: 0%; z-index:-1; opacity: 1;" target="_blank">
> <div style="background-color: white; padding-bottom: 40vh; border-top-left-radius:30px; border-top-right-radius:30px; background-origin: content-box;"></div>
> /*-----White rounded border bg -------*/
> </a>
> 
> ```

```
<pre><span><style>
[data-test="glide-app-bar"] >* {
    backdrop-filter: blur(0px);
    background: transparent; 
    -webkit-backdrop-filter: blur(0px);
} /*----- Nav-bar hidden -------*/

#app-root div[opacity='1'] {
  color: transparent;
} /*----- Nav-bar name hidden -------*/

[data-test="nav-bar"] {
  content: "";
  display: flex;
background-image: url(URL);
  background-size: 45px 45px;
  background-repeat: no-repeat; 
background-position: center, center;
;} /*----- Nav-bar icon -------*/

div[id*='screenScrollView'] > div > div:nth-of-type(2){
z-index: -2 !important;
opacity: 1 !important;
margin-top: -105px !important;
} /*----- Image to the Top -------*/

div[id*='screenScrollView'] > div > div:nth-of-type(3) {
z-index: -1 !important;
margin-top: -115px !important;
} /*----- Text to the Top -------*/

```

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 15, 2021, 8:58pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/532 "2021-05-15T20:58:18Z")

</div>

BEAUTIFUL!

Thank you, Lucas!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 17, 2021, 12:25am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/533 "2021-05-17T00:25:28Z")

</div>

THANKS LUCAS!

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/b/5bb23cd2678f5cf1106b1af0f0637368037fdca1.jpeg)

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 17, 2021, 12:48am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/534 "2021-05-17T00:48:54Z")

</div>

You’re welcome bro! 😁

---

<div class="post-metadata">

**Author:** ![Jesus\_Or](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jesus_or/32/27555_2.png) [@Jesus\_Or](https://community.glideapps.com/u/Jesus_Or)\
**Post date:** [May 17, 2021, 12:51am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/535 "2021-05-17T00:51:54Z")

</div>

Hola me encantaron los botones redondeados, te importaría compartirme es css, te lo agradecería muchísimo 🙏✌

---

<div class="post-metadata">

**Author:** ![Pedroydzito](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pedroydzito/32/85187_2.png) [@Pedroydzito](https://community.glideapps.com/u/Pedroydzito)\
**Post date:** [May 17, 2021, 8:43pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/536 "2021-05-17T20:43:21Z")

</div>

Thank you!

```
<span><style>
[data-test=app-button-view] {border-radius: 25px;
</style></span>
```

---

<div class="post-metadata">

**Author:** ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)\
**Post date:** [May 17, 2021, 8:48pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/537 "2021-05-17T20:48:46Z")

</div>

Thank you!, man! Simple but beatiful detail  
Gonna try it

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 19, 2021, 8:39am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/538 "2021-05-19T08:39:54Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/6/26847a11947d88d563e166b704961e51426fc8d6.jpeg)

White entry components (text + image picker + phone) on full background.

```auto
<pre><span><style>
[data-test="app-text-field"] > .tf-inner {
border-bottom: 1px solid white;
background-color: transparent;
}
[data-test="app-text-field"] > .tf-inner >div {
color: white;
}
[data-test="app-text-field"] .tf-inner :nth-child(1) {
color: white;
}
[data-test="app-text-field"] .tf-inner .ta-inputbox {
color: white;
}
[data-test="app-file-picker"] >div {
color: white;
}
[data-test="app-file-picker"] :nth-child(1) {
opacity: 1;
color: white;
}
[data-test="app-file-picker"] :nth-child(2) {
color: white;
}
[data-test="app-hint"] .hint-header {
color: white;
}

```

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 20, 2021, 12:55am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/539 "2021-05-20T00:55:48Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/4/f40b180230455164f1c7a55715e5cc8b6d6c9926.png)

Personalized welcome message at the top + circle profile image.

Preset: 1st item in the screen is an inline list with welcome message being the details field, title and caption are filled by a template empty character taken from [https://emptycharacter.com/](https://emptycharacter.com/).

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/3/2312dfc8dfba1528112e9ca917124a10cb464aee.jpeg)

Code:

```auto
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .imageBaseStyle {
border: solid 3px #0962A9;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

[data-test="list-item"] .textDetailStyle {
font-weight: 800;
color: #0962A9;
font-size: 23px;
line-height: 1.8rem;
white-space: break-spaces;
}

```

Thanks to previous ideas from @Lucas_Pires and @Robert_Petitto (for styling nth-component and customizing the border of the image).

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 20, 2021, 1:18am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/540 "2021-05-20T01:18:02Z")

</div>

Update: If you want the text under the welcome message.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/8/88ee3fc9569e602d034c78686f603be2b0794a33.png)

```auto
<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) .imageBaseStyle {
border: solid 3px #0962A9;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .textDetailStyle {
font-weight: 800;
color: #0962A9;
font-size: 23px;
line-height: 1.8rem;
white-space: break-spaces;
}

div[id*='screenScrollView'] > div > :nth-of-type(1) .textCaptionStyle {
font-weight: 600;
color: black;
opacity: 0.6;
white-space: break-spaces;
}

```

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [May 21, 2021, 1:11pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/541 "2021-05-21T13:11:32Z")

</div>

How sick is that ! I’ve tried to reproduce it but it didn’t work the same way than on your pictures. Is the text under the Welcome message an action or rich texte ?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 21, 2021, 2:37pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/542 "2021-05-21T14:37:58Z")

</div>

Do you mean for the first or second code? For the second one it’s the caption of the inline list.

---

<div class="post-metadata">

**Author:** ![AymenM](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/aymenm/32/21370_2.png) [@AymenM](https://community.glideapps.com/u/AymenM)\
**Post date:** [May 21, 2021, 3:10pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/543 "2021-05-21T15:10:06Z")

</div>

Wrote too fast everything is working fine 🙂 Thanks !!

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 22, 2021, 5:43am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/544 "2021-05-22T05:43:57Z")

</div>

One for the CSS gurus… @Lucas_Pires @Manu.n @ThinhDinh

 ![Screen Shot 2021-05-22 at 1.37.23 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/7/9722ef6f5ad605b9316eb7060d3d72b711cb14c5.png)

I’m trying to stop that “Wed” from wrapping, and can’t for the life of me figure it out. Here’s my current CSS:

```auto
.calendar__date {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(7, minmax(10%, 1fr));
  grid-gap: 10px;
  box-sizing: border-box;
}

.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 25px;
  font-weight: 600;
  color: #262626; 
}

```

Note that the Days of Week use the `.calendar __day` class, which inherits from `.calendar__ date`.  
I’ve tried adjusting the `font-size`, I’ve tried setting `nowrap`, but nothing seems to work.

Any clues?

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [May 22, 2021, 8:15am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/545 "2021-05-22T08:15:09Z")

</div>

H @Darren_Murphy  
It’s curious,  
Can be a padding: 0px;  
or a slightly larger Width  
or a white-space: pre-wrap! important;

Edit  
But the base is a List component or HTML ?  
It may be correct to make a new discussion on the forum !

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [May 22, 2021, 8:26am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/546 "2021-05-22T08:26:25Z")

</div>

Can you give us the HTML code of that calendar to test? Thank you.

---

<div class="post-metadata">

**Author:** ![Darren\_Murphy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/darren_murphy/32/47326_2.png) [@Darren\_Murphy](https://community.glideapps.com/u/Darren_Murphy)\
**Post date:** [May 22, 2021, 8:29am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/547 "2021-05-22T08:29:27Z")

</div>

here’s what the HTML template looks like:

```auto
<div class="calendar">
  <div class="calendar__picture">
    <h2>{Year}</h2>
    <h3>{Month}</h3>
  </div>
  <div class="calendar__date">
    <div class="calendar__day">Sun</div>
    <div class="calendar__day">Mon</div>
    <div class="calendar__day">Tue</div>
    <div class="calendar__day">Wed</div>
    <div class="calendar__day">Thu</div>
    <div class="calendar__day">Fri</div>
    <div class="calendar__day">Sat</div>
    {ListDays}
  </div>
</div>

```

One thing I realised is that the wrapping issue is only present in the builder - when I view on my IOS phone, it’s fine. So maybe I’m worrying about nothing…

[Previous page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=26)

[Next page](https://community.glideapps.com/t/beautiful-design-app/16191.md?page=28)