Display image for Thread Prefix

[ibaker]

ibaker submitted a new resource:

Display image for Thread Prefix - This will show you how to just have an image as a thread prefix

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...

Read more about this resource...

 

[artscripts]

Simplified version

.m_addIconPrefix(@className, @imagePath) {
  .prefix_@{className} {
    background: url(@imagePath) 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;
  }
}


.m_addIconPrefix(question, 'styles/prefixes/question.gif');
.m_addIconPrefix(alert, 'styles/prefixes/alert.gif');
.m_addIconPrefix(information, 'styles/prefixes/information.gif');
.m_addIconPrefix(need_help, 'styles/prefixes/need_help.gif');
.m_addIconPrefix(important, 'styles/prefixes/important.gif');
.m_addIconPrefix(alert, 'styles/prefixes/alert.gif');