Làm đẹp cho mục Download tập tin đính kèm

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,697
Làm đẹp cho mục Download tập tin đính kèm

Bài viết này sẽ hướng dẫn các bạn cách làm đẹp cho mục download tập tin đính kèm.

Demo:

1.png

Bài viết có 1 tập tin đính kèm

2.png

Bài viết có 2 tập tin đính kèm
Sau đây là cách làm. Đầu tiên các bạn thay toàn bộ template attached_files bằng code sau:
Mã:
<xen:require css="attached_files.css" />

<xen:if is="{$attachment.thumbnailUrl}">
<div class="attachedFiles">
    <h4 class="attachedFilesHeader">{xen:phrase attached_files}:</h4>
    <ul class="attachmentList SquareThumbs"
        data-thumb-height="{xen:calc 'min(100, {$xenOptions.attachmentThumbnailDimensions} / 2)'}"
        data-thumb-selector="div.thumbnail > a">
        <xen:foreach loop="$post.attachments" value="$attachment">
            <li class="attachment{xen:if {$attachment.thumbnailUrl}, ' image'}" title="{$attachment.filename}">
                <div class="boxModelFixer primaryContent">
                  
                    <div class="thumbnail">
                        <xen:if is="{$attachment.thumbnailUrl} AND {$canViewAttachments}">
                            <a href="{xen:link attachments, $attachment}" target="_blank" class="LbTrigger"
                                data-href="{xen:link misc/lightbox}"><img
                                src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" class="LbImage" /></a>
                        <xen:elseif is="{$attachment.thumbnailUrl}" />
                            <a href="{xen:link attachments, $attachment}" target="_blank"><img
                                src="{$attachment.thumbnailUrl}" alt="{$attachment.filename}" /></a>
                        <xen:else />
                            <a href="{xen:link attachments, $attachment}" target="_blank" class="genericAttachment"></a>
                        </xen:if>
                    </div>
                  
                    <div class="attachmentInfo pairsJustified">
                        <h6 class="filename"><a href="{xen:link attachments, $attachment}" target="_blank">{$attachment.filename}</a></h6>
                        <dl><dt>{xen:phrase file_size}:</dt> <dd>{xen:number $attachment.file_size, size}</dd></dl>
                        <dl><dt>{xen:phrase views}:</dt> <dd>{xen:number $attachment.view_count}</dd></dl>
                    </div>
                </div>
            </li>
        </xen:foreach>
    </ul>
</div>
<xen:else />
<div id="Attachment-Hide">
<xen:foreach loop="$post.attachments" value="$attachment">
<ul class="attach-table info_attach">
    <li>
    <div class="thumbnail">

    <a href="{xen:link attachments, $attachment}" target="_blank" class="genericAttachment"><span class="download_attach"><i class="fa fa-download"></i>Download</span></a>

        </div>
  
                </li>
                    <li>
                        <span class="info_attach_icon"><i class="fa fa-server"></i></span>
                        <span class="info_attach_title">File Name</span>
                        <p title="sis-v2.0-rus.zip" id="info_attach_filename">{$attachment.filename}</p>
                    </li>
                     <li>
                        <span class="info_attach_icon"><i class="fa fa-cogs"></i></span>
                        <span class="info_attach_title">FileSize</span>
                        <span class="info_attach_val">{xen:number $attachment.file_size, size}</span>
                    </li>
                    <li>
                        <span class="info_attach_icon"><i class="fa fa-cloud-download"></i></span>
                        <span class="info_attach_title">Viewed</span>
                        <span class="info_attach_val">{xen:number $attachment.view_count}</span>
                    </li>
                  
                </ul>
</xen:foreach>
</div>
</xen:if>
<xen:comment><xen:require css="xenforo.css" /></xen:comment>

Lưu lại, và tiếp tục thay toàn bộ template attached_files.css bằng đoạn sau:
Mã:
/* the attached files block is intended to appear like a bb code block */

.attachedFiles
{
    @property "bbCodeBlock";
    margin: 1em 0;
    overflow: auto;
    /*border: 1px solid @primaryLighterStill;*/
    @property "/bbCodeBlock";
}

.messageList.withSidebar .attachedFiles
{
    margin-right: 0px;
}

    .attachedFiles .attachedFilesHeader
    {
        @property "bbCodeBlockType";
        font-size: 11px;
        font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
        background-color: #E5E5E5;
        padding: 3px 8px;
        border-bottom: 1px solid #000000;
        @property "/bbCodeBlockType";
      
        padding: 4px 8px;
    }

    .attachedFiles .attachmentList
    {
  overflow: hidden;
  zoom: 1;
  padding: 10px 10px 0;
  background: #E5E5E5;
  border-radius: 0;
    }

        .attachment
        {
            float: left;
            width: 50%;
            max-width: 300px;
        }
      
        .attachment .boxModelFixer
        {
            overflow: hidden; zoom: 1;
            margin-bottom: 10px;
            margin-right: 10px;
            padding: 5px;              
            background-color: @contentBackground;
            border: 1px solid @primaryLighterStill;
            border-radius: 5px;  
        }
      
            <xen:set var="$attachThumbSize">{xen:calc 'min(100, {$xenOptions.attachmentThumbnailDimensions} / 2)'}px</xen:set>
      
            .attachment .thumbnail
            {
                float: left;                      
                border-right: 1px solid @primaryLighterStill;
                padding-right: 5px;
                width: {$attachThumbSize};
                height: {$attachThumbSize};
                overflow: hidden;
            }
          
                .attachment .thumbnail .SquareThumb
                {
                    width: {$attachThumbSize};
                    height: {$attachThumbSize};
                    border-radius: 3px;
                }
              
                .attachment .thumbnail .genericAttachment
                {
                    @property "genericAttachmentThumb";
                    background: transparent url('@imagePath/xenforo/node-sprite.png') no-repeat -72px 0;
                    display: block;
                    width: 36px;
                    height: 36px;
                    @property "/genericAttachmentThumb";
                  
                    margin: {xen:calc '({$xenOptions.attachmentThumbnailDimensions} / 2 - @genericAttachmentThumb.height) / 2'}px {xen:calc '({$xenOptions.attachmentThumbnailDimensions} / 2 - @genericAttachmentThumb.width) / 2'}px !important;
                }
          
        .attachment .attachmentInfo
        {
            white-space: nowrap;
            overflow: hidden; zoom: 1;
            font-size: 11px;
            padding-left: 5px;
        }
      
            .attachment .attachmentInfo .filename
            {
                text-overflow: ellipsis;
                overflow: hidden;
                max-width: 100%;
            }

<xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveWideWidth)
{
    .Responsive .attachedFiles
    {
        margin-right: 0;
    }
}

@media (max-width:@maxResponsiveMediumWidth)
{
    html.Responsive .attachment
    {
        width: 100%;
    }
}
</xen:if>

/* the attached files block is intended to appear like a bb code block */

.attachedFiles
{
    margin: 1em 150px 1em 0;
-webkit-box-shadow: rgba(0,0,0,0.04) 0px 1px 6px; -moz-box-shadow: rgba(0,0,0,0.04) 0px 1px 6px; -khtml-box-shadow: rgba(0,0,0,0.04) 0px 1px 6px; box-shadow: rgba(0,0,0,0.04) 0px 1px 6px;

}

.messageList.withSidebar .attachedFiles
{
    margin-right: 0px;
}

    .attachedFiles .attachedFilesHeader
    {
        font-size: 11px;
font-family: 'Questrial', sans-serif;
color: rgb(119, 119, 119);
background-color: #000;
padding: 3px 8px;
border-bottom: 1px solid #000;
-webkit-border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -khtml-border-top-left-radius: 3px; border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px; -moz-border-radius-topright: 3px; -khtml-border-top-right-radius: 3px; border-top-right-radius: 3px;

      
        padding: 4px 8px;
    }

    .attachedFiles .attachmentList
    {
        /* roughly the same as "bbCodeCode" with the monospacing stuff removed */
        overflow: hidden; zoom: 1;      
        padding: 10px 10px 0;
        background: rgb(36, 36, 36) url('styles/platform/xenforo/gradients/category-23px-light.png') repeat-x top;
        -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
    }

        .attachment
        {
            float: left;
            width: 50%;
            max-width: 300px;
        }
      
        .attachment .boxModelFixer
        {
            overflow: hidden; zoom: 1;
            margin-bottom: 10px;
            margin-right: 10px;
            padding: 5px;              
            background-color: ;
            border: 1px solid rgb(58, 58, 58);
            -webkit-border-radius: 5px; -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;  
        }
      
          
      
            .attachment .thumbnail
            {
                float: left;                      
                border-right: 1px solid rgb(58, 58, 58);
                padding-right: 5px;
                width: 50px;
                height: 50px;
                overflow: hidden;
            }
          
                .attachment .thumbnail .SquareThumb
                {
                    width: 50px;
                    height: 50px;
                    -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
                }
              
                .attachment .thumbnail .genericAttachment
                {
                    background: transparent url('styles/platform/xenforo/node-sprite.png') no-repeat -72px 0;
display: block;
width: 36px;
height: 36px;

                  
                    margin: 7px 7px !important;
                }
          
        .attachment .attachmentInfo
        {
            white-space: nowrap;
            overflow: hidden; zoom: 1;
            font-size: 11px;
            padding-left: 5px;
        }
      
            .attachment .attachmentInfo .filename
            {
                text-overflow: ellipsis;
                overflow: hidden;
                max-width: 100%;
            }

.info_attach {
    -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
    /*margin-top: 20px !important;*/
    table-layout: fixed;
    margin-bottom: 11px !important;
}
.Attachment-Hide .info_attach:first-child {
margin-top: 20px !important;
}
.info_attach > li {
padding: 10px 0 10px 20px;
}
.info_attach_icon {
    float: left;
    margin-right: 6px;
    margin-top: 2px;
    font-size: 30px;
    color: #A1A1A1;
}
.info_attach_title {
    display: block;
    color: #A1A1A1;
    margin-bottom: 2px;
}
.info_attach_val {
    color: #48494C;

}
#info_attach_filename
{
    color: #48494C;
    overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}


.download_attach{
        margin: 10px 30px;
    -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px;
    text-align: center;
    line-height: 36px;
    display: block;
    cursor: pointer;
    border: 1px solid #fff;
    height: 36px;
    margin: 0;
    line-height: normal;
    height: auto;
    font-size: 10pt;
    font-family: "Questrial",sans-serif;
    color: #fff;
    display: block;
    transition: opacity 0.5s ease 0s;
    transition-timing-function: ease;
    -moz-transition: background-color 0.5s ease 0s;
    -moz-transition-timing-function: ease;
    -webkit-transition: background-color 0.5s ease 0s;
    -webkit-transition-timing-function: ease;
    -o-transition: background-color 0.5s ease 0s;
    -o-transition-timing-function: ease;
    -ms-transition: background-color 0.5s ease 0s;
    -ms-transition-timing-function: ease;
        padding: 10px 10px;
}

    .download_attach:hover
    {
            text-decoration: none;
        background-color: #fff;
      
        color: #000;
    }

.attach-table {
    display: table;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    background: #111;
}
ul.attach-table li {

}
ul.attach-table li a {
text-decoration: none!important;
}
.attach-table .icon img.img-responsive {
    display: inline;
}

.attach-table > li {
    vertical-align: middle;
    display: table-cell;
}


@media (max-width:800px)
{
    .Responsive .attachedFiles
    {
        margin-right: 0;
    }
}

@media (max-width:610px)
{
    html.Responsive .attachment
    {
        width: 100%;
    }
}

Lưu lại và thưởng thức. Chúc các bạn thành công.


Nguồn: mamcongnghe.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom