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.

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

View previous topic View next topic Go down

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

Post by Nera. on August 28th 2011, 8:25 am

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;
}






Nera.
Energetic

Female Posts : 7077
Reputation : 2013
Language : English
Location : -

http://webartzforum.com

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