Overwrite PFP when online??

I'm still pretty novice when it comes to web design, but I think one way you could achieve this is by using the ::before (or ::after, either or) selector. You could consider it its own element that you can edit while still technically being a part of the offline/online element, which means it'll only appear when the other does.

I tested it on my profile and it seems to work as intended. I took a look at my profile with my online status turned on and the "online PFP" shows up, but doesn't when I'm signed out. I'll place the code I used below if you'd like to try it yourself. Adjust as necessary.

<style>

body > div > main > div.row.profile > div.col.w-40.left > div.general-about > div.details > p.online::before {

content: '';

display: block;

background-image: url("Put your image URL here");

background-position: center;

background-size: contain;

background-repeat: no-repeat;

width: 160px;

height: 160px;

position: absolute;

top: 150px;

left: 10px;}

</style>

A few side notes:

• The PFP will look like it's out of place on your side, because while you're logged in the edit links that show up on your profile cause there to be extra space. However, it should appear correctly to others since the edit links don't load for them. If it bothers you, you could hide that section's edit link with CSS and it should appear as it does to others. The following should do the trick if you wish to hide it: body > div > main > div.row.profile > div.col.w-40.left > p {display: none;}

• I left all the elements on my profile the default size, and the top/left properties were set with that in mind. If any of yours are different, you may need to adjust the top/left properties till it fits where you want it.

thank you so much! ill definitely test and adjust accordingly
i rarely mess around with HTML and CSS, im usually tinkering on the background stuff like servers and stuff so im pretty new to it but i usually figure things out

Np! :) Happy to help, if I can.