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

Description HTML Help

Discussion in 'Styling and Customization Questions' started by Eric Russell, May 3, 2012.

  1. Eric Russell

    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?
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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?
     
  3. Eric Russell

    Eric Russell Active Member

    Here's kind of what I'm looking for.

    rooney.png
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    I think I have a good solution to this.

    Will you have an icon on every single node description?
     
  5. Eric Russell

    Eric Russell Active Member

    I think I could have an icon in every description if I needed to.
     
  6. Chris D

    Chris D XenForo Developer Staff Member

    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?
     
  7. Eric Russell

    Eric Russell Active Member

    You got it! (y)
     
  8. Chris D

    Chris D XenForo Developer Staff Member

    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! :)
     
    CritiKiL and Eric Russell like this.

Share This Page