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

Adding images to Board Titles

toodlez

Active member
#1
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

XenForo moderator
Staff member
#2
How are your custom icons currently implemented?

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

Jake Bunce

XenForo moderator
Staff member
#4
Can you post an example of your CSS? I can try to find a way to reuse your definitions for that new location.
 

toodlez

Active member
#5
Code:
.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

XenForo moderator
Staff member
#6
Tested on 1.1:

Admin CP -> Appearance -> Templates -> forum_view

Add the red code near the top:

Code:
<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:

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:

Screen shot 2011-11-07 at 5.22.32 PM.png
 

toodlez

Active member
#7
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

XenForo moderator
Staff member
#8
To force the "unread" icons (full opacity) you can add the blue piece:

Code:
<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>
 

toodlez

Active member
#10
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?

Screen shot 2011-11-08 at 5.32.32 PM.png

I want to have it be like this

[NODE IMAGE] NODE NAME node description

perfectly lined up vertically centered to the image
 

Jake Bunce

XenForo moderator
Staff member
#12
Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

Code:
#pageDescription,
.titleBar h1
{
	display: inline;
	vertical-align: -20px;
}
I couldn't make the alignment work, so I just specified a pixel adjustment.
 

Morgain

Well-known member
#14
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

XenForo moderator
Staff member
#15
I replied to your PM about that a week ago.

Jake Bunce said:
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:

Code:
.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.