Beautiful Design App

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

24 Likes

That is very nice bro :clap:

2 Likes

Gotta make these more “lively” with icons.

<img src="https://i.imgur.com/GIOeqeL.png" align="left" style="width:18px;height:18px;" /><b>
‏‏‎ ‎‏‏‎ ‎Venmo</b> 
8 Likes

Bonjour @Joe_Gabriele

I also needed this option, so I adapted @Robert_Petitto CSS so that spaces respect “spacing”.
BUT BE CAREFUL, this uses unnamed classes so it may not work one day. however, if this happens, the default is taken into account.

CSS

<pre><span><style>

[data-test="app-hr"] {
background-color: rgb(246, 246, 246);
padding-left:0px;
padding-right:0px;
}

[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;
box-shadow: 0 -1px 0 0 rgb(226, 226, 226);
background:#fff;
z-index:0 !important;
}

/* **************** Default */
.kxHqnt:after {
}

.kxHqnt:before {
}

/* **************** Small */ 
.eUKgzh:after {
content: "";
top:-35px;
}

.eUKgzh:before {
content: "";
top:35px;
}

/* **************** Medium */
.gWGzJy:after {
content: "";
top:-45px;
}

.gWGzJy:before {
content: "";
top:45px;
}

/* **************** Large */
.iBGoXU:after {
content: "";
top:-55px;
}

.iBGoXU:before {
content: "";
top:55px;
}


</style></span></pre>
2 Likes

Lively and lovely :star_struck:

1 Like