Menyesuaikan tema (versi asli)

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

Tema terdiri dari cascading style sheet (CSS) global yang memberikan tampilan dan nuansa seragam untuk semua halaman di portal Anda. Tujuan penggunaan tema adalah agar Anda dapat mengubah tampilan dan nuansa di semua halaman portal pada satu waktu.

Mayoritas gaya default yang disediakan di portal contoh didasarkan pada Bootstrap. Anda dapat menyesuaikan, melihat pratinjau, dan memublikasikan tema, seperti yang dijelaskan di bagian berikut.

Tonton video berikut untuk mempelajari cara menyesuaikan tema portal.

Mengakses editor tema

Sesuaikan, pratinjau, dan publikasikan tema untuk portal Anda di editor tema. Untuk membuka editor tema, pilih Tema di menu drop-down pada menu navigasi atas.

Seperti yang disorot pada gambar sebelumnya, editor tema memungkinkan Anda untuk:

• Menambahkan gaya kustom untuk menyesuaikan tema menggunakan panel editor gaya
• Lihat pratinjau tema di area pratinjau dengan mengklik muat ulang pratinjau
• Menyesuaikan logo
• Menyesuaikan gambar latar
• Publikasikan tema ke portal live Anda

Tambahkan gaya kustom

Sesuaikan tema Anda dengan menambahkan kode CSS Anda sendiri di panel editor gaya. Semua elemen gaya CSS didukung.

Untuk menyesuaikan tema:

1. Pilih Tema di menu drop-down pada menu navigasi atas.
2. Tambahkan kode CSS kustom di panel editor gaya di sisi kanan halaman.
3. Lihat pratinjau perubahan di panel pratinjau dengan mengklik muat ulang pratinjau.
   > Catatan: Anda dapat mengklik navigasi portal untuk melihat pratinjau konten di semua halaman.
4. Klik Publikasikan untuk memublikasikan perubahan tema.
5. Klik Publikasikan untuk mengonfirmasi update.

Menyesuaikan logo

Sesuaikan gambar "Logo Anda" dengan logo perusahaan, ganti file gambar berikut di pengelola file dengan mengupload logo menggunakan nama dan ukuran file relatif yang sama:

• logo.png (140x40 piksel)
• mobile-logo.png (140x40 piksel)

Selain itu, ubah konten berikut di lembar gaya CSS, sebagaimana diperlukan:

/* ==== Header Menu ==== */
...
body .navbar-brand {
  padding: 5px 15px;
}


.navbar-brand img {
  max-height: 50px;
  margin: 0;
  padding: 0;
}

Untuk mendapatkan informasi lebih lanjut, lihat artikel Mengelola aset.

Menyesuaikan gambar latar di halaman beranda

Sesuaikan gambar latar di halaman beranda dengan memodifikasi konten berikut di style sheet CSS.

• Mengubah file gambar latar dan penempatannya.
  Anda dapat mengupload gambar portal-hero.jpg versi Anda sendiri ke pengelola file menggunakan nama yang sama dan ukuran file relatif (1440 piksel x 540 piksel). Jika Anda ingin menggunakan nama file yang berbeda, pastikan dan edit nilai background-image dalam CSS di bawah.

  /* ==== Jumbotron ====
  a billboard for drawing attention, from Bootstrap  */
  
  home-page-jumbotron-bg {
      background-image: url('/files/portal-hero.jpg');
  }

• Mengubah format teks yang menempatkan gambar latar.

  .jumbotron {
   text-align: center;
   height: 500px;
   background-size: cover;
   margin: -50px -30px 0 -30px;
   border-radius: 0;
  }
  
  .jumbotron h1 {
   font-size: 40px;
   font-weight: 400;
  }
  
  .jumbotron h2 {
   font-size: 25px;
   font-weight: 400;
  }
  
  .jumbotron a, .jumbotron a:hover {
   font-size: 18px;
  }
  
  .jumbotron p {
   max-width: none;
  }

Memahami aturan kekhususan CSS

Kekhususan CSS menjelaskan metode yang digunakan oleh browser untuk menentukan prioritas deklarasi elemen gaya CSS ketika konflik muncul. Kekhususan CSS dihitung dengan menerapkan bobot ke deklarasi elemen gaya CSS tertentu berdasarkan jenis pemilihnya. Semakin spesifik pemilih CSS, semakin tinggi bobotnya. Misalnya, atribut ID akan diberi bobot yang lebih tinggi dalam perhitungan daripada pemilih jenis.

Misalnya, jika Anda mendefinisikan elemen gaya berikut dalam kode CSS, elemen paragraf akan berwarna merah karena deklarasi elemen gaya p dalam elemen div lebih spesifik dibandingkan deklarasi elemen gaya p.

div p { color: red }  ← More specific  
p { color: blue }

Demikian pula, jika Anda mendefinisikan deklarasi elemen gaya berikut dalam kode CSS, teks apa pun yang diapit tag <div class="test"></div> akan berwarna biru karena deklarasi gaya atribut ID dalam elemen div lebih spesifik daripada deklarasi elemen gaya div.

div#test { background-color: blue; }  ← More specific  
div { background-color: red; }

Untuk deklarasi elemen gaya dengan kekhususan yang sama, deklarasi elemen gaya terakhir yang didefinisikan akan diutamakan. Misalnya, berdasarkan urutan deklarasi elemen gaya berikut, elemen paragraf akan berwarna biru.

p { color: red }  
p { color: blue }  ← Last specified

Memublikasikan tema Anda

Untuk memublikasikan ke portal live, penyesuaian gaya dan tema yang telah Anda tambahkan:

1. Pilih Tema di menu drop-down pada menu navigasi atas.
2. Klik Publikasikan.

Untuk melihat konten yang dipublikasikan di portal live, klik Portal Live di menu navigasi atas.