Xenforo Custom Template Code Modifications

JGaulard

Moderator
Staff member
  • #1
I've been working with Xenforo forum software for about a year and a half now and have learned a bit about how it operates. Now, I don't know a lot like some of the more senior members of the Xenforo Community do, but I can find my way around. One area I've sort of figured out has to do with template modifications. I've created custom page titles, snippets of text on the forum view and template pages, as well as how to change the color of sticky threads in the list of threads on the forum view page, among other things. In this thread, I thought I'd share some of what I've learned and what I've used on my own sites. In the space below, I invite you to ask questions and share what you've discovered as well.
 

JGaulard

Moderator
Staff member
  • #2
How to Create Custom Page Titles

Code:
TEMPLATE: "PAGE_CONTAINER"

(changed original page titles to custom ones)

Look for:

<title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title>

and change to something like (use your own title structure):

<!-- CUSTOM PAGE TITLE CODE -->

<xf:if is="$template == 'forum_list'">
<title><xf:title formatter="%s | %s" fallback="CUSTOM HOMEPAGE TITLE HERE" /></title>
<xf:elseif is="$template == 'forum_view'" />
<title><xf:title formatter="%s | %s" fallback="CUSTOM FORUM VIEW PAGE TITLE HERE" page="{$pageNumber}" /></title>
<xf:elseif is="$template == 'thread_view'" />
<title><xf:title /></title>
<xf:else />
<title><xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" /></title>
</xf:if>

<!-- CUSTOM PAGE TITLE CODE -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #3
How To Change the Color of Sticky Threads on Forum View Pages

Code:
TEMPLATE: "EXTRA.LESS"

(added background color css for sticky threads)

Add this code to the EXTRA.LESS template (sample color used below:

/* STICK THREAD TABLE COLOR */

.structItemContainer-group--sticky .structItem {
background-color: #fff4e6;
}

/* STICK THREAD TABLE COLOR */
 
Last edited:

JGaulard

Moderator
Staff member
  • #4
How to Remove Forum Descriptions From Forum List Popup Page When Member is Creating Thread

Code:
TEMPLATE: "FORUM_POST_THREAD_CHOOSER"

(remove description snippet)

Remove this code:

<xf:if is="$node.description">
<div class="contentRow-minor contentRow-minor--singleLine">
{$node.description|strip_tags}
</div>
</xf:if>
 
Last edited:

JGaulard

Moderator
Staff member
  • #5
How to Add Custom Alt and Title Attributes to Logo

Code:
TEMPLATE: "PAGE_CONTAINER"

(add page title to logo image alt and title)

Look for:

<div class="p-header-logo p-header-logo--image">
<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
<img src="{{ base_url(property('publicLogoUrl')) }}"
alt="{$xf.options.boardTitle}"
{{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
</a>
</div>

and change to something like:

<!-- CHANGE LOGO ALT ATTRIBUTE / ADD TITLE ATTRIBUTE -->

<div class="p-header-logo p-header-logo--image">
<a href="{{ ($xf.options.logoLink && $xf.homePageUrl) ? $xf.homePageUrl : link('index') }}">
<img src="{{ base_url(property('publicLogoUrl')) }}"
alt="<xf:if is="$template == 'forum_list'">
<xf:title formatter="%s | %s" fallback="CUSTOM TEXT HERE" />
<xf:elseif is="$template == 'forum_view'" />
<xf:title formatter="%s | %s" fallback="CUSTOM TEXT HERE" page="{$pageNumber}" />
<xf:elseif is="$template == 'thread_view'" />
<xf:title />
<xf:else />
<xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" />
</xf:if>"
title="<xf:if is="$template == 'forum_list'">
<xf:title formatter="%s | %s" fallback="CUSTOM TEXT HERE" />
<xf:elseif is="$template == 'forum_view'" />
<xf:title formatter="%s | %s" fallback="CUSTOM TEXT HERE" page="{$pageNumber}" />
<xf:elseif is="$template == 'thread_view'" />
<xf:title />
<xf:else />
<xf:title formatter="%s | %s" fallback="{$xf.options.boardTitle}" page="{$pageNumber}" />
</xf:if>"

{{ property('publicLogoUrl2x') ? 'srcset="' . base_url(property('publicLogoUrl2x')) . ' 2x"' : '' }} />
</a>
</div>

<!-- CHANGE LOGO ALT ATTRIBUTE / ADD TITLE ATTRIBUTE -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #6
How to Add a noindex Meta Tag to Error Pages

Code:
TEMPLATE: "ERROR"

(add meta noindex)

add:

<xf:head option="metaNoindex"><meta name="robots" content="noindex" /></xf:head>
 
Last edited:

JGaulard

Moderator
Staff member
  • #7
How to Remove the Links to Member Pages for Guests in Andy's Similar Threads Addon

Code:
TEMPLATE: "ANDY_SIMILARTHREADS"

(remove thread starter member link for guests)

(comments not allowed in this template)

Find and change:

<!-- REMOVE THREAD STARTER FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<xf:avatar user="{$thread.User}" size="xs" defaultname="{$thread.username}" />

<xf:else />

<xf:avatar user="{$thread.User}" size="xs" defaultname="{$thread.username}" href="" />

</xf:if>

<!-- REMOVE THREAD STARTER FOR GUESTS -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #8
How to Add Search Bar by customizeFX to Any Template

Code:
TEMPLATE: "SEARCH_RESULTS (or any other one you like)"

add:

<!-- SEARCH BAR WIDGET -->

<xf:widget key="search_bar" />

<!-- SEARCH BAR WIDGET -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #9
How to Remove New Posts Link From Upper Right Corner of Forum List Page (Homepage)

Code:
TEMPLATE: "FORUM_OVERVIEW_WRAPPER"

(remove "newest posts" button from upper right corner of homepage)

line 10

<xf:button href="{{ $xf.options.forumsDefaultPage == 'new_posts' ? link('forums/new-posts') : link('whats-new/posts') }}" icon="bolt">
{{ phrase('new_posts') }}
</xf:button>
 
Last edited:

JGaulard

Moderator
Staff member
  • #10
How to Remove New Posts Link From Newest Threads Widget

Code:
TEMPLATE: "WIDGET_NEW_THREADS"

(remove "newest posts" link)

line 7

<a href="{$link}" rel="nofollow">{$title}</a>
 
Last edited:

JGaulard

Moderator
Staff member
  • #11
How to Remove Hidden Newest Posts Link on Homepage

Code:
TEMPLATE: "PAGE_CONTAINER"

(remove "newest posts" hidden link)

line 289

<a href="{{ link('whats-new') }}"
class="p-navgroup-link p-navgroup-link--iconic p-navgroup-link--whatsnew"
aria-label="{{ phrase('whats_new')|for_attr }}"
title="{{ phrase('whats_new')|for_attr }}">
<i aria-hidden="true"></i>
<span class="p-navgroup-linkText">{{ phrase('whats_new') }}</span>
</a>
 
Last edited:

JGaulard

Moderator
Staff member
  • #12
How to Remove Prefix From Page Title and Change Position of Prefix in H1

Code:
TEMPLATE: "THREAD_VIEW"

(remove prefix from page title, move prefix from front to back of h1)

line 1

Look for:

<xf:title page="{$page}">{{ prefix('thread', $thread, 'escaped') }}{$thread.title}</xf:title>
<xf:h1>{{ prefix('thread', $thread) }}{$thread.title}</xf:h1>

and change to:

<!-- REMOVE PREFIX FROM PAGE TITLE, MOVE PREFIX -->

<xf:title page="{$page}">{$thread.title}</xf:title>
<xf:h1>{$thread.title} {{ prefix('thread', $thread) }}</xf:h1>

<!-- REMOVE PREFIX FROM PAGE TITLE, MOVE PREFIX -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #13
How to Remove Username Quote Links to Posts on Thread Pages

Code:
TEMPLATE: "BB_CODE_TAG_QUOTE"

(remove quote username link (goto) for guests - /goto/ links on thread pages)

line 9

<!-- REMOVE QUOTE USERNAME LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a href="{{ link('goto/' . {$source.type}, null, {'id': $source.id}) }}"
class="bbCodeBlock-sourceJump"
data-xf-click="attribution"
data-content-selector="#{$source.type}-{$source.id}">{{ phrase('x_said:', {'name': $name}) }}</a>

<xf:else />

{{ phrase('x_said:', {'name': $name}) }}

</xf:if>

<!-- REMOVE QUOTE USERNAME LINK FOR GUESTS -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #14
How to Remove Links to Reactions on Thread Pages

Code:
TEMPLATE: "REACTION_LIST_ROW"

(remove reactions link row for guests - /posts/ links on thread pages)

line 5

<!-- REMOVE REACTIONS FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a class="reactionsBar-link" href="{{ link($link, $content, $linkParams) }}" data-xf-click="overlay" data-cache="false">{$reactions}</a>

<xf:else />

{$reactions}

</xf:if>

<!-- REMOVE REACTIONS FOR GUESTS -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #15
How to Remove Prefix Links on Forum View Pages for Guests

Code:
TEMPLATE: "THREAD_LIST_MACROS"

(remove prefix filter link for guests)

line 91

<!-- REMOVE PREFIX FILTER LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a href="{{ link('forums', $forum, {'prefix_id': $thread.prefix_id}) }}" class="labelLink" rel="nofollow">{{ prefix('thread', $thread, 'html', '') }}</a>

<xf:else />

{{ prefix('thread', $thread, 'html', '') }}

</xf:if>

<!-- REMOVE PREFIX FILTER LINK FOR GUESTS -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #16
How to Remove Date Link on Forum View Pages for Guests

Code:
TEMPLATE: "THREAD_LIST_MACROS"

(remove date link for guests)

line 150

<!-- REMOVE DATE LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<li class="structItem-startDate"><a href="{{ link('threads', $thread) }}" rel="nofollow"><xf:date time="{$thread.post_date}" /></a></li>

<xf:else />

<li class="structItem-startDate"><xf:date time="{$thread.post_date}" /></li>

</xf:if>

<!-- REMOVE DATE LINK FOR GUESTS -->
 
Last edited:

JGaulard

Moderator
Staff member
  • #17
How to Remove More Date Link on Forum View Pages for Guests

Code:
TEMPLATE: "THREAD_LIST_MACROS"

(remove date link for guests)

line 180

<!-- REMOVE DATE LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a href="{{ link('threads/latest', $thread) }}" rel="nofollow"><xf:date time="{$thread.last_post_date}" class="structItem-latestDate" /></a>

<xf:else />

<xf:date time="{$thread.last_post_date}" class="structItem-latestDate" />

</xf:if>

<!-- REMOVE DATE LINK FOR GUESTS -->
 

JGaulard

Moderator
Staff member
  • #18
How to Remove Thread Links in Node Lists For Guests

Code:
TEMPLATE: "NODE_LIST_FORUM"

(remove thread link for guests)

line 121

<!-- REMOVE THREAD LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<xf:if is="$extras.LastThread.isUnread()">
<a href="{{ link('threads/unread', $extras.LastThread) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
<xf:else />
<a href="{{ link('threads/post', $extras.LastThread, {'post_id': $extras.last_post_id}) }}" class="node-extra-title" title="{$extras.LastThread.title}">{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}</a>
</xf:if>

<xf:else />

<xf:if is="$extras.LastThread.isUnread()">
{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}
<xf:else />
{{ prefix('thread', $extras.LastThread) }}{$extras.LastThread.title}
</xf:if>

</xf:if>

<!-- REMOVE THREAD LINK FOR GUESTS -->
 

JGaulard

Moderator
Staff member
  • #19
How to Remove Date Links in Threads For Guests

Code:
TEMPLATE: "THREAD_VIEW"

(remove thread date link for guests)

line 16

<!-- REMOVE THREAD DATE LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a href="{{ link('threads', $thread) }}" class="u-concealed"><xf:date time="{$thread.post_date}" /></a>

<xf:else />

<xf:date time="{$thread.post_date}" />

</xf:if>

<!-- REMOVE THREAD DATE LINK FOR GUESTS -->
 

JGaulard

Moderator
Staff member
  • #20
How to Remove More Date Links on Thread Pages for Guests

Code:
TEMPLATE: "POST_MACROS"

(remove post date link for guests)

line 21

<!-- REMOVE POST DATE LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" class="u-concealed"
rel="nofollow">
<xf:date time="{$post.post_date}"/>
</a>

<xf:else />

<xf:date time="{$post.post_date}"/>

</xf:if>

<!-- REMOVE POST DATE LINK FOR GUESTS -->
 

JGaulard

Moderator
Staff member
  • #21
How to Remove Share Tool Tip and Link on Thread Pages for Guests

Code:
TEMPLATE: "POST_MACROS"

(remove share toolstip and link for guests)

line 32

<!-- REMOVE SHARE TOOLTIP LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}"
data-xf-init="share-tooltip" data-href="{{ link('posts/share', $post) }}"
rel="nofollow">
<xf:fa icon="fa-share-alt"/>
</a>

<xf:else />

<xf:fa icon="fa-share-alt"/>

</xf:if>

<!-- REMOVE SHARE TOOLTIP LINK FOR GUESTS -->
 

JGaulard

Moderator
Staff member
  • #22
How to Remove Post Number Link on Thread Pages for Guests

Code:
TEMPLATE: "POST_MACROS"

(remove post date number link for guests)

line 51

<!-- REMOVE POST NUMBER LINK FOR GUESTS -->

<xf:if is="$xf.visitor.user_id">

<a href="{{ link('threads/post', $thread, {'post_id': $post.post_id}) }}" rel="nofollow">
#{{ number($post.position + 1) }}
</a>

<xf:else />

#{{ number($post.position + 1) }}

</xf:if>

<!-- REMOVE POST NUMBER LINK FOR GUESTS -->
 

JGaulard

Moderator
Staff member
  • #23
How to Show Advertisements on All Pages Except for Forum List Page, Forum View Pages, Thread Pages, and Search Results

Customize how you want.

Code:
(show ads in only some templates)

<xf:if is="$__globals.template == 'forum_list'">
<xf:elseif is="$__globals.template == 'forum_view'" />
<xf:elseif is="$__globals.template == 'thread_view'" />
<xf:elseif is="$__globals.template == 'search_results'" />
<xf:else />

ADVERTISEMENT GOES HERE

</xf:if>
 
Top