XF 2.3 Thread prefix image

[ArtG]

Hi,

Does anyone know how to add an image (gif) to a thread prefix? I see a resource on adding a Font Awesome icon but not a gif.

Thanks,
Art

 

[Mr Lucky]

If you don’t need the gif to animate, I would add as a background image, e.g. positioned to the left with padding on the left so any text is clear of the image.

 

[ArtG]

Thanks, I don't need it to animate. Any suggestion on the CSS to do that?

 

[ArtG]

I've tried this unsuccessfully.

/* #### Thread Prefixes #### */
.label
{
&:before
{
padding-right: 4px;
}

&.label--
{
&burr:before
{
background-image: url("https://scapecrunch.com/burr.webp") repeat 0 0;
}
}
}

 

[CedricV]

.prefix--nameprefixhere {
    color: #fff;
    background: url('https://your-image-url.com/prefix-bg.png') no-repeat center center;
    background-size: cover;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

Adjust as needed.

Webp images can't be gif.

 

[ArtG]

@CedricV thanks but doesn't work. I converted the webp to gif. Image is still not showing.

I also tried this: https://xenforo.com/community/resources/display-image-for-thread-prefix.7130/

Doesn't work unfortunately.

 

[ArtG]

/* #### Thread Prefixes #### */
.prefix--burr
{
background: url('https://scapecrunch.com/burr.gif') no-repeat center center;
background-size: cover;
padding: 2px 8px;
font-size: 0px;
}

 

[Gemma]

/* #### Thread Prefixes #### */
.prefix--burr
{
background: url('https://scapecrunch.com/burr.gif') no-repeat center center;
background-size: cover;
padding: 2px 8px;
font-size: 0px;
}

Try this

/* #### Thread Prefixes #### */
.prefix--burr::before
{
background: url('https://scapecrunch.com/burr.gif') no-repeat center center;
background-size: cover;
padding: 2px 8px;
font-size: 0px;
}

 

[ArtG]

Thanks @Gemma but no luck.


The image doesn't come through.

 

[🔥Iggy🔥]

try it with a relative url....works for me...idk
content: url(images/imagename.jpg);

 

[Mr Lucky]

This is what I'm using and it's working.

see it live here with your image https://otra.org.uk/community/forums/test-posts.49/

.label.label--test
{background: url(https://scapecrunch.com/burr.webp) no-repeat left center;
    background-size:20px;
     background-position:2px;
    background-color:yellow;
    color:black;
    padding-left:28px
 
}

class for custom prefix = label label--test





.label.label--test
{background: url(https://scapecrunch.com/burr.webp) no-repeat left center;
background-size:20px;
background-position:2px;
background-color:yellow;
color:black;
padding-left:28px

}

 

[Gemma]

The image doesn't come through.

    .prefix--burr {
        display: inline-block;
        line-height: 20px;
        font-size: 15px;
          &::before {
            content: url('https://scapecrunch.com/burr.gif');
              margin-right: 4px;
             vertical-align: middle;
             top: 1px;
             position: relative;
        }
    }

 

[PhineasD]

How can create prefixes like this? Thx

 

[ArtG]

    .prefix--burr {
        display: inline-block;
        line-height: 20px;
        font-size: 15px;
          &::before {
            content: url('https://scapecrunch.com/burr.gif');
              margin-right: 4px;
             vertical-align: middle;
             top: 1px;
             position: relative;
        }
    }

Sadly, no image showing... I'm stumped.

 

[ArtG]

This is what I'm using and it's working.

see it live here with your image https://otra.org.uk/community/forums/test-posts.49/

View attachment 321515

.label.label--test
{background: url(https://scapecrunch.com/burr.webp) no-repeat left center;
    background-size:20px;
     background-position:2px;
    background-color:yellow;
    color:black;
    padding-left:28px
 
}

class for custom prefix = label label--test

View attachment 321513



.label.label--test
{background: url(https://scapecrunch.com/burr.webp) no-repeat left center;
background-size:20px;
background-position:2px;
background-color:yellow;
color:black;
padding-left:28px

}

Bingo! We have a winner. Thank you so much!

 

[Mr Lucky]

Bingo! We have a winner. Thank you so much!

You're welcome, you'll obviously need to experiment a bit with px dimensions etc.

 

[PhineasD]

How can create prefixes like this? Thx

View attachment 321517

Done with left borders and margins, thx!

 

[Gemma]

How can create prefixes like this? Thx

I think this is done using an addon from one of the Turkish webmaster websites - https://xenforo.gen.tr/xenforo-kaynaklari/xengentr-onek-tasarim-sistemi.1218/