Adding images to Board Titles

[thunderup]

Okay, I have a lot of custom status icons on my nodes..
I am wondering if it's possible to put these node icons next to the Node Title when you are viewing the specific board..

I am referring to the node title that shows directly below the breadlinks so like this board below the breadlinks it says in the big font "XenForo Questions and Support"

 

[Jake Bunce]

How are your custom icons currently implemented?

Adding an image next to the H1 tag will require a template modification.

 

[thunderup]

I have custom node icons inserted through the node_list.css

 

[Jake Bunce]

Can you post an example of your CSS? I can try to find a way to reuse your definitions for that new location.

 

[thunderup]

.node_4 .forumNodeInfo .nodeIcon, .node_4 .categoryForumNodeInfo .nodeIcon {
background-image: url("/styles/skinden/social/xenforo/widgets/forum-unread.png");
filter:alpha(opacity=40);
-moz-opacity:0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
}
.node_4 .forumNodeInfo.unread .nodeIcon, .node_4 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("/styles/skinden/social/xenforo/widgets/forum-unread.png");
filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}

 

[Jake Bunce]

Tested on 1.1:

Admin CP -> Appearance -> Templates -> forum_view

Add the red code near the top:

<xen:title>{$forum.title}{xen:helper pagenumber, $page}</xen:title>
<xen:h1>{$forum.title}</xen:h1>

<xen:require css="node_list.css" />
<xen:container var="$beforeH1">
	<div class="node node_{$forum.node_id}"><div class="forumNodeInfo"><div class="nodeIcon"></div></div></div>
</xen:container>

<xen:if is="{$forum.description} AND @threadListDescriptions">
	<xen:description class="baseHtml">{xen:raw $forum.description}</xen:description>
</xen:if>

<xen:navigation>
	<xen:breadcrumb source="$nodeBreadCrumbs" />
</xen:navigation>

<xen:container var="$head.canonical">
	<link rel="canonical" href="{xen:link 'canonical:forums', $forum, 'page={$page}'}" /></xen:container>

That should automatically make use of the node icons you have already defined.

To make this work in XenForo 1.0 you need to apply one more template edit:

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

Add the red code:

						<xen:hook name="page_container_content_title_bar">
						<xen:if is="!{$noH1}">						
							<!-- h1 title, description -->
							<div class="titleBar">
								{xen:raw $beforeH1}
								<h1><xen:if
									is="{$h1}">{xen:raw $h1}<xen:elseif
									is="{$title}" />{xen:raw $title}<xen:else
									/>{$xenOptions.boardTitle}</xen:if></h1>
								
								<xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
							</div>
						</xen:if>
						</xen:hook>

The result:

 

[thunderup]

Jake, this worked for me... I'm running 1.1 Beta 3
But, it's showing the node icons as if it is in the NO NEW code... so it has low opacity in the images

 

[Jake Bunce]

To force the "unread" icons (full opacity) you can add the blue piece:

<xen:title>{$forum.title}{xen:helper pagenumber, $page}</xen:title>
<xen:h1>{$forum.title}</xen:h1>

<xen:require css="node_list.css" />
<xen:container var="$beforeH1">
	<div class="node node_{$forum.node_id}"><div class="forumNodeInfo unread"><div class="nodeIcon"></div></div></div>
</xen:container>

<xen:if is="{$forum.description} AND @threadListDescriptions">
	<xen:description class="baseHtml">{xen:raw $forum.description}</xen:description>
</xen:if>

<xen:navigation>
	<xen:breadcrumb source="$nodeBreadCrumbs" />
</xen:navigation>

<xen:container var="$head.canonical">
	<link rel="canonical" href="{xen:link 'canonical:forums', $forum, 'page={$page}'}" /></xen:container>

 

[thunderup]

Perfection, sir.

 

[thunderup]

Hey Jake, is there any way I can redo the code for the node id and description for this forum view, so that everything is lined up to the right of the Image perfectly vertically aligned with the node image?



I want to have it be like this

[NODE IMAGE] NODE NAME node description

perfectly lined up vertically centered to the image

 

[thunderup]

So it would be kinda like this

 

[Jake Bunce]

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

Add this code:

#pageDescription,
.titleBar h1
{
	display: inline;
	vertical-align: -20px;
}

I couldn't make the alignment work, so I just specified a pixel adjustment.

 

[thunderup]

Works just as I asked... Changed the vertical align to -25 and its spot on

 

[Morgain]

Jake I'm still hoping to be able to display your gorgeous category bar designs elsewhere than on the main forums list.
WITH their individual background colours, images, and coloured link.

I'm looking at the dedicated Category page - here's as far as I got
http://www.housemorgain.co.uk/forumxf/index.php?categories/gossip-sphere.16/
but also to insert them in
an XF Page of static html
and a wiki page - also handles html
- even little ones in my sidebar menu (dream on!)

Ideally I'd like a code snippet that would call the category bar bundle 1, 2, 3, 4 or 5 with its individual design.

 

[Jake Bunce]

I replied to your PM about that a week ago.

For the category bar you will need to specify the color for two node_ids, the category's node_id and the node_id of the first forum in that category:

.nodeList .node_1 .categoryStrip,
.nodeList .node_2 .categoryStrip
{
	background-color: red;
}

.nodeList .node_4 .categoryStrip,
.nodeList .node_5 .categoryStrip
{
	background-color: blue;
}

In this example, 1 is the category and 2 is the first forum under 1. The same for 4 and 5.