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

by **Nera.** on August 28th 2011, 12:25 am

Official Tutorial

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 http://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("http://i45.servimg.com/u/f45/15/95/60/34/glitte10.gif"); }

Style 2: Image before a group

STEP 1: Make a small icon to add to the group like this

STEP 2: Click on the group on legend and check the address in the browser tab. It will be like this one (example http://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("http://illiweb.com/fa/admin/couronne.png") no-repeat; padding-left: 19px; padding-top: 2px; }

Style 3: Glow style

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 http://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; }

A ForuMotion Official Tutorial
No reproduction possible without our consent, in accordance with article L122-1 of the ICC.