<body id="layout"> saja. Kekurangan dari metode ini adalah bahwa kode CSS yang seharusnya hanya digunakan dalam tampilan Tata Letak akan tampil juga dalam kode sumber pada halaman versi publik. Kode CSS juga akan diterapkan pada halaman versi publik jika Anda menambahkan atribut id="layout" pada elemen <body> dalam kode XML tema:
body#layout div.section {
background: #ff0;
border: 4px solid #f00;
}
Metode Baru : Cara terbaru untuk mengatur kode CSS agar hanya berlaku dalam tampilan Tata Letak adalah dengan menempatkan kode CSS di dalam elemen
<b:template-skin> seperti berikut:
<b:template-skin>
<![CDATA[
div.section {
background: #ff0;
border: 4px solid #f00;
}
]]>
</b:template-skin>
Mungkin kita dapat menggunakan tag kondisional ini sebagai alternatif, tetapi saya belum sempat mengujinya, jadi saya tidak tahu apakah metode ini akan berfungsi atau tidak. Secara logika, seharusnya dapat dilakukan seperti berikut:
<b:if cond='data:view.isLayoutMode'>
<style>
div.section {
background: #ff0;
border: 4px solid #f00;
}
</style>
</b:if>
Anda dapat menggunakan fitur ini untuk menandai beberapa widget yang dianggap khusus atau penting, misalnya dengan memberikan warna khusus pada widget tertentu. Dengan cara ini, sebagai pengembang tema, Anda dapat memandu pengguna tema Anda dengan lebih mudah, dengan mengarahkan mereka untuk mengedit widget tertentu berdasarkan warna atau pola yang Anda berikan. Sebagai contoh, di sini saya memberikan warna gradien biru pada widget link list dan gradien kuning pada widget iklan:
body#layout div.widget.LinkList div.widget-content {
background: red;
}
body#layout div.widget.AdSense div.widget-content {
background: yellow;
}
Kode yang saya berikan adalah nama kelas HTML yang akan secara otomatis diterapkan pada widget sesuai dengan jenisnya. Anda juga dapat membuatnya lebih spesifik dengan memanfaatkan ID widget, seperti berikut:
body#layout div.widget#BlogSearch1 div.widget-content {
background: blue;
}
Dalam kasus validasi HTML5 bisa menggunakan cara baru. Karena kode
type='text/css' pada style sudah tidak valid HTML5, maka saya menggunakan <b:skin><![CDATA[ untuk kode css hanya halaman tata letak saja, jadi <style id='page-skin-1' type='text/css'> tidak tampil untuk publik.
No comments:
Post a Comment