Styled Member Names 2.2.0 [Updated: 12th Dec, 2017]

[SailorEffinMoon]

I'm losing the styling when I click on a different page number in my board. crystaltokyo.boards.net/board/4/totally-free-finds

[Peter]

SailorEffinMoon ,

Could be due to an open curly brace...

<script type="text/javascript">
       if(pb.data('page').board.id == 4)
           $('head').append('<style type="text/css">#label { display: block; }</style>');
   }
   
               if(pb.data('page').board){
       if(pb.data('page').board.id == 18)
           $('head').append('<style type="text/css">#portals { display: block; }</style>');
   }
   
               if(pb.data('page').board){
       if(pb.data('page').board.id == 18)
           $('head').append('<style type="text/css">#label { display: block; }</style>');
   }
   
</script>

Fix the code, or remove it then let me know if it's still a problem.

[SailorEffinMoon]

When I removed everything in my Global Header/Footer and it didn't make any difference.

[Peter]

The code is pretty awful. I might rewrite it soon and release an update.

SailorEffinMoon,  have refactored the code and submitted an update to the library.  Will post once approved.

[Peter]

2.2.0
- Code refactoring

[SailorEffinMoon]

  YeaHes!! It's beautiful. Nice Job. Thanks Muchly

[Peter]

Anytime

[transoxiana]

Dec 8, 2017 10:41:22 GMT -8 SailorEffinMoon said:

I'm losing the styling when I click on a different page number in my board. crystaltokyo.boards.net/board/4/totally-free-finds

I seem to experience the same problem. I want the font 'Lobster' for all display names, and it's working perfectly on the home page. But that's about the only place the font shows. I just downloaded the Plugin today, so I should have the newest update. However, I'm not a code-guru at all, so I can't determine exactly what's causing it...

hp-free-play.proboards.com/

EDIT: Oh, I fixed it. Turned out, I had the font only in my main header, that was the reason.

[bai]

Jan 1, 2016 22:56:12 GMT -8 Aeryes said:

I'm horrible with coding... is it possible to have effects added to members names? like sparkles for example? or a glow? figured out the glow!

did you ever figure this out?

Jan 7, 2016 11:50:53 GMT -8 Peter said:

Aeryes ,

If you know CSS (lookup CSS 3 animations), then you can do a lot. It allows for custom CSS in the auto form, but you will likely be better doing it outside in the stylesheet and target specific members / groups.

i googled some css3 animations but nothing came up that is compatible with this plugin. do you have any resource sites I could visit? thanks for a great plugin!

[Aeryes]

I never figured out the sparkles, but I got the plugin for the glow!

[williamt012]

Nov 24, 2012 9:49:13 GMT -8 Peter said:

Note: The Yootil Library is required with version 2.1.0+.

support.proboards.com/thread/429360/

Library: www.proboards.com/library/plugins/item/132

This allows you to style member names, and now includes groups.

Note: Images are out of date.

What is the little pixel icon you used. Is that an image found on the internet. If so can I please have the link to the little small mod tag please.

[bai]

Dec 29, 2016 13:59:53 GMT -8 Bakashin said:

Hello Peter

There was someone that previously asked about background-image, though it was not answered.
I couldn't make it work, so I'm just wondering if I typed it wrong.

Input;
background-image: url('http://i.imgur.com/sl4eJkR.gif');

did you ever figure out how to get the background image to work?

[Peter]

bai,

Drop the http: part and it will work.

The reason for it not working is due to the code splitting up the properties and values by using a double colon as the delimiter.

[bai]

Jul 20, 2018 9:05:25 GMT -8 Peter said:

bai ,

Drop the http: part and it will work.

The reason for it not working is due to the code splitting up the properties and values by using a double colon as the delimiter.

I did that and now the display name text is completely hidden. Here is my code...should the values be different or rearranged? The animation is also going really fast.

text-transform: uppercase; background: -webkit-linear-gradient(left, #b87069, #782119, #410b06);  -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-image: url('//78.media.tumblr.com/6a75b14a40ac6b21bc5eae631826b2a8/tumblr_inline_oyquemHEAG1s3m3c2_500.gif');

Thanks for this plugin 

[Peter]

bai,

That's because you are using transparent for your text. What you basically have is a stencil. The text is cut out so the background shows through.

developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color