I searched Xenforo for days, saw a couple different ways to do it, and never could get it figured out. Finally, had a breakthrough, not sure if I saw it at bbSmiley.com or where, but it all came together. Here is how I add thread prefixes that contain an image, as see here:
First, create your Thread Prefixes like normal:
Inside each prefix, you have the predefined looks that you can easily select, or you have the blank box that you can use to create your own look with.
If you notice, I simply put this in the "Other" Box: prefixSuggestion
Now, we will move on to the CSS for each.
1. Find your image you'd like to use... for these, I used 24x24 px such as this
I uploaded all of the images I wanted into the styles/default/xenforo/icons folder.
2. Go to your extra.css template, and add this:
For the hover effect, I used this code:
The end result should give you this in a message:
I have found one issue (that I am just too lazy to finish), it is on the selector when creating a post:
I just checked, and think it can be cleared up adding this to extra.css as well:
Obviously, you can adjust the padding to suit your needs.
Hope this helps you all with your custom Thread Prefixes!
First, create your Thread Prefixes like normal:
Inside each prefix, you have the predefined looks that you can easily select, or you have the blank box that you can use to create your own look with.
If you notice, I simply put this in the "Other" Box: prefixSuggestion
Now, we will move on to the CSS for each.
1. Find your image you'd like to use... for these, I used 24x24 px such as this
2. Go to your extra.css template, and add this:
Code:
.prefixSuggestion {
background: url("styles/default/xenforo/icons/suggestion-prefix.png") no-repeat scroll left center #ffe34d;
border: 1px solid #535353 !important;
border-radius: 3px 3px 3px 3px !important;
box-shadow: 0 0 1px #Cccccc inset;
color: #111111;
display: inline-block;
font-size: 12px;
line-height: 18px !important;
padding: 0 2px 0 25px;
text-shadow: 0 0 0 transparent, 0 0 1px #ccb63e;
vertical-align: middle;
margin-top: -2px !important;
}For the hover effect, I used this code:
Code:
.prefixSuggestion:hover {
opacity: 0.35;
}The end result should give you this in a message:
I have found one issue (that I am just too lazy to finish), it is on the selector when creating a post:
I just checked, and think it can be cleared up adding this to extra.css as well:
Code:
.PrefixMenu .PrefixGroup .PrefixOption a {
padding-left: 28px !important;
}Obviously, you can adjust the padding to suit your needs.
Hope this helps you all with your custom Thread Prefixes!
