XenForo'da Günün Saatine Göre Değişen Header Logosu ve Arkaplanı

XenForo forumunuzda header arkaplan resminizi ve/veya logonuzu günün saatine göre otomatik değiştirmek istiyorsanız aşağıdaki adımları takip edebilirsiniz.


Öncelikle Admin CP -> Appearance -> Templates (Admin KP > Görünüm >Şablonlar) konumuna giderek logo_block şablonunu açıyoruz.

Şu kodu buluyoruz:

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

Bununla değiştiriyoruz:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
	<img src="gunduzlogosu.jpg" alt="{$xenOptions.boardTitle}" />
		<xen:else />
	<img src="gecelogosu.jpg" alt="{$xenOptions.boardTitle}" />
</xen:if>

Tabi resim adreslerine kendimiz ona göre giriyoruz.

Eğer ikiden fazla zamana göre ayarlansın isterseniz sabah, öğle ve akşam şeklinde yapabiliriz.

Bunun için de logo_block şablonundaki orijinal kodu yine buluyoruz ve bununla değiştiriyoruz:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">
	<img src="sabahlogosu.jpg" alt="{$xenOptions.boardTitle}" />
		<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />
	<img src="öglelogosu.jpg" alt="{$xenOptions.boardTitle}" />
		<xen:else />
	<img src="aksamlogosu.jpg" alt="{$xenOptions.boardTitle}" />
</xen:if>

Öncelikle extra.css şablonumuzu açıyor ve şu CSS kodlarını bu şablona dahil ediyoruz:

.headergun {
    background-image: url('gunduzarkaplan.jpg');
}
.headergece {
    background-image: url('gecearkaplan.jpg');
}

Ardından Admin CP -> Appearance -> Templates (Admin KP > Görünüm >Şablonlar) kısmına giderek header şablonunu açıyor ve kırmızı kodu silip...

<xen:hook name="header">
<div id="header">
	<xen:include template="logo_block" />
	<xen:include template="navigation" />
	<xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>

yerine bunu yazıyoruz...

<xen:hook name="header">
<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 20">
	<div id="header" class="headergun">
<xen:else />
	<div id="header" class="headergece">
</xen:if>
	<xen:include template="logo_block" />
	<xen:include template="navigation" />
	<xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>

Hepsi bu kadar.

Eğer logoda olduğu gibi üçlü (sabah, öğle ve akşam) olsun isterseniz de üstte kırmızıyla belirttiğimiz <div id="header"> kodunun yerine şunları yazabilirsiniz:

<xen:if is="{xen:time $serverTime, 'G'} >= 8 AND {xen:time $serverTime, 'G'} < 12">
	<div id="header" class="headersabah">
<xen:elseif is="{xen:time $serverTime, 'G'} >= 12 AND {xen:time $serverTime, 'G'} < 17" />
	<div id="header" class="headerogle">
<xen:else />
	<div id="header" class="headeraksam">
</xen:if>

Tabi üçlü olduğunda CSS kodunu yukarıda belirttiğimiz gibi değil bu şekilde eklememiz gerekecek:

.headersabah {
    background-image: url('sabaharkaplan.jpg');
}
.headerogle {
    background-image: url('oglearkaplan.jpg');
}
.headeraksam {
    background-image: url('aksamarkaplan.jpg');
}

Dipnot: Koşullu ifade günün saatine göre ayarlanmıştır (24 saatlik formatta) ve 08:00 ile 20:00 arasını gündüz olarak baz almaktadır.