search

zxy19 / user-decoration

MIT License
0 stars 0 forks source link

example code #8

Closed MissGamerz closed 1 month ago

MissGamerz commented 1 month ago

ive a hard understanding of what you mean with your styling your example screenshot in the extension discription could you provide what you did in the create model so i get a better understanding of it

currently if i use this it shifts elements all over the place

my stylesheet for a glow effect around the avatar icon .element-meep[class="Avatar"] { box-shadow: 0px 0px 20px purple !important; }

zxy19 commented 1 month ago

If you are asking about the implimention, it was made by pure frontend code at https://github.com/zxy19/user-decoration/blob/c76391b7983858ac576c26a607dd1dece675b635/js/src/common/utils/DecorationApplier.ts#L120

I had to admit that the code is quite complex and also a bit mess🥲.

If you are not willing to create a new element, just use .base for the target element.

In your case, try this one:

.base{ box-shadow: 0px 0px 20px purple !important; }

.element-xxx is designed to create/duplicate a new element, for example in https://github.com/zxy19/user-decoration/discussions/1 we duplicate 3 avatar image and apply different styles on them.

MissGamerz commented 1 month ago

okay okay thats cool i get it now lol