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 tema adalah memungkinkan Anda mengubah tampilan dan nuansa di semua halaman portal sekaligus.

Sebagian besar gaya default yang disediakan dengan 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, lihat pratinjau, dan publikasikan tema untuk portal Anda di editor tema. Untuk membuka editor tema, pilih Tema di menu drop-down di panel navigasi atas.

Editor tema

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

Menambahkan gaya kustom

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

Untuk menyesuaikan tema Anda:

  1. Pilih Tema di menu drop-down di menu navigasi atas.
  2. Tambahkan kode CSS kustom Anda di panel editor gaya di sisi kanan halaman.
  3. Lihat pratinjau perubahan Anda 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 Anda.
  5. Klik Publikasikan untuk mengonfirmasi update.

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

  • logo.png (140 piksel x 40 piksel)
  • mobile-logo.png (140 piksel x 40 piksel)

Selain itu, ubah konten berikut dalam lembar gaya CSS sesuai kebutuhan:

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



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

Untuk mengetahui informasi selengkapnya, lihat Mengelola aset Anda.

Menyesuaikan gambar latar di halaman beranda

Sesuaikan gambar latar di halaman beranda dengan mengubah konten berikut di lembar gaya CSS.

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

    /* ==== Jumbotron ====
a billboard for drawing attention, from Bootstrap  */

home-page-jumbotron-bg {
    background-image: url('/files/portal-hero.jpg');
}

  • Ubah format teks yang melapisi 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 spesifisitas CSS

Spesifisitas CSS menjelaskan metode yang digunakan oleh browser untuk menentukan prioritas deklarasi elemen gaya CSS saat terjadi konflik. Spesifisitas CSS dihitung dengan menerapkan bobot pada deklarasi elemen gaya CSS tertentu berdasarkan jenis pemilihnya. Makin spesifik pemilih CSS, makin tinggi bobotnya. Atribut ID, misalnya, akan diberi bobot yang lebih tinggi dalam penghitungan daripada pemilih jenis.

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

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

Demikian pula, jika Anda menentukan deklarasi elemen gaya berikut dalam kode CSS, teks apa pun yang diapit dalam 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 spesifisitas yang sama, deklarasi elemen gaya terakhir yang ditentukan akan diprioritaskan. Misalnya, dengan urutan deklarasi elemen gaya berikut, elemen paragraf akan berwarna biru. 

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

Memublikasikan tema Anda

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

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

Untuk melihat konten yang dipublikasikan di portal aktif, klik Live Portal di panel navigasi atas.