The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Gradient Username?

View previous topic View next topic Go down

Solved Gradient Username?

Post by Klonoa on March 16th 2016, 11:10 pm

Is it possible to display username as gradient or similar effect?
Version: phpbb2

thx

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Gradient Username?

Post by Klonoa on March 18th 2016, 6:58 pm

anyone?

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Gradient Username?

Post by Ange Tuteur on March 18th 2016, 7:05 pm

It depends, what type of gradient do you want ?

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Gradient Username?

Post by Guest on March 18th 2016, 7:06 pm

I take it you mean rainbow usernames? You can search for solutions in the search bar for that. Just enter 'rainbow' and 'names', check 'search in posts' and find whatever you need.

Samantha.

PS: @Ange Tuteur , didn't see that post coming from you Razz Go ahead. Wink

Guest
Guest


Back to top Go down

Solved Re: Gradient Username?

Post by Klonoa on March 19th 2016, 8:55 pm

@Ange horizontal one, blueish to black please?

@RoXaNNeX Nope, that's not the case really Smile I want gradient style not rainbow

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Gradient Username?

Post by Genesis on March 19th 2016, 11:35 pm

@Klonoa wrote:@Ange horizontal one, blueish to black please?

@RoXaNNeX Nope, that's not the case really Smile I want gradient style not rainbow
When you tag someone you must use the full username. If you don't, you'll be tagging a different user.

Follow this tutorial:
http://help.forumotion.com/t129844-username-in-multiple-colors

On a certain step you'll need to add color to specific parts of the username. You can put HTML code around different parts of the username for a specific color.

If you need extra help on that step I can provide further assistance if you give me some HTML color codes you'd like (starting point and end point, or each individual color).

Genesis
Helper
Helper

Male Posts : 2331
Reputation : 322
Language : English
Location : Forumountain

http://forumpromocean.com

Back to top Go down

Solved Re: Gradient Username?

Post by Klonoa on March 20th 2016, 6:49 pm


I would like it to look like this id that's possible, also i'm unfamiliar with html stuff so i think i'll need help with that.

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Gradient Username?

Post by Ange Tuteur on March 20th 2016, 7:49 pm

That's a vertical gradient and will most likely be a bit more tricky to achieve. There aren't too many methods that I'm familiar with, but a quick search brings up a few solutions.

This method for example which only works on webkit browsers : https://css-tricks.com/snippets/css/gradient-text/

I suppose a fallback method could alternatively be achieved with JavaScript as well. Think

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Gradient Username?

Post by Klonoa on March 20th 2016, 9:12 pm

Yea I tried to play with codes but always end up with mess, do you have a css code for forumotion css/username?

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Gradient Username?

Post by Ange Tuteur on March 21st 2016, 12:18 am

Well the CSS method wouldn't work very well on Firefox or IE, so I looked around at some other options and this one seems good.

Firstly go to Admin panel > Modules > JS codes management and create a new script with the following settings.

Title : pxgradient
Placement : In all the pages
Paste the following code and submit :
Code:
(function(e){e("head").append('<style type="text/css">.sn-pxg .pxg-set{user-select:none;-moz-user-select:none;-webkit-user-select:none;}.sn-pxg span.pxg-source{position:relative;display:inline-block;z-index:2;}.sn-pxg U.pxg-set,.sn-pxg U.pxg-set S,.sn-pxg U.pxg-set S B{left:0;right:0;top:0;bottom:0;height:inherit;width:inherit;position:absolute;display:inline-block;text-decoration:none;font-weight:inherit;}.sn-pxg U.pxg-set S{overflow:hidden;}.sn-pxg U.pxg-set{text-decoration:none;z-index:1;display:inline-block;position:relative;}</style>');e.fn.pxgradient=function(t){function r(e){if("#"==e.substr(0,1)){e=e.substr(1)}if(3==e.length){e=e.substr(0,1)+e.substr(0,1)+e.substr(1,1)+e.substr(1,1)+e.substr(2,1)+e.substr(2,1)}return[parseInt(e.substr(0,2),16),parseInt(e.substr(2,2),16),parseInt(e.substr(4,2),16)]}function i(e){var t="0123456789abcdef";return"#"+t.charAt(parseInt(e[0]/16))+t.charAt(e[0]%16)+t.charAt(parseInt(e[1]/16))+t.charAt(e[1]%16)+t.charAt(parseInt(e[2]/16))+t.charAt(e[2]%16)}function s(e,n){var r=e>0?e/n:0;for(var i=0;i<t.colors.length;i++){fStopPosition=i/(t.colors.length-1);fLastPosition=i>0?(i-1)/(t.colors.length-1):0;if(r==fStopPosition){return t.colors[i]}else if(r<fStopPosition){fCurrentStop=(r-fLastPosition)/(fStopPosition-fLastPosition);return o(t.RGBcolors[i-1],t.RGBcolors[i],fCurrentStop)}}return t.colors[t.colors.length-1]}function o(e,t,n){var r=[];for(var s=0;s<3;s++){r[s]=e[s]+Math.round((t[s]-e[s])*n)}return i(r)}var t=e.extend({step:10,colors:["#ffcc00","#cc0000","#000000"],dir:"y"},t);t.RGBcolors=[];for(var n=0;n<t.colors.length;n++){t.RGBcolors[n]=r(t.colors[n])}return this.each(function(n,r){var i=e(r);if(!i.hasClass("sn-pxg")){var o=i.html();i.html('<span class="pxg-source" style="visibility: hidden;">'+o+"</span>").append('<u class="pxg-set"></u>');var u=i.find(".pxg-set");var a=i.find(".pxg-source");var f=a.innerWidth();var l=a.innerHeight();a.hide();i.addClass("sn-pxg");if(t.dir=="x"){var c=f}else if(t.dir=="y"){var c=l}var h=Math.floor(c/t.step);var p=h;var d=c-h*t.step;if(d>0){p++}u.css({width:f,height:l});var v=0;var m="";if(t.dir=="x"){for(var n=0;n<p;n++){var g=s(v,c);m+='<s style="height:'+l+"px;width:"+t.step+"px;left:"+v+"px;color:"+g+'"><b style="left:-'+v+"px;width:"+f+"px;height:"+l+'px;">'+o+"</b></s>";v=v+t.step}}else if(t.dir=="y"){for(var n=0;n<p;n++){var g=s(v,c);m+='<s style="width:'+f+"px;height:"+t.step+"px;top:"+v+"px;color:"+g+'"><b style="top:-'+v+"px;height:"+f+"px;height:"+l+'px;">'+o+"</b></s>";v=v+t.step}}u.append(m)}})}})(jQuery);
That should install the pxgradient plugin.

Once you have that installed repeat the next steps as much as you want for each member.

Go to Modules > JS codes management and create a new script.

Placement : In all the pages
Code:
$(function() {
  $('a[href="/u1"]').filter(function() { if (!$('img', this)[0]) return true; }).pxgradient({
    step: 1,
    colors: ["#F00","#00F"],
    dir: "y"
  });
});

Now here's what you should modify :

User ID :
Replace the 1 in
Code:
$('a[href="/u1"]')
with the id of the user. You can see this id by looking at the user's profile url. Example : http://help.forumotion.com/u88576 ( I'm 88576 )

step : Changing this number modifies the spread of the gradient.

colors : Here you can set the start and stop colors, as well as colors in between. It's currently set to Red --> Blue

dir : Changes the direction of the gradient. y = vertical, x = horizontal

Once you have everything as you want it, save the script and it should apply to the user's name.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Gradient Username?

Post by Klonoa on March 21st 2016, 5:32 pm

I tried it twice but saw no change :/ All it did was lift up username position

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Gradient Username?

Post by APE on March 21st 2016, 5:39 pm

I also tested the code and found it is not working i lost the members name i wanted to change until i removed the code again.




APE
Manager
Manager

Male Posts : 8609
Reputation : 748
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Gradient Username?

Post by Ange Tuteur on March 21st 2016, 5:59 pm

Oh sorry, I forgot to mention that if the user is in a usergroup and they're colored, then you need to change
Code:
$('a[href="/u1"]')
into
Code:
$('a[href="/u1"] span strong')
.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Gradient Username?

Post by APE on March 21st 2016, 6:04 pm

yes that worked for me Smile




APE
Manager
Manager

Male Posts : 8609
Reputation : 748
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Gradient Username?

Post by Klonoa on March 21st 2016, 8:35 pm

Yep! Thank you Smile

Klonoa
Forumember

Male Posts : 161
Reputation : 5
Language : English, Serbian
Location : Repulika Srpska

http://pokemonworldrpg.pokemonlegend.org/

Back to top Go down

Solved Re: Gradient Username?

Post by APE on March 21st 2016, 8:37 pm

Topic solved and archived




APE
Manager
Manager

Male Posts : 8609
Reputation : 748
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum