Categories

Display an image for the theme prefix

You are here:
< All Topics

This little tip will show you how you can display an image as a stream prefix, but it will also show a caption with an image when the user selects a stream prefix … I hope this helps.

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

1. Create a stream prefix

a. In your ACP (Administrator Control Panel), go to Forums -> Them Prefixes and click the Add Prefix button

b. Fill out the form, and instead of choosing a predefined display style, click “Other, using the name of a custom CSS class”

c. Enter the class name css that you will create below.

e. Do the same for each prefix you want to have.

2. Create a style for your prefix

a. In your ACP, go to Appearance -> Templates and open the extra.less template

b. Add the following template 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;
}

with. Modify the following in the above code to suit your situation:

prefix_alert — change the name inserted in the “Other using the name of a custom CSS class” field in the previous step 1. b.

styles / prefixes / alert.gif – change the location of your prefix image

d. Do the same for each 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;
Table of Contents