Hướng dẫn Responsive Design (phần css) Forum Xenforo

Thảo luận trong 'Xenforo' bắt đầu bởi Boss, 11/12/14.

Đã xem: 1,714

  1. Boss Moderator

    . Vào Appearance > Template Modifications
    Click Create new Template Modification

    2. Nội dung như sau:
    Modification: responsive_VietXfAdvStats.css
    Template: VietXfAdvStats.css
    Execution Order: (số mấy cũng đc, để 9 đi, mình thích số 9 :)))
    Modification Type: Preg Replace
    Search: #^.*$#s
    Replace
    Mã:
    $0
    <xen:include template="responsive_VietXfAdvStats.css" />
    Rồi Click Save and Exit

    3. Vào Appearance > Template
    Click Create New Template

    tên template: responsive_VietXfAdvStats.css
    Nội dung như sau (đoạn này hấp dẫn nè)
    Mã:
    <xen:if is="{$responsiveDesignAddOnEnabled} && @responsiveEnabled">
    @media only screen and (max-width: @responsiveWidth), only screen and (max-device-width: @responsiveWidth)
    {
    /* đặt các css sẽ chuyển khi bề ngang của màn hình xem trang thay đổi dưới giá trị mình option ở Style Properties: Responsive Design */
    }
    @media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
    {
    /* đặt các css sẽ chuyển khi bề ngang của màn hình xem trang thay đổi dưới giá trị mình quy định ở trên (500px) */
    }
    </xen:if>
    Mình sẽ ví dụ như bên mình để các bạn tự nghiên cứu lấy nha
    Mã:
    <xen:if is="{$responsiveDesignAddOnEnabled} && @responsiveEnabled">
    @media only screen and (max-width: @responsiveWidth), only screen and (max-device-width: @responsiveWidth)
    {
    #Block1st
    {
    display: none;
    }
    #Block2nd
    {
    margin-left: 0px;
    }
    .VietXfAdvStats_ItemLimit { display: none; }
    .VietXfAdvStats_SectionTrigger li { float: left; }
    .tabs { padding-bottom: 0px; }
    .VietXfAdvStats_ThreadTitle { white-space: nowrap; overflow: hidden; }
    }
    @media only screen and (max-width: 500px), only screen and (max-device-width: 500px)
    {
    .VietXfAdvStats_SectionTrigger li { float: left; display: none; }
    #Block2ndPanes { margin-top: -20px; }
    .VietXfAdvStats_Thread .VietXfAdvStats_SectionItemInfo { display: none; }
    }
    </xen:if>
     
    Đang tải...
    nam lim xanh

    Bình Luận Bằng Facebook