XenForo Display image for Thread Prefix

[wikislo]

This little tip will show you how you can display an image as a thread prefix but also show a title with the image when a user is selecting a thread prefix...hope it helps.

NOTE: I use 18px x 18px images for my prefix images

1. Create a thread prefix
a. In your ACP (Admin Controlo Panel), go to Forums -> Thread prefixes and click the Add prefix button
b. Complete the form and instead of selecting a pre-set Display styling, click the "Other, using custom CSS class name"
c. Enter a css class name that you will create below

d. Do the same for each of the prefixes you want to have

2. Create the styling for your prefix
a. In your ACP go to Appearance -> Templates and open the extra.less template
b. Add the following css to the template:

.prefix_alert {
    background: url(styles/prefixes/alert.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

c. Change the following in the above code to suit your situation:
prefix_alert - change to the name you inserted in the "Other, using custom CSS class name" in the above step 1. b.
styles/prefixes/alert.gif - change to the location of your prefix image
d. Do the same for each one of your prefixes...for example I have 6 prefixes so I have:

/* IB added for image PREFIXES */
.prefix_question {
    background: url(styles/prefixes/question.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_how_to {
    background: url(styles/prefixes/how_to.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_information {
    background: url(styles/prefixes/information.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_need_help {
    background: url(styles/prefixes/need_help.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_important {
    background: url(styles/prefixes/important.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_alert {
    background: url(styles/prefixes/alert.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}