Menyesuaikan tema

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

Tema adalah kumpulan file yang menentukan tampilan dan nuansa situs. Portal Layanan Developer awalnya ditentukan dengan tema default, yang dapat Anda sesuaikan. Dengan begitu, Anda dapat memilih preferensi tampilan dan nuansa portal. Lebih spesifik, 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 dalam file tema kustom untuk mengganti file tema default.

Bergantung pada versi portal developer, Anda akan memiliki beberapa tema yang dapat dipilih:

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

Menyetel tema default

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

"Apigee DevConnect theme" is out of date 

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

Untuk menetapkan tema default:

1. Login ke portal Anda sebagai pengguna yang memiliki hak istimewa pembuatan konten atau admin.
2. Pilih Appearance di menu administrasi Drupal. Daftar tema yang diaktifkan akan muncul.
3. Untuk tema yang ingin Anda gunakan sebagai default, pilih Jadikan default.
   Untuk menggunakan tema Responsif Apigee, pastikan tema Bootstrap 7.x-3.0 juga diaktifkan di 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 bentuk modal:

Portal ini menggunakan modul sandbox Drupal Bootstrap Modal forms untuk menampilkan formulir Drupal sebagai modal. Formulir login dan pendaftaran secara default berfungsi sebagai modal. Anda dapat menonaktifkan fungsi ini agar formulir tersebut muncul sebagai halaman individual.

1. Login ke portal developer sebagai pengguna yang memiliki hak istimewa admin.
2. Pilih formulir Konfigurasi > Antarmuka pengguna > Modal Bootstrap 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 yang memiliki hak istimewa pembuatan konten atau admin.
2. Pilih Penampilan di menu administrasi Drupal. Daftar tema yang diaktifkan akan muncul.
3. Di area ApigeeResponsive (default theme) halaman, pilih Settings (jangan pilih tombol Setelan di bagian atas halaman).
4. Halaman setelan untuk tema Responsif Apigee akan muncul.
5. Tabel berikut menjelaskan area di halaman tersebut yang dapat Anda gunakan untuk mengonfigurasi tema. Jika Anda mengubah salah satu setelan ini, pilih Simpan konfigurasi.
   
   

   Luas	Bagian	Deskripsi
   Setelan bootstrap
   	Komponen	Mengontrol tampilan breadcrumb, posisi menu utama (disebut Navbar di setelan), dan tampilan sumur region: Breadcrumb: Menyembunyikan/menampilkan breadcrumb, mengaktifkan/menonaktifkan link Beranda di dalam breadcrumb. Navbar: Ubah posisi Navbar (menu utama) ke posisi tetap/statis/normal, sehingga tata letak menjadi lebih dinamis. Region wells: Tambahkan class well ke region mana pun di situs untuk menambahkan latar belakang yang lebih gelap ke region tersebut.
   	JavaScript	Mengontrol tampilan anchor, popover, dan tooltip: Anchor: Memperbaiki posisi anchor dan memungkinkan scroll yang lancar. Popover: Popover menambahkan overlay kecil konten ke elemen apa pun. Mengaktifkan/menonaktifkan popover dan mengonfigurasi cara penggunaan popover. Tooltip: Mengonfigurasi cara penggunaan tooltip. Anda dapat memaksa setiap tooltip untuk ditampilkan di kanan, kiri, atas, atau bawah setiap elemen formulir, dan menetapkan opsi tampilan lainnya.
   	Lanjutan	Mengontrol cara portal menggunakan BootstrapCDN untuk mengupdate file tema Bootstrap. Anda dapat menonaktifkan ketergantungan pada portal pada BootstrapCDN, tetapi Anda harus menyediakan implementasi framework Bootstrap Anda sendiri.
   	Setelan DevConnect	Tetapkan pesan selamat datang, warna default, dan ukuran logo yang muncul di menu utama.
   Mengganti Setelan Global
   	Aktifkan/nonaktifkan tampilan	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 ke portal.

Menyesuaikan tema Apigee DevConnect

Tema Apigee DevConnect adalah tema portal default untuk rilis portal lama, dan dapat ditingkatkan ke tema Responsif Apigee yang baru. Namun, Anda harus memastikan terlebih dahulu bahwa semua blok, template, dan konten lainnya kompatibel dengan Bootstrap 3 sebelum melakukan upgrade.

Untuk menyesuaikan setelan umum tema Apigee DevConnect:

1. Login ke portal Anda sebagai pengguna yang memiliki hak istimewa pembuatan konten atau admin.
2. Pilih Appearance > Apigee DevConnect theme > Settings di menu administrasi Drupal. Ini akan menampilkan setelan awal untuk tema. Setelan warna ditentukan sebagai nilai heksadesimal.

   

3. Ubah setelan agar sesuai dengan preferensi Anda.
   Misalnya, tambahkan atau ubah pesan selamat datang atau ubah warna latar belakang header. Warna latar belakang header awalnya disetel ke warna yang mendekati oranye (#FF4300). Anda dapat mengubahnya 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 ada di direktori profiles/apigee/themes pada direktori penginstalan 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 pada profiles/apigee/themes secara langsung. Jika Anda melakukannya, perubahan akan ditimpa saat Anda mengupgrade portal lagi.

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

1. Salin folder profiles/apigee/themes/apigee_responsive/apigee_responsive_starterkit ke folder /sites/all/themes.
2. Ganti nama folder apigee_responsive_starterkit menjadi 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 css/YOUR_THEME_NAME.css.
5. Ganti nama js/apigee_responsive_starterkit.js menjadi ANDA_THEME_NAME.js.
6. Edit file ANDA_THEME_NAME.info dan ganti baris berikut:
   
   stylesheets[all][] = css/apigee_responsive_starterkit.css
   skrip[] = js/apigee_responsive_starterkit.js
   
   dengan:
   
   stylesheets[all][] = css/YOUR_THEME_NAME.css
   
7. Ubah nama tema di file ANDA_THEME_NAME.info dari ApigeeResponsive Starter Kit menjadi ANDA THEME NAME.
8. Jika ingin menambahkan screenshot baru untuk tema Anda, ganti file screenshot.png yang ada.
9. Jika ingin menambahkan logo baru ke tema Anda, ganti file logo.png yang sudah ada.
10. Jika ingin menambahkan favicon baru ke tema Anda, ganti file favicon.ico yang ada.