Jump to content

Community

Hunter Lyons

How to make sparkling user groups

Recommended Posts

7ea45a7d30ddcd72a82cbe4be70f99df.gif

 

Sparkly groups

This is pretty basic, but a few people have asked me so I thought I'd go ahead and share. All of the donor groups on my website get sparkling names. In the user list, this means their names sparkle and on their profile, their rank does, as shown. 

 

 

 

 

Instructions
1. Set up the style in the group settings. You do this by going to Members -> Groups -> choose the group you want. Put the following code in the Group Formatting field, where group-name is replaced with the name of the group. ie: mine is platinumdonor.

<span id='group-name'> </span>

2. Add the following into your custom css. You can get there by going Customization -> 121a628666e06ab839ce71da062d25b2.gif on the them you use -> click the css tab -> search custom and open it.

#group-name {
  	color: #any hexadecimal color you want here;
    background-image: url(the gif you want to use here)
}

Here's an example of my platinum donor's css:

#platinumdonor {
  	color: #9393F0;
    background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_yellow.gif)
}

3. Profit? This last bit is optional, obviously, but... Personally, I also show this off on the store page listing my donor perks. 

e1105b419f0f13adb7a468060c9adfd2.gif

The way I set this up was by going to Commerce -> Products -> Select the product you want (in my case, Platinum Donor) -> Store & Purchase Settings -> and editing the source of the text. Just like we put the group name in a span with the css id we made earlier, I just put the text glowing in the same id. You will need to enable source editing for your group to do this. That can be found in Members -> Groups -> Administrator -> Scroll down a bit, and tick Can edit HTML?. That way you can click this button in the editor to go change the text on your storefront: 54b3202693cd6bba0e14573f404b8dc0.png

Share this post


Link to post
Share on other sites
On 5/26/2016 at 6:56 AM, ehren. said:

Since the style is used more than once on a page, you should be using classes instead of id's.

 

HTML:


<span class='platinum-donor'> </span>

CSS:


.platinum-donor {
    color: #9393F0;
    background: url('xxx.gif') repeat;
}

 

Oh- oops. Can't edit the post now or I'd fix that. 

Share this post


Link to post
Share on other sites

Oh isn't that a fab idea. Wow 

but when we upgrade won't it all disappear and we have to do it all over again?? 

Share this post


Link to post
Share on other sites

I just seen this topic, I already have mine going with

/* Membership Color Group */ 

.Emerald {
background: url(https://i.imgur.com/skMrJae.gif);
color: #01DF01;
font-weight: bold;
text-shadow: 2px 0px 11px #04B404;
}

.Diamond {
background: url(http://i.imgur.com/ejTlAK7.gif);
color: #6E6E6E;
font-weight: bold;
text-shadow: 2px 0px 11px #FAFAFA;
}

[data-blocktitle] h3:before {
  font-family: FontAwesome;
  padding-right: 10px;
}

 

Share this post


Link to post
Share on other sites

Is something wrong with this thread on iPhone .  I get image too large and its all moved over 

 

image.png

Edited by kar3n2

Share this post


Link to post
Share on other sites
On 6/23/2016 at 8:14 AM, Elena-Viorica said:

Do you, by any chance, know how to make the text effect at mousehover like on this wiki page: http://steven-universe.wikia.com/wiki/Gems ? If you mouse hover over the blue text, it makes the text come from above and from below in a fade effect.

How is that done with html?

It's CSS

text-shadow: 0 0 2.5px #3cd7fa,0 0 2.5px #3cd7fa;

that'll give you same result

Share this post


Link to post
Share on other sites

You'd put it in your custom css file, and then make a span the same way this tutorial outlines.

On 5/19/2016 at 0:08 PM, Lyonharted said:

1. Set up the style in the group settings. You do this by going to Members -> Groups -> choose the group you want. Put the following code in the Group Formatting field, where group-name is replaced with the name of the group. ie: mine is platinumdonor.


<span id='group-name'> </span>

So you'd do this to set up a class, and then you'd need to put the custom css in.

On 5/19/2016 at 0:08 PM, Lyonharted said:

2. Add the following into your custom css. You can get there by going Customization -> 121a628666e06ab839ce71da062d25b2.gif on the theme you use -> click the css tab -> search custom and open it.

So you'd do this with the custom css above. For example:

.group-name {
text-shadow: 0 0 2.5px #3cd7fa,0 0 2.5px #3cd7fa;
}

 

Share this post


Link to post
Share on other sites
On 7/29/2016 at 9:23 PM, ResPecT My Authoritah said:

Exactly what i was thinking.. sombody should make this as a plugin and ill buy it

From what i've seen, you seem to completely rely on others to do things for you, hitting down the IPB community isn't cool, simple because we're not providing for your needs all the time.

Share this post


Link to post
Share on other sites
3 hours ago, Azura said:

From what i've seen, you seem to completely rely on others to do things for you, hitting down the IPB community isn't cool, simple because we're not providing for your needs all the time.

excuse you... this has nothing to do with this thread i was simply agreeing with sombody here.  Please go away and stop attacking me.. I never mentioned your name and what i said has nothing to do with you.  So shoo fly don't bother me.

Edited by ResPecT My Authoritah

Share this post


Link to post
Share on other sites
On 8/7/2016 at 1:11 PM, Azura said:

hitting down the IPB community isn't cool

You know what else is not cool? Paying hundreds of dollars every six month and being completely ignored by the IPS staff on their support forums. I bet 90% of the staff members of this forum know how to make sparkly usernames. Has any of them replied to this thread? No. They can't be bothered to offer support unless you open a ticket.

Anyways, does anyone know how to make this effect?

imageedit__4762026470.gif

Share this post


Link to post
Share on other sites
58 minutes ago, Elena-Viorica said:

Has any of them replied to this thread? No.

And why would they? Making “sparkly usernames” hasn’t anything to do with their software functionality per se. It’s just customization that requires general web design knowledge. There are several options to achieve such customizations:

  • the admin has that knowledge or learns about it
  • someone with that knowledge is hired to do the job
  • a volunteer provides the knowledge in a forum like this one

Pick one of the three! But licensing web software (even with support included) just doesn’t mean that the software vendor has the slightest obligation to become your web designer teacher helping you to create custom code. That just not reasonable/feasible/common …

Share this post


Link to post
Share on other sites

I agree with Opentype - you guys honestly can't expect free web design advice (even if it is tacky and should never be implemented - this reeks of the "Under Construction" GIFs that plagued the internet in the early days - IN MY OPINION) as part of your licensing agreement.

As for the question @Elena-Viorica asked - here's what I found with a quick Google search:

http://joashpereira.com/blog/2015/09/12/colorful-rainbow-text-animation-in-css3/

Amazing what you can find, eh? And I really don't recommend doing this either - tacky! (IMO)

Share this post


Link to post
Share on other sites
1 hour ago, opentype said:

That just not reasonable/feasible/common …

Seems to be pretty common on other forum software's (even the free ones) support forums...

And no, "then use that other software" is not an acceptable answer.

1 hour ago, opentype said:

And why would they?

I don't know. Why do the mods from MyBB and phpBB do it for free? And there's not nearly as many of them as IPS has. Maybe because, if you have the knowledge and someone is asking a question that you know the answer to - here's an idea! - maybe you should try to help out. To impress your clients and make them want to spread the word about the software? To have them talk on admin forums about the quality of support they received from IPS? There are plenty of reasons.

Edited by Elena-Viorica

Share this post


Link to post
Share on other sites

Hey guys! You guys look like you have it sorted, so ive been doing what you've all done step by step, but it still doesnt work!!??

What i see with code in place + saved and everything : http://prntscr.com/dispmp (Notice its still just pink and has no sparkles D:)

 

Group Name: <span class='forum-manager'> </span>

Custom.css file :  

#forum-manager {
      color: #FF2BC7;
    background-image: url(http://resources.guild-hosting.net/201604011348/themes/core/images/tag_fx/sparkle_pink.gif)
}

After far too many attempts i get no results, still just the black looking like the above screenshot, Please help!!

 

Share this post


Link to post
Share on other sites
On 12/7/2016 at 8:23 PM, Lewis Pardo said:

Any idea how to make it show up here 

PLiEUnx.png

That's text generated by the forum, not a graphic. That being said, there are ways via CSS and jQuery you can animate objects (including text), so some effects might be possible. Keep in mind, things like animated gifs, CSS/jQuery animations, etc. all put a load on your user's browsers - something like all user names glowing or vibrating would bring a topic view to a crawl on users with less powerful machines or mobile devices.

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...