It is this one right here. @Manu.n
Oh man… this would be awesome if we could use CSS the right way. Super exciting to hear that its being looked at!
I use CSS mainly to style buttons, implement full background images, change the color of fonts, change padding/margins. In addition, I give users the ability to modify their color choices for their buttons and background opacity.
Before:
[Screen Shot 2021-06-04 at 12.20.44 PM]
After:
[Screen Shot 2021-06-04 at 12.19.51 PM]
<div class="background"></div>
<pre><span><s…
<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
Manu.n
July 17, 2021, 4:40am
750
yeah !!!
1 Like
@Manu.n
That’s what I am using but I want them to be centered and closer together.
Manu.n
July 17, 2021, 5:07am
752
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
Manu.n
July 17, 2021, 5:17am
754
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
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
Ludka
July 23, 2021, 1:38am
762
Hi @Lucas_Pires . I was discovering your Succinte app and would like to ask about it, but can’t find the thread, sorry.
Thank you
Falcor
July 23, 2021, 11:31am
763
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?
Many people including me use the choice component to show different inline lists based on user’s choice.
The new update for the segmented choice component makes it look not that great, so here’s my fix.
<pre><span><style>
[id*='screenScrollView'] >div >div .current {
color: white !important;
background-color: #D2202F;
}
Please change your background color accordingly.
Also, this makes me realize the choice component now supports a “current” class so it might make life easier for us to customize it @Robert_Petitto @Lucas_Pires @Manu.n .
7 Likes
I noticed that! Time to customize!
2 Likes
[id*='screenScrollView'] >div >div .current {
color: white !important;
background-color: black;
}
[data-test="app-inline-picker"]{
padding: 2px 0px 12px 0px;
height: 60px;
justify-content: center;
background: transparent;
}
[data-test="app-inline-picker-item"] {
background: #008080;
color: white;
border-radius: 50%;
margin: 0 7px;
max-width: 50px;
}
[data-test="app-inline-picker-item"] >div {
background-color: transparent !important;
}
No need for complex specific component target @Lucas_Pires .
Updated here.
2 Likes
Perfect - even got my colour right!
1 Like
I really like this new design +1
1 Like
