Add an image to the rank name ( + customizing ranks) Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return 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.
The forum of the forums

    Add an image to the rank name ( + customizing ranks)

    Jalokim
    Jalokim
    Jalokim
    Energetic


    Male Posts : 6113
    Reputation : 223
    Language : English,Polish,CSS,HTML
    Location : Poland
    • Post n°1

    Tutorial Add an image to the rank name ( + customizing ranks)

    Post by Jalokim November 5th 2009, 12:02 am

    Add an image to the rank name ( + customizing ranks)


    Add an image to the rank name ( + customizing ranks) 29osx12How to modify your rank name


    The result:

    Add an image to the rank name ( + customizing ranks) Zx4oq8

    Tools you may need:


    Tinypic.com for image uploads (we use tinypic because it gives a short URL this is important)
    Photoshop/GIMP or your admin panel color picker (for color hex codes)
    A mini rank name image (max 16x16 pixels)
    *html knowledge (for more complex customizations)

    Add an image to the rank name ( + customizing ranks) Jpkje8 Rank Name text effects


    For the first part all you do is edit the rank menu settings.
    Go to Admin panel-> Users and Groups -> Rank Administration
    Edit one of your existing ranks, or create a new one

    In the rank title first type the name you want, for example "Administrator"
    Next to make part of the title bold you have to give it an html bold class.

    Add an image to the rank name ( + customizing ranks) Puce_bleuHere's how:   <b>Admin</b>istrator

    Now we need to give the font some color.
    To do this you have to add a vaild html color tag to a font tag.

    Add an image to the rank name ( + customizing ranks) Puce_bleuHere's how:   <font color="#000000"><b>Admin</b></font>istrator

    Add an image to the rank name ( + customizing ranks) 21ms313
    Warning!
     Make sure all your tags are properly opened and closed. Example <font></font> <b></b>. If you do not close your tag , your posts or forum can be affected!
    Warning!
    when you use <font color> you have to use the proper ="#6 digit hexcode" , if you do not use the proper form the color won't appear.

    Add an image to the rank name ( + customizing ranks) 21ms313Remember that the Rank Title has a limit of characters. If you put to much code the title won't fit!


    Add an image to the rank name ( + customizing ranks) 2pt8jo1Rank Name Image


    As mentioned above don't go overboard with your rank effects. Just changing the bold and color is a whole load of difference. You need the extra space to use images in your rank name!


    To add an image to your rank title all you need to do is upload an image to tinypic.com
    We use tinypic.com because the image url is very short which saves a lot of space. If you didn't use any text effects from above you can upload your image to other hosts, with longer urls.

    - upload your max 16x16 picture 
    - retrieve the short url and copy it

    Now we need to add a simple img html tag infront of your text

    Add an image to the rank name ( + customizing ranks) Puce_bleuHere's how:   <img src="image url" /><font color="#000000"><b>Admin</b></font>istrator

    and thats it. The image tag has an integrated end tag /> you don't need to add a </img> tag!

    As soon as you save your rank, the image and text effects will appear.


    This tutorial was written by @Jalokim

    fraNNNta likes this post

    • Back to top