1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Quotes with avatars

Discussion in 'Template Modifications [Archive]' started by CyberAP, Dec 4, 2011.

  1. CyberAP

    CyberAP Well-Known Member

    This template modification will add avatars to your quotes (and a small arrow).

    Here is how it looks:
    example.PNG

    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">&uarr;</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:
    1. Has no gravatar support. Avatars of users who use gravatar will show up as a solid color.
    2. Shows only the current avatar the author uploaded.
    Credits:

    infis and Pepelac helped me make this template modfication working.
     
    silverSl!DE, M@rc, Lykke and 26 others like this.
  2. Edrondol

    Edrondol Well-Known Member

    Whoa! This is pretty cool!
     
  3. Fuhrmann

    Fuhrmann Well-Known Member

    Really is!
     
  4. Edrondol

    Edrondol Well-Known Member

    I tried this on my site but it didn't work quite as advertised. The avatar was on a different line than the quote. But I love the idea.
     
  5. James

    James Well-Known Member

    Now style the quote box to look like a speech bubble and I think you'd have yourself quite a nice candidate for an add-on here.
     
    Deepmartini and Veer like this.
  6. CyberAP

    CyberAP Well-Known Member

    Can you show me the site where you tested it? I'll try to fix this.
     
    Fuhrmann likes this.
  7. Allan

    Allan Well-Known Member

    CyberAP, i like that :)

    But, i have other idea :p, check my modification:
    Possible ?
    other.png
     
  8. CyberAP

    CyberAP Well-Known Member

    bb_code_tag_quote template:
    Code:
    <xen:require css="bb_code.css" />
     
    <xen:comment><!-- content is escaped via parser --></xen:comment>
    <div class="bbCodeBlock bbCodeQuote{xen:if $ignored, ' ignored'}{xen:if $nameHtml, ' hasAvatar'}"{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">&uarr;</a>
                    </xen:if>
                <span class="arrow"></span>
                </div>
            </xen:if>
            <blockquote>
     
            <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:raw $content}
     
            </blockquote>
        </aside>
    </div>
    extra.css:

    Code:
    body .messageText .QuoteAvatar
    {
        border: none;
        float: left;
        margin-left: 0;
        margin-right: 10px;
        padding: 0;
        box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    }
    body .messageText .QuoteAvatar:active
    {
        position: relative;
        top: 1px;
        box-shadow: none;
    }
     
    body .messageText .QuoteAvatar .img.s
    {
        background-color: @primaryLighterStill;
        background-position: 0% 0%;
        background-size: 48px;
        border: none;
        padding: 0;
        width: 48px;
        height: 48px;
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
    }
     
    body .messageText .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 .bbCodeQuote.hasAvatar
    {
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
     
    body .messageText .bbCodeQuote.hasAvatar blockquote
    {
        overflow: hidden;
    }
     
    body .messageText .bbCodeQuote.hasAvatar .attribution
    {
        position: relative;
    }
     
    body .messageText .bbCodeQuote.hasAvatar .arrow
    {
        border-radius: 0;
        height: 10px;
        width: 20px;
        position: absolute;
        left: 23px;
        bottom: -10px;
        overflow: hidden;
    }
    body .messageText .bbCodeQuote.hasAvatar .arrow:after
    {
        content: " ";
        background: @bbCodeQuote.border-color;
        border: 1px solid @bbCodeQuote.border-color;
        height: 8px;
        width: 8px;
        top: -5px;
        left: 6px;
        position: absolute;
        box-shadow: 1px 1px rgba(255,255,255,0.25);
     
        transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
     
    Markos, DSF, Perspektif and 2 others like this.
  9. Allan

    Allan Well-Known Member

    Cool ;)

    But there are problem: some avatars appear blue
    Sans-titre-5.png

    and the default avatar is not displayed:

    Sans-titre-6.png
     
    Digital Doctor likes this.
  10. ArnyVee

    ArnyVee Well-Known Member

    Once these couple of minor issues are worked out, this will be a beautiful touch! :)
     
    faeronsayn and FredC like this.
  11. CyberAP

    CyberAP Well-Known Member

    Blue is shown when user is using gravatar for his avatar.
    You can change the color here:
    body .messageText .QuoteAvatar .img.s
    {
    background-color: @primaryLighterStill;
    }

    I'll investigate what happens in the second case.
     
    Fuhrmann likes this.
  12. DRE

    DRE Well-Known Member

    1. The first avatar the member uploaded ever, period? Like if they uploaded an avatar 3 months ago and changed it to something else the same day, the very first avatar that they uploaded 3 months ago would show?
     
  13. CyberAP

    CyberAP Well-Known Member

    Yep.
     
    Fuhrmann likes this.
  14. DRE

    DRE Well-Known Member

    LMAOOOOO
     
  15. CyberAP

    CyberAP Well-Known Member

    Some people said that it shows only the current author avatar. Updated the first post with this.
     
    Fuhrmann likes this.
  16. Andrej

    Andrej Well-Known Member

    This looks very great! Will try at my forums. :)

    Hope the issues will be ironed out at a point.
     
    Fuhrmann likes this.
  17. Brogan

    Brogan XenForo Moderator Staff Member

    Nice work.

    A few small problems though, as seen in the screenshot.

    1. There needs to be some bottom padding for when there are subsequent quotes with less than 2 rows.
    2. The arrows don't display correctly in IE.
    3. For manual quotes (with no member ID in the attribution), there is a blank space and the arrow still shows.

    quotes.PNG
     
  18. CyberAP

    CyberAP Well-Known Member

    1. Should be fixed now, I've added margin-bottom to the avatar.
    2. Added support for IE9.
    3. Fixed.
     
  19. DRE

    DRE Well-Known Member

    okay great. I'll try it now
     
  20. Brogan

    Brogan XenForo Moderator Staff Member

    Looking good.

    Just one small issue remains.

    quotes.PNG
     

Share This Page