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.

Fancy Group and User Colors

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Solved Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 8th 2015, 7:09 pm

Okay, so I realize there is a section to this site that explains how to add glows to groups and usernames but I am talking about doing something like this:







Can anyone shed some light on this please?


Last edited by AlexxRPGHITSKINS on June 15th 2015, 6:34 pm; edited 1 time in total

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by SLGray on June 8th 2015, 8:31 pm

So you want to add a black background around the group titles?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36733
Reputation : 2446
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 8th 2015, 8:37 pm

No I want to use the glow feature they are using. as well as I want to be able to do dual glows on a username like how the Neo Stigma and Seijin username look like.

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 8th 2015, 10:10 pm

Like this basically:




They do multiple things, sparkle, and sometimes have colors split, I haven't found any way to do this but I know it is possible because these are forumotion sites. I just would like to know the codes on how to do this.

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by SLGray on June 9th 2015, 12:23 am

So you want only the group titles or each member of the group? I only see one group title with a glow.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36733
Reputation : 2446
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 9th 2015, 12:39 am

Well yes but do you see how some users have two sets of colors with glow added on to it? I want to know how to do that.

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by SLGray on June 9th 2015, 1:17 am



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36733
Reputation : 2446
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 9th 2015, 1:20 am

Yes that is the basic one but I am asking for dual colors.

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 9th 2015, 6:11 am

It's perfectly possible to create a two-tone name with CSS. You need only reduce the default font-size to 0 and use the pseudo elements ::before and ::after to apply the new texts. An example using my username :
Code:
a[href="/u88576"] span strong { font-size:0 }

a[href="/u88576"] span strong:before {
  content:'Ange';
  font-size:12px;
  color:#85B;
}

a[href="/u88576"] span strong:after {
  content:' Tuteur';
  font-size:12px;
  color:#B58;
}

and the result :


If you're wanting more than two, then you'll need to utilize JavaScript for that. Wink

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 9th 2015, 7:15 am

Aye, yes This is what I meant, I got as far as that but I also want it to show in the cbox as well as give that glow those sites do. If that helps explain. also might you tell me what to use for a Java script?

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 9th 2015, 7:26 am

For the chatbox, you need to add another selector to the set. This is the selector for the chatbox :
Code:
span[data-user="88576"]

Replace 88576 by the ID of the user. Wink
Code:
a[href="/u88576"] span strong, span[data-user="88576"] { font-size:0 }

a[href="/u88576"] span strong:before, span[data-user="88576"]:before {
  content:'Ange';
  font-size:12px;
  color:#85B;
}

a[href="/u88576"] span strong:after, span[data-user="88576"]:after {
  content:' Tuteur';
  font-size:12px;
  color:#B58;
}

As for glow, you can use the text-shadow property.


JavaScript can be effective for managing a large list of users, but it does not modify the chatbox unless programmed to access the frame via the index. You can find that here : http://help.forumotion.com/t140463-script-to-change-several-usernames-color#955045

It should be applied via Modules > JavaScript codes management. Make sure that JS codes management is enabled first. Wink

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 9th 2015, 7:43 am

alright so I have this so far,
Code:
a[href="/u10"] span strong { font-size:0 }
a[href="/u10"] span strong:before {
  font-size:11px;
  content:"Rei";
  color:#f568e9;
  text-shadow:#313132;
}
a[href="/u10"] span strong:after {
  font-size:11px;
  content:"ka";
  color:#6eddf1;
  text-shadow:#313132;
 }
a[href="/u4"] span strong { font-size:0 }
a[href="/u4"] span strong:before {
  font-size:11px;
  content:"Arturo ";
  color:#700a9f;
  text-shadow:#313132;
}
a[href="/u4"] span strong:after {
  font-size:11px;
  content:"Vela";
  color:#000000;
  text-shadow:#313132;
 }

a[href="/u1"] span strong { font-size:0 }
a[href="/u1"] span strong:before {
  font-size:11px;
  content:"The ";
  color:#000000;
  text-shadow:#313132;
}
a[href="/u1"] span strong:after {
  font-size:11px;
  content:"Founder";
  color:#0a5b9f;
  text-shadow:#313132;
 }

Where do I place this code?
Code:
span[data-user="88576"]

also the text shadow isn't working

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 9th 2015, 8:21 am

For the text-shadow, you need to define the x-offset, y-offset, and softness. Like this :
Code:
text-shadow:0 0 2px #313132;


You can add that selector after the first one, see the code below for an example :
Code:
a[href="/u88576"] span strong, span[data-user="88576"] { font-size:0 }

a[href="/u88576"] span strong:before, span[data-user="88576"]:before {
  content:'Ange';
  font-size:12px;
  color:#85B;
}

a[href="/u88576"] span strong:after, span[data-user="88576"]:after {
  content:' Tuteur';
  font-size:12px;
  color:#B58;
}

It'll need to be separated by a comma. Ex :
Code:
a[href="/uID"] span strong, span[data-user="ID"]

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ace 1 on June 9th 2015, 1:53 pm

@Ange Tuteur, this works, but in the topics (under the User's profile image), the font size is also 12px, which is smaller than all other usernames in the topics. Do you have a code that overrides this?

For example:

Code:
.postprofile { font-size: 1.1em !important }

Or something like that ^ that makes the users name the same text size as everyone else and not a certain font size that is applied to every page of the forum.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 10th 2015, 4:21 am

it's not working, what did I do wrong?

Code:
a[href="/u10"] span strong, span[data-user="10"]
a[href="/u10"] span strong { font-size:0 }
a[href="/u10"] span strong:before {
  font-size:11px;
  content:"Rei";
  color:#f568e9;
  text-shadow:#313132;
}
a[href="/u10"] span strong:after {
  font-size:11px;
  content:"ka";
  color:#6eddf1;
  text-shadow:#313132;
 }

a[href="/u4"] span strong, span[data-user="4"]
a[href="/u4"] span strong { font-size:0 }
a[href="/u4"] span strong:before {
  font-size:11px;
  content:"Arturo ";
  color:#700a9f;
  text-shadow:#313132;
}
a[href="/u4"] span strong:after {
  font-size:11px;
  content:"Vela";
  color:#000000;
  text-shadow:#313132;
 }

a[href="/u1"] span strong, span[data-user="1"]
a[href="/u1"] span strong { font-size:0 }
a[href="/u1"] span strong:before {
  font-size:11px;
  content:"The ";
  color:#000000;
  text-shadow:#313132;
}
a[href="/u1"] span strong:after {
  font-size:11px;
  content:"Founder";
  color:#0a5b9f;
  text-shadow:#313132;
 }

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 10th 2015, 4:59 am

Change it to this and you should be good. thumleft
Code:
a[href="/u10"] span strong, span[data-user="10"] { font-size:0 }
a[href="/u10"] span strong:before, span[data-user="10"]:before {
  font-size:11px;
  content:"Rei";
  color:#f568e9;
  text-shadow:0 0 1px #313132;
}
a[href="/u10"] span strong:after, span[data-user="10"]:after {
  font-size:11px;
  content:"ka";
  color:#6eddf1;
  text-shadow:0 0 1px #313132;
}

a[href="/u4"] span strong, span[data-user="4"] { font-size:0 }
a[href="/u4"] span strong:before, span[data-user="4"]:before {
  font-size:11px;
  content:"Arturo ";
  color:#700a9f;
  text-shadow:0 0 1px#313132;
}
a[href="/u4"] span strong:after, span[data-user="4"]:after {
  font-size:11px;
  content:"Vela";
  color:#000000;
  text-shadow:0 0 1px #313132;
}

a[href="/u1"] span strong, span[data-user="1"] { font-size:0 }
a[href="/u1"] span strong:before, span[data-user="1"]:before {
  font-size:11px;
  content:"The ";
  color:#000000;
  text-shadow:0 0 1px #313132;
}
a[href="/u1"] span strong:after, span[data-user="1"]:after {
  font-size:11px;
  content:"Founder";
  color:#0a5b9f;
  text-shadow:0 0 1px #313132;
}

You only added the data-user selector to the first rulesets, they also needed to be added to the ::after and ::before rules.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 10th 2015, 5:58 am

IT WORKS! now then one more question, The appearance in the chatbox is smaller than the rest of the user names, anyway I can make it the size it is in the Cb without changing the overall size of it when seen on the forum?

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 10th 2015, 6:15 am

Add this after the rules that change the usernames.
Code:
span[data-user]:before, span[data-user]:after { font-size:12px }

Change the 12px to your liking.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 10th 2015, 6:25 am

Okay I just got the first half to change the size but I couldn't get the "Vela" "ka" "Founder" to be the same size, what did I do wrong?

Code:
span[data-user]:before, span[data-user="10"]:after { font-size:14px }
a[href="/u10"] span strong, span[data-user="10"] { font-size:0 }
a[href="/u10"] span strong:before, span[data-user="10"]:before {
  font-size:11px;
  content:"Rei";
  color:#f568e9;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="10"]:after { font-size:14px }
a[href="/u10"] span strong:after, span[data-user="10"]:after {
  font-size:11px;
  content:"ka";
  color:#6eddf1;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="4"]:after { font-size:14px }
a[href="/u4"] span strong, span[data-user="4"] { font-size:0 }
a[href="/u4"] span strong:before, span[data-user="4"]:before {
  font-size:11px;
  content:"Arturo ";
  color:#700a9f;
  text-shadow:0 0 1px#313132;
}
span[data-user]:before, span[data-user="4"]:after { font-size:14px }
a[href="/u4"] span strong:after, span[data-user="4"]:after {
  font-size:11px;
  content:"Vela";
  color:#000000;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="1"]:after { font-size:14px }
a[href="/u1"] span strong, span[data-user="1"] { font-size:0 }
a[href="/u1"] span strong:before, span[data-user="1"]:before {
  font-size:11px;
  content:"The ";
  color:#000000;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="1"]:after { font-size:14px }
a[href="/u1"] span strong:after, span[data-user="1"]:after {
  font-size:11px;
  content:"Founder";
  color:#0a5b9f;
  text-shadow:0 0 1px #313132;
}

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 10th 2015, 6:28 am

Change it to this :
Code:
span[data-user]:before, span[data-user]:after { font-size:14px !important }
a[href="/u10"] span strong, span[data-user="10"] { font-size:0 }
a[href="/u10"] span strong:before, span[data-user="10"]:before {
  font-size:11px;
  content:"Rei";
  color:#f568e9;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="10"]:after { font-size:14px }
a[href="/u10"] span strong:after, span[data-user="10"]:after {
  font-size:11px;
  content:"ka";
  color:#6eddf1;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="4"]:after { font-size:14px }
a[href="/u4"] span strong, span[data-user="4"] { font-size:0 }
a[href="/u4"] span strong:before, span[data-user="4"]:before {
  font-size:11px;
  content:"Arturo ";
  color:#700a9f;
  text-shadow:0 0 1px#313132;
}
span[data-user]:before, span[data-user="4"]:after { font-size:14px }
a[href="/u4"] span strong:after, span[data-user="4"]:after {
  font-size:11px;
  content:"Vela";
  color:#000000;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="1"]:after { font-size:14px }
a[href="/u1"] span strong, span[data-user="1"] { font-size:0 }
a[href="/u1"] span strong:before, span[data-user="1"]:before {
  font-size:11px;
  content:"The ";
  color:#000000;
  text-shadow:0 0 1px #313132;
}
span[data-user]:before, span[data-user="1"]:after { font-size:14px }
a[href="/u1"] span strong:after, span[data-user="1"]:after {
  font-size:11px;
  content:"Founder";
  color:#0a5b9f;
  text-shadow:0 0 1px #313132;
}

( You added ="10" to the after selection )

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 10th 2015, 6:30 am

You are a life savior, I been trying to figure out this code for the longest time, thank you so much. I really appreciate it. Am I able to do the same thing with groups?

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ace 1 on June 10th 2015, 2:35 pm

@Ange Tuteur wrote:Add this after the rules that change the usernames.
Code:
span[data-user]:before, span[data-user]:after { font-size:12px }

Change the 12px to your liking.

Thiz code only affects the font-size property of the user when inside the chatbox. And ems don't work with the code above because 1em = 0 because of the following code:

Code:
a[href="/u10"] span strong, span[data-user="10"] { font-size:0 }

So every time I try adding 1em or 1.1em instead of "12px", the user's name is gone.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 11th 2015, 7:01 am

bump

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ace 1 on June 11th 2015, 1:29 pm

@AlexxRPGHITSKINS add this code to your stylesheet:

Code:
p > em > b:first-child { font-size: 0 !important }
p > em > b:first-child:before {
  font-size: 11px;
  content: "Rei";
  color: #f568e9;
  text-shadow: 0 0 1px #313132
}
p > em > b:first-child:after {
  font-size: 11px;
  content: "ka";
  color: #6eddf1;
  text-shadow: 0 0 1px #313132
}

Just change "first-child" for the first group to "second-child" for the second group and so on.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 11th 2015, 8:53 pm

yeah this, didn't work

Code:
p > em > b:coders-and-designers { font-size: 0 !important }
p > em > b:coders-and-designers:before {
  font-size: 11px;
  content: "Coders and ";
  color: #700a9f;
  text-shadow: 0 0 1px #313132
}
p > em > b:coders-and-designers:after {
  font-size: 11px;
  content: "Designers";
  color: #00000;
  text-shadow: 0 0 1px #313132
}

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ace 1 on June 11th 2015, 8:56 pm

@AlexxRPGHITSKINS, use the code I gave you. Don't change anything.

Ace 1
Helper
Helper

Male Posts : 767
Reputation : 51
Language : English - French?
Location : Druid Hill Park

http://help.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 11th 2015, 9:24 pm

still didn't work

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 11th 2015, 11:06 pm

@AlexxRPGHITSKINS wrote:You are a life savior, I been trying to figure out this code for the longest time, thank you so much. I really appreciate it. Am I able to do the same thing with groups?
Do you mean for the group legend or members in a specific group ? We have a tutorial to explain the basics for both :

1. Group legend
http://help.forumotion.com/t96136-group-s-style-on-legend-glitter-icon-glow

2. Group members
http://help.forumotion.com/t131443-customize-usernames-according-to-group

Let me know which one you're referring to.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by AlexxRPGHITSKINS on June 12th 2015, 12:59 am

I want to modify the group legend giving them two colors like I did to the username

AlexxRPGHITSKINS
Forumember

Posts : 37
Reputation : 1
Language : English

http://rpgskinlayouts.forumotion.com/

Back to top Go down

Solved Re: Fancy Group and User Colors

Post by Ange Tuteur on June 12th 2015, 9:18 am

Read this tutorial to understand the importance of changing the URL in the code ( /g387-forumotion-administrators ) :
http://help.forumotion.com/t96136-group-s-style-on-legend-glitter-icon-glow

I'll use an example of the forumotion admins.

CSS :
Code:
a[href="/g387-forumotion-administrators"] { font-size:0 }

a[href="/g387-forumotion-administrators"]:before {
  content:"Forumotion";
  font-size:11px;
  color:#F60;
}

a[href="/g387-forumotion-administrators"]:after {
  content:" Administrators";
  font-size:11px;
  color:#F93;
}

The result :


Make sure to change /g387-forumotion-administrators by the URL of your group.

Ange Tuteur
Forumaster

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

http://fmdesign.forumotion.com

Back to top Go down

Page 1 of 2 1, 2  Next

View previous topic View next topic Back to top


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