Menyesuaikan tema

Anda sedang melihat dokumentasi Apigee Edge.
Buka Dokumentasi Apigee X. info

Tema adalah kumpulan file yang menentukan tampilan dan nuansa situs. Tujuan Portal Layanan Developer awalnya ditentukan dengan tema default, yang dapat Anda sesuaikan. Tindakan ini memungkinkan Anda memilih preferensi tampilan dan nuansa portal. Selengkapnya khususnya, Anda dapat mengubah warna link, latar belakang, teks, dan elemen tema lainnya. Anda juga dapat mengubah pesan selamat datang yang muncul di halaman depan portal developer.

Anda dapat menyesuaikan tema melalui UI portal developer, atau dengan menulis kode di file tema untuk mengganti file tema default.

Bergantung pada versi portal developer, Anda akan memiliki beberapa tema untuk dipilih dari:

Tema	Deskripsi
Tema Responsif Apigee	Berdasarkan Bootstrap 3, tema default untuk rilis portal selanjutnya. Tema ini mendukung perangkat dengan lebar mulai dari 768 piksel hingga 1400 piksel. Semua fitur Bootstrap 3 tersedia dalam tema ini. Catatan: Untuk menggunakan tema Responsif Apigee, pastikan bahwa Bootstrap Tema 7.x-3.0 diaktifkan.
Tema Apigee DevConnect	Tema portal default sebelumnya di tema Apigee Responsif. Portal yang ada dapat diupgrade ke tema Responsif Apigee yang baru, tetapi harus terlebih dahulu memastikan semua blok, template, dan konten lainnya kompatibel dengan Bootstrap 3, dan bahwa tema Bootstrap 7.x-3.0 diaktifkan.
Tema Dasar Apigee	Tema induk untuk tema Apigee DevConnect dan tidak dimaksudkan untuk digunakan pada sendiri.

Menyetel tema default

Jika portal Anda masih menggunakan tema Apigee DevConnect lama, Anda mungkin melihat peringatan dalam bentuk:

"Apigee DevConnect theme" is out of date 

Anda dapat menggunakan prosedur berikut untuk menyetel tema default untuk portal. Anda seharusnya selalu menguji tema baru terlebih dulu pada sistem non-produksi sebelum men-deploy tema ke produksi.

Untuk menetapkan tema default:

1. Login ke portal Anda sebagai pengguna dengan hak istimewa admin atau pembuatan konten.
2. Pilih Tampilan di menu administrasi Drupal. Daftar yang diaktifkan tema muncul.
3. Untuk tema yang ingin Anda gunakan sebagai default, pilih Jadikan default.
   Untuk menggunakan tema Apigee Responsif, pastikan tema Bootstrap 7.x-3.0 sesuai juga diaktifkan pada halaman tersebut.
4. Simpan konfigurasi.

Menyesuaikan tema Responsif Apigee

Bagian ini menjelaskan cara mengonfigurasi tema Responsif Apigee, termasuk:

• Menyesuaikan formulir modal
• Menyesuaikan setelan umum

Untuk menyesuaikan dukungan formulir modal:

Portal ini menggunakan Drupal Bootstrap Modul sandbox formulir modal untuk menampilkan formulir Drupal sebagai modal. Formulir login dan pendaftaran oleh sebagai modal. Anda dapat menonaktifkan fungsi ini agar formulir tersebut muncul sebagai halaman individu.

1. Login ke portal developer sebagai pengguna yang memiliki hak istimewa admin.
2. Pilih Configuration > Antarmuka pengguna > Modal Bootstrap tersedia di Menu administrasi Drupal.
3. Mengaktifkan atau menonaktifkan dukungan modal untuk formulir.
4. Pilih Save configuration.

Untuk menyesuaikan setelan umum Tema Responsif Apigee:

1. Login ke portal Anda sebagai pengguna dengan hak istimewa admin atau pembuatan konten.
2. Pilih Tampilan di menu administrasi Drupal. Daftar tema yang diaktifkan muncul.
3. Di area Apigee Responsif (tema default) pada halaman, pilih Setelan (jangan pilih tombol Setelan di bagian atas halaman).
4. Halaman setelan untuk tema Responsif Apigee akan muncul.
5. Tabel berikut menjelaskan area pada halaman tersebut yang dapat Anda gunakan untuk mengonfigurasi tema. Jika Anda mengubah setelan ini, pilih Simpan konfigurasi.
   
   

   Area	Bagian	Deskripsi
   Setelan bootstrap
   	Komponen	Kontrol tampilan breadcrumb, yaitu posisi menu utama (disebut Navbar di setelan), dan tampilan sumur region: Breadcrumb: Menyembunyikan/menampilkan breadcrumb, mengaktifkan/menonaktifkan link Beranda di dalam breadcrumb. Navbar: Mengubah posisi Navbar (menu utama) menjadi posisi tetap/statis/normal, membuat tata letak lebih dinamis. Sumur wilayah: Menambahkan kelas sumur ke wilayah mana pun pada situs untuk menambahkan latar belakang yang lebih gelap ke wilayah tersebut.
   	JavaScript	Mengontrol tampilan anchor, popover, dan tooltip: Anchor: Memperbaiki posisi anchor, dan mengaktifkan fungsi smooth untuk men-scroll. Popover: Popover menambahkan overlay kecil konten ke . Mengaktifkan/menonaktifkan popover dan mengonfigurasi cara penggunaan popover. Tooltips: Konfigurasi cara penggunaan tooltip. Anda dapat memaksa setiap tooltip untuk ditampilkan di sebelah kanan, kiri, atas, atau bawah setiap elemen formulir, opsi tampilan lainnya.
   	Lanjutan	Mengontrol cara portal menggunakan BootstrapCDN untuk memperbarui file tema Bootstrap. Anda dapat menonaktifkan pengandalan portal di BootstrapCDN, tetapi Anda kemudian harus menerapkan implementasi Bootstrap Anda sendiri Google Workspace for Education.
   	Setelan DevConnect	Menyetel pesan selamat datang, warna default, dan ukuran logo yang muncul di menu utama.
   Mengganti Setelan Global
   	Aktifkan/nonaktifkan layar	Aktifkan dan nonaktifkan tampilan berbagai area portal.
   	Setelan gambar logo	Menentukan gambar yang ditampilkan di menu utama.
   	Setelan ikon pintasan	Menentukan gambar yang ditampilkan di kolom URL browser atau untuk bookmark portal.

Menyesuaikan tema Apigee DevConnect

Tema Apigee DevConnect adalah tema portal default untuk rilis portal yang lebih lama, dan dapat diupgrade ke tema Responsif Apigee yang baru. Namun, Anda harus memastikan terlebih dahulu bahwa semua blok, template, dan konten lainnya kompatibel dengan Bootstrap 3 sebelum menjalankan {i>upgrade.<i}

Untuk menyesuaikan setelan umum Apigee DevConnect tema:

1. Login ke portal Anda sebagai pengguna dengan hak istimewa admin atau pembuatan konten.
2. Pilih Tampilan > Tema Apigee DevConnect > Setelan di Drupal menu administrasi. Ini menampilkan setelan awal untuk tema. Setelan warna adalah ditetapkan sebagai nilai heksadesimal.

   

3. Ubah setelan agar sesuai dengan preferensi Anda.
   Misalnya, menambahkan atau mengubah pesan selamat datang atau mengubah warna latar belakang header. Tujuan warna latar belakang header awalnya disetel ke sesuatu yang mendekati oranye (#FF4300). Anda dapat mengubah ke warna lain seperti biru (#0000FF).
4. Setelah selesai mengubah setelan, klik Simpan.

Menyesuaikan tema dengan membuat sub-tema

Semua file dan aset yang menentukan tema default yang dikirimkan dengan portal berada di Direktori profiles/apigee/themes pada direktori instalasi portal. Direktori ini ada di /var/www/html/profiles/apigee/themes jika Anda menginstal portal di lokasi default.

Untuk mengedit tema guna mengubah tampilan dan nuansa situs, jangan ubah file tema di bagian profile/apigee/themes secara langsung. Jika Anda melakukannya, perubahan Anda akan ditimpa saat berikutnya Anda mengupgrade portal.

Sebagai gantinya, buat sub-tema dari tema yang ingin Anda ubah dengan menyalin tema default file ke /sites/all/themes saat ini. Untuk mengetahui petunjuk tentang subtema, lihat dokumentasi Drupal dokumentasi di https://www.drupal.org/node/225125.

1. Salin folder profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit ke /sites/all/themes folder tersebut.
2. Ganti nama folder apigee_responsive_starterkit ke ANDA_THEME_NAME.
3. Ganti nama file apigee_responsive_starterkit.info menjadi ANDA_THEME_NAME.info.
4. Ganti nama css/apigee_responsive_starterkit.css menjadi {i>css/YOUR_THEME_NAME.css<i}.
5. Ganti nama js/apigee_responsive_starterkit.js menjadi NAMA_THEME_ANDA.js.
6. Edit file info ANDA_THEME_NAME dan ganti baris berikut:
   
   stylesheet[semua][] = css/apigee_responsive_starterkit.css
   skrip[] = js/apigee_responsive_starterkit.js
   
   dengan:
   
   stylesheet[semua][] = css/YOUR_THEME_NAME.css
   skrip[] = js/YOUR_THEME_NAME.js
7. Mengubah nama tema di file ANDA_THEME_NAME.info dari Apigee Responsif Starter Kit menjadi TEMA ANDA NAMA.
8. Jika Anda ingin menambahkan screenshot baru untuk tema Anda, ganti file screenshot.png yang ada.
9. Jika Anda ingin menambahkan logo baru ke tema Anda, ganti file logo.png yang ada.
10. Jika Anda ingin menambahkan favicon baru ke tema, ganti file favicon.ico yang ada.