Let’s get it to look beautiful so it makes sense to post it in this thread! 
1 Like
You will!!
This is the idea
2 Likes
Don’t know why I didn’t reply to this. Thank you so much sir.
1 Like
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 
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.
4 Likes
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.
1 Like
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.
5 Likes
After they write in the note, though, does that text still appear?
1 Like
Yes it does still appear. The recording is the note with a “Lorem ipsum” text inside it.
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”.
2 Likes
smart
1 Like
thanks bro i just have a use case for this
2 Likes
So slick!
2 Likes
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!
4 Likes
Yep!
<pre><span><style>
.tile-overlay {
background: rgba(0, 0, 0, 0.2) !important;
}
6 Likes
Thanks @Robert_Petitto,
That worked like a charm!
2 Likes
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.
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”>
what I do, is to upload an empty PNG image.
1 Like
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?
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;
}
2 Likes