how do i add a custom online picture to my profile

You would need to change your .general-about to have elements from .details to have the same position as your profile picture. So what you would have to do is have .general-about be position: relative; and then make your profile picture position: absolute; and set it to have static dimensions. And then after that make your details section  position: static; and then use this conditional to make a pseudo-element appear when the online class appears inside your details.

TL:DR: you cant do this with how your current layout is made.

If you want to change the green online icon, I use this code:

.online img {

content: url("*insert direct img link here*");

}

The image will probably still flash like how the normal online pic does and I...have no idea how to change that unfortunately u_u but the image should be whatever image you link to

If you want it to not blink just do animation: none;.