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

XF 1.2 How to make this icon a different color when theres new posts

Discussion in 'Styling and Customization Questions' started by Matthew Hawley, Jul 18, 2013.

  1. Matthew Hawley

    Matthew Hawley Well-Known Member

    Okay so I have this:

    [​IMG]

    How would I make the node stats icon a different color when theres new posts. For example:

    [​IMG]


    [​IMG]
     
  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    How you are adding that [NEW] icon may be beneficial to anyone wanting to help you.
     
  3. Matthew Hawley

    Matthew Hawley Well-Known Member

  4. Wiscansan

    Wiscansan Member

    It's being added with this CSS:

    Code:
    .node_18 .nodeInfo.unread .nodeTitle:after
    {
    content: "NEW";
    padding: 0px 5px;
    margin-left: 5px;
    background-color: #808281;
    color: #FFFFFF;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.4);
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    text-shadow: 0 0 0 transparent, 0 -1px 1px rgba(0,0,0,0.25);
    }
     
  5. Jeremy

    Jeremy XenForo Moderator Staff Member

    @LandOfOoo : Change background-color to suit. Should do what you want.

    EDIT: Wait, are you talking about NEW or the speech bubble? How is the Speech bubble being added? The above CSS?
     
  6. Matthew Hawley

    Matthew Hawley Well-Known Member

    But thats for the new indicator. We want it for the node stats icon. We want to get rid of the indicator to save space.
     
  7. Wiscansan

    Wiscansan Member

    Yeah, it's the bubble's color were trying to change.

    It's in node_forum_list_2 and it's inserted like this:
    Code:
    <dl><dt><i class="icon-comment"></i></dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}/{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd></dl>
    The item we want to be recolored where there's an unread post would simply be <i class="icon-comment"></i>.
     
    Matthew Hawley likes this.
  8. Jeremy

    Jeremy XenForo Moderator Staff Member

    What is the CSS for icon-comment?
     
  9. Matthew Hawley

    Matthew Hawley Well-Known Member

    There is no css at the moment. Just,

    Code:
    <i class="icon-comment"></i>
    If we wanted to add css we would do,

    Code:
    <i class="icon-comment" style="color:red;"></i>
     
  10. Wiscansan

    Wiscansan Member

    This is what it inherits from .nodeStats.

    Code:
    margin-right: -80px;
    margin-top: -30px;
    height: 40px;
    font-size: 18pt;
    color: #969696;
    font-weight: bold;
    text-shadow: 0 0 0 transparent, 0 -1px 1px rgba(0, 0, 0, 1);
    float: right;
    But apart from that it specifically is not styled.
     
  11. Jeremy

    Jeremy XenForo Moderator Staff Member

    @Matthew Hawley, that comment is added via CSS as indicated by class="icon-comment". As such, anyone who wants to help you needs to have that CSS to add it. I can only assume you are using Font Awesome?
     
  12. Matthew Hawley

    Matthew Hawley Well-Known Member

    Well, Tom (LandOfOoo) added it, but yeah.
     
  13. Wiscansan

    Wiscansan Member

    Just throw this in your header and the CSS for the icon should work:

    Code:
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
     
  14. Jeremy

    Jeremy XenForo Moderator Staff Member

    What is the HTML for your node list?
     
  15. Matthew Hawley

    Matthew Hawley Well-Known Member

    The whole node_list?
     
  16. Jeremy

    Jeremy XenForo Moderator Staff Member

    I just need the HTML from the template that is displaying that specific node. Full template would even work, I just need HTML.
     
  17. Matthew Hawley

    Matthew Hawley Well-Known Member

    Code:
    <xen:require css="node_list.css" />
    <xen:require css="node_forum.css" />
    
    <li class="node forum level_{$level} {xen:if '{$level} == 1 AND !{$renderedChildren}', 'groupNoChildren'} node_{$forum.node_id}">
        <xen:if is="{$level} == 1"><div class="categoryStrip subHeading"></div></xen:if>
        <div class="nodeInfo forumNodeInfo primaryContent {xen:if $forum.hasNew, 'unread'}">
           
            <div class="nodeText">
                <h3 class="nodeTitle"><xen:if is="{$watchCheckBoxName}"><input type="checkbox" name="{$watchCheckBoxName}" value="{$forum.node_id}" />&nbsp;</xen:if><a href="{xen:link forums, $forum}" data-description="{xen:if @nodeListDescriptionTooltips, '#nodeDescription-{$forum.node_id}'}">{$forum.title}</a></h3>
                <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>
                <div class="nodeStats pairsInline" style="margin-right: -80px;margin-top: -30px;height: 40px;font-size: 18pt;color: #969696;font-weight: bold;text-shadow: 0 0 0 transparent, 0 -1px 1px rgba(0, 0, 0, 1);float:right;">
                    <dl><dt><i class="icon-comment"></i></dt> <dd> <span class="Tooltip" title="{xen:phrase discussions}">{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</span>/<span class="Tooltip" title="{xen:phrase messages}">{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</span></dd></dl>
                    <!-- <dl><dt>{xen:phrase messages}:</dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.message_count}}</dd></dl> -->
                    <xen:if is="{$renderedChildren} AND {$level} == 2 AND @nodeListSubForumPopup">
                        <div class="Popup subForumsPopup">
                            <a href="{xen:link forums, $forum}" rel="Menu" class="cloaked" data-closemenu="true"><span class="dt">{xen:phrase sub_forums}:</span> {xen:number $forum.childCount}</a>
                           
                            <div class="Menu JsOnly subForumsMenu">
                                <div class="primaryContent menuHeader">
                                    <h3>{$forum.title}</h3>
                                    <div class="muted">{xen:phrase sub_forums}</div>
                                </div>
                                <ol class="secondaryContent blockLinksList">
                                <xen:foreach loop="$renderedChildren" value="$child">
                                    {xen:raw $child}
                                </xen:foreach>
                                </ol>
                            </div>
                        </div>
                    </xen:if>
                </div>
               
                {xen:raw $nodeExtraHtml}
            </div>
            <xen:if is="{$renderedChildren} AND {$level} == 2 AND !@nodeListSubForumPopup">
                <ol class="subForumList">
                <xen:foreach loop="$renderedChildren" value="$child">
                    {xen:raw $child}
                </xen:foreach>
                </ol>
            </xen:if>
           
            <xen:hook name="node_forum_level_2_before_lastpost" params="{xen:array 'forum={$forum}'}" />
            <div class="nodeLastPost secondaryContent">
    <xen:if is="{$forum.privateInfo}">
    <span class="noMessages muted">({xen:phrase private})</span>
    <xen:elseif is="{$forum.lastPost.date}" />
    <i class="icon-ok icon-small icon-fixed-width" style="padding-right:2px;color:green;"></i> <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}" class="Tooltip">{xen:helper wordTrim, $forum.lastPost.title, 30}</a>
    <span class="lastThreadMeta"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if>, <xen:datetime time="$forum.lastPost.date" class="muted" /></span>
    <xen:else />
    <span class="noMessages muted">({xen:phrase contains_no_messages})</span>
    </xen:if>
    </div>
            <!-- <div class="nodeControls">
                <a href="{xen:link forums/index.rss, $forum}" class="tinyIcon feedIcon" title="{xen:phrase rss}">{xen:phrase rss}</a>
            </div> -->
           
        </div>
        <xen:if is="{$renderedChildren} AND {$level} == 1">
            <ol class="nodeList">
                <xen:foreach loop="$renderedChildren" value="$child">{xen:raw $child}</xen:foreach>
            </ol>
        </xen:if>
    </li>
     
  18. Jeremy

    Jeremy XenForo Moderator Staff Member

    Code:
    .nodeInfo.unread .icon-comment {
      color: red;
    }
     
    Wiscansan likes this.
  19. Wiscansan

    Wiscansan Member

    That did the trick. Thanks for your help.
     
  20. Matthew Hawley

    Matthew Hawley Well-Known Member

    LOL I can't believe we didn't think of that.
     

Share This Page