Welcome to XenForo Nulled Community

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Ask question

Ask Questions and Get Answers from Our Community

Answer

Answer Questions and Become an Expert on Your Topic

Contact Staff

Our Experts are Ready to Answer your Questions

  • All the resources of this forum were bought by the founder(s). No resources have been leeched from other forums!

Template Code Display an image for the theme prefix

Nexus

Nexus Security
Staff member
Moderator
Joined
26 January 2020
Messages
33
Best answers
1
Reaction score
61
Points
18
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:
Code:
.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:
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;
That's all ... enjoy.
 

n3ujx

twitch.tv/n3ujx
Moderator
S.V.I.P
Joined
2 January 2020
Messages
48
Best answers
0
Reaction score
143
Points
33
Website
localhost
please share sample pictures on these threads
 
shape1
shape2
shape3
shape4
shape7
shape8
Top