CSS Profile image

Ask for Help
1

hai @Lucas_Pires
i found this in CSStricks,I tried it but it didn’t work,

<pre><span><style>
  button[aria-label="Profile"] svg {
    display: none;
  }
  button[aria-label="Profile"] div div[size] {
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(AVATAR);
  }
</style>

what should i change in the background image…?

image
image1119×250 32.8 KB

2

Change AVATAR to the image URL you want to use. Add double quotes as well, I think.

background-image: URL(“https://avatar.link”);

Also, change the “Profile” text to the name of your tab.

1 Like
3

for my avatar I want to make a user photo…
Is that possible? if yes, how can i change it…?

4

If you want to make it dynamic, you can use a template columnn.

2 Likes
5

@ThinhDinh
can you give me a screenshot so I can understand it, sorry I’m a bit blind in using CSS

6

Replace in Template column AVATAR in the code for the user avatar column, like the screenshot below

image
image342×598 31.2 KB

Don’t forget to replace this one, but directly in the code.

4 Likes
7

thanks for the screenshot @Lucas_Pires I have one more question, I want when a notification comes in, and the user presses it, the notification number will disappear, is there a way to do that…? If so, I would like to ask you to show me how? Thank you very much…🙇‍♂️

8

I see you don’t actually use the notification number in the CSS, only showing if there’s at least one notification or not, the concept below should still hold.

I assume you’re having a “notifications” count already. I usually do this by having a user-specific “read?” boolean column in the table where I want to have notifications.

Then, in the user profiles table, I have a rollup to count false instances in that read boolean column and use that in a template column where I put the CSS in.

On any click of the “items” that I haven’t read, I set the boolean to true, so that decreases the notification count by 1, if you have the same setup above.

In your case, only show the CSS (conditional visibility) when the count is greater than 0.

3 Likes
9

thank you @ThinhDinh
I will try it…

1 Like
10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.