Resource icon

Avatars - Big & Tall

Overview Reviews (9) Discussion
Well after lots of tries i managed to get it to work... i dont want to lose the styles i have but i found that i have to work my way up, start with the stiles that are childs then the paretns etc. All good now... Thanks...

ohh one thing, the smaller avatars on the user info of the side bar or the new threads center the image so if i have a portrait image it crops in the middle, any way to set it to TOP alignment? thanks
 
kingston said:
I just noticed that the user avatar in the message to post is still oversized. Any idea what that would be?View attachment 45166
Click to expand...

I can't see the quickreply without being logged in, but this will probably fix it:

Rich (BB code): 
.thread_view .messageList a.avatar img,
.thread_view .quickReply a.avatar img,
.conversation_view .messageList a.avatar img,
.conversation_view .quickReply a.avatar img,
.sfreview_view .messageList a.avatar img,
.sfreview_view .quickReply a.avatar img
{
	width: 142px;
	height: auto;
}

.messageUserInfo
{
	width: 170px !important;
}

.message .messageInfo,
#QuickReply
{
	margin-left: 186px !important;
}
 
Gucabe said:
ohh one thing, the smaller avatars on the user info of the side bar or the new threads center the image so if i have a portrait image it crops in the middle, any way to set it to TOP alignment? thanks
Click to expand...

Smaller avatars are all resized. You can set the focus for the resize by clicking and dragging the avatar in the edit avatar window:

Screen shot 2013-04-25 at 10.46.53 AM.webp
 
Perfect Jake.. btw.. forum folks love the portrait avatar.. we all have costumes and shows them a lot better that way.

Thanks.
 
I finally got around to using this.

This messed up my ragtek quote in avatars. Disabling that addon for now.

What change needs to be made?

ragtekquoteinavatars.webp

bb_code_tag_quote_ragtek

Code: 
<xen:require css="bb_code.css" />
<style>
    .bbCodeQuote .attribution img
{
    width: 24px;
    height: 24px;
    float: left;
    margin: 0 5px 0 0;
    position: relative;
    border-radius: 2px;
    top: -5px;
}

.bbCodeBlock .type
{
    padding-top: 4px;
    padding-bottom: 7px;
    padding-left: 5px;
}
</style>

<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="{$userData}">
                    <xen:avatar user="$userData" size="s" img="true" />
                </xen:if>
               
                <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>
</div>
 
Sorry, I am a complete newbie. I like the code and it is working really nice so far.

Because I tend to use 100px avatars, the square ones I upload get forced to the large dimension, not sure if there is a way to have the image width for the postbit not to be wider than 150px.

I understand by the thread i have to change the css but I am not sure I understand the 3 pixels thing to subtract it or if that would involve more coding somewhere else.

Thanks in advance. :)
 
Kaynil said:
Sorry, I am a complete newbie. I like the code and it is working really nice so far.

Because I tend to use 100px avatars, the square ones I upload get forced to the large dimension, not sure if there is a way to have the image width for the postbit not to be wider than 150px.

I understand by the thread i have to change the css but I am not sure I understand the 3 pixels thing to subtract it or if that would involve more coding somewhere else.

Thanks in advance. :)
Click to expand...

Use this:

Code: 
.thread_view .messageList .messageUserInfo a.avatar img,
.thread_view .quickReply .messageUserInfo a.avatar img,
.conversation_view .messageList .messageUserInfo a.avatar img,
.conversation_view .quickReply .messageUserInfo a.avatar img
{
	width: auto;
	max-width: 142px;
	height: auto;
}

.messageUserInfo
{
	width: 170px !important;
}

.message .messageInfo,
#QuickReply
{
	margin-left: 186px !important;
}

The result is that big/tall avatars still have their width constrained, but small avatars are not inflated:

Screen shot 2013-05-21 at 9.40.57 PM.webp
 
To get this working in responsive design by Arty in XF 1.2 all you need to do is make two changes.
Add everything in Jakes CSS to your extra.css EXCEPT FOR
Rich (BB code): 
.messageUserInfo
{
width: 170px !important;
}

.message .messageInfo,
#QuickReply
{
margin-left: 186px !important;
}

^^^APPLY the .messageUserInfo css in your Style Properties/Message Layout/User Info Container/Miscellaneous width.

Apply the messageInfo css to Style Properties/Message Layout/Content Container/Background/Left/Margin

After you do that, add this part to responsive_extra.css

Change the number 142 to 48
Rich (BB code): 
.thread_view .messageList .messageUserInfo a.avatar img,
.thread_view .quickReply .messageUserInfo a.avatar img,
.conversation_view .messageList .messageUserInfo a.avatar img,
.conversation_view .quickReply .messageUserInfo a.avatar img
{
width: 48px;
height: auto;
}
 
Last edited:
This is my new 1.2 edit

Code: 
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
.thread_view .messageList .messageUserInfo a.avatar img,
.thread_view .quickReply .messageUserInfo a.avatar img,
.conversation_view .messageList .messageUserInfo a.avatar img,
.conversation_view .quickReply .messageUserInfo a.avatar img
{
width: 48px;
height: auto;
}
.avatarHolder .userMood img {
    display: none;
}
}
</xen:if>
 
Last edited:
I tried this mod and it worked great on desktop versions, but it sent post text in mobile all the way to the right, and in a looooong strip... maybe just two or three words per line. Any ideas?
 
DRE said:
This is my new 1.2 edit

Code: 
<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth)
{
.thread_view .messageList .messageUserInfo a.avatar img,
.thread_view .quickReply .messageUserInfo a.avatar img,
.conversation_view .messageList .messageUserInfo a.avatar img,
.conversation_view .quickReply .messageUserInfo a.avatar img
{
width: 48px;
height: auto;
}
.avatarHolder .userMood img {
    display: none;
}
}
</xen:if>
Click to expand...

what template are you editing for the code above?
 
You must log in or register to reply here.
Back
Top Bottom