• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Adding a thread prefix to a forum in the forum home

Brogan

XenForo moderator
Staff member
#4
Thread prefixes only apply to threads, not forum titles.

Try this though.
Add this to EXTRA.css:
Code:
.nodeList .node_32 .nodeTitle:before {
content: url('path/to/image.png');
display: inline;
}
Change the 32 to the node ID.

This is the result:
image.PNG

Obviously you'll have to create some images too.
 

ChemicalKicks

Well-known member
#5
Thanks, that's working.

Do you know how I could align the image vertically so that it's centred with the text in the forum name. In the picture you can see that because the image is taller than the text it looks like it's not square.

ex1.png
 

Brogan

XenForo moderator
Staff member
#6
The image looks larger than the text, it looks like it is aligned to the bottom.

Can you link me to the page and I'll see what I can do.
 

Jainic

Active member
#9
I'm trying to accomplish a similar look but have the thread prefixes on the right side of the forum links. I changed the css and now it places it on the right side :
.nodeList .node_4 .nodeTitle:after {

My question is : Is it possible to have the actual thread prefix links instead of an image?

 

Jake Bunce

XenForo moderator
Staff member
#10
You can style it with CSS, and reference the @titlePrefix property to pull in the default styling of thread prefixes:

Code:
.nodeList .node_2 .nodeTitle:after {
content: 'Prefix';
color: white;
background-color: red;
border-color: #F88;
@titlePrefix
}
 

Jainic

Active member
#11
Edit :

After a bit of CSS researching, it doesn't look like I can add url/links by css.
Is this only possible through an addon or a hook?

I'm hoping to use thread prefixes (not just an image but the link - Show only threads prefixed by XXX - must be intact) instead of subforums.
 

Jake Bunce

XenForo moderator
Staff member
#12
Edit :

After a bit of CSS researching, it doesn't look like I can add url/links by css.
Is this only possible through an addon or a hook?

I'm hoping to use thread prefixes (not just an image but the link - Show only threads prefixed by XXX - must be intact) instead of subforums.
Yeah that can't be done with CSS. A template edit is required.

Admin CP -> Appearance -> Templates -> node_forum_level_2

Add the red code:

Code:
		<div class="nodeText">
			<h3 class="nodeTitle"><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>

			<xen:if is="{$forum.node_id} == 2">
				<a href="{xen:link forums, $forum, 'prefix_id=1'}" class="prefixLink"
					title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, 1, plain}'}">{xen:helper threadPrefix, 1, html}</a>
			</xen:if>

			<xen:if is="{$forum.description} AND @nodeListDescriptions">
				<blockquote class="nodeDescription {xen:if @nodeListDescriptionTooltips, nodeDescriptionTooltip} baseHtml" id="nodeDescription-{$forum.node_id}">{xen:raw $forum.description}</blockquote>
			</xen:if>

			<div class="nodeStats pairsInline">
				<dl>
					<dt>{xen:phrase discussions}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd>
					<dt>{xen:phrase messages}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd>
				</dl>
				<xen:if is="{$renderedChildren} AND {$level} == 2">
					<div class="Popup subForumsPopup">
						<a href="{xen:link forums, $forum}" rel="Menu" class="cloaked" data-closemenu="true"><span class="dt">{xen:phrase sub_forums}:</span> {xen:number $forum.childCount}</a>
						
						<div class="Menu JsOnly subForumsMenu">
							<div class="primaryContent menuHeader">
								<h3>{$forum.title}</h3>
								<div class="muted">{xen:phrase sub_forums}</div>
							</div>
							<ol class="secondaryContent blockLinksList">
							<xen:foreach loop="$renderedChildren" value="$child">
								{xen:raw $child}
							</xen:foreach>
							</ol>
						</div>
					</div>
				</xen:if>
			</div>
		</div>
You need to specify the node_id and the prefix_id in the above code.

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

Code:
.nodeList .node_2 .nodeTitle,
.nodeList .prefixLink
{
	display: inline;
}
That will create a hyperlinked thread prefix inline with the forum title in the node listing.
 

Jainic

Active member
#13
Cool that works! If I want more than one thread prefixes, do I just repeat the code with the other node_id and prefix_id?


This is my newbie attempt :oops:. It doesn't work lol.
Code:
<xen:if is="{$forum.node_id} == 4,12">
  <a href="{xen:link forums, $forum, 'prefix_id=1,2'}" class="prefixLink"
title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, 1,2, plain}'}">{xen:helper threadPrefix, 1,2, html}</a>
</xen:if>
 

Jake Bunce

XenForo moderator
Staff member
#14
Presumably each forum will have a different prefix. You need to duplicate the entire block:

Code:
		<div class="nodeText">
			<h3 class="nodeTitle"><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>

			<xen:if is="{$forum.node_id} == 2">
				<a href="{xen:link forums, $forum, 'prefix_id=1'}" class="prefixLink"
					title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, 1, plain}'}">{xen:helper threadPrefix, 1, html}</a>
			</xen:if>

			<xen:if is="{$forum.node_id} == 3">
				<a href="{xen:link forums, $forum, 'prefix_id=2'}" class="prefixLink"
					title="{xen:phrase show_only_threads_prefixed_by_x, 'prefix={xen:helper threadPrefix, 2, plain}'}">{xen:helper threadPrefix, 2, html}</a>
			</xen:if>

			<xen:if is="{$forum.description} AND @nodeListDescriptions">
				<blockquote class="nodeDescription {xen:if @nodeListDescriptionTooltips, nodeDescriptionTooltip} baseHtml" id="nodeDescription-{$forum.node_id}">{xen:raw $forum.description}</blockquote>
			</xen:if>

			<div class="nodeStats pairsInline">
				<dl>
					<dt>{xen:phrase discussions}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd>
					<dt>{xen:phrase messages}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd>
				</dl>
				<xen:if is="{$renderedChildren} AND {$level} == 2">
					<div class="Popup subForumsPopup">
						<a href="{xen:link forums, $forum}" rel="Menu" class="cloaked" data-closemenu="true"><span class="dt">{xen:phrase sub_forums}:</span> {xen:number $forum.childCount}</a>
						
						<div class="Menu JsOnly subForumsMenu">
							<div class="primaryContent menuHeader">
								<h3>{$forum.title}</h3>
								<div class="muted">{xen:phrase sub_forums}</div>
							</div>
							<ol class="secondaryContent blockLinksList">
							<xen:foreach loop="$renderedChildren" value="$child">
								{xen:raw $child}
							</xen:foreach>
							</ol>
						</div>
					</div>
				</xen:if>
			</div>
		</div>
 

Jainic

Active member
#15
Wow, that's going to be a lot of copy and pastes! I think I might have over 25 thread prefixes.. will this slow down my site at all? I'm curious how this effects site performance. Thank you for the help Jake.