1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Creating Thread Prefixes Containing Images 1.0

Add a little style to your prefixes.

  1. Sheldon
    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:

    threadprefixes.png

    First, create your Thread Prefixes like normal:

    threadprefixes2.png

    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.

    threadprefixes3.png

    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 suggestion-prefix.png 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:
    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:
    testsuggestion.png

    I have found one issue (that I am just too lazy to finish), it is on the selector when creating a post:
    issue.png

    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!
    Harfynn, JMPRockFm, Shyuan and 9 others like this.

Recent Updates

  1. Added.