XF 1.x About the arrow on tooltips

Dylan

Customer
Hi,

I'd like to know how to make the arrow on tooltips like the arrow on notices?

Screenshot_1.png


Screenshot_2.png


How do I make the second image like the first? It seems to me that this is possible with a span, :before and: after.
 

Afterward

Customer
Add this in extra.css
Code:
html .PanelScroller .navControls a .arrow span {
border-top-color: rgb(194, 200, 107);
}
 

Steve

Pixel Exit Staff
I would have to look into that, the tooltip is generated by jQuery and the arrow is actually a single border.
 

Afterward

Customer
I thought you said you want to change the arrow color for the notices panel like the tooltip one color o_O i'm i missing something here?
 

Dylan

Customer
I thought you said you want to change the arrow color for the notices panel like the tooltip one color o_O i'm i missing something here?
Steve has understood, so you've probably misread. ;)
How do I make the second image like the first? It seems to me that this is possible with a span, :before and: after.
 

Steve

Pixel Exit Staff
I have not had time to look at this. Not sure it is possible without doing some code edits.
 

Russ

Pixel Exit Staff
Try this in extra.css

Code:
html .nodeDescriptionTip .arrow {
border-color: transparent @tooltip.background-color transparent black;
}
It would make the arrow the same color as the tooltip I believe. This won't have the outer-edge border though.
 

Dylan

Customer
Try this in extra.css

Code:
html .nodeDescriptionTip .arrow {
border-color: transparent @tooltip.background-color transparent black;
}
It would make the arrow the same color as the tooltip I believe. This won't have the outer-edge border though.
Thanks, Russ, but look:

Screenshot_1.png
 

Steve

Pixel Exit Staff
You can do this then

Open node_forum_level_2

Replace the entire template with this.
HTML:
<xen:require css="node_list.css" />
<xen:require css="node_forum.css" />

<xen:if is="@xb_nodeLayout_type == 0">
<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'}">

        <xen:if is="@xb_node_mark_read">
            <xen:if is="{$visitor.user_id} AND {$forum.hasNew}">
                <a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="nodeIcon Tooltip OverlayTrigger" title="{xen:if $forum.hasNew, 'Mark Forum Read', 'Forum Read'}">
                    <xen:if is="@xb_node_fontAwesome_icon">{xen:if $forum.hasNew, '<i class="fa @xb_fontAwesome_nodeIconUnread @xb_fontAwesome_iconSize"></i>', '<i class="fa @xb_fontAwesome_nodeIcon @xb_fontAwesome_iconSize"></i>'}</i></xen:if>
                </a>
            <xen:else />
                <xen:if is="@xb_node_fontAwesome_icon">
                    <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}">
                        {xen:if $forum.hasNew, '<i class="fa @xb_fontAwesome_nodeIconUnread @xb_fontAwesome_iconSize"></i>', '<i class="fa @xb_fontAwesome_nodeIcon @xb_fontAwesome_iconSize"></i>'}
                    </span>
                <xen:else />
                    <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
                </xen:if>
            </xen:if>
        <xen:else />
                <xen:if is="@xb_node_fontAwesome_icon">
                    <span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}">          
                        {xen:if $forum.hasNew, '<i class="fa @xb_fontAwesome_nodeIconUnread @xb_fontAwesome_iconSize"></i>', '<i class="fa @xb_fontAwesome_nodeIcon @xb_fontAwesome_iconSize"></i>'}
                    </span>
                <xen:else />
                    <span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>
                </xen:if>
          
        </xen:if>
      
        <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} <span class="arrow2"></span></blockquote>
            </xen:if>

            <div class="nodeStats pairsInline">
                <xen:if is="@xb_fa_nodeStats"><dl class="Tooltip" title="{xen:phrase discussions}"><dt><i class="fa @xb_fa_nodeStats_discussions"></i><xen:else /><dl><dt>{xen:phrase discussions}:</xen:if></dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd></dl>
                <xen:if is="@xb_fa_nodeStats"><dl class="Tooltip" title="{xen:phrase messages}"><dt><i class="fa @xb_fa_nodeStats_messages"></i><xen:else /><dl><dt>{xen:phrase messages}:</xen:if></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:if is="@xb_fa_nodeStats"><i class="fa @xb_fa_nodeStats_subForums Tooltip" title="{xen:phrase sub_forums}"></i><xen:else />{xen:phrase sub_forums}:</xen:if></span> {xen:number $forum.childCount}</a>
                      
                        <div class="Menu JsOnly subForumsMenu">
                        <div class="xbTabPopupArrow">
                            <span class="arrow"><span></span></span>
                        </div>
                            <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 [email protected]">
            <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}" />
                <span class="lastThreadTitle"><span>{xen:phrase latest}:</span> <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}">{$forum.lastPost.title}</a></span>
                <span class="lastThreadMeta">
                    <span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if>,</span>
                    <xen:datetime time="$forum.lastPost.date" class="muted lastThreadDate" data-latest="{xen:phrase latest}: " />
                </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}"><i class="fa fa-rss"></i></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>
<xen:elseif is="@xb_nodeLayout_type == 1" />
    <xen:include template="xb_node_layoutsOne" />
<xen:elseif is="@xb_nodeLayout_type == 2" />
    <xen:include template="xb_node_layoutsTwo" />
<xen:elseif is="@xb_nodeLayout_type == 3" />
    <xen:include template="xb_node_layoutsThree" />
<xen:else />
</xen:if>
Add this to EXTRA.css
Code:
.xenTooltip .arrow2
{
    position: absolute;
    top: 6px;
    left: -5px;
    display: block;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border: 6px solid rgba(0, 0, 0, 0);
    border-right-color: #F2F2CF;
    -moz-border-left-colors: ;
    border-left: none;
    z-index: 1;
}
 

Dylan

Customer
You can do this then

Open node_forum_level_2

Replace the entire template with this.
HTML:
<xen:require css="node_list.css" />
<xen:require css="node_forum.css" />

<xen:if is="@xb_nodeLayout_type == 0">
<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'}">

        <xen:if is="@xb_node_mark_read">
            <xen:if is="{$visitor.user_id} AND {$forum.hasNew}">
                <a href="{xen:link 'forums/-/mark-read', $forum, 'date={$serverTime}'}" class="nodeIcon Tooltip OverlayTrigger" title="{xen:if $forum.hasNew, 'Mark Forum Read', 'Forum Read'}">
                    <xen:if is="@xb_node_fontAwesome_icon">{xen:if $forum.hasNew, '<i class="fa @xb_fontAwesome_nodeIconUnread @xb_fontAwesome_iconSize"></i>', '<i class="fa @xb_fontAwesome_nodeIcon @xb_fontAwesome_iconSize"></i>'}</i></xen:if>
                </a>
            <xen:else />
                <xen:if is="@xb_node_fontAwesome_icon">
                    <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}">
                        {xen:if $forum.hasNew, '<i class="fa @xb_fontAwesome_nodeIconUnread @xb_fontAwesome_iconSize"></i>', '<i class="fa @xb_fontAwesome_nodeIcon @xb_fontAwesome_iconSize"></i>'}
                    </span>
                <xen:else />
                    <span class="nodeIcon" title="{xen:if '{$forum.hasNew} OR !{$visitor.user_id}', '{xen:phrase unread_messages}', ''}"></span>
                </xen:if>
            </xen:if>
        <xen:else />
                <xen:if is="@xb_node_fontAwesome_icon">
                    <span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}">         
                        {xen:if $forum.hasNew, '<i class="fa @xb_fontAwesome_nodeIconUnread @xb_fontAwesome_iconSize"></i>', '<i class="fa @xb_fontAwesome_nodeIcon @xb_fontAwesome_iconSize"></i>'}
                    </span>
                <xen:else />
                    <span class="nodeIcon" title="{xen:if $forum.hasNew, '{xen:phrase unread_messages}', ''}"></span>
                </xen:if>
         
        </xen:if>
     
        <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} <span class="arrow2"></span></blockquote>
            </xen:if>

            <div class="nodeStats pairsInline">
                <xen:if is="@xb_fa_nodeStats"><dl class="Tooltip" title="{xen:phrase discussions}"><dt><i class="fa @xb_fa_nodeStats_discussions"></i><xen:else /><dl><dt>{xen:phrase discussions}:</xen:if></dt> <dd>{xen:if $forum.privateInfo, '&ndash;', {xen:number $forum.discussion_count}}</dd></dl>
                <xen:if is="@xb_fa_nodeStats"><dl class="Tooltip" title="{xen:phrase messages}"><dt><i class="fa @xb_fa_nodeStats_messages"></i><xen:else /><dl><dt>{xen:phrase messages}:</xen:if></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:if is="@xb_fa_nodeStats"><i class="fa @xb_fa_nodeStats_subForums Tooltip" title="{xen:phrase sub_forums}"></i><xen:else />{xen:phrase sub_forums}:</xen:if></span> {xen:number $forum.childCount}</a>
                     
                        <div class="Menu JsOnly subForumsMenu">
                        <div class="xbTabPopupArrow">
                            <span class="arrow"><span></span></span>
                        </div>
                            <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 [email protected]">
            <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}" />
                <span class="lastThreadTitle"><span>{xen:phrase latest}:</span> <a href="{xen:link posts, $forum.lastPost}" title="{$forum.lastPost.title}">{$forum.lastPost.title}</a></span>
                <span class="lastThreadMeta">
                    <span class="lastThreadUser"><xen:if is="{xen:helper isIgnored, $forum.last_post_user_id}">{xen:phrase ignored_member}<xen:else /><xen:username user="$forum.lastPost" /></xen:if>,</span>
                    <xen:datetime time="$forum.lastPost.date" class="muted lastThreadDate" data-latest="{xen:phrase latest}: " />
                </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}"><i class="fa fa-rss"></i></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>
<xen:elseif is="@xb_nodeLayout_type == 1" />
    <xen:include template="xb_node_layoutsOne" />
<xen:elseif is="@xb_nodeLayout_type == 2" />
    <xen:include template="xb_node_layoutsTwo" />
<xen:elseif is="@xb_nodeLayout_type == 3" />
    <xen:include template="xb_node_layoutsThree" />
<xen:else />
</xen:if>
Add this to EXTRA.css
Code:
.xenTooltip .arrow2
{
    position: absolute;
    top: 6px;
    left: -5px;
    display: block;
    width: 0px;
    height: 0px;
    line-height: 0px;
    border: 6px solid rgba(0, 0, 0, 0);
    border-right-color: #F2F2CF;
    -moz-border-left-colors: ;
    border-left: none;
    z-index: 1;
}
Thank you! And for this?
Screenshot_2.png


Screenshot_3.png
 

Dylan

Customer
Okay, I managed to fix it with :after pseudo-element and no HTML modification:

Code:
.xenTooltip .arrow:after
{
    content: '';
    border-top: 6px solid rgb(255, 249, 210);
    border-right: 6px solid transparent;
    border-bottom: 1px none black;
    border-left: 6px solid transparent;
    position: absolute;
    bottom: 1px;
    line-height: 0px;
    width: 0px;
    height: 0px;
    left: -6px;
}

.nodeDescriptionTip .arrow:after
{
    content: '';
    border: 6px solid transparent;
    border-right-color: rgb(255, 249, 210);
    border-left: 1px none black;
    top: -6px;
    left: 1px;
    bottom: auto;
}

.nodeDescriptionTip.arrowBottom .arrow:after
{
    content: '';
    top: auto;
    left: -6px;
    bottom: 1px;
    border: 6px solid transparent;
    border-top-color: rgb(255, 249, 210);
    border-bottom: 1px none black;
}

.xenTooltip.statusTip .arrow
{
    border: 6px solid transparent;
    border-right-color: rgb(237, 222, 128);
    border-left: 1px none black;
    top: 6px;
    left: -6px;
    bottom: auto;
    right: auto;
}

.xenTooltip.statusTip .arrow:after
{
    content: '';
    border: 6px solid transparent;
    border-right-color: rgb(255, 249, 210);
    border-left: 1px none black;
    top: -6px;
    left: 1px;
}
Result:

Screenshot_1.png


Screenshot_2.png


Screenshot_3.png


Now I've a problem with this:

Screenshot_4.png


Do you know how I can fix it?
 

Steve

Pixel Exit Staff
Code:
#QuoteSelected.xenTooltip .arrow:after
{
    content: '';
    border-top: 1px none black;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #F2F2CF;
    border-left: 6px solid transparent;
    position: absolute;
    bottom: -6px;
    line-height: 0px;
    width: 0px;
    height: 0px;
    left: -6px;
}
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.