Please consider supporting us by disabling your ad blocker.


Our website is made possible by displaying online advertisements to our visitors.
  • Thank You For Visiting CyberSensus Forum
    You can download Unlimited FREE Resources and You can download VIP resources by just upgrading your account for only $3..
    You can also ask questions and request for any resources by just creating a thread for free




Tutorial Xenforo Display image for Thread Prefix

Cyber

Administrator
Staff member
Entitled
PHP
276.198
Cyber Credits
30,270
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
display-image-for-thread-prefix.jpg

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:
CSS:
.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:
Code:
/* 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;
}
That's it...enjoy.

This is what my 6 thread prefixes looks like to the user:

display-image-for-thread-prefix-1.jpg

display-image-for-thread-prefix-2.jpg

display-image-for-thread-prefix-3.jpg
 
Top