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

Description HTML Help

#1
Can someone show me the html I'd put in a node description if I wanted a pic say 100 x 100 in the right of the display box with a text description next to it?
 

Chris D

XenForo developer
Staff member
#2
By node description are you talking about the area I've highlighted in red in this image?

description.png

Or have I missed the point?
 

Chris D

XenForo developer
Staff member
#6
Think I have this working, and you don't need an icon in every description. Need to make things look consistent between nodes that do have icons and nodes that don't. As I have it at the moment, nodes that don't have icons remain unchanged. Here's what it looks like:

node_icon_preview.png

Is this what you had in mind?
 

Chris D

XenForo developer
Staff member
#8
Ok. We might need to tweak this somewhat as we go along.

Template: node_forum_level_2 looks like this:

Code:
<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>
Replace that with the below:

Code:
<xen:if is="{$forum.description} AND @nodeListDescriptions">
<xen:if is="in_array({$forum.node_id}, array(111, 159))">
<blockquote class="nodeDescription {xen:if @nodeListDescriptionTooltips, nodeDescriptionTooltip} baseHtml nodeicon-{$forum.node_id}" id="nodeDescription-{$forum.node_id}"><div class="descText">{xen:raw $forum.description}</div></blockquote>
<xen:else />
<blockquote class="nodeDescription {xen:if @nodeListDescriptionTooltips, nodeDescriptionTooltip} baseHtml noNodeicon" id="nodeDescription-{$forum.node_id}">{xen:raw $forum.description}</blockquote>
</xen:if>
</xen:if>
So we've added a conditional which says if your node ID 111 or 159, render the node description as normal, but with an additional class called nodeicon-### where ### is the node ID. I've also added a <div class "descText" around the forum description to make formatting the description text easier when an icon is in place.

If you're not node ID 111 or 159, render everything as normal. What I have added here is a class called "noNodeIcon" which I've not used in the CSS but it's there if we need it.

Then in EXTRA.CSS I've added:

Code:
.nodeicon-111
{
height: 100px!important;
background-image: url(styles/nodeicons/icon1.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 105px!important;
}
 
.nodeicon-159
{
height: 100px!important;
background-image: url(styles/nodeicons/icon2.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 105px!important;
 
}
 
.descText
{
display: table-cell;
height: 100px;
vertical-align: middle;
}
This is where we can call a different icon for the two nodes. Just adjust the background-image: url as required.

And this works.

There may be better ways of doing this, but hey, I'm pretty tired and currently this is the only way that currently makes sense to me! :)