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

<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 16, 2021, 5:26pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/387 "2021-02-16T17:26:09Z")

</div>

In place of an image or title component, a lot of times I’ll create a multiple relation to link a row back to itself. This allows for an inline list with a Tile or Card view with all the design and layout features. That becomes my image on the screen and you can have your rounded corners, tags, captions, and whatever else you want.

---

<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 16, 2021, 11:32pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/388 "2021-02-16T23:32:28Z")

</div>

Assuming you have the code for background picture already, you can use this website to generate a background image with just color: [https://dummyimage.com/](https://dummyimage.com/)

Set the background color and fontground color to be the same to get the effect.

Example: [https://dummyimage.com/600x400/1a8f74/1a8f74](https://dummyimage.com/600x400/1a8f74/1a8f74)

---

<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 16, 2021, 11:33pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/389 "2021-02-16T23:33:09Z")

</div>

Can you try adding:

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

```

Before the data test part.

---

<div class="post-metadata">

### Author: ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)
#### Post date: [February 17, 2021, 2:42am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/390 "2021-02-17T02:42:09Z")

</div>

I use it to avoid an image:

```
<pre><span>
<div class="background"></div><style>
  .background {
    position:fixed;
    margin-top:0;
    background: black;
    width:100%;
    height: 100%;
    top:5.5em;
    right:0;
    z-index:-1;
}
</pre></span>

```

I hope it helps you.  
Saludos!

---

<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 17, 2021, 4:58am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/391 "2021-02-17T04:58:13Z")

</div>

Thanks brother.  
I don’t want to use image. I was looking for a way to set bg color without image. Don’t know if this even possible with css

---

<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 17, 2021, 4:59am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/392 "2021-02-17T04:59:13Z")

</div>

Exactly what I was looking for. Will give this a try today.

Thank you

---

<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 17, 2021, 6:40am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/393 "2021-02-17T06:40:16Z")

</div>

thank you!

Works perfectly

---

<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 19, 2021, 8:53pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/394 "2021-02-19T20:53:58Z")

</div>

Would it be my dream to build an app like this? 😟

---

<div class="post-metadata">

### Author: ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)
#### Post date: [February 19, 2021, 9:04pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/395 "2021-02-19T21:04:38Z")

</div>

😳 🤩

I think you could make something close - you already have some pretty awesome apps!

---

<div class="post-metadata">

### Author: ![wjcv06](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/wjcv06/32/12747_2.png) [@wjcv06](https://community.glideapps.com/u/wjcv06)
#### Post date: [February 19, 2021, 10:33pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/396 "2021-02-19T22:33:42Z")

</div>

Have you ever try Flutter? 💡

---

<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 19, 2021, 10:35pm UTC](https://community.glideapps.com/t/beautiful-design-app/16191/397 "2021-02-19T22:35:08Z")

</div>

No, but I know it could be made there

(i’m not a programmer btw lol)

---

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

</div>

Here’s a way to change the color of the icons in rating component.

> **[Screen Recording 2021-02-20 at 08.04.35 AM.m3u8](https://media.lowcode.agency/o0uEZ9rD)**

I have to opt for the 5 rich text way, didn’t find a way to do it more smoothly with only one.

```
<pre><span><style>
[class="rating-icon rating-id-1"] svg {
fill: #800020;
}

```

Change id-1 to id-2 till id-5 and set the corresponding visibility based on the rating value.

---

<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 20, 2021, 1:24am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/399 "2021-02-20T01:24:35Z")

</div>

Would it be better to still have the 5 styles for each ID, but place them all in a single rich text component?

---

<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: [February 20, 2021, 2:09am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/400 "2021-02-20T02:09:27Z")

</div>

Change the rating color:

```auto
<pre><span><style>
[data-test="app-rating-component"] :nth-child(2) svg {
fill: red;
}

```

 ![Screen Shot 2021-02-19 at 9.08.11 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/b/6bbae07ca1ab345d90a9a41ea8d0781319bc0c4e.png)

@alfonso_ayala

---

<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: [February 20, 2021, 2:16am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/401 "2021-02-20T02:16:55Z")

</div>

thanks man when the rest fails look for robert 🙂 very friendly as always

---

<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 20, 2021, 2:34am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/402 "2021-02-20T02:34:53Z")

</div>

But in your screenshot doesn’t it fill the 5th star as well? That was the part where I struggled.

@Jeff_Hager I had to do 5 because each corresponds to a single icon.

---

<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: [February 20, 2021, 2:55am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/403 "2021-02-20T02:55:25Z")

</div>

Hm. So it does. Ignore my last post…will need to rework this.

---

<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 20, 2021, 3:35am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/404 "2021-02-20T03:35:47Z")

</div>

Yep, I understand that. I was just thinking you could join all of the css from each rich text into a single rich text component. They would still be separate and set each star individually, but you wouldn’t need so many rich text components.

---

<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 20, 2021, 4:20am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/405 "2021-02-20T04:20:42Z")

</div>

If I join all 5 then it would be in an “active” state at all times.

Let’s say the rating is 3, I only need to override Glide’s default “grey” value for the first 3 icons of the 5.

If I join all 5 then it will always have my override color whatever the rating value is.

Separating into 5 components let me have the conditions to override only when the rating is 3 or more, is 4 or more etc.

Definitely would love a better way to do this 😅

---

<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 20, 2021, 4:27am UTC](https://community.glideapps.com/t/beautiful-design-app/16191/406 "2021-02-20T04:27:35Z")

</div>

Ahh, ok. Sorry about that. I missed the part about the visibility conditions. Nevermind. 😳

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

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