Group's style on legend: glitter, icon & glow

by Nera. 28.08.11 7:25

Group's style on legend: glitter, icon & glow

Available for all forum versions

There is a simple procedure to make it glitter, add a background photo behind it, next to it or what ever you want.
Here is an example of Forumotion Administrators group.

Important: If you decide to use the tutorial, all you need to do is use your groups address (how do you get it and what do you use from it is explained in the tutorial) in order for it to work on your forum.

Style 1: Glitter style

Legend : [

Forumotion Administrators

]

STEP 1: First make a glitter photo, this photo is used as an example.

STEP 2: Click on the group on legend and check the address in the browser tab. It will be like this one (example https://help.forumotion.com/g387-forumotion-administrators)
All you need from the address is this /g387-forumotion-administrators

STEP3: Add this code to your CSS. Of course, you need to add your group href (example: /g387-forumotion-administrators) and your picture link in the code.

Code:: a[href="/g387-forumotion-administrators"] { background: url("https://i64.servimg.com/u/f64/12/23/10/57/glitte10.gif"); }

Style 2: Image before a group

Group's style on legend: glitter, icon & glow Icon10

STEP 1: Make a small icon to add to the group like this Group's style on legend: glitter, icon & glow Couronne

STEP 2: Click on the group on legend and check the address in the browser tab. It will be like this one (example https://help.forumotion.com/g387-forumotion-administrators)
All you need from the address is this /g387-forumotion-administrators

STEP3: Add this code to your CSS. Of course, you need to add your group href (example: /g387-forumotion-administrators) and your picture link in the code.

Code:: a[href="/g387-forumotion-administrators"] { background: url("https://2img.net/i/fa/admin/couronne.png") no-repeat; padding-left: 19px; padding-top: 2px; }

Style 3: Glow style

Group's style on legend: glitter, icon & glow Glow10

STEP 1: If you don't know how to make a text-shadow visit http://www.css3maker.com/
Choose the option text-shadow and make your shadow. You will be provided with a code to do this style with.
Like this:

Code:: text-shadow:0px 2px 13px #f5a911;

STEP 2: Click on the group on legend and check the address in the browser tab. It will be like this one (example https://help.forumotion.com/g387-forumotion-administrators)
All you need from the address is this /g387-forumotion-administrators

STEP3: Add this code to your CSS. Of course, you need to add your group href (/g387-forumotion-administrators) and your text-shadow code in it.

Code:: a[href="/g387-forumotion-administrators"] { text-shadow: 0px 2px 6px #f5a911; }

by **Ape** 05.02.20 18:29

Updated to add HTTP address in some of the codes.

Updated by APE 02.05.2020

NOTE: Thanks to an update you will not see this in all the right places when logged out.
BUT it will work fine when logged in.

Group's style on legend: glitter, icon & glow

Group's style on legend: glitter, icon & glow

Re: Group's style on legend: glitter, icon & glow