XF 2.1 attachments like vbulletin

yyyuur

Member
Hello! I migrated from vbulletin to xenforo, and i have question about attachment!

How i can change style for attachments?

Now it's look like this

3.png

But i need look like this

1.png

p/s sorry for my english!
 
Last edited:
Looks like it just needs new CSS:

2.2.8 edit:
Template:" message_macros"

Find:

Code:
<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="message-attachments">
            <h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment)">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
        </section>
    </xf:if>
</xf:macro>

Replace with:

Code:
<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="message-attachments">
            <h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
            <xf:contentcheck>
            <xf:if contentcheck="true">
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment) AND $attachment.has_thumbnail">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
            </xf:if>
           
            <xf:if contentcheck="true">
            <ul class="attachmentList attachmentListCustom">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment) AND !$attachment.has_thumbnail">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
            </xf:if>
           
            </xf:contentcheck>
        </section>
    </xf:if>
</xf:macro>

Add the CSS to your extra.less

Code:
.attachmentList.attachmentListCustom
{
    .xf-minorBlockContent();
    display: block;
    padding: @xf-paddingSmall @xf-paddingLarge;
    margin-top: @xf-elementSpacer;
    .file
    {
        display: flex;
        width: auto;
        background-color: transparent;
        border-width: 0;
        padding: @xf-paddingSmall 0;
        margin: 0;
        position: relative;
        flex-direction: row;
        align-items: center;
        &:hover .file-content .file-name
        {
            color: @xf-linkHoverColor;
        }
        &:after
        {
            padding-bottom: 0;
        }
        .file-preview
        {
            display: inline-block;
            &:before
            {
                width: 100%;
                height: 100%;
                position: absolute;
                content: "";
            }
            .file-typeIcon
            {
                font-size: 20px;
            }
        }
        .file-content
        {
            display: block;
            .file-info
            {
                background: transparent;
                border-width: 0;
                text-shadow: none;
                color: @xf-textColor;
                line-height: 1;
                > *
                {
                    display: inline-block;
                }
                .file-name
                {
                    color: @xf-linkColor;
                }
                .file-meta
                {
                    color: @xf-textColorMuted;
                }
            }
        }
        .file-preview, .file-content, .file-info
        {
            position: static;
            height: auto;
            width: auto;
        }
    }
}
 
Looks like it just needs new CSS:

2.2.8 edit:
Template:" message_macros"

Find:

Code:
<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="message-attachments">
            <h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment)">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
        </section>
    </xf:if>
</xf:macro>

Replace with:

Code:
<xf:macro name="attachments" arg-attachments="!" arg-message="!" arg-canView="!">
    <xf:if contentcheck="true">
        <xf:css src="attachments.less" />
        <section class="message-attachments">
            <h4 class="block-textHeader">{{ phrase('attachments') }}</h4>
            <xf:contentcheck>
            <xf:if contentcheck="true">
            <ul class="attachmentList">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment) AND $attachment.has_thumbnail">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
            </xf:if>
          
            <xf:if contentcheck="true">
            <ul class="attachmentList attachmentListCustom">
                <xf:contentcheck>
                    <xf:foreach loop="$attachments" value="$attachment" if="!$message.isAttachmentEmbedded($attachment) AND !$attachment.has_thumbnail">
                        <xf:macro template="attachment_macros" name="attachment_list_item"
                            arg-attachment="{$attachment}"
                            arg-canView="{$canView}" />
                    </xf:foreach>
                </xf:contentcheck>
            </ul>
            </xf:if>
          
            </xf:contentcheck>
        </section>
    </xf:if>
</xf:macro>

Add the CSS to your extra.less

Code:
.attachmentList.attachmentListCustom
{
    .xf-minorBlockContent();
    display: block;
    padding: @xf-paddingSmall @xf-paddingLarge;
    margin-top: @xf-elementSpacer;
    .file
    {
        display: flex;
        width: auto;
        background-color: transparent;
        border-width: 0;
        padding: @xf-paddingSmall 0;
        margin: 0;
        position: relative;
        flex-direction: row;
        align-items: center;
        &:hover .file-content .file-name
        {
            color: @xf-linkHoverColor;
        }
        &:after
        {
            padding-bottom: 0;
        }
        .file-preview
        {
            display: inline-block;
            &:before
            {
                width: 100%;
                height: 100%;
                position: absolute;
                content: "";
            }
            .file-typeIcon
            {
                font-size: 20px;
            }
        }
        .file-content
        {
            display: block;
            .file-info
            {
                background: transparent;
                border-width: 0;
                text-shadow: none;
                color: @xf-textColor;
                line-height: 1;
                > *
                {
                    display: inline-block;
                }
                .file-name
                {
                    color: @xf-linkColor;
                }
                .file-meta
                {
                    color: @xf-textColorMuted;
                }
            }
        }
        .file-preview, .file-content, .file-info
        {
            position: static;
            height: auto;
            width: auto;
        }
    }
}

1640801652352.webp
 
@Russ On my forum, its the same problem like @securedme - I would be happy, if you have some time for this :)

I've packaged it up into an add-on using regex for the replacements, so this should get around the issues of differing spaces :)

Thanks to @Russ of course, this looks great!
 

Attachments

I've packaged it up into an add-on using regex for the replacements, so this should get around the issues of differing spaces :)

Thanks to @Russ of course, this looks great!
Thank you very much.
This modification is very nice, the size of the attachment icon is now reasonable, it used to be too stupid, and the file name is fully displayed.
 

Attachments

  • 20220527130908.webp
    20220527130908.webp
    19.9 KB · Views: 16
Top Bottom