Setelan admin - Tema

Anda dapat menggunakan tema kustom untuk menyesuaikan tampilan dasbor, Tampilan, dan Jelajah Looker tersemat. 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 tersemat.

Untuk informasi tentang cara menetapkan tema default untuk dasbor dan Jelajahi, atau untuk menerapkan tema ke dasbor atau Jelajahi tertentu, lihat halaman dokumentasi Memulai penyematan — menerapkan tema kustom.

Anda dapat menentukan tema untuk dasbor sematan, Jelajah sematan, dan jendela edit untuk kartu di dasbor sematan dari halaman Tema di bagian Platform pada panel Admin.

Halaman ini menjelaskan hal berikut:

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 tersemat dan Jelajah tersemat.

Nama Setelan Nilai Catatan
Warna Kunci #1A73E8 Dasbor menggunakan warna ini untuk tombol utama dan kontrol filter.

Jelajahi menggunakan warna ini untuk tombol, banner, dan aksen utama.
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 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 khusus atau dengan prioritas lebih tinggi 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 #f6f8fa

Kartu 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
Menampilkan Judul Dasbor Ya
Panel Filter Tampilan Ya

Halaman Jelajahi

Nama Setelan Nilai
Header Tampilan Ya
Judul Tampilan Ya
Menampilkan Terakhir Dijalankan Ya
Menampilkan Zona Waktu Ya
Menampilkan Tombol Run Ya
Tombol Setelan Layar Ya

Halaman tampilan

Nama Setelan Nilai
Header Tampilan Ya
Judul Tampilan Ya
Menampilkan Terakhir Dijalankan Ya
Menampilkan Zona Waktu Ya
Menampilkan Tombol Run Ya
Tombol Setelan Layar Ya

Berikut adalah contoh dasbor, jendela edit kartu dasbor, dan Jelajahi dengan tema Looker.

Contoh dasbor dengan tema Looker

Dasbor Looker tersemat yang menggunakan tema Looker default.

Contoh jendela edit kartu dasbor dengan tema Looker

Dialog Edit Kartu di dasbor Looker tersemat menggunakan tema Looker default.

Contoh halaman Jelajah dengan tema Looker

Jelajah Looker tersemat menggunakan tema Looker default.

Cara penerapan tema dan setelan penyematan

Anda dapat mengubah tampilan dasbor tersemat atau Jelajah dari tema default menggunakan tema kustom dan argumen URL. Saat menampilkan dasbor tersemat atau Jelajahi, Looker menerapkan setelan dalam urutan berikut:

  1. Dimulai dengan setelan dari tema default
  2. Menerapkan setelan dari tema kustom yang ditentukan dalam argumen theme URL, jika ada
  3. Menerapkan properti yang ditentukan dalam argumen URL _theme, jika ada (khusus dasbor)

Setiap item akan menggantikan item sebelumnya, yang berarti setelan penyematan akan menggantikan setelan tema default, dan tema kustom akan menggantikan setelan penyematan dan tema default.

Namun, dalam kasus argumen URL _theme, hanya elemen yang ditentukan dalam argumen _theme yang akan menggantikan elemen dari tema lain atau dari setelan penyematan. Setelan tema kustom dan setelan penyematan 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 penyematan atau di tema kustom. Namun, setelan lain dari tema kustom atau setelan penyematan akan tetap digunakan.

Download dasbor akan menampilkan tema kustom yang diterapkan.

Membuat tema kustom

Untuk membuat tema kustom, pilih Tambahkan Tema:

Tombol Tambahkan Tema muncul di bagian atas halaman 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.

Tema

Nama: Nama untuk 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 tersemat dan Jelajah tersemat.

Warna Tombol: Dasbor menggunakan warna ini untuk tombol utama dan kontrol filter. Jelajah menggunakan warna ini untuk link dan ikon pemilih kolom, tombol utama, banner, dan aksen.

Warna Teks: Kode warna heksadesimal untuk teks di Jelajahi dan dasbor.

Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang halaman Jelajahi dan dasbor.

Font Family: 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 Jelajahi. Jika ada spasi dalam 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 Jenis Font dan membiarkan kolom Sumber Font kosong. 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: Kosongkan kolom ini kecuali jika Anda ingin menggunakan font kustom — font yang bukan font web-safe umum. 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 kolom Font Family, lalu memasukkan https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff di kolom Font Source.

Contoh Jelajahi tersemat dengan tema kustom

Contoh berikut menunjukkan Jelajah tersemat yang memiliki tema kustom. Warna Kunci ditetapkan ke #e82042, dan Jenis Font ditetapkan ke Verdana.

Saat Anda menjalankan Jelajah di setelan tersemat, teks di Jelajah akan muncul dalam font Jenis Font yang ditentukan, Verdana. Warna aksen, tombol, dan link muncul dalam Warna Tombol yang ditentukan, #e82042:

Jelajah tersemat dengan warna #e82042 diterapkan ke tombol Tambahkan, tombol Buka LookML, tombol menu roda gigi, dan judul analisis Mulai Cepat.

Setelah Eksplorasi dijalankan, garis batas dan teks tombol Run akan muncul dalam Key Color yang ditentukan, #e82042:

Jelajahi tersemat dengan warna #e82042 diterapkan ke tombol Run.

Contoh jendela edit kartu dasbor sematan dengan tema kustom

Selain elemen Jelajahi yang dijelaskan di bagian sebelumnya, saat Anda mengedit kartu dasbor, banner akan muncul dalam nuansa yang ditentukan di setelan Warna Utama (#e82042), dan font yang ditentukan di setelan Jenis Font (Verdana):

Dialog Edit Kartu di dasbor Looker tersemat dengan warna #e82042 diterapkan ke banner, dan Jenis Font Verdana diterapkan ke semua teks di halaman.

Halaman dasbor

Koleksi Warna: Secara opsional, Anda dapat memilih koleksi warna, yang merupakan serangkaian palet koordinatif yang cocok satu sama lain. Saat Anda menetapkan koleksi warna ke dasbor, semua deret data di semua kartu dasbor akan diwarnai sesuai dengan palet dalam koleksi, sehingga memastikan warna deret data dikoordinasikan di seluruh dasbor.

  • Saat Anda menetapkan koleksi warna ke tema tersemat, koleksi warna tema akan mengganti koleksi warna yang sebelumnya ditetapkan ke kartu. Namun, koleksi warna tema tidak akan menggantikan warna kustom yang ditetapkan ke deret 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 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 di menu drop-down. Margin diukur dalam piksel (px).

Margin Sisi: Secara opsional, tetapkan nilai tertentu untuk margin di sisi dasbor. Pilih dari opsi yang telah ditentukan di menu drop-down. Margin diukur dalam piksel (px).

Kartu dasbor

Warna Judul: Kode warna heksadesimal untuk elemen berikut:

Warna Teks: Kode warna heksadesimal untuk elemen berikut:

  • Teks di dasbor, termasuk legenda dalam visualisasi
  • Teks subjudul dan isi, dengan pengecualian teks header level 1, dari kartu Markdown
  • Judul level 1, judul level 2, dan teks normal di kartu teks
  • Ikon kartu di visualisasi nilai tunggal

Warna Isi Teks: Kode warna heksadesimal untuk elemen berikut:

  • Teks isi, dengan pengecualian teks header level 2 dan header level 3, di kartu Markdown.
  • Teks isi dalam kartu teks

Warna Latar Belakang: Kode warna heksadesimal untuk latar belakang semua kartu kecuali kartu teks. (Kartu 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: Secara opsional, sesuaikan ukuran font kartu dasbor dari serangkaian ukuran yang telah ditentukan dalam piksel.

Box Shadow: Membuat bayangan di sekitar kartu dasbor menggunakan sintaksis CSS. Anda dapat memilih dari bayangan kotak yang telah ditetapkan atau membuat bayangan kotak kustom. Untuk membuat bayangan kotak kustom, masukkan horizontal-offset vertical-offset blur-radius spread-radius color yang diinginkan, lalu pilih Masukkan Gaya Kustom untuk menerapkan setelan Anda. Pratinjau setelan bayangan kotak ditampilkan di sebelah kanan.

Column Gap Size: Menyesuaikan ukuran spasi antarkolom kartu dasbor dari serangkaian ukuran standar dalam piksel.

Ukuran Jeda Baris: Menyesuaikan ukuran spasi antarbaris kartu dasbor dari serangkaian ukuran yang telah ditentukan sebelumnya dalam piksel.

Radius Batas: Secara opsional, sesuaikan radius batas kartu 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.

Center Dashboard Title: Centang kotak ini untuk menampilkan judul dasbor yang dipusatkan di dasbor. Jika opsi ini tidak diaktifkan, judul dasbor akan disejajarkan ke 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 Tombol Tampilkan Filter akan dibatalkan pilihannya dan dinonaktifkan, sehingga menyembunyikan ikon filter dasbor.

Tombol Tampilkan Filter: Centang kotak untuk menampilkan ikon filter dasbor.

Tampilkan Indikator Dasbor Terakhir Diperbarui: Pilih kotak centang untuk menampilkan indikator dasbor terakhir diperbarui.

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 dibatalkan pilihannya, opsi menu dasbor tidak akan tersedia.

Halaman Jelajahi

Dalam tema kustom, Anda dapat menyesuaikan elemen berikut di halaman Jelajahi sematan:

Tampilkan Header: Nonaktifkan opsi ini untuk menyembunyikan seluruh header Jelajah yang disematkan, termasuk judul, indikator terakhir dijalankan, zona waktu data, tombol Jalankan, dan menu roda gigi Tindakan jelajah.

Tampilkan Judul: Nonaktifkan opsi ini untuk menyembunyikan judul Jelajah yang disematkan.

Tampilkan Terakhir Dijalankan: Nonaktifkan opsi ini untuk menyembunyikan berapa lama Jelajah dijalankan.

Tampilkan Zona Waktu: Nonaktifkan opsi ini untuk menyembunyikan zona waktu data di Jelajah yang disematkan.

Tampilkan Tombol Jalankan: Nonaktifkan opsi ini untuk menyembunyikan tombol Jalankan di Jelajahi yang disematkan.

Tampilkan Tombol Tindakan: Nonaktifkan opsi ini untuk menyembunyikan menu roda gigi tindakan Jelajahi di Jelajahi tersemat.

Halaman tampilan

Dalam tema kustom, Anda dapat menyesuaikan elemen berikut pada Tampilan sematan:

Tampilkan Header: Nonaktifkan opsi ini untuk menyembunyikan seluruh header Tampilan tersemat, termasuk judul, indikator terakhir dijalankan, zona waktu data, tombol Jalankan, dan menu roda gigi Jelajahi tindakan.

Tampilkan Judul: Nonaktifkan opsi ini untuk menyembunyikan judul Tampilan tersemat.

Tampilkan Terakhir Dijalankan: Nonaktifkan opsi ini untuk menyembunyikan berapa lama Tampilan dijalankan.

Tampilkan Zona Waktu: Nonaktifkan opsi ini untuk menyembunyikan zona waktu data pada Tampilan tersemat.

Tampilkan Tombol Jalankan: Nonaktifkan opsi ini untuk menyembunyikan tombol Jalankan pada Tampilan tersemat. Jika Tampilkan Filter pada Tampilan Tersemat dinonaktifkan, tombol ini tidak akan menampilkan tombol Jalankan.

Tampilkan Tombol Tindakan: Nonaktifkan opsi ini untuk menyembunyikan Menu roda gigi Jelajahi tindakan pada Tampilan tersemat.

Menyalin tema

Anda dapat menyalin tema yang ada dengan memilih menu tema dan memilih Salin Tema.

Saat Anda membuat salinan tema, nama tema baru akan ditetapkan secara default ke nama tema yang disalin, diikuti dengan "(salinan)". Pastikan untuk mengubah nama ini secara manual menjadi nama baru yang unik hanya dengan karakter alfanumerik dan garis bawah, dan 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 guna mempertahankan 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 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 deskripsi setelan, lihat setelan tema yang dijelaskan sebelumnya. Pastikan untuk memilih Simpan untuk menyimpan pembaruan.

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, dasbor tersemat yang memiliki tema tersebut yang ditentukan dalam URL-nya akan menggunakan tema default.

Menetapkan tema default untuk dasbor tersemat dan Jelajah

Tema kustom tidak didukung di Tampilan tersemat. Tema kustom hanya tersedia untuk dasbor sematan dan Jelajah sematan.

Untuk menentukan tema default bagi dasbor tersemat dan Jelajah 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 setiap dasbor atau Jelajah. Lihat bagian Cara penerapan tema dan setelan penyematan di halaman ini untuk mengetahui informasi selengkapnya tentang cara penerapan tema dan setelan penyematan ke dasbor tersemat atau Jelajahi.

Menerapkan tema ke dasbor sematan dan Eksplorasi tertentu

Tema kustom tidak didukung di Tampilan tersemat. Tema kustom hanya tersedia untuk dasbor sematan dan Jelajah sematan.

Jika ingin dasbor atau Eksplorasi menggunakan tema selain tema default, Anda dapat menentukan tema yang berbeda di URL dasbor atau Eksplorasi tersemat. Untuk melakukannya, tambahkan parameter theme= dengan nama tema ke 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 Jelajahi, Anda harus menambahkan theme=Red di akhir URL Jelajahi sematan: none https://example.cloud.looker.com/embed/explore/model_name/explore_name?theme=red

Elemen tema dalam URL tidak peka huruf besar/kecil, sehingga Anda dapat menggunakan theme=Red atau theme=red.

Menggunakan argumen URL _theme untuk menerapkan setiap elemen tema dasbor

Anda dapat menggunakan argumen URL _theme untuk menyesuaikan setiap elemen tema untuk dasbor tersemat, seperti tile_background_color dan show_title.

Berikut adalah format untuk argumen URL _theme:

_theme={"<property>":value}

Misalnya, Anda dapat menggunakan _theme={"show_filters_bar":false} untuk menyembunyikan panel filter dasbor tersemat. 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 kutip, dan dapat dinyatakan dengan nama warna, atau dengan kode warna heksadesimal. Jika menggunakan kode hex, pastikan untuk menggunakan tanda # versi yang dienkode URL, 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 tersemat:

  • Setiap elemen yang ditentukan dalam argumen URL _theme akan menggantikan setelan untuk elemen tersebut di tema lain. Hal ini menjadikan argumen _theme sebagai cara praktis untuk meningkatkan kualitas tema atau menyematkan setelan. Misalnya, Anda memiliki tema kustom yang menyembunyikan panel filter, tetapi Anda memiliki satu dasbor yang menampilkan panel filter. 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 Cara penerapan tema dan setelan penyematan di halaman ini untuk mengetahui informasi selengkapnya tentang cara penerapan tema dan setelan penyematan ke dasbor tersemat.
  • Untuk skrip pemrograman, Anda harus mengenkode URL argumen _theme.
  • Argumen _theme tidak diterapkan saat mengirimkan dasbor tersemat dalam format PDF.
  • Argumen _theme diterapkan jika Anda mendownload dasbor sebagai PDF.