Anda dapat menggunakan tema kustom untuk menyesuaikan tampilan dasbor, Look, dan Eksplorasi Looker sematan. Anda dapat menggunakan tema untuk menyesuaikan jenis font, warna teks, warna latar belakang, warna tombol, warna kartu, dan elemen visual lainnya.
Misalnya, Anda dapat membuat tema "gelap" untuk mengubah tampilan dasbor sematan.
Untuk mengetahui informasi tentang cara menetapkan tema default untuk dasbor dan Eksplorasi, atau untuk menerapkan tema ke dasbor atau Eksplorasi tertentu, lihat halaman dokumentasi Memulai penyematan — menerapkan tema kustom.
Anda dapat menentukan tema untuk dasbor sematan, Eksplorasi sematan, dan jendela pengeditan untuk kartu di dasbor sematan dari halaman Tema di bagian Platform pada panel Admin.
Halaman ini menjelaskan hal berikut:
- Persyaratan
- Tema default Looker
- Cara tema diterapkan ke dasbor dan Jelajah sematan
- Cara membuat, menyalin, mengedit, dan menghapus tema kustom
- Cara menetapkan tema default untuk dasbor dan Eksplorasi
- Cara menerapkan tema selain tema default ke dasbor dan Eksplorasi yang dipilih
- Cara menerapkan argumen URL
_theme
untuk memilih elemen tema dasbor
Persyaratan
Untuk mengelola tema di instance Looker, Anda harus memenuhi persyaratan berikut:
- Jika instance Anda adalah instance Looker (asli), fitur yang memungkinkan Anda menyesuaikan tema untuk dasbor, Look, dan Jelajah yang disematkan harus diaktifkan oleh Looker. Hubungi Google Cloud spesialis penjualan untuk memperbarui lisensi Anda agar dapat menggunakan fitur ini.
- Jika instance Anda adalah instance Looker (Google Cloud core), tema sematan tersedia untuk edisi Enterprise dan Embed, tetapi tidak untuk edisi Standard.
- Pengguna Looker Anda harus memiliki peran Admin atau izin
manage_themes
.
Tema default
Tema default Looker dibuat secara otomatis di instance Anda, dan tidak dapat dihapus atau diedit. Tema Looker digunakan sebagai tema default kecuali jika admin Looker menentukan tema lain sebagai default.
Setelan tema Looker, yang dapat Anda lihat dengan memilih tombol Lihat 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 sematan dan Eksplorasi sematan.
Nama Setelan | Nilai | Catatan |
---|---|---|
Warna Utama | #1A73E8 |
Dasbor menggunakan warna ini untuk tombol utama dan kontrol filter.Eksplorasi menggunakan warna ini untuk tombol utama, banner, dan aksen. |
Warna Teks | #3e3f40 |
|
Warna Latar Belakang | #f6f8fa |
|
Jenis Font | Roboto, Noto Sans JP, Noto Sans CJK KR, Noto Sans Arabic UI, Noto Sans Devanagari UI, Noto Sans Hebrew, Noto Sans Thai UI, Helvetica, Arial, sans-serif | Font ini ditayangkan 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 dengan prioritas lebih tinggi atau khusus harus dicantumkan terlebih dahulu. Looker menggunakan variasi font "UI" jika tersedia sehingga karakter sedikit dimodifikasi agar lebih sesuai dengan batas komponen visual. |
Sumber Font | Tidak ada |
Halaman dasbor
Nama Setelan | Nilai |
---|---|
Koleksi Warna | Tidak ada |
Warna Latar Belakang | #f6f8fa |
Kartu Dasbor
Nama Setelan | Nilai |
---|---|
Warna Judul | #3a4245 |
Warna Teks | #3a4245 |
Warna Isi Teks | Tidak ada |
Warna Latar Belakang | #ffffff |
Perataan Judul | Tengah |
Kontrol Dasbor
Nama Setelan | Nilai |
---|---|
Menampilkan Judul Dasbor | Ya |
Menampilkan Panel Filter | Ya |
Jelajahi halaman
Nama Setelan | Nilai |
---|---|
Header Tampilan | Ya |
Judul Tampilan | Ya |
Menampilkan Operasi Terakhir | Ya |
Zona Waktu Tampilan | Ya |
Menampilkan Tombol Jalankan | Ya |
Tombol Setelan Layar | Ya |
Halaman Look
Nama Setelan | Nilai |
---|---|
Header Tampilan | Ya |
Judul Tampilan | Ya |
Menampilkan Operasi Terakhir | Ya |
Zona Waktu Tampilan | Ya |
Menampilkan Tombol Jalankan | Ya |
Tombol Setelan Layar | Ya |
Berikut adalah contoh dasbor, jendela pengeditan kartu dasbor, dan Eksplorasi dengan tema Looker.
Contoh dasbor dengan tema Looker
Contoh jendela pengeditan kartu dasbor dengan tema Looker
Contoh halaman Jelajah dengan tema Looker
Cara penerapan tema dan setelan sematan
Anda dapat mengubah tampilan dasbor atau Eksplorasi yang disematkan dari tema default menggunakan tema kustom dan argumen URL. Saat menampilkan dasbor atau Eksplorasi sematan, Looker menerapkan setelan dalam 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 menggantikan item sebelumnya, yang berarti bahwa setelan sematan menggantikan setelan tema default, dan tema kustom menggantikan setelan sematan dan tema default.
Namun, dalam kasus argumen URL _theme
, hanya elemen yang ditentukan dalam argumen _theme
yang 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 sematan, 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 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 judul tema, yang harus unik, semua kolom akan otomatis diisi dengan nilai dari tema default. Anda dapat mengubah setelan apa pun, yang dijelaskan di bagian berikut. Pilih Simpan Tema untuk mempertahankan perubahan dan menyimpan tema baru Anda.
Tema
Nama: Nama tema harus unik dan hanya boleh berisi karakter alfanumerik dan garis bawah. Jika Anda memasukkan spasi dalam nama tema, spasi akan diganti dengan garis bawah saat Anda menyimpan tema.
Umum
Setelan di bagian ini berlaku untuk dasbor sematan dan Eksplorasi sematan.
Warna Utama: Dasbor menggunakan warna ini untuk tombol utama dan kontrol filter. Eksplorasi menggunakan warna ini untuk link dan ikon pemilih kolom, tombol utama, banner, dan aksen.
Warna Teks: Kode warna heksadesimal untuk teks di Eksplorasi dan dasbor.
Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang halaman Jelajahi dan dasbor.
Jenis Font: Nama jenis font. Font ini akan digunakan untuk semua teks di dasbor, termasuk judul kartu, kartu teks, dan legenda dalam visualisasi. Font ini juga akan digunakan untuk semua teks di Eksplorasi. Jika ada spasi dalam nama font, gunakan tanda kutip di sekitar nama, seperti "Open Sans".
- Jika Anda menggunakan font umum yang aman untuk web, Anda cukup mengetik nama font di kolom Jenis Font dan mengosongkan kolom Sumber Font. Jika Anda ingin menggunakan font yang kurang umum, masukkan nama font di kolom Jenis Font, lalu gunakan kolom Sumber Font, yang dijelaskan berikutnya, untuk memberikan URL ke definisi font yang ingin Anda gunakan.
Sumber Font: Kosongkan kolom ini kecuali jika Anda ingin menggunakan font kustom — font yang bukan font umum yang aman untuk web. Font Source 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 kolom Font Family, lalu memasukkan
https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff
di kolom Font Source.
Contoh Explore sematan dengan tema kustom
Contoh berikut menunjukkan Eksplorasi sematan yang memiliki tema kustom. Warna Utama disetel ke #e82042
, dan Jenis Font disetel ke Verdana.
Saat Anda menjalankan Eksplorasi dalam setelan sematan, teks dalam Eksplorasi akan muncul dalam font Jenis Font yang ditentukan, Verdana. Warna aksen, tombol, dan link muncul dalam Warna Utama yang ditentukan, #e82042
:
Setelah Eksplorasi dijalankan, garis batas dan teks tombol Jalankan akan muncul dalam Warna Utama yang ditentukan, #e82042
:
Contoh jendela pengeditan kartu dasbor sematan dengan tema kustom
Selain elemen Jelajahi yang dijelaskan di bagian sebelumnya, saat Anda mengedit kartu dasbor, banner akan muncul dalam warna yang ditentukan dalam setelan Warna Utama (#e82042
), dan font yang ditentukan dalam setelan Jenis Font (Verdana):
Halaman dasbor
Koleksi Warna: Secara opsional, Anda dapat memilih koleksi warna, yaitu sekumpulan palet yang serasi dan cocok digunakan bersama. Saat Anda menetapkan kumpulan warna ke dasbor, semua deret data di semua kartu dasbor diberi warna sesuai dengan palet dalam kumpulan, sehingga memastikan warna deret data dikoordinasikan di seluruh dasbor.
- Saat Anda menetapkan koleksi warna ke tema sematan, koleksi warna tema akan menggantikan koleksi warna yang sebelumnya ditetapkan ke kartu. Namun, kumpulan warna tema tidak akan menggantikan warna yang disesuaikan yang ditetapkan ke deretan data, atau menggantikan pemformatan bersyarat yang diterapkan ke visualisasi tabel.
Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang dasbor dan latar belakang kartu teks.
Margin Atas: Secara opsional, tetapkan nilai tertentu untuk margin di bagian atas dasbor. Pilih dari opsi yang telah ditentukan sebelumnya di menu drop-down. Margin diukur dalam piksel (px).
Margin Bawah: Secara opsional, tetapkan nilai tertentu untuk margin di bagian bawah dasbor. Pilih dari opsi yang telah ditentukan sebelumnya di menu drop-down. Margin diukur dalam piksel (px).
Sisi Margin: Secara opsional, tetapkan nilai tertentu untuk margin di sisi dasbor. Pilih dari opsi yang telah ditentukan sebelumnya di menu drop-down. Margin diukur dalam piksel (px).
Kartu dasbor
Warna Judul: Kode warna heksadesimal untuk elemen berikut:
- Judul dasbor
- Judul kartu dasbor
- Judul dan teks level 1 header pada kartu Markdown
- Warna teks visualisasi nilai tunggal
Warna Teks: Kode warna heksadesimal untuk elemen berikut:
- Teks di dasbor, termasuk legenda dalam visualisasi
- Teks isi dan subtitel, kecuali teks tingkat header 1, pada kartu Markdown
- Judul level 1, judul level 2, dan teks normal pada kartu teks
- Ikon kartu dalam visualisasi nilai tunggal
Warna Isi Teks: Kode warna heksadesimal untuk elemen berikut:
- Teks isi, kecuali teks header level 2 dan header level 3, dalam kartu Markdown.
- Teks isi dalam kartu teks
Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang semua kartu, kecuali kartu teks. (Petak teks menggunakan warna latar belakang yang sama dengan dasbor, yang ditetapkan menggunakan Warna Latar Belakang di bagian Halaman Dasbor.)
Perataan Judul: Tetapkan perataan judul kartu ke kiri, kanan, atau tengah.
Ukuran Font Judul: Sesuaikan ukuran font kartu dasbor dari serangkaian ukuran yang telah ditentukan sebelumnya dalam piksel.
Box Shadow: Buat bayangan di sekitar kartu dasbor menggunakan sintaksis CSS. Anda dapat memilih bayangan kotak yang telah ditentukan atau membuat bayangan kotak kustom. 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 Ruang Kolom: Secara opsional, sesuaikan ukuran ruang di antara kolom kartu dasbor dari serangkaian ukuran standar dalam piksel.
Ukuran Jarak Baris: Anda dapat menyesuaikan ukuran ruang antar-baris kartu dasbor dari serangkaian ukuran dalam piksel yang telah ditentukan sebelumnya.
Radius Batas: Sesuaikan radius batas kartu dasbor secara opsional untuk membuat sudut persegi atau bulat.
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 pemilihannya dan dinonaktifkan.
Tampilkan Judul Dasbor: Centang kotak untuk menampilkan judul dasbor.
Judul Dasbor Tengah: Centang kotak ini untuk menampilkan judul dasbor yang rata tengah di dasbor. Jika opsi ini tidak diaktifkan, judul dasbor akan diratakan kiri. Opsi ini hanya tersedia jika opsi Tampilkan Judul Dasbor telah diaktifkan.
Tampilkan Panel Filter: Centang kotak untuk menampilkan panel filter di bagian atas dasbor. Jika opsi ini tidak dipilih, opsi Tampilkan Tombol Filter akan dibatalkan dan dinonaktifkan, sehingga menyembunyikan ikon filter dasbor.
Tombol Filter Tampilan: Centang kotak untuk menampilkan ikon filter dasbor.
Tampilkan Indikator Terakhir Diperbarui Dasbor: Centang kotak untuk menampilkan indikator terakhir diperbarui dasbor.
Tampilkan Ikon Muat Ulang Data: Centang kotak untuk menampilkan ikon muat ulang data dasbor.
Tampilkan Menu Dasbor: Centang kotak untuk menampilkan menu dasbor tiga titik. Jika opsi ini tidak dipilih, opsi menu dasbor tidak tersedia.
Jelajahi halaman
Dalam tema kustom, Anda dapat menyesuaikan elemen berikut di halaman Jelajah sematan:
Tampilkan Header: Nonaktifkan opsi ini untuk menyembunyikan seluruh header Explore yang disematkan, termasuk judul, indikator terakhir dijalankan, zona waktu data, tombol Jalankan, dan menu roda gigi Tindakan Explore.
Judul Tampilan: Nonaktifkan opsi ini untuk menyembunyikan judul Eksplorasi yang disematkan.
Tampilkan Run Terakhir: Nonaktifkan opsi ini untuk menyembunyikan berapa lama Explore dijalankan.
Tampilkan Zona Waktu: Nonaktifkan opsi ini untuk menyembunyikan zona waktu data pada Eksplorasi sematan.
Tampilkan Tombol Jalankan: Nonaktifkan opsi ini untuk menyembunyikan tombol Jalankan pada Eksplorasi yang disematkan.
Tampilkan Tombol Tindakan: Nonaktifkan opsi ini untuk menyembunyikan menu roda gigi Jelajahi tindakan pada Jelajah yang disematkan.
Halaman Look
Dalam tema kustom, Anda dapat menyesuaikan elemen berikut pada Look sematan:
Tampilkan Header: Nonaktifkan opsi ini untuk menyembunyikan seluruh header Look yang disematkan, termasuk judul, indikator terakhir dijalankan, zona waktu data, tombol Jalankan, dan menu roda gigi Tindakan eksplorasi.
Tampilkan Judul: Nonaktifkan opsi ini untuk menyembunyikan judul Look yang disematkan.
Tampilkan Terakhir Dijalankan: Nonaktifkan opsi ini untuk menyembunyikan berapa lama Look dijalankan.
Zona Waktu Tampilan: Nonaktifkan opsi ini untuk menyembunyikan zona waktu data pada Look yang disematkan.
Tampilkan Tombol Jalankan: Nonaktifkan opsi ini untuk menyembunyikan tombol Jalankan pada Look yang disematkan. Jika Tampilkan Filter pada Tampilan Sematan dinonaktifkan, tombol ini tidak menampilkan tombol Jalankan.
Tampilkan Tombol Tindakan: Nonaktifkan opsi ini untuk menyembunyikan menu roda gigi Jelajahi tindakan pada Look 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 adalah nama tema yang disalin, diikuti dengan "(salinan)". Pastikan untuk mengubah nama ini secara manual menjadi nama baru yang unik dengan hanya 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 mengetahui deskripsi setelan, lihat setelan tema yang dijelaskan sebelumnya. Pastikan untuk memilih Simpan agar semua setelan tema Anda tetap tersimpan.
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 salinan tersebut.)
Untuk semua tema lainnya, Anda dapat memilih tombol Edit terkait untuk memperbarui setelan tema.
Anda dapat mengedit setelan seperti yang Anda lakukan saat membuat tema baru. Untuk mengetahui deskripsi setelan, lihat setelan tema yang dijelaskan sebelumnya. Pastikan untuk memilih Simpan agar pembaruan Anda tetap ada.
Menghapus tema
Anda dapat menghapus tema apa pun kecuali tema Looker atau tema yang ditetapkan sebagai default. Untuk menghapus tema, pilih menu tema, lalu pilih Hapus Tema.
Setelah Anda menghapus tema, dasbor sematan yang menentukan tema tersebut di URL-nya akan menggunakan tema default.
Menetapkan tema default untuk dasbor dan Eksplorasi sematan
Tema kustom tidak didukung di Look yang disematkan. Tema kustom hanya tersedia untuk dasbor sematan dan Eksplorasi sematan.
Untuk menentukan tema default bagi dasbor dan Eksplorasi yang disematkan di instance Anda, pilih menu tema, lalu pilih Tetapkan sebagai Default.
Tema default digunakan untuk dasbor dan Jelajah tersemat di instance Looker Anda, kecuali jika Anda menentukan setelan yang berbeda untuk dasbor atau Jelajah tertentu. Lihat bagian Cara tema dan setelan sematan diterapkan di halaman ini untuk mengetahui informasi selengkapnya tentang cara tema dan setelan sematan diterapkan ke dasbor atau Eksplorasi yang disematkan.
Menerapkan tema ke dasbor dan Eksplorasi sematan tertentu
Tema kustom tidak didukung di Look yang disematkan. Tema kustom hanya tersedia untuk dasbor sematan dan Eksplorasi sematan.
Jika ingin dasbor atau Eksplorasi menggunakan tema selain tema default, Anda dapat menentukan tema lain di URL dasbor atau Eksplorasi yang disematkan. Untuk melakukannya, tambahkan parameter theme=
dengan nama tema di akhir URL sematan. Misalnya, jika Anda 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 Eksplorasi, Anda akan menambahkan theme=Red
di akhir URL sematan Eksplorasi:
none
https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red
Elemen tema dalam URL tidak peka huruf besar/kecil, jadi Anda dapat menggunakan theme=Red
atau theme=red
.
Menggunakan argumen URL _theme
untuk menerapkan elemen tema dasbor satu per satu
Anda dapat menggunakan argumen URL _theme
untuk menyesuaikan setiap elemen tema untuk dasbor sematan, seperti tile_background_color
dan show_title
.
Berikut format untuk argumen URL _theme
:
_theme={"<property>":value}
Misalnya, Anda dapat menggunakan _theme={"show_filters_bar":false}
untuk menyembunyikan panel filter dasbor sematan. URL lengkap 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 petik, dan dapat dinyatakan dengan nama warna, atau dengan kode warna heksadesimal. Jika menggunakan kode hex, pastikan untuk menggunakan versi yang dienkode URL dari tanda #
, yaitu %23
. Misalnya, kedua argumen URL ini menentukan warna merah:
_theme={"title_color":"red","text_tile_text_color":"%23FF0000"}
Berikut beberapa hal yang perlu dipertimbangkan saat menggunakan objek _theme
untuk dasbor sematan:
- Elemen apa pun yang ditentukan dalam argumen URL
_theme
akan menggantikan setelan untuk elemen tersebut dalam tema lain. Hal ini menjadikan argumen_theme
cara praktis untuk menyempurnakan tema atau menyematkan setelan. Misalnya, Anda memiliki tema kustom yang menyembunyikan panel filter, tetapi Anda memiliki satu dasbor yang akan lebih baik jika panel filter ditampilkan. Anda dapat menggunakan tema kustom untuk dasbor, lalu menambahkan argumen_theme={"show_filters_bar":true}
di URL dasbor sematan untuk menampilkan panel filter di dasbor tersebut, tetapi tetap mempertahankan semua setelan tema kustom lainnya. Lihat bagian Cara tema dan setelan sematan diterapkan di halaman ini untuk mengetahui informasi selengkapnya tentang cara tema dan setelan sematan diterapkan ke dasbor sematan. - Untuk skrip pemrograman, Anda harus mengenkode URL argumen
_theme
. - Argumen
_theme
tidak diterapkan saat mengirimkan dasbor sematan dalam format PDF. - Argumen
_theme
diterapkan jika Anda mendownload dasbor sebagai PDF.