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

Go down

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

Post by Nera. on Sun 28 Aug - 9: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;
}


Nera.
Nera.
Energetic

Female Posts : 7078
Reputation : 2017
Language : English
Location : -

View user profile

Back to top Go down

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

Post by APE on Wed 5 Feb - 20: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 Left1212Group's style on legend: glitter, icon & glow Center11Group's style on legend: glitter, icon & glow Right112
Group's style on legend: glitter, icon & glow Ape_b110
Group's style on legend: glitter, icon & glow Ssshfm13
Group's style on legend: glitter, icon & glow Ape1010
APE
APE
Administrator
Administrator

Male Posts : 15637
Reputation : 1687
Language : fluent in dork / mumbojumbo & English haha

View user profile http://chatworld.forumotion.co.uk/

Back to top Go down

Back to top


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