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 sayfalar için tek tip bir görünüm ve tarz sağlayan genel bir geçişli stil sayfasından (CSS) oluşur. Temaların amacı, tüm portal sayfalarınızın görünümünü ve tarzını tek seferde değiştirebilmenizi sağlamaktır.

Örnek portalla sağlanan varsayılan stillerin çoğu Önyüklemeye dayalıdır. Temanızı aşağıdaki bölümlerde açıklandığı gibi ö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 gösterildiği gibi, tema düzenleyici şunları yapmanıza olanak tanır:

• Stil düzenleyici bölmesini kullanarak temanızı özelleştirmek için özel stiller ekleyin
• Ö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ınlayın

Özel stiller ekleme

Stil düzenleyici bölmesinde kendi CSS kodunuzu ekleyerek temanızı özelleştirin. Tüm CSS stili öğ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ölmesinde ekleyin.
3. Önizlemeyi yeniden yükle'yi tıklayarak önizleme bölmesinde değişikliklerinizi önizleyin.
   > Not: Tüm sayfalardaki içeriği önizlemek için portalda gezinmeyi tıklayabilirsiniz.
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ştirin

"Logonuz" resmini şirketinizin logosuyla özelleştirin, aynı adları ve göreli dosya boyutlarını kullanarak logonuzu yükleyerek dosya yöneticisinde aşağıdaki resim dosyalarını 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çeriği 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ı makaleye bakın.

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.
  Aynı adı ve göreli dosya boyutunu (1440 piksel x 540 piksel) kullanarak portal-hero.jpg resminin kendi sürümünüzü dosya yöneticisine yükleyebilirsiniz. Farklı bir dosya adı kullanmak isterseniz aşağıdaki CSS'de background-image değerini düzenleyin.

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

• Arka plan resminin üzerine yerleştirilen 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 spesifiklik kurallarını anlama

CSS belirginliği, çakışmalar ortaya çıktığında CSS stil öğesi bildirimlerinin önceliğini belirlemek için tarayıcı tarafından kullanılan yöntemi ifade eder. CSS belirginliği, belirli bir CSS stil öğesi bildirimine seçici türüne göre ağırlık uygulanarak hesaplanır. CSS seçici ne kadar spesifik olursa 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 bir div öğesi içindeki p stil öğesi bildirimi, p stil öğesi bildiriminden daha spesifik olduğu için paragraf öğesi kırmızı renkli olur.

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ğu için <div class="test"></div> etiketleri içine alınan metinler mavi renkte olur.

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

Aynı belirliliğe sahip stil öğesi bildirimleri için tanımlanan son stil öğesi bildirimi öncelikli olur. Örneğin, aşağıdaki stil öğesi bildirimlerinin sırası göz önünde bulundurulduğunda, 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ınladığınız içeriği canlı portalda görüntülemek için üst gezinme çubuğunda Canlı Portal'ı tıklayın.