Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Change header based on time of day - Thay đổi header dựa trên thời gian trong ngày

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi PCO, 5/4/16.

Lượt xem: 1,744

  1. PCO Thành viên cấp 2

    Một ví dụ về một header ngày/đêm. Tôi chỉ cần kéo hai hình ảnh bầu trời từ Google. Những hình ảnh cho thấy một nền header điều kiện dựa vào thời gian trong ngày (tính đến các thiết lập múi giờ của người sử dụng):

    LhMGYur.png
    oyj1mxt.png
    Thời gian dựa trên biểu tượng header:
    Để thay đổi hình ảnh tiêu đề chỉnh sửa này vào Admin CP -> Appearance -> Templates -> logo_block:
    Tìm:

    Code:
    <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
    Thay bằng:

    Code:
    <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
    <img src="PATH/TO/DAY.GIF" alt="{$xenOptions.boardTitle}" />
    <xen:else />
    <img src="PATH/TO/NIGHT.GIF" alt="{$xenOptions.boardTitle}" />
    </xen:if>
    Bạn cần phải xác định các đường dẫn hình ảnh. Các điều kiện được dựa trên giờ trong ngày (trong định dạng 24 giờ). Các điều kiện trên tạo ánh sáng giữa ngày và đêm là 8am và 8pm (20:00).

    Nếu bạn muốn có nhiều hơn hai khung thời gian sau đó bạn có thể mở rộng với điều kiện, như vậy:

    Code:
    <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
    <img src="PATH/TO/DAY.GIF" alt="{$xenOptions.boardTitle}" />
    <xen:else />
    <img src="PATH/TO/NIGHT.GIF" alt="{$xenOptions.boardTitle}" />
    </xen:if>
    Thời gian dựa trên background header:
    Để thay đổi hình nền header chỉnh sửa template này để xác định những hình ảnh nền:

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Chỉ định các class của bạn với những hình ảnh nền bằng cách thêm hai khối mã này:

    Code:
    <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
    <img src="PATH/TO/DAY.GIF" alt="{$xenOptions.boardTitle}" />
    <xen:else />
    <img src="PATH/TO/NIGHT.GIF" alt="{$xenOptions.boardTitle}" />
    </xen:if>
    Sau đó chỉnh sửa template này:

    Admin CP -> Appearance -> Templates -> header

    Thay:

    Code:
    <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
    <img src="PATH/TO/DAY.GIF" alt="{$xenOptions.boardTitle}" />
    <xen:else />
    <img src="PATH/TO/NIGHT.GIF" alt="{$xenOptions.boardTitle}" />
    </xen:if>
    Các điều kiện được dựa trên giờ trong ngày (trong định dạng 24 giờ). Các điều kiện trên tạo ánh sáng giữa ngày và đêm là 8am và 8pm (20:00). Và tên class cần phải phù hợp với những gì bạn định nghĩa trong EXTRA.css.

    Nếu bạn muốn có nhiều hơn hai khung thời gian sau đó bạn có thể mở rộng với điều kiện, như vậy:

    Code:
    <xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">
    <div id="header" class="backMorning">
    <xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />
    <div id="header" class="backAfternoon">
    <xen:else />
    <div id="header" class="backNight">
    </xen:if>
    Chỉ cần chắc chắn để trở lại và chỉnh sửa EXTRA.css để xác định ba class (backMorning, backAfternoon, backNight). Tham khảo mã EXTRA.css trước là một ví dụ.

    Chúc các bạn thành công.

    Nguồn: VNXF.VN

    ...

Ủng hộ diễn đàn