Description HTML Help

Eric Russell

Active member
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?
 
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.webp

Is this what you had in mind?
 
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! :)
 
Top Bottom