Beautiful Design App

Project Showcase
769

I am trying to do something similar but for 20 emojis, representing 20 metrics. Is it possible to have 4 rows of 5?
:card_index:
:gear:
:sunglasses:
:magnet:
:chart:
:beach_umbrella:
:curry:
:sunny:
:droplet:
:recycle:
:sunrise_over_mountains:
:building_construction:
:metro:
:baby_bottle:
:herb:
:shrimp:
:national_park:
:sailboat:
:school:
:earth_americas:
or is that way too many? thank you for your help…!

2 Likes
770

Do you mean in choice components? I’m sure we can do that. What color for the background of the chosen icon do you want?

2 Likes
771

Here you go.

Copyable app: https://tdconcepts.glideapp.io/

4 Likes
772

image
image925×263 22.9 KB

:confused:

1 Like
773

Sorry, here’s the code.

<pre><span><style>

[id*='screenScrollView'] >div >div .current {
color: white !important;
background-color: white;
border: 5px solid green;
}

[data-test="app-inline-picker"]{
padding: 2px 0px 12px 0px;
height: 60px;
justify-content: center;
background: transparent;
}

[data-test="app-inline-picker-item"] {
background: white;
border: 1px solid black;
color: white;
border-radius: 50%;
margin: 0 7px;
max-width: 50px;
}

[data-test="app-inline-picker-item"] >div {
background-color: transparent !important;
}
5 Likes
774

Thank you!

2 Likes
775

can’t thank you enough… much appreciated!

3 Likes
776

Hi Gliders !
I’m working on this :point_down:t4:
Tell me what you think about it !

Capture d’écran 2021-08-17 à 1.15.01 AM
Capture d’écran 2021-08-17 à 1.15.01 AM786×1663 118 KB

12 Likes
777

looks great

2 Likes
778

love it

2 Likes
779

wow this is very good! I love the people illustrations (that’s good, coming from an illustrator)

2 Likes
780

Hi Gliders

Please can anyone assist me with CSS to change the colour of the check icon in my app to green as it picks the app colour theme?

Thanks

Check Icon1

Check Icon2

1 Like
781 
<pre><span><style>

[data-test="list-item"] >div >div >svg {
fill: green;
}

image
image586×1214 43.7 KB

I was not able to change the “ring” color though.

7 Likes
782

Beautiful!!! Works just fine. I truly appreciate

2 Likes
783

:upside_down_face:don’t work for me

1 Like
784

These components have had a rework about some weeks ago (so structure of code is changed) and to be honest I would not use a background along those entries now. It looks more beautiful to me.

1 Like
785

But if you really want this here’s a quick draft.

image
image1396×1054 94.6 KB

6 Likes
786

THANKS BRO :slightly_smiling_face:

1 Like
787

image
image1920×1080 100 KB 

<pre><span><style>

[data-test="app-button-view"] {
background-color: transparent !important;
border: 1px solid transparent !important;
margin: 10px 90px;
color: #E50914 !important;
border-color: #E50914 !important;
letter-spacing: 4px;
}

[data-test="app-button-view"]:hover {
color: #fff !important;
background-color: #E50914 !important;
border-color: #E50914 !important;
box-shadow: 0 0 10px #E50914, 0 0 40px #E50914, 0 0 80px #E50914;
}
2 Likes
788

Oh wow awesome. can you share or point me to @Jeff_Hager 's code please! I want to show a calendar that can visually show if user has completed the task for that day.