Resource icon

XF 2.x Custom [ShikiSuen] Centering thread title (and thread author & date info)

ShikiSuen

New member
Registered
Joined
Apr 29, 2020
Messages
4
Reaction score
4
Points
12
Location
Japan

Reputation:

New resource:

Centering thread title (and thread author & date info) - Only affecting the showthread pages, this mod centersthe thread title in the page header.

1588665074711-png.789


Note: The title automatically aligns to the left if its length is too long for one line.

[Step 1] Modify the beginning part of the "thread_view" template:

Replace <xf:h1>{{ prefix('thread', $thread) }}{$thread.title}</xf:h1> with <xf:h1>{$thread.title}</xf:h1>

Add <span>{{ prefix('thread', $thread) }}</span> between <xf:description meta="false"> and <ul class="listInline listInline--bullet">.

This makes the first 5 lines of the "thread_view" template look like:
Code:
<xf:title page="{$page}">{{ prefix('thread', $thread, 'escaped') }}{$thread.title}</xf:title>
<xf:h1>{$thread.title}</xf:h1>

<xf:description meta="false">
    <span>{{ prefix('thread', $thread) }}</span>
    <ul class="listInline listInline--bullet">

[Step 2] Add the following contents to "extra.less":

Code:
[data-template="thread_view"]{
    .p-body-header .p-title .p-title-value {margin: 0 auto 5px auto; font-weight: @xf-fontWeightHeavy;}
    .p-body-header .p-description {display:flex;justify-content:center;align-items: center;.label{margin-right:5px; font-size: @xf-fontSizeSmaller;}}
    @media (max-width: @xf-responsiveWide) {.p-title-value{font-size: @xf-fontSizeLarger;}}
}

Read more about this resource...
 
Top