# 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:** 19

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 7, 2021, 3:35am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/367 "2021-02-07T03:35:53Z")

</div>

you can only make that with inline lists that will be controlled by action

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 7, 2021, 3:44am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/368 "2021-02-07T03:44:11Z")

</div>

Anything that doesn’t require user input could probably be realtively easy with dynamically built html/css inserted into the screen with a rich text component. Once you start to mix your own design with user input components, then it becomes a bit more limited and complicated.

For example, the Month Layout tab in the following app has two different types of calendars on it. The top calendar is an inline list with some serious manipulation through CSS, but the bonus is that you can interact with each day by tapping on them. The bottom calendar is built completely with dynamically built html div tags in one rich text component, along with a second rich text component that handles the css. It looks pretty but you can’t interact with it like you can on the top calendar. You might be able to get something close to your image, but exactly the same might be hard. I would take some creative freedom and see if you can come up with something decent and present that to see if they like it or not.

> **[Calendar Concept](https://nonchalant-creature-8307.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![Daniel\_Canup](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniel_canup/32/32850_2.png) [@Daniel\_Canup](https://community.glideapps.com/u/Daniel_Canup)\
**Post date:** [February 7, 2021, 5:06am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/369 "2021-02-07T05:06:37Z")

</div>

Yes, it is pulling data… I will show you what I am doing currently.

> **[4 Numbers · Glide · Create Apps from Google Sheets](https://www.loom.com/share/5f1f056888d5446a81b9c8161686e152)**
>
> Check out a video I made via Loom

---

<div class="post-metadata">

**Author:** ![Daniel\_Canup](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/daniel_canup/32/32850_2.png) [@Daniel\_Canup](https://community.glideapps.com/u/Daniel_Canup)\
**Post date:** [February 7, 2021, 5:08am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/370 "2021-02-07T05:08:56Z")

</div>

I will do this Jeff. Thanks man. Could you show me what you mean code-wise about the Rich Text HTML and CSS? I didn’t relive I could use HTML in one? Just markup language.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [February 7, 2021, 5:32am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/371 "2021-02-07T05:32:43Z")

</div>

The app I shared is copyable.

Anything other than Markdown isn’t officially supported, but many of us some html or css sparingly.

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [February 7, 2021, 6:40am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/372 "2021-02-07T06:40:10Z")

</div>

Can’t view your video brother

---

<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:** [February 8, 2021, 1:10am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/373 "2021-02-08T01:10:57Z")

</div>

Thank you @gvalero 😁

---

<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:** [February 8, 2021, 3:29am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/374 "2021-02-08T03:29:13Z")

</div>

Hi brother, I re-recorded the flow for you:

> **[Screen Recording 2021-02-08 at 10.27.54 AM.m3u8](https://media.lowcode.agency/llu9DJP7)**

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 8, 2021, 4:55am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/375 "2021-02-08T04:55:59Z")

</div>

★ For pages where you want to hide the tab at the bottom of the app.  
★ Hiding that tab closes the way to other tabs.  
★ In that case, you may need a custom tab.

- The CSS presented by [Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires) is used.

---

<div class="post-metadata">

**Author:** ![Simon\_Hill](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/simon_hill/32/94730_2.png) [@Simon\_Hill](https://community.glideapps.com/u/Simon_Hill)\
**Post date:** [February 8, 2021, 7:50am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/376 "2021-02-08T07:50:50Z")

</div>

Stunning… would love to know how you make videos play automatically!

---

<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:** [February 8, 2021, 9:21am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/377 "2021-02-08T09:21:39Z")

</div>

It’s a GIF, not a video.

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [February 8, 2021, 12:47pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/378 "2021-02-08T12:47:35Z")

</div>

Beautiful brother.  
You have to show me the css for this

---

<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:** [February 8, 2021, 1:35pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/379 "2021-02-08T13:35:16Z")

</div>

For the tile wrap in the first screen.

```
<pre><span><style>
[data-test="tile-item"] .tile-title {
white-space: break-spaces;
}
</pre></span></style>

```

For all the things inside:

```
<div><div>
    <style>
    [data-test="glide-app-bar"] >* {
    backdrop-filter: blur(2px);
    background:transparent;
    -webkit-backdrop-filter: blur(2px);
    }
    #app-root div[opacity='1'] {
      color: transparent; 
    }
    .jiuuwu svg {
    display: none;
    }
    .gpkkHC svg {
    display: none;
    }
    .gpkkHC {
    position: unset;
    }
    .glbESi {
    padding-top: 10px;
    }
    [data-test="list-item"] {
    background-color: white;
    }
    .builder [data-test="list-item"].interactive:hover {
    background-color: #00CC66;
    }
    [data-test="card-item"] .card-subtitle {
    padding-top: 5px;
    -webkit-line-clamp: unset;
    overflow: visible;
    white-space: break-spaces;
    font-size: 0.25 prem;
    }
    [data-test="card-item"] .card-title {
    text-align: center;
    color: #00CC66;
    font-size: 1rem;
    font-weight: bold;
    align: center;
    }
    [data-test="card-item"] {
    border-radius: 5px;
    }
```

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [February 8, 2021, 4:47pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/380 "2021-02-08T16:47:36Z")

</div>

I’m going to need help from you understanding this.  
Let me know if you have time this week and we’ll do a zoom

---

<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:** [February 10, 2021, 6:28pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/381 "2021-02-10T18:28:28Z")

</div>

> [@Robert\_Petitto](#):
>
> ```auto
> <pre><span><style>
> .tile-image-area :nth-child(1) img {
> height: 150px;
> width: 150px;
> border-radius: 50%;
> margin: 10px;
> }
> 
> [data-test="tile-item"] {
> border: solid 1px #9ec1cc;
> }
> 
> [data-test="app-tag-overlay"] {
> position: absolute;
> right: 10px;
> bottom: 10px;
> border-radius: 5px;
> font-size: 1rem;
> padding: 10px;
> text-transform: unset;
> }
> .tile-title {
> white-space: pre-wrap !important;
> overflow: visible !important;
> font-weight: 700 !important;
> font-size: 1.3rem !important;
> line-height: 1.5rem !important;
> }
> 
> .tile-subtitle {
> white-space: pre-wrap !important;
> overflow: visible !important;
> font-weight: 700 !important;
> font-size: 1rem !important;
> line-height: 2rem !important;
> }
> 
> .tile-text-container {
> position: absolute;
> top: 10%;
> right: 10px;
> white-space: pre-wrap !important;
> overflow: visible !important;
> text-align: left !important;
> width: 150px;
> }
> 
> .tile-image-area {
> height: 170px;
> }
> 
> ```

@Robert_Petitto or anyone else  
I changed the BG color or the card and how I remove this **Hover** effect?

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/d/fdfe00d28f8105db3bede19cac2befed125d66e9.gif)

---

<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:** [February 10, 2021, 7:07pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/382 "2021-02-10T19:07:12Z")

</div>

K, fixed.

Added:

```
[data-test="tile-item"]:hover {
background-color: BG-COLOR;
}

```

Used the same bg color as hover.

---

<div class="post-metadata">

**Author:** ![everys](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/everys/32/10724_2.png) [@everys](https://community.glideapps.com/u/everys)\
**Post date:** [February 14, 2021, 10:49am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/383 "2021-02-14T10:49:35Z")

</div>

quick fix for Swipe Card Style’s inline vertical list to keep things on screen.

[data-test=“app-vertical-list”] div div {  
max-width: 100%;  
}

---

<div class="post-metadata">

**Author:** ![Pablo\_books](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablo_books/32/2110_2.png) [@Pablo\_books](https://community.glideapps.com/u/Pablo_books)\
**Post date:** [February 16, 2021, 4:54pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/384 "2021-02-16T16:54:03Z")

</div>

Here’s something I made:  
the image component doesn’t have a ‘rounded’ feature, so…

```auto
<pre><span><style>
[class="sc-dsXyEt fKhxPv sc-bRucMC dfUOtl contain undefined"] {
border-radius: 100%;

```

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [February 16, 2021, 5:01pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/385 "2021-02-16T17:01:11Z")

</div>

it doesnt seems to do anything on my app. my inline list still being cropped

---

<div class="post-metadata">

**Author:** ![yinon\_raviv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/yinon_raviv/32/1627_2.png) [@yinon\_raviv](https://community.glideapps.com/u/yinon_raviv)\
**Post date:** [February 16, 2021, 5:15pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/386 "2021-02-16T17:15:50Z")

</div>

@Lucas_Pires@Robert_Petitto

Hi both,

Do you have any idea how to add bg color to the screen instead of using bg image?

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

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