Anda dapat menggunakan tema kustom untuk menyesuaikan tampilan dasbor, Tampilan, dan Jelajah Looker tersemat Anda. Anda dapat menggunakan tema untuk menyesuaikan jenis font, warna teks, warna latar belakang, warna tombol, warna ubin, dan elemen visual lainnya.
Misalnya, Anda dapat membuat tema "gelap" untuk mengubah tampilan dasbor tersemat.
Untuk informasi tentang cara menyetel tema default untuk dasbor dan Jelajah, atau untuk menerapkan tema ke dasbor atau Jelajah tertentu, lihat halaman dokumentasi Memulai penyematan — menerapkan tema kustom.
Anda dapat menentukan tema untuk dasbor tersemat, Eksplorasi tersemat, dan jendela edit untuk kartu di dasbor tersemat dari halaman Tema di bagian Platform pada panel Admin.
Halaman ini menjelaskan hal berikut:
- Tema default Looker
- Cara penerapan tema ke dasbor tersemat dan Eksplorasi
- Cara membuat, menyalin, mengedit, dan menghapus tema kustom
- Cara menetapkan tema default untuk dasbor dan Jelajah
- Cara menerapkan tema selain tema default ke dasbor dan Jelajah yang dipilih
- Cara menerapkan argumen URL
_theme
untuk memilih elemen tema dasbor
Tema default
Tema default Looker dibuat secara otomatis pada instance Anda, dan tidak dapat dihapus atau diedit. Tema Looker digunakan sebagai tema default kecuali admin Looker menentukan tema lain sebagai default.
Setelan tema Looker, yang dapat Anda lihat dengan memilih tombol View di samping tema atau dengan membuat salinan tema, dikelompokkan ke dalam bagian berikut:
Tema
Nama Setelan | Nilai |
---|---|
Nama | Looker |
Umum
Setelan di bagian ini berlaku untuk dasbor tersemat dan Jelajah tersemat.
Nama Setelan | Nilai | Notes |
---|---|---|
Warna Kunci | #1A73E8 |
Dasbor menggunakan warna ini untuk tombol utama dan kontrol filter.Jelajahi menggunakan warna ini untuk tombol utama, banner, dan aksen. |
Warna Teks | #3e3f40 |
|
Warna Latar | #f6f8fa |
|
Jenis Font | Roboto, Noto Sans JP, Noto Sans CJK KR, Noto Sans Arabic UI, Noto Sans Devanagari UI, Noto Sans Ibrani, Noto Sans Thai UI, Helvetica, Arial, sans-serif | Font ini ditampilkan oleh aplikasi Looker dan direkomendasikan karena akan tersedia di browser dan saat gambar dirender. Looker menggunakan font pertama dalam daftar jenis font yang mendukung karakter, sehingga font khusus atau prioritas yang lebih tinggi harus dicantumkan terlebih dahulu. Looker menggunakan variasi font "UI" jika tersedia sehingga karakter sedikit dimodifikasi agar lebih pas dalam batas komponen visual. |
Sumber Font | Tidak ada |
Halaman Dasbor
Nama Setelan | Nilai |
---|---|
Pengumpulan Warna | Tidak ada |
Warna Latar | #f6f8fa |
Ubin Dasbor
Nama Setelan | Nilai |
---|---|
Warna Judul | #3a4245 |
Warna Teks | #3a4245 |
Warna Isi Teks | Tidak ada |
Warna Latar | #ffffff |
Perataan Judul | Tengah |
Kontrol Dasbor
Nama Setelan | Nilai |
---|---|
Tampilkan Judul Dasbor | Ya |
Panel Filter Tampilan | Ya |
Jelajahi halaman
Nama Setelan | Nilai |
---|---|
Header Tampilan | Ya |
Judul Tampilan | Ya |
Tampilkan Pengoperasian Terakhir | Ya |
Zona Waktu Tampilan | Ya |
Menampilkan Tombol Run | Ya |
Tombol Setelan Layar | Ya |
Halaman tampilan
Nama Setelan | Nilai |
---|---|
Header Tampilan | Ya |
Judul Tampilan | Ya |
Tampilkan Pengoperasian Terakhir | Ya |
Zona Waktu Tampilan | Ya |
Menampilkan Tombol Run | Ya |
Tombol Setelan Layar | Ya |
Berikut adalah contoh dasbor, jendela edit kartu dasbor, dan Explore dengan tema Looker.
Contoh dasbor dengan tema Looker
Contoh jendela edit kartu dasbor dengan tema Looker
Contoh halaman Jelajahi dengan tema Looker
Cara penerapan tema dan setelan sematan
Anda dapat mengubah tampilan dasbor tersemat atau Jelajahi dari tema default menggunakan tema kustom dan argumen URL. Saat menampilkan dasbor tersemat atau Jelajah, Looker menerapkan setelan dengan urutan berikut:
- Dimulai dengan setelan dari tema default
- Menerapkan setelan dari tema kustom yang ditentukan dalam argumen
theme
URL, jika ada - Menerapkan properti yang ditentukan dalam argumen URL
_theme
, jika ada (hanya untuk dasbor)
Setiap item mengganti item sebelumnya, artinya setelan penyematan menggantikan setelan tema default, dan tema kustom menggantikan setelan sematan dan tema default.
Namun, untuk argumen URL _theme
, hanya elemen yang ditentukan dalam argumen _theme
yang akan menggantikan elemen dari tema lain atau dari setelan sematan. Setelan tema kustom dan setelan sematan lainnya akan tetap digunakan. Misalnya, jika Anda menambahkan argumen _theme={"show_filters_bar":false}
di URL dasbor tersemat, panel filter tidak akan ditampilkan, meskipun Anda telah mengaktifkan Tampilkan Filter di setelan sematan atau di tema kustom. Namun, setelan lain dari tema kustom atau setelan sematan akan tetap digunakan.
Download dasbor akan menampilkan semua tema kustom yang diterapkan.
Membuat tema kustom
Untuk membuat tema kustom, pilih Tambahkan Tema:
Selanjutnya, tambahkan spesifikasi gaya dan warna untuk setiap setelan yang diinginkan di halaman Tema Baru.
Kecuali untuk judul tema yang harus unik, semua kolom secara otomatis diisi dengan nilai dari tema default. Anda dapat mengubah setelan apa pun, yang dijelaskan di bagian berikut. Pilih Simpan Tema untuk menyimpan perubahan dan menyimpan tema baru.
Tema
Nama: Nama untuk tema harus unik dan hanya dapat berisi karakter alfanumerik dan garis bawah. Jika Anda memasukkan spasi di nama tema, spasi akan diganti dengan garis bawah saat Anda menyimpan tema.
Umum
Setelan di bagian ini berlaku untuk dasbor tersemat dan Jelajah tersemat.
Warna Kunci: Dasbor menggunakan warna ini untuk tombol utama dan kontrol filter. Fitur Jelajah menggunakan warna ini untuk ikon dan link pemilih kolom, tombol utama, banner, dan aksen.
Warna Teks: Kode warna heksadesimal untuk teks di Jelajah dan dasbor.
Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang halaman Jelajahi dan dasbor.
Jenis Font: Nama jenis font. {i>Font<i} ini akan digunakan untuk semua teks di dasbor, termasuk judul {i>tiled<i}, {i>text tile<i}, dan legenda dalam visualisasi. Font ini juga akan digunakan untuk semua teks dalam Explore. Jika ada spasi pada nama font, gunakan tanda kutip di sekitar nama, seperti "Open Sans".
- Jika menggunakan font umum yang aman untuk web, Anda cukup mengetik nama font di kolom Font Family dan mengosongkan kolom Font Source. Jika Anda ingin menggunakan font yang kurang umum, masukkan nama font di kolom Font Family, lalu gunakan kolom Font Source, yang dijelaskan di bawah, untuk memberikan URL ke definisi font yang ingin Anda gunakan.
Font Source: Biarkan kolom ini kosong kecuali jika Anda ingin menggunakan font kustom — font yang bukan merupakan font umum yang aman untuk web. Sumber Font harus berupa URL lengkap yang dimulai dengan https
dan mengarah ke nilai url
yang ditentukan dalam argumen src
dari @font-face
. Sebaiknya gunakan file format font terbuka web (.woff
), karena file .woff2
tidak didukung oleh Internet Explorer 11.
- Misalnya, untuk PT Sans Narrow, Anda dapat memasukkan "PT Sans Narrow" di bidang Font Family lalu masukkan
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff
di kolom Font Source.
Contoh Jelajah tersemat dengan tema kustom
Contoh berikut menunjukkan Jelajah tersemat yang memiliki tema kustom. Warna Kunci disetel ke #e82042
, dan Font Family disetel ke Verdana.
Saat Anda menjalankan Explore di setelan tersemat, teks di Explore akan muncul dalam font Font Family yang ditentukan, Verdana. Warna aksen, tombol, dan link muncul di Key Color, #e82042
yang telah ditentukan:
Setelah Explore dijalankan, teks dan garis batas tombol Run akan muncul di Key Color yang ditentukan, #e82042
:
Contoh jendela edit ubin dasbor tersemat dengan tema kustom
Selain elemen Jelajahi yang dijelaskan di bagian sebelumnya, saat Anda mengedit ubin dasbor, banner muncul di bayangan yang ditentukan di setelan Warna Utama (#e82042
), dan font yang ditentukan di setelan Jenis Font (Verdana):
Halaman dasbor
Koleksi Warna: Opsional, Anda dapat memilih koleksi warna, yang merupakan kumpulan palet koordinasi yang bekerja sama dengan baik. Saat Anda menetapkan kumpulan warna ke dasbor, semua rangkaian data di semua ubin dasbor tersebut diberi warna sesuai dengan palet dalam koleksi tersebut, sehingga memastikan bahwa warna rangkaian data terkoordinasi di seluruh dasbor.
- Saat Anda menetapkan koleksi warna ke tema tersemat, koleksi warna tema akan mengganti koleksi warna apa pun yang sebelumnya ditetapkan ke kartu. Namun, koleksi warna tema tidak akan mengganti warna yang disesuaikan yang ditetapkan ke rangkaian data, dan juga tidak akan menggantikan pemformatan bersyarat yang diterapkan ke visualisasi tabel.
Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang dasbor dan latar belakang ubin teks.
Margin Atas: Opsional, menetapkan nilai tertentu untuk margin di bagian atas dasbor. Pilih dari opsi yang telah ditentukan di menu drop-down. Margin diukur dalam piksel (px).
Margin Bottom: Opsional, tetapkan nilai tertentu untuk margin di bagian bawah dasbor. Pilih dari opsi yang telah ditentukan di menu drop-down. Margin diukur dalam piksel (px).
Sisi Margin: Opsional, menetapkan nilai tertentu untuk margin di sisi dasbor. Pilih dari opsi yang telah ditentukan di menu drop-down. Margin diukur dalam piksel (px).
Ubin dasbor
Warna Judul: Kode warna heksadesimal untuk elemen berikut:
- Judul dasbor
- Judul ubin dasbor
- Judul dan teks tingkat 1 header dari kartu Markdown
- Warna teks visualisasi nilai tunggal
Warna Teks: Kode warna heksadesimal untuk elemen berikut:
- Teks di dasbor, termasuk legenda dalam visualisasi
- Subtitel dan teks isi, dengan pengecualian teks level header 1, dari kartu Markdown
- Header tingkat 1, tingkat header 2, dan teks normal pada kotak teks
- Ikon kartu dalam visualisasi nilai tunggal
Warna Isi Teks: Kode warna heksadesimal untuk elemen berikut:
- Teks isi, dengan pengecualian teks level header 2 dan teks level header 3, di kartu Markdown.
- Teks isi dalam kartu teks
Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang semua ubin kecuali ubin teks. (Ubin teks menggunakan warna latar belakang yang sama dengan dasbor, yang disetel menggunakan Background Color di bagian Dashboard Page.)
Perataan Judul: Menetapkan perataan judul ubin ke kiri, kanan, atau tengah.
Ukuran Font Judul: Opsional, sesuaikan ukuran font ubin dasbor dari serangkaian ukuran yang telah ditentukan dalam piksel.
Box Shadow: Buat bayangan di sekitar ubin dasbor menggunakan sintaksis CSS. Anda dapat memilih dari bayangan kotak standar atau membuat yang khusus. Untuk membuat bayangan kotak kustom, masukkan horizontal-offset vertical-offset blur-radius spread-radius color
yang Anda inginkan, lalu pilih Masukkan Gaya Kustom untuk menerapkan setelan Anda. Pratinjau setelan bayangan kotak ditampilkan di sebelah kanan.
Ukuran Kesenjangan Kolom: Secara opsional, sesuaikan ukuran ruang antara kolom ubin dasbor dari kumpulan ukuran yang telah ditentukan dalam piksel.
Ukuran Kesenjangan Baris: Secara opsional, sesuaikan ukuran ruang antara baris kartu dasbor dari kumpulan ukuran yang telah ditentukan dalam piksel.
Radius Batas: Opsional, sesuaikan radius batas ubin dasbor untuk membuat sudut persegi atau membulat.
Kontrol dasbor
Tampilkan Header Dasbor: Nonaktifkan opsi ini untuk menyembunyikan seluruh header dasbor, termasuk semua filter dan kontrol dasbor. Jika opsi ini dinonaktifkan, semua opsi kontrol dasbor lainnya akan dibatalkan pilihannya dan dinonaktifkan.
Tampilkan Judul Dasbor: Centang kotak untuk menampilkan judul dasbor.
Judul Dasbor Tengah: Pilih kotak centang ini untuk menampilkan judul dasbor yang rata tengah di dasbor. Jika opsi ini tidak diaktifkan, judul dasbor akan rata kiri. Opsi ini hanya tersedia jika opsi Tampilkan Judul Dasbor telah diaktifkan.
Panel Filter Tampilan: Centang kotak untuk menampilkan panel filter di bagian atas dasbor. Jika opsi ini tidak dipilih, opsi Tombol Tampilkan Filter tidak akan dipilih dan dinonaktifkan, sehingga ikon filter dasbor disembunyikan.
Tombol Filter Tampilan: Centang kotak untuk menampilkan ikon filter dasbor.
Menampilkan Indikator Dasbor yang Terakhir Diperbarui: Pilih kotak centang untuk menampilkan indikator terakhir diperbarui di dasbor.
Ikon Tampilan Ulang Data: Pilih kotak centang untuk menampilkan ikon pemuatan ulang dasbor data.
Tampilkan Menu Dasbor: Pilih kotak centang untuk menampilkan menu dasbor tiga titik. Jika opsi ini tidak dipilih, opsi menu dasbor tidak akan tersedia.
Jelajahi halaman
Dalam tema kustom, Anda dapat menyesuaikan elemen berikut pada halaman Jelajahi yang disematkan:
Header Tampilan: Nonaktifkan opsi ini untuk menyembunyikan seluruh header Jelajah tersemat, termasuk judul, indikator perjalanan terakhir, zona waktu data, tombol Jalankan, dan menu roda gigi Tindakan jelajahi.
Judul Tampilan: Nonaktifkan opsi ini untuk menyembunyikan judul Jelajah tersemat.
Tampilkan Operasi Terakhir: Nonaktifkan opsi ini untuk menyembunyikan berapa lama Explore telah dijalankan.
Zona Waktu Tampilan: Nonaktifkan opsi ini untuk menyembunyikan zona waktu data pada Jelajah tersemat.
Tampilkan Tombol Run: Nonaktifkan opsi ini untuk menyembunyikan tombol Run pada Explore yang disematkan.
Tampilkan Tombol Tindakan: Nonaktifkan opsi ini untuk menyembunyikan menu roda gigi tindakan Jelajahi di Jelajahi yang disematkan.
Halaman tampilan
Dalam tema kustom, Anda dapat menyesuaikan elemen berikut pada Tampilan yang disematkan:
Header Tampilan: Nonaktifkan opsi ini untuk menyembunyikan seluruh header Tampilan tersemat, termasuk judul, indikator pengoperasian terakhir, zona waktu data, tombol Jalankan, dan menu roda gigi Tindakan jelajahi.
Judul Tampilan: Nonaktifkan opsi ini untuk menyembunyikan judul Tampilan yang disematkan.
Display Last Run: Nonaktifkan opsi ini untuk menyembunyikan berapa lama Tampilan tersebut dijalankan.
Zona Waktu Tampilan: Nonaktifkan opsi ini untuk menyembunyikan zona waktu data pada Tampilan yang disematkan.
Display Run Button: Nonaktifkan opsi ini untuk menyembunyikan tombol Run pada Tampilan yang disematkan. Jika Tampilkan Filter di Tampilan Tersemat dinonaktifkan, tombol beralih ini tidak akan menampilkan tombol Jalankan.
Tombol Tindakan Tampilan: Nonaktifkan opsi ini untuk menyembunyikan menu roda gigi tindakan Jelajahi di Tampilan yang disematkan.
Menyalin tema
Anda dapat menyalin tema yang ada dengan memilih menu tema dan memilih Salin Tema.
Saat Anda membuat salinan tema, nama tema baru secara default akan menggunakan nama tema yang disalin, diikuti dengan "(salin)". Pastikan untuk mengubah nama ini secara manual menjadi nama baru yang unik yang hanya berisi karakter alfanumerik dan garis bawah, serta pastikan untuk menghapus tanda kurung.
Anda dapat mengedit setelan lainnya seperti yang Anda lakukan saat membuat tema baru. Untuk deskripsi setelan, lihat setelan tema yang dijelaskan sebelumnya. Pastikan untuk memilih Simpan untuk menyimpan semua setelan tema Anda.
Mengedit tema
Tema Looker dibuat secara otomatis di instance Anda, dan tidak dapat diedit. (Jika ingin mengubah tema Looker, Anda dapat membuat salinan tema, lalu mengedit salinannya.)
Untuk semua tema lainnya, Anda dapat memilih tombol Edit yang terkait untuk memperbarui setelan tema.
Anda dapat mengedit setelan seperti yang Anda lakukan saat membuat tema baru. Untuk deskripsi setelan, lihat setelan tema yang dijelaskan sebelumnya. Pastikan untuk memilih Simpan untuk menyimpan pembaruan Anda.
Menghapus tema
Anda dapat menghapus tema apa pun kecuali tema Looker atau tema yang saat ini ditetapkan sebagai default. Untuk menghapus tema, pilih menu tema, lalu pilih Hapus Tema.
Setelah Anda menghapus tema, semua dasbor tersemat yang memiliki tema tersebut yang ditentukan di URL-nya akan menggunakan tema default.
Menetapkan tema default untuk dasbor tersemat dan Jelajah
Tema kustom tidak didukung pada Tampilan yang disematkan. Tema kustom hanya tersedia untuk dasbor tersemat dan Eksplorasi tersemat.
Untuk menentukan tema default untuk dasbor tersemat dan Jelajah pada instance, pilih menu tema dan pilih Tetapkan sebagai Default.
Tema default digunakan untuk dasbor tersemat dan Jelajah di instance Looker Anda, kecuali jika Anda menentukan setelan yang berbeda untuk setiap dasbor atau Jelajah. Lihat bagian Penerapan tema dan setelan sematan di halaman ini untuk mengetahui informasi selengkapnya tentang cara penerapan tema dan setelan sematan ke dasbor tersemat atau Jelajahi.
Menerapkan tema ke dasbor tersemat dan Eksplorasi tertentu
Tema kustom tidak didukung pada Tampilan yang disematkan. Tema kustom hanya tersedia untuk dasbor tersemat dan Eksplorasi tersemat.
Jika Anda ingin dasbor atau Explore menggunakan tema selain tema default, Anda dapat menentukan tema yang berbeda di URL dasbor tersemat atau Explore. Untuk melakukannya, tambahkan parameter theme=
dengan nama tema di akhir URL sematan. Misalnya, jika memiliki tema bernama "Merah", Anda akan menambahkan theme=Red
di akhir URL dasbor sematan:
https://example.cloud.looker.com/embed/dashboards/246?theme=red
Untuk Jelajah, Anda perlu menambahkan theme=Red
di akhir URL Eksplorasi yang disematkan:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
Elemen tema di URL tidak peka huruf besar/kecil, jadi Anda dapat menggunakan theme=Red
atau theme=red
.
Menggunakan argumen URL _theme
untuk menerapkan setiap elemen tema dasbor
Anda dapat menggunakan argumen URL _theme
guna menyesuaikan setiap elemen tema untuk dasbor tersemat Anda, seperti tile_background_color
dan show_title
.
Untuk melihat semua properti yang didukung dari objek
_theme
, lihat daftar di "ThemeSettings" pada halaman dokumentasi Create Theme API.
Berikut adalah format untuk argumen URL _theme
:
_theme={"<property>":value}
Misalnya, Anda dapat menggunakan _theme={"show_filters_bar":false}
untuk menyembunyikan panel filter pada dasbor tersemat. URL lengkapnya mungkin terlihat seperti ini:
https://example.cloud.looker.com/embed/dashboards/236?_theme={"show_filters_bar":false}
Gunakan koma untuk menentukan beberapa properti tema:
_theme={"show_title":false,"show_filters_bar":false,"text_tile_text_color":"blue"}
Nilai warna harus dalam tanda kutip, dan dapat dinyatakan dengan nama warna, atau dengan kode warna heksadesimal. Jika menggunakan kode heksadesimal, pastikan menggunakan versi yang dienkode URL dari tanda #
, yaitu %23
. Misalnya, kedua argumen URL berikut menentukan warna merah:
_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}
Berikut beberapa hal yang perlu dipertimbangkan saat menggunakan objek _theme
untuk dasbor tersemat:
- Elemen apa pun yang ditentukan dalam argumen URL
_theme
akan mengganti setelan untuk elemen tersebut di tema lainnya. Hal ini menjadikan argumen_theme
sebagai cara yang praktis untuk menyempurnakan tema atau menyematkan setelan. Misalnya, Anda memiliki tema kustom yang menyembunyikan panel filter, tetapi Anda memiliki satu dasbor tempat menampilkan panel filter akan berguna. Anda dapat menggunakan tema kustom untuk dasbor, lalu menambahkan argumen_theme={"show_filters_bar":true}
di URL dasbor tersemat untuk menampilkan panel filter di dasbor tersebut, tetapi mempertahankan semua setelan tema kustom lainnya. Lihat bagian Penerapan tema dan setelan sematan di halaman ini untuk mengetahui informasi selengkapnya tentang cara penerapan tema dan setelan sematan ke dasbor sematan. - Untuk skrip pemrograman, Anda harus mengenkode argumen
_theme
ke URL. - Argumen
_theme
tidak diterapkan saat mengirimkan dasbor tersemat dalam format PDF. - Argumen
_theme
diterapkan jika Anda mendownload dasbor sebagai PDF.