Beautiful Design App

Try this:

<pre><span><style>
[data-test="list-item"] { 
background: #FF8000; 
}
2 Likes

thank you… that worked! much appreciated

1 Like

Thanks! THANKS! T H A N K S !!! MERCI :slight_smile:

Hola gente!!!

Does anyone have a code to achieve this?
Screen Shot 2021-07-16 at 11.23.30 PM

There’s a code on the forum but it is not working.

@ThinhDinh @Manu.n @Lucas_Pires @Robert_Petitto

Thanks guys!

1 Like

Hi, what is the original code ??

It is this one right here. @Manu.n

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

<pre><span><style> 

[data-test="app-summary"] > div > div > div > div {
color: #FFF; }

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left; 
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}

<pre><span><style> 

[data-test="app-summary"] > div > div > div  {
color: #FFF; 
}

.hUuORH.hUuORH {
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 1px;
margin: 0px 16px 0px 20px;
justify-content: left;
}

<pre><span><style>

.hUuORH.hUuORH {
color: #TEXT !important;
background-color: #BACKGROUND !important;
border-color: #BORDER !important;
padding: 20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom: 0px;
margin: 0px 16px 0px 20px;
justify-content: left;
text-align: left;
font-size: 1.1rem;
font-weight: 700;
}
[data-test="app-tag-overlay"] {
background-color: #BACKGROUND;
color: #TEXT;
}
2 Likes

yeah !!!
But it is easier to use a list-tiles with images !!!

1 Like

@Manu.n

That’s what I am using but I want them to be centered and closer together.

function with tile horizontal mode


<pre><span><style>

[data-test="app-horizontal-list"] .inner {
    column-gap: 2px !important;
margin:0px auto;
}

</style></span></pre>
7 Likes

Thanks @Manu.n

It works great!!!

with smaller images


<pre><span><style>

[data-test=app-horizontal-list] .scroller {
overflow-x:visible;
}

[data-test=app-horizontal-list] .inner {
grid-template-columns: repeat(4,50%)
!important;
width:35%;
 column-gap: 2px !important;
margin:0px auto;
transform:translatex(-35%);
}

[data-test=app-horizontal-list] .tile-image-area:nth-child(1) img  {
height:60%;
border-radius: 50%;
}

</style></span></pre>
10 Likes
6 Likes

Mine was a little unique in that I set it up using both css and html. The social icons are dynamically displayed for each unique user, so a horizontal list didnt work for me

Thanks!!!’

I got it with @Manu.n’s help.

Hola @ThinhDinh

Is this still working on your app??? I have in 3 apps and seems to have stopped working.

I handed that app over already so haven’t checked. What exactly does not work?

The icon doesn’t change at all, it only takes the Glide default one.

Stil working normally for me.

3 Likes

Hi @Lucas_Pires . I was discovering your Succinte app and would like to ask about it, but can’t find the thread, sorry.
I want to know how you created those first pages that educate the user about the app, before going to the dashboard.

Thank you

To change the look of the Choice component I put your code in the Rich text before Choice component but nothing happens. What I did wrong?