XF 2.0 Thread Prefix Title missing

[ibaker]

In XF v2 the thread prefix title is not showing when composing a new thread after I have added a css class with an image:

As you can see the image is showing but not the prefix name (had no problem in v1)

In the Thread Prefix I have selected in Display Styling "Other, using custom CSS class name" and inserted the name of the css style which is for example:

.prefix_question {
    background: url(styles/prefixes/question.gif) no-repeat scroll left center;
    display: inline-block;
    font-size: 1px;
    line-height: 18px !important;
    padding: 0 0 0 25px;
    vertical-align: middle;
    margin-top: -2px !important;
}

In the thread display just the image is shown which is correct but when adding a prefix to a thread I need the user to know what each prefix means like I had in v1:

Any advice is appreciated

 

[Chris D]

You've set the font-size to 1px. It's not missing, it's just really small (that's what the little blue line is next to each icon - the small text).

It might be that something else in XF1 was overriding the font size.

 

[ibaker]

Doh, missed that...thanks Chris

 

[ibaker]

Oops spoke too soon. The reason for the 1px was to stop the text of the prefix showing next to the thread title and only show the icon in XF v1 yet in v1 the prefix title did show in the drop down selector so it all worked.

In v2 this isn't the case...I am trying to have v2 perform like v1 where the prefix title shows with the icon in the drop down selector but only show the icon next to the thread title. So the problem still exists

 

[Chris D]

Probably wouldn't use font-size for that purpose anyway, but I'm actually surprised it worked in XF1. It would have effectively been by chance that the menu prefix styling must have been explicitly setting the font-size to make it override the 1px value. So for XF2 something a bit more specific is likely required:

.prefix_question {
    background: url(styles/prefixes/question.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 25px;
    vertical-align: middle;
    margin-top: -2px !important;

    .structItem-title &
    {
        text-indent: -10000px;
    }
}

That would mean that the prefix text is unhidden in most cases but when the prefix is used inside the thread list, it would have a massive negative indent which effectively hides the text. You can probably still use font-size: 0; (which makes more sense than 1px) if you want, but generally text-indent is used to hide text.

Actually, if it's the case that in the thread list all of your prefixes should not display text, then it probably makes sense to just add something like this to extra.less instead:

.structItem-title .label
{
    text-indent: -10000px;
}

 

[ibaker]

Thanks Chris, that fixed it...just removed the font size in them all and just added the text-indent to each item. Although I have to say that its a bit dirty to still have the text and just indent it rather than not pulling up the text in the first place but what you have said works so thanks for that.

The single entry of

.structItem-title .label
{
    text-indent: -10000px;
}

didn't work

 

[ibaker]

So, I tried just adding this code to the extra:

.structItem-title .label
{
    text-indent: -10000px;
}

But that didn't work

I added the code you suggested to each of the prefixes:

/* 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 25px;
    vertical-align: middle;
    margin-top: -2px !important;
    .structItem-title &
    {
        text-indent: -10000px;
    }
}

.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 25px;
    vertical-align: middle;
    margin-top: -2px !important;
    .structItem-title &
    {
        text-indent: -10000px;
    }
}

.prefix_information {
    background: url(styles/prefixes/information.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 25px;
    vertical-align: middle;
    margin-top: -2px !important;
    .structItem-title &
    {
        text-indent: -10000px;
    }
}

.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 25px;
    vertical-align: middle;
    margin-top: -2px !important;
    .structItem-title &
    {
        text-indent: -10000px;
    }
}

.prefix_important {
    background: url(styles/prefixes/important.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 25px;
    vertical-align: middle;
    margin-top: -2px !important;
    .structItem-title &
    {
        text-indent: -10000px;
    }
}

.prefix_alert {
    background: url(styles/prefixes/alert.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 25px;
    vertical-align: middle;
    margin-top: -2px !important;
    .structItem-title &
    {
        text-indent: -10000px;
    }
}

That worked great for the thread list display as well as the drop downs:


BUT, the label is also showing at the top of threads as well whereas just the icon showed in v1.

Sorry but v2 seems to be getting harder and harder to do anything that was so simple in v1

 

[Chris D]

Actually, there may well be an XF2 bug at play here which may allow you to put the font-size back (I'd suggest using 0 rather than 1px, which would prevent the issue present on your XF1 site right now, see below), so probably wait for that to be fixed before worrying too much about that.



Related bug report: https://xenforo.com/community/threads/2-0-2-breaks-default-prefix-styling.142252/

 

[ibaker]

Chris, in v1 having the font size at 1 made it look like a hyphen between the icon and the thread title hence why it all worked:


But in v2 with the extra thread creation boxes is where the problem lies as you say the label is still there but only 1 in size

 

[ibaker]

Oops I see you have replied about the potential bug