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

Matthew Hawley

Well-known member
Okay so I have this:



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




 

Wiscansan

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

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);
}
 

Jeremy

in memoriam 1991-2020
@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?
 

Wiscansan

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?

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

Wiscansan

Member
What is the CSS for icon-comment?

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.
 

Matthew Hawley

Well-known member
I just need the HTML from the template that is displaying that specific node. Full template would even work, I just need HTML.

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>
 
Top