XF 2.2 How to move location of prefixes on forum view

NoahP

Member
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;
}
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)
 
Thank you @BassMan that did work for a regular discussion forum... I should have mentioned the main thing Im trying to do this for is an article forum and that change did not affect it at all.
 
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)
 
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.webp

Result narrow screen:

Bildschirmfoto 2022-05-01 um 00.34.08.webp

Probably you have to be more specific for the CSS-rules in order to avoid unwanted side-effects.
 
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.
 
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 Bottom