XF 2.2 How to move location of prefixes on forum view

Hello,

I am trying to move the location of my thread prefixes to after the thread title,

I have accomplished this on the thread_view template but I am having trouble figuring out how to do it on the forum_view template.

Can somebody give me some guidance?
 
Solution
Did you only look at an article forum with preview on?

Then you are right, there this approach does not work. You have to add the articlePreview-title class:

CSS:
.structItem-title, .articlePreview-title {
    display: flex;
}

.structItem-title a.labelLink:nth-child(1),
.articlePreview-title a.labelLink:nth-child(1) {
    order: 2;
    margin-left: 10px;
    white-space: nowrap;
}

BassMan

Well-known member
Hello,

In template thread_list_macros FIND and CUT:
HTML:
                <a href="{{ link('threads' . (($thread.isUnread() AND !$forceRead) ? '/unread' : ''), $thread) }}" class="" data-tp-primary="on" data-xf-init="{{ $canPreview ? 'preview-tooltip' : '' }}" data-preview-url="{{ $canPreview ? link('threads/preview', $thread) : '' }}">{$thread.title}</a>
(in default style that's line 135)


FIND and PASTE BELOW:
HTML:
                <xf:set var="$canPreview" value="{{ $thread.canPreview() }}" />
(that's line 127 in default style)
 

BassMan

Well-known member
In that case, in template post_article_macros FIND and CUT:
HTML:
                                    <a href="{{ link('threads' . (($thread.isUnread() AND !$forceRead) ? '/unread' : ''), $thread) }}">{$thread.title}</a>
(line 40)


FIND and PASTE ABOVE:
HTML:
                                    <xf:if is="$thread.prefix_id">
(line 33)




In the same template FIND and CUT:
HTML:
                        <a href="{$linkUnread}">{$thread.title}</a>
(line 250)


FIND and PASTE ABOVE:
HTML:
                        <xf:if is="$thread.prefix_id">
(line 242)
 

nocte

Well-known member
How about playing around with CSS? :D

CSS:
.structItem-title {
    display: flex;
}

a.labelLink:nth-child(1) {
    order: 2;
    margin-left: 10px;
    white-space: nowrap;
}

Result desktop:

Bildschirmfoto 2022-05-01 um 00.33.52.png

Result narrow screen:

Bildschirmfoto 2022-05-01 um 00.34.08.png

Probably you have to be more specific for the CSS-rules in order to avoid unwanted side-effects.
 

nocte

Well-known member
I tried that in the extra.less template and it still is not changing.

I just tested it locally (via extra.less) and it does work.

Bildschirmfoto 2022-05-01 um 00.47.03.png

Maybe you are editing the wrong style (e.g. Master-style, but have also changes in Default-style)?

P.S. maybe you also have to revert the other changes you made before.
 

nocte

Well-known member
Did you only look at an article forum with preview on?

Then you are right, there this approach does not work. You have to add the articlePreview-title class:

CSS:
.structItem-title, .articlePreview-title {
    display: flex;
}

.structItem-title a.labelLink:nth-child(1),
.articlePreview-title a.labelLink:nth-child(1) {
    order: 2;
    margin-left: 10px;
    white-space: nowrap;
}
 
Solution
Top