Beautiful Design App

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

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

Hola @ThinhDinh, @Manu.n, @Lucas_Pires, @Robert_Petitto

Is there a CSS to change the wording of the comments component from “Add Comment” to something else, say, “write message”?

Thanks guys!

Amazing work - are you following the same process outlined by @Lucas_Pires? The videos are no longer available on this post

What is the best practice here :thinking:

1 Like

Actually not @Harry_OBrien, this topic is old. This css is recent

numeros  thin
the numbers are css Thinh

@ThinhDinh very good! Thanks for sharing

1 Like

No they are not, it’s just two items from an inline list with images generated from https://dummyimage.com/.

Actually it’s a list of 4-item-per-line but the other two are intentionally made “blank”.

1 Like

ha I see for a moment I thought it was css :upside_down_face:thanks for the link

1 Like

I noticed, I was trying to understand how you built the notification page, but I think its just as simple inline list with user specific columns, right?

I’m not going to miss anything tricky am I

1 Like

Kind of. Not that simple, because in that app I was collecting infos from many parts of the apps, thats why wasnt that simple. But once you have user email related and you can filter by this

3 Likes

In my case it’s simply a list of rows from a Comments sheet. It’s marked “read” to a user-specific column when the user clicks it.

2 Likes