1. 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

Discussion in 'XenForo Questions and Support' started by toodlez, Nov 7, 2011.

  1. toodlez

    toodlez Active Member

    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"
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    How are your custom icons currently implemented?

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

    toodlez Active Member

    I have custom node icons inserted through the node_list.css
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

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

    toodlez Active Member

    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;
    }
    
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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
     
  7. toodlez

    toodlez Active Member

    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
     
  8. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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>
    
     
  9. toodlez

    toodlez Active Member

    Perfection, sir.
     
  10. toodlez

    toodlez Active Member

    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
     
  11. toodlez

    toodlez Active Member

    So it would be kinda like this
    Screen-shot-2011-11-08-at-5.png
     
  12. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  13. toodlez

    toodlez Active Member

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

    Morgain Well-Known Member

    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.
     
  15. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I replied to your PM about that a week ago.

     

Share This Page