CyberAP
Well-known member
This template modification will add avatars to your quotes (and a small arrow).
Here is how it looks:
First step:
Open template called bb_code_tag_quote
Replace all of its contents with this:
Then open EXTRA.css template and add there:
Current issues:
infis and Pepelac helped me make this template modfication working.
Here is how it looks:
First step:
Open template called bb_code_tag_quote
Replace all of its contents with this:
Code:
<xen:require css="bb_code.css" />
<xen:if is="{$attributes.member}">
<div class="quote_with_avatar {xen:if $ignored, ' ignored'}">
</xen:if>
<xen:if is="{$attributes.member}">
<xen:set var="$avaUser.user_id">{$attributes.member}</xen:set>
<xen:set var="$avaUser.username">{$nameHtml}</xen:set>
<xen:set var="$avaUser.avatar_date">1</xen:set>
<xen:avatar user="$avaUser" size="s" class="QuoteAvatar" />
</xen:if>
<xen:comment><!-- content is escaped via parser --></xen:comment>
<div class="bbCodeBlock bbCodeQuote{xen:if $ignored, ' ignored'}"{xen:if $nameHtml, ' data-author="{$nameHtml}"'}>
<aside>
<xen:if is="{$nameHtml}">
<div class="attribution type">{xen:phrase x_said, 'name={xen:raw $nameHtml}'}:
<xen:if is="{$source}">
<a href="{xen:link 'goto/{$source.type}', '', 'id={$source.id}'}#{$source.type}-{$source.id}" class="AttributionLink">↑</a>
</xen:if>
</div>
</xen:if>
<blockquote>{xen:raw $content}</blockquote>
</aside>
<span class="arrow"></span>
</div>
<xen:if is="{$attributes.member}">
</div>
</xen:if>
Then open EXTRA.css template and add there:
Code:
html body .pageContent .messageText .quote_with_avatar
{
margin-top: 10px;
{xen:if '@bbCodeBlock.margin-right',
'margin-right: @bbCodeBlock.margin-right;',
'margin-right: 40px;'
}
overflow: hidden;
}
body .messageText .quote_with_avatar .QuoteAvatar
{
border: none;
float: left;
margin-left: 10px;
margin-right: 0;
margin-bottom: 10px;
padding: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
body .messageText .quote_with_avatar .QuoteAvatar:active
{
position: relative;
top: 1px;
box-shadow: none;
}
.messageText .quote_with_avatar .QuoteAvatar .img.s
{
background-color: #eee;
background-position: 0% 0%;
background-size: 60px;
border: none;
padding: 0;
width: 60px;
height: 60px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
-webkit-transition: box-shadow 0.06s;
}
.messageText .quote_with_avatar .QuoteAvatar:active .img.s
{
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04), inset 0 2px 4px rgba(0,0,0,0.4);
}
body .messageText .quote_with_avatar .bbCodeQuote
{
margin: 0;
margin-left: 85px;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.messageText .quote_with_avatar .bbCodeQuote .arrow
{
border-radius: 0;
height: 20px;
width: 10px;
position: absolute;
left: -11px;
top: 2px;
overflow: hidden;
}
.messageText .quote_with_avatar .bbCodeQuote .arrow:after
{
content: " ";
background: @bbCodeQuote.border-color;
height: 9px;
width: 9px;
top: 5px;
left: 5px;
position: absolute;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
Current issues:
- Has no gravatar support. Avatars of users who use gravatar will show up as a solid color.
- Shows only the current avatar the author uploaded.
infis and Pepelac helped me make this template modfication working.