New resource:
Centering thread title (and thread author & date info) - Only affecting the showthread pages, this mod centersthe thread title in the page header.
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
Add
This makes the first 5 lines of the "thread_view" template look like:
[Step 2] Add the following contents to "extra.less":
Read more about this resource...
Centering thread title (and thread author & date info) - Only affecting the showthread pages, this mod centersthe thread title in the page header.
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...
