Let me tell that a save state functionality with all those settings is something I do hope to see coming , I know there are undos, I know there are the duplicates but an history of the changes would be so important , all those wonderful workarounds and maybe you’re in hurry or tired and you lose all , or maybe could be so useful to go back to a day where we know the app was working…, just saying.I know its not having the code but a “project file” saved on my desk would make sleep better.
Bit off topic but see how much work here from all you talents, a save its needed IMO.
Nice job 
1 Like
How about custom floating buttons icons???
But anyway… since we have reach text actions now, most of the css tricks should focus on good images targeting and style. That would work on all devices and operating systems
1 Like
You got this notification blue badge with Cloudinary?
How can I use it? I’m not familiar with cloudinary 
@ThinhDinh You can also create another conditional Rich Text CSS box to overlay an emoji. Again, you’d need to do this on EVERY details screen in the entire app.
3 Likes
I tried to put my Cloudinary’s username, but didnt work… Do I have to create something in my account?
Can we do it a little bit smaller?
Sure can!
2 Likes
Or this?
<pre><span><style>
button[aria-label="Profile"]::before {
content:url("https://www.teahub.io/photos/full/226-2267889_animated-circle-gif-transparent.gif");
bottom: -346px;
transform: scale(.045);
font-size: 8px;
position:absolute;
padding-left:0px;
z-index:1;
}
</style>
13 Likes
Thanks Bob these are super helpful!
Going forward if we do want something like this even more thoughts need to be put in the building process. Can’t emphasize enough how much work it will be to put this on every details screen possible.
1 Like
Did you remove the brackets? " [ " and " ] ".
Yes
Check this out! Using CSS to turn our Separator: Small into a divider that rounds out the components above and below!
Note, this only works with Light Theme. Dark theme apps should use this as the background/box-shadow colors: rgb(30, 34, 43);
<pre><span><style>
[data-test="app-hr"] {
background-color: rgb(246, 246, 246);
}
[data-test="app-hr"]:after {
content: "";
position:absolute;
top:-40px;
right:0;
height:40px;
width: 100%;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background:#fff;
box-shadow: 0 15px 0 0 rgb(246, 246, 246);
z-index:-1 !important;
}
[data-test="app-hr"]:before {
content: "";
position:absolute;
top:15px;
right:0;
height:40px;
width: 100%;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
background:#fff;
box-shadow: 0 -15px 0 0 rgb(246, 246, 246);
z-index:-1 !important;
}
18 Likes
great it’s good 
1 Like
Impressive. Will be a lot helpful to divide tabs into clear sections. Thanks Bob.
1 Like
Well uh mm oddly the CSS works with the editor but does not work after publication 
I allow myself to suggest a small correction, and at home it works.
(Test with chrome/windows10 & Android)
result with your css
result after the small correction
the correction
<pre><span><style>
[data-test="app-hr"] {
background-color: rgb(246, 246, 246);
padding:0px;
}
[data-test="app-hr"] .sep-line {
background-color: rgb(246, 246, 246);
}
[data-test="app-hr"]:after {
content: "";
position:relative;
top:-30px;
height:20px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
background:#fff;
box-shadow: 0 3px 0 0 rgb(226, 226, 226);
z-index:0 !important;
}
[data-test="app-hr"]:before {
content: "";
position:relative;
top:30px;
height:20px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
background:#fff;
box-shadow: 0 -15px 0 0 rgb(246, 246, 246);
z-index:0 !important;
}
</style></span></pre>
11 Likes
Is there a way to put just a static cercle arround the image? Like a pink (with the theme color) circle
<pre><span><style>
button[aria-label="Showcase 1"] svg {
display: none;
}
button[aria-label="Showcase 1"] div div[size] {
border: solid 2px #000000;
border-radius: 50%;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url("https://images.unsplash.com/photo-1542273917363-3b1817f69a2d");
}
</style>
Change #000000 to your color’s hex.
4 Likes
This is awesome! Just what I was looking for so thanks!
I’ll assume it’s possible with visibility conditions to have two tabs (duplicate first one after completion), one shows the tab icon without this CSS - if “Profile”/“Avatar” [user-specific column] image IS EMPTY, and the other shows the tab icon/label as the Profile/Avatar Image IF NOT EMPTY…?
All this CSS lately…sheesh! 
This is cool! Thanks
1 Like