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

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [April 10, 2021, 9:12am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/487 "2021-04-10T09:12:31Z")

</div>

Let’s get it to look beautiful so it makes sense to post it in this thread! 😀

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [April 10, 2021, 9:12am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/488 "2021-04-10T09:12:51Z")

</div>

You will!!😀

---

<div class="post-metadata">

**Author:** ![PabloMFalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/pablomfalero/32/31166_2.png) [@PabloMFalero](https://community.glideapps.com/u/PabloMFalero)\
**Post date:** [April 10, 2021, 5:03pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/489 "2021-04-10T17:03:28Z")

</div>

> [@Chat and Comments using the Trebuchet Method](https://community.glideapps.com/t/chat-and-comments-using-the-trebuchet-method/25396):
>
> Hey Gliders, so using the Trebuchet Method created by @Robert_Petitto and @Lucas_Pires , @SantiagoPerez and I went a step further and created a chat and comments section that will no count towards your number of rows. Most of the credits go to the creators of this method, we just spiced it up!!! slight_smile Hope everyone likes the idea!!

This is the idea

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [April 12, 2021, 1:55pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/490 "2021-04-12T13:55:04Z")

</div>

Don’t know why I didn’t reply to this. Thank you so much sir.🙂

---

<div class="post-metadata">

**Author:** ![Lisa](https://avatars.discourse-cdn.com/v4/letter/l/f08c70/32.png) [@Lisa](https://community.glideapps.com/u/Lisa)\
**Post date:** [April 14, 2021, 3:45am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/491 "2021-04-14T03:45:05Z")

</div>

Has anyone done conditional CSS?

Specifically working on an app with posts using the card layout.

I want to showcase images on cards that have them but hide the card’s gray background filler if the image element is empty.

I tried pseudo class (:empty) but with no luck 🙃

---

<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:** [April 14, 2021, 4:13am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/492 "2021-04-14T04:13:40Z")

</div>

> **[Screen Recording 2021-04-14 at 11.09.14 AM](https://media.lowcode.agency/6qu8xnk2)**

I had a use case that the carousel is not really obvious to the eye that it’s a carousel (with more images available to the right).

```
<pre><span><style>
[data-test="app-image-carousel"] .tag{
opacity: 1;
animation: none;
bottom: 10px;
}

```

You can also change the background-color and color (text’s color) how you want.

@Robert_Petitto @Darren_Murphy @Jeff_Hager hope this helps. I believe in the past @Krivo had to use Cloudinary to make this more obvious.

---

<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:** [April 14, 2021, 4:20am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/493 "2021-04-14T04:20:39Z")

</div>

It’s an interesting use case and I have tried to do this many times, with almost similar requirements without any success. Probably worth taking a look again when I have time.

---

<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:** [April 20, 2021, 1:51am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/494 "2021-04-20T01:51:13Z")

</div>

I had a use case to overwrite a text for a component because the default text is not what the client wants. In this case it’s the note component.

```
<pre><span><style>
[data-test="app-note-preview"] .add-label{
 color: transparent;
}
[data-test="app-note-preview"] .add-label:after{
  content: "View/edit note"; 
  text-indent: 0;
  display: block;
  line-height: initial;
  position: absolute;
  color: grey;
  top: 2px;
  font-size: 0.9rem;
  padding: 72px 0px;
}

```

The logic is that you hide the original text, then add a new one after it and set it to be visible. The rest is just styling and placing it at the right place (padding & position).

I think this can also apply to many other components, let’s say Glide’s delete button.

Hopefully this would help @Robert_Petitto @Jeff_Hager @SantiagoPerez @Lucas_Pires @Darren_Murphy.

---

<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:** [April 20, 2021, 1:54am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/495 "2021-04-20T01:54:47Z")

</div>

After they write in the note, though, does that text still appear?

---

<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:** [April 20, 2021, 1:56am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/496 "2021-04-20T01:56:29Z")

</div>

Yes it does still appear. The recording is the note with a “Lorem ipsum” text inside it.

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

I have a visibility condition so that the CSS only applies when the note field is not empty. When it is empty I use the native “Add new note”.

---

<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:** [April 20, 2021, 2:01am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/497 "2021-04-20T02:01:07Z")

</div>

> [@ThinhDinh](#):
>
> I have a visibility condition so that the CSS only applies when the note field is not empty

smart

---

<div class="post-metadata">

**Author:** ![alfonso\_ayala](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alfonso_ayala/32/10862_2.png) [@alfonso\_ayala](https://community.glideapps.com/u/alfonso_ayala)\
**Post date:** [April 20, 2021, 2:34am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/498 "2021-04-20T02:34:45Z")

</div>

thanks bro i just have a use case for this 😀

---

<div class="post-metadata">

**Author:** ![Lucy\_Pink](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucy_pink/32/25485_2.png) [@Lucy\_Pink](https://community.glideapps.com/u/Lucy_Pink)\
**Post date:** [April 21, 2021, 10:09am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/499 "2021-04-21T10:09:27Z")

</div>

So slick!

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [April 29, 2021, 4:36pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/500 "2021-04-29T16:36:52Z")

</div>

Epale gente,

Does anyone know of a CSS to reduce the opacity of the overlay when the title is at the center of the image in a tile inline list?

@ThinhDinh @Lucas_Pires @Robert_Petitto

Thank you guys!

---

<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:** [April 29, 2021, 8:00pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/501 "2021-04-29T20:00:37Z")

</div>

Yep!

```auto
<pre><span><style>
.tile-overlay {
background: rgba(0, 0, 0, 0.2) !important;
}

```

---

<div class="post-metadata">

**Author:** ![SantiagoPerez](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/santiagoperez/32/16807_2.png) [@SantiagoPerez](https://community.glideapps.com/u/SantiagoPerez)\
**Post date:** [April 29, 2021, 8:09pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/502 "2021-04-29T20:09:30Z")

</div>

Thanks @Robert_Petitto,

That worked like a charm!

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [May 1, 2021, 4:05pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/503 "2021-05-01T16:05:25Z")

</div>

As far I can see there is no way to remove the three dots on the right and prevent a download so I share my little experience which lead me to use elfsight audio player and embedding via webview and iframe .I would have preferred to use the Glide player so if anyone is able to tell here how to remove that three dots or the download option would be so appreciate! Thanks.

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

Ps.could this work? Can you help me? To disable the dowload button for HTML5 audio and video player add the following to your tag to your audio node.

(To disable the dowload button for HTML5 audio and video player add the following to your tag to your audio node.

\< audio controls controlsList=“nodownload”\>

\< video controls controlsList=“nodownload”\>)

> 

\> \>

---

<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:** [May 2, 2021, 5:10am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/504 "2021-05-02T05:10:30Z")

</div>

what I do, is to upload an empty PNG image.

---

<div class="post-metadata">

**Author:** ![christoph](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/christoph/32/22794_2.png) [@christoph](https://community.glideapps.com/u/christoph)\
**Post date:** [May 3, 2021, 1:27pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/505 "2021-05-03T13:27:46Z")

</div>

Hi @ThinhDinh,  
I wanted to use the nth-of-type method to change the background of different elements, it is working in the editor but not showing the background in the app  
this is what I did:

```
div[id\*='screenScrollView'] \> div \> :nth-of-type(9) [data-test="app-markdown-view"] {background-color: grey;} Any idea?
```

---

<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 3, 2021, 1:32pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/506 "2021-05-03T13:32:03Z")

</div>

> [@christoph](#):
>
> `[data-test="app-markdown-view"]`

I guess you don’t need this class here. Have you tried without it?

Like this

```
div[id*='screenScrollView'] > div > :nth-of-type(9) {
background-color: red;
}

```

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

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