Group's style on legend: glitter, icon & glow Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

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

    Nera.
    Nera.
    Energetic


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

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

    Post by Nera. 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 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;
    }


    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19151
    Reputation : 1994
    Language : fluent in dork / mumbojumbo & English haha

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

    Post by Ape February 5th 2020, 7:29 pm

    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 Ape1010