About the arrow on tooltips
- Thread starter Dylan
- Start date
i'm i missing something here?
Russ
Pixel Exit Staff
Steve
Customer
You can do this then
Open node_forum_level_2
Replace the entire template with this.
Add this to EXTRA.css
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}" /> </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, '–', {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, '–', {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;
}Okay, I managed to fix it with :after pseudo-element and no HTML modification:
Result:
Now I've a problem with this:
Do you know how I can fix it?
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:
Now I've a problem with this:
Do you know how I can fix it?
Steve
Customer
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;
}