• 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

#4
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

Well-known member
#5
@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?
 
#7
@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>.
 
#10
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.
 

Jeremy

Well-known member
#11
@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?
 
#13
@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?
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">
 

Jeremy

Well-known member
#16
I just need the HTML from the template that is displaying that specific node. Full template would even work, I just need HTML.
 
#17
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>