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

M

Matthew Hawley

Well-known member
Okay so I have this:

z97i.png


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

G9ScnEa.png



1g79jd
 
Sort by date Sort by votes
King Kovifor said:
How you are adding that [NEW] icon may be beneficial to anyone wanting to help you.
Click to expand...

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);
}
 
Upvote 0 Downvote
@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?
 
Upvote 0 Downvote
King Kovifor said:
@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?
Click to expand...

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>.
 
Upvote 0 Downvote
King Kovifor said:
What is the CSS for icon-comment?
Click to expand...

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.
 
Upvote 0 Downvote
King Kovifor said:
I just need the HTML from the template that is displaying that specific node. Full template would even work, I just need HTML.
Click to expand...

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>
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

pateroosky
  • Question Question
XF 2.2 I need a navigation tab to do two things. Mainly open its link in a new window and second, preferably, the word Facebook be in a different color.
Replies
2
Views
194
pateroosky
pateroosky
R
  • Question Question
XF 2.2 Does anyone know how to do this? (Color table backgrounds on posts.) not a Styles question. More a BBCode question. How do I clone this IPB post to XF
Replies
0
Views
703
Risa
R
gabtww
  • Solved
XF 2.2 How to make this banner style?
Replies
1
Views
1K
KevinL
K
Steve Freides
  • Question Question
XF 2.2 Trying, Unsuccessfully, To Make Things Disappear When in New Posts
Replies
4
Views
543
briansol
B
F
  • Question Question
XF 2.1 Alerts notification icon different color to conversation icon
Replies
9
Views
1K
Foynat
F
Back
Top Bottom