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

[PVS]

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

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):

​

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:

<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

Thay bằng:

<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:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">
                    <img src="PATH/TO/MORNING.GIF" alt="{$xenOptions.boardTitle}" />
                <xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />
                    <img src="PATH/TO/AFTERNOON.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:

.backDay
{
    background-image: url('PATH/TO/DAY.GIF');
}

.backNight
{
    background-image: url('PATH/TO/NIGHT.GIF');
}

Sau đó chỉnh sửa template này:

Admin CP -> Appearance -> Templates -> header

Thay:

<div id="header">

Bằng:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
    <div id="header" class="backDay">
<xen:else />
    <div id="header" class="backNight">
</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:

<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: xenforo.com​

 

[Jindo_Katori]

Trò này hay vãi.
Chỉ tiếc site của mình xấu quá ko kết hợp đc