Gradient text for user display names?

[bai]

I can't use Wormopolis' color smear plugin because it completely wrecks my profile setup and he is no longer active (hasn't been seen or posted on here since August 2017). So what can I do to get gradient text via the Style Member Names plugin? I looked up some websites but all don't seem to work with that plugin.

(Please move this. I posted in the wrong forum.)

[ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ]

once inside the style member names plugin, go to the members/group tab and go to the custom css box for whichever section you require. to find the css code for a colour gradient you'll need to use a tool such as this: cssgradient.io/. then simply past the code it gives you into the custom css box.

[bai]

Jul 14, 2018 13:45:53 GMT -8 ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ said:

once inside the style member names plugin, go to the members/group tab and go to the custom css box for whichever section you require. to find the css code for a colour gradient you'll need to use a tool such as this: cssgradient.io/. then simply past the code it gives you into the custom css box.

Thanks, it worked!

For anyone who reads this and needs the same solution, make sure (after you paste the gradient code into the CSS box in the plugin) that you change 'background' to 'font-color' so it affects the text rather than giving the text a background.

[bai]

ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ hello again!

so it looks like i was wrong about the "font-color" thing. apparently that doesn't work at all. do you know of another variable i can use so the gradient targets the font rather than the background or doing nothing at all?

[ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ]

bai oops sorry! probably should have picked up on that. now i did imagine that using 'color' instead of font-color would work but apparently it doesn't, so i did some research and ended up with this code that works instead:

background: -webkit-linear-gradient(left, #eee, #333);  
-webkit-background-clip: text;  
-webkit-text-fill-color: transparent;

to make this work just place this inside of the custom css section, and replace 'left' with the direction you want the colour to start at (eg. top left, right, bottom right) or leave it blank for top to bottom. then replace #eee and #333 with the two colours you want.

[bai]

Jul 19, 2018 0:49:54 GMT -8 ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ said:

bai oops sorry! probably should have picked up on that. now i did imagine that using 'color' instead of font-color would work but apparently it doesn't, so i did some research and ended up with this code that works instead:

background: -webkit-linear-gradient(left, #eee, #333);  
-webkit-background-clip: text;  
-webkit-text-fill-color: transparent;

to make this work just place this inside of the custom css section, and replace 'left' with the direction you want the colour to start at (eg. top left, right, bottom right) or leave it blank for top to bottom. then replace #eee and #333 with the two colours you want.

thanks! if i wanted to add sparkles or some background photo, I would add the url to the "text" bit or would I need to do something else to have the photo + gradient at the same time?

edit: again, to anyone reading this, if you want more than two colors, add another HTML color code in the position you want it to be in, the add a comma after it so it's set up like #00000, #00000, #00000 

[ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ]

hmm i don't think that would be possible due to the way this code is set up. you'd probably have to use a different code for adding a background. if i get a chance today i'll take another look.

[bai]

Jul 19, 2018 13:28:03 GMT -8 ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ said:

hmm i don't think that would be possible due to the way this code is set up. you'd probably have to use a different code for adding a background. if i get a chance today i'll take another look.

okay! i'll try posting about it in the style member name plugin thread, but that question has already been asked at least 3 times with no answer. even "background-image: url('fjksdfkld')" doesn't work.

i appreciate your help! if you don't mind me asking, how did you learn about css and html? i'm trying to teach myself at the moment and there is quite a lot of basics i still don't know or understand yet.

[ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ]

aah sorry that i couldn't have been more help (i'm still working on my css skills) but i'm mostly self taught! i first started by customizing premade pb themes, then eventually just started making my own. google is very helpful.

[Chris]

I removed the completed label since it seems this issue has not been resolved to satisfaction.

If you require further assistance it might make things go a lot more smoothly if you provide a link to a forum where you are attempting to get this working so everybody is on the same page on what is working and what is not as well as have access to inspect possibly conflicting codes and/or theme structures to then come up with a solution that would work for that forum in its current configuration.

[bai]

Jul 19, 2018 16:10:52 GMT -8 ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ said:

aah sorry that i couldn't have been more help (i'm still working on my css skills) but i'm mostly self taught! i first started by customizing premade pb themes, then eventually just started making my own. google is very helpful.

That's like me! I have taught myself graphic design for probably a decade now, but it was only until I got to ProBoards that I was able to delve into HTML and CSS!

Jul 19, 2018 23:21:44 GMT -8 Chris said:

I removed the completed label since it seems this issue has not been resolved to satisfaction.

If you require further assistance it might make things go a lot more smoothly if you provide a link to a forum where you are attempting to get this working so everybody is on the same page on what is working and what is not as well as have access to inspect possibly conflicting codes and/or theme structures to then come up with a solution that would work for that forum in its current configuration.

Thanks and here's the site link! cxhboards.boards.net!

I know my template and CSS structure is really messy. I might have to end up rewriting everything from scratch because I don't think anyone could easily understand it outside of myself.

[Nscalerr 🐺]

bai and ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ

Just quickly, this is a great site for learning about CSS and HTML, also for looking things up.

W3Schools Online Web Tutorials

[bai]

Jul 20, 2018 7:01:11 GMT -8 Nscalerr 🐺 said:

bai and ᴘʀɪɴᴄᴇ ᴄᴜᴘɪᴅ

Just quickly, this is a great site for learning about CSS and HTML, also for looking things up.

W3Schools Online Web Tutorials

I only ever use it to find quick fixes. For whatever reason it escaped me that "school" is in the title for a reason. Thanks!