Temanızı özelleştirin (orijinal sürüm)

Apigee Edge belgelerini görüntülüyorsunuz.
Apigee X belgelerine gidin. bilgi

Tema, portalınızdaki tüm sayfalara tek tip bir görünüm ve tarz sağlayan genel bir basamaklı stil sayfasından (CSS) oluşur. Temaların amacı, portal sayfalarınızın tamamının görünümünü ve tarzını tek seferde değiştirmenize olanak tanımaktır.

Örnek portalda sağlanan varsayılan stillerin çoğu Bootstrap'e dayanır. Temanızı aşağıdaki bölümlerde açıklandığı şekilde özelleştirebilir, önizleyebilir ve yayınlayabilirsiniz.

Portal temasını nasıl özelleştireceğinizi öğrenmek için aşağıdaki videoyu izleyin.

Tema düzenleyiciye erişme

Tema düzenleyicide portalınızın temasını özelleştirin, önizleyin ve yayınlayın. Tema düzenleyiciyi açmak için üst gezinme çubuğundaki açılır menüden Tema'yı seçin.

Önceki şekilde vurgulandığı gibi, tema düzenleyici şunları yapmanıza olanak tanır:

• Stil düzenleyici bölmesini kullanarak temanızı özelleştirmek için özel stiller ekleme
• Önizlemeyi yeniden yükle'yi tıklayarak temanızı önizleme alanında önizleyin.
• Logonuzu özelleştirme
• Arka plan resmini özelleştirme
• Temanızı canlı portalınızda yayınlama

Özel stil ekleme

Stil düzenleyici bölmesine kendi CSS kodunuzu ekleyerek temanızı özelleştirin. Tüm CSS stil öğeleri desteklenir.

Temanızı özelleştirmek için:

1. Üst gezinme çubuğundaki açılır menüden Tema'yı seçin.
2. Özel CSS kodunuzu sayfanın sağ tarafındaki stil düzenleyici bölmesine ekleyin.
3. Önizlemeyi yeniden yükle'yi tıklayarak değişikliklerinizi önizleme bölmesinde önizleyin.
   > Not: Tüm sayfalardaki içeriği önizlemek için portalınızda gezinebilirsiniz.
4. Tema değişikliklerinizi yayınlamak için Yayınla'yı tıklayın.
5. Güncellemeyi onaylamak için Yayınla'yı tıklayın.

Logonuzu özelleştirme

"Logonuz" resmini şirketinizin logosuyla özelleştirin. Dosya yöneticisindeki aşağıdaki resim dosyalarını, logonuzu aynı adları ve göreli dosya boyutlarını kullanarak yükleyerek değiştirin:

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

Ayrıca, CSS stil sayfasında aşağıdaki içerikleri gerektiği gibi değiştirin:

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


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

Daha fazla bilgi için Öğelerinizi yönetme başlıklı makaleyi inceleyin.

Ana sayfadaki arka plan resmini özelleştirme

CSS stil sayfasında aşağıdaki içeriği değiştirerek ana sayfadaki arka plan resmini özelleştirin.

• Arka plan resmi dosyasını ve yerleşimini değiştirin.
  portal-hero.jpg resminin kendi sürümünüzü, aynı ad ve göreli dosya boyutunu (1.440 piksel x 540 piksel) kullanarak dosya yöneticisine yükleyebilirsiniz. Farklı bir dosya adı kullanmak istiyorsanız aşağıdaki CSS'de background-image değerini düzenlediğinizden emin olun.

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

• Arka plan resminin üzerindeki metnin biçimini değiştirin.

  .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;
  }

CSS özgüllük kurallarını anlama

CSS özgüllüğü, çakışmalar ortaya çıktığında CSS stil öğesi bildirimlerinin önceliğini belirlemek için tarayıcı tarafından kullanılan yöntemi açıklar. CSS özgüllüğü, seçici türüne göre belirli bir CSS stil öğesi bildirimine ağırlık uygulanarak hesaplanır. CSS seçici ne kadar spesifikse ağırlık da o kadar yüksek olur. Örneğin, bir kimlik özelliğine hesaplamada tür seçiciden daha yüksek bir ağırlık verilir.

Örneğin, CSS kodunuzda aşağıdaki stil öğelerini tanımlarsanız paragraf öğesi kırmızı renkte olur. Bunun nedeni, bir div öğesindeki p stil öğesi bildiriminin, p stil öğesi bildiriminden daha spesifik olmasıdır.

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

Benzer şekilde, CSS kodunuzda aşağıdaki stil öğesi bildirimlerini tanımlarsanız bir div öğesindeki kimlik özelliği stil bildirimi, div stil öğesi bildiriminden daha spesifik olduğundan <div class="test"></div> etiketleri içine alınmış tüm metinler mavi renkte olur.

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

Aynı özgüllüğe sahip stil öğesi bildirimlerinde, tanımlanan son stil öğesi bildirimi öncelikli olur. Örneğin, aşağıdaki stil öğesi bildirimlerinin sırası göz önüne alındığında paragraf öğesi mavi renkte olur.

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

Temanızı yayınlama

Eklediğiniz tema ve stil özelleştirmelerini canlı portalda yayınlamak için:

1. Üst gezinme menüsündeki açılır menüden Tema'yı seçin.
2. Yayınla'yı tıklayın.

Yayınlanan içeriğinizi canlı portalda görüntülemek için üst gezinme çubuğunda Canlı Portal'ı tıklayın.