CSS Sparkle effect on names?

[nekobot]

I was following directions from this thread: support.proboards.com/thread/503740/sparkle-effect-user-names

And I was wondering if it's possible to apply the sparkle effect to specific user groups?

i'd use a different less-flashy sparkle effect though.

[Tumbleweed]

Sept 18, 2015 10:38:39 GMT -8 nekobot said:

I was following directions from this thread: support.proboards.com/thread/503740/sparkle-effect-user-names

And I was wondering if it's possible to apply the sparkle effect to specific user groups?

i'd use a different less-flashy sparkle effect though.

If you do a search online, there are free online sites that you can add sparkle to an already made image. Another option would be to request an GIF (animation) image be made for you. But the problem with both of those options is you'd need a way to replace what is normally text with an image. The only other way I can think of doing it is if you used css for a sparkly background behind the username text or if someone created a plugin or javascript to do this.

The closest thing we have to making an affect that is attention getting is ColorSmear by Wormopolis which you can find in the plugin data base. 

support.proboards.com/thread/434486/plugin-index

[nekobot]

"And I was wondering if it's possible to apply the sparkle effect to specific user groups?"

The sparkle effect already works and goes over names just fine. I just need to know if I can apply it to specific user groups, such as mods or beta testers.

[nekobot]

sorry if i put this in the wrong place or something. wasnt sure where this should go.

[Tumbleweed]

I'm sorry I didn't get back to you on this, nekobot.  If I'm not tagged or quoted, I tend to miss replies. If you are wanting to use the background route then you can just add this to your style sheet:

/*sparkle to groups*/

.group-1{background-image:url(linktosparkle.png);
}

You can add multiple groups to have one background by adding a comma and adding the next group::

/*sparkle to groups*/
.group-1, group_2{background-image:url(linktosparkle.png);
}

Or each has a different sparkle:

/*sparkle to groups*/
.group-1{background-image:url(linktosparkle1.png);
}

.group-2{background-image:url(linktosparkle2.png);
}

[nekobot]

How do I know which group is which number?

[Tumbleweed]

Sept 24, 2015 22:41:40 GMT -8 nekobot said:

How do I know which group is which number?

Well, 0 is guests and admin is usually 1 and they should go in order as you add them but I'm not sure what happens if you delete a group or even rearrange them. So the best way is to click on someone's name that you have in that group and inspect the element and it should say.  I was thinking there was an easier way but it eludes me right now.

Most browsers, if your right click on the name you will have an option that says something about the element so you'd want to select that and then you should see something like:

<a title="sometitle" class="user-link user-1 group-1" style="color: rgb(230, 25, 58);" href="/user/1">Tumbleweed</a>

[Azy]

I've seen an effect before where an image is clipped to a text region, so the image shows through on the text. I revisited this idea, and came up with this. Use a sparkly animated GIF as the background image for your text, clip the image to the text outline, and voila, sparkly text.

codepen.io/Azayles/pen/avBZYN?editors=110