Beautiful Design App

Sure can!

2 Likes

Or this?

2021-06-06 15.37.38

<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;
}
16 Likes

great it’s good :+1: :clap:

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 :frowning:
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! :nerd_face:

This is cool! Thanks

1 Like

Yes, as this is rich text I think you can do that without any issues.

1 Like

Really nice trick. Adding this to my code book :wink:

1 Like

I was used to do it with a .png image.

1 Like

me too

Is there a way to target just separator: small? Appears it affects all Separator element sizes.

1 Like

Thanks to @Lucas_Pires, I now have a much more reliable way to do my notifications tab. I guess I did not really need Cloudinary with the CSS magic here, and can let Glide handle the on/off status of the icon instead of creating 4 separate images.

<pre><span><style>
  button[aria-label="Notifications"]::before {
  content: "{N}";
  position: absolute;
  font-size: 9px;
  font-weight: 800;
  color: white;
  padding: 1px;
  top: 6px;
  right: 25px;
  z-index: 1;
  height: 16px;
  width: 16px;
  background-color: red;
  border-radius: 70%;
}

With {N} being the number of notifications to show. Thanks to @Robert_Petitto for the lead to use CSS for this as well!!!

22 Likes

That is very nice bro :clap:

2 Likes