Temanızı özelleştirin

Apigee Edge belgelerini görüntülüyorsunuz.
. Git: Apigee X belgeleri. bilgi

Tema, portalınızdaki tüm sayfalar için tek tip bir görünüm ve tarz sağlayan genel bir stil sayfasından oluşur. Temanın amacı, tüm portal sayfalarınızın görünümünü ve tarzını tek seferde değiştirmenizi sağlamaktır.

Aşağıdaki bölümlerde açıklandığı şekilde temanızı özelleştirebilir, önizleyebilir ve yayınlayabilirsiniz.

Tema düzenleyiciyi keşfedin

Tema düzenleyicide portalınızın temasını özelleştirin, önizleyin ve yayınlayın.

Tema düzenleyiciye erişmek için:

• Yayınla > Portallar, portalınızı seçin ve açılış sayfasında Temalar'ı tıklayın.
• Bir portalı düzenlerken, üst gezinme araç çubuğundaki açılır menüde Temalar'ı tıklayın.

Önceki şekilde gösterildiği gibi, tema düzenleyici şunları yapmanıza olanak tanır:

• Aşağıdaki öğeleri de içeren temel stiller tema düzenleyicisini kullanarak temel stilleri hızlıca özelleştirin:
  • Renk paleti
  • Yazı tipi ailesi ve stilleri
  • Logolar
• Aşağıdaki öğeler dahil ancak bunlarla sınırlı olmamak üzere gelişmiş tema düzenleyicide tema değişkenlerini geçersiz kılın veya tema stili öğelerini özelleştirin:
  • Renk paleti
  • Yazı tipi ailesi ve stilleri
  • Gezinme araç çubuğu
  • Arka plan resmi
  • Yazı biçimi
• Tema değişikliklerinizi önizleyin
• Portalınızı tarayıcıda önizleme
• Canlı portalınızda temayı yayınlayın

Temel tema hakkında

Sitenin görünümünü tanımlayan temel tema stili kurallarının çoğu, açısal materyal tasarımına dayanır. Açısal malzeme tasarımı, birleşik bir etkileşimli deneyim sağlamak için ızgara tabanlı düzenler, tutarlı bileşenler ve stil kullanır.

Stil kuralları, Sassy Basamaklı Stil Sayfası (SCSS) kullanılarak tanımlanır. SCSS, Geçişli Stil Sayfaları'nın (CSS) üst kümesidir ve aşağıdaki avantajları sunar:

• Stil sayfasında yeniden kullanılabilen genel değişkenler.
• Stil sayfası geliştirme süresinden tasarruf etmek için iç içe yerleştirilmiş kurallar.
• Mix'ler ve fonksiyonlar oluşturabilme

Örneğin:

// Variable declaration
$my-variable: 12px;

// Nested selectors
.container-selector {
  .element-selector {
    padding: $my-variable;
  }
}

// The SCSS compiler will compile the above code to:
.container-selector .element-selector {
  padding: 12px;
}

// Function declaration
@function double($x) { return $x * 2; }

// Call function
.my-selector { height: double(12px); }

// The SCSS compiler will compile the above code to:
.my-selector { height: 24px; }

SCSS derlenir ve içerik web sayfasında oluşturulmadan önce eski CSS'ye dönüştürülür.

Köşeli malzeme stil sayfası, malzeme teması SCSS dosyası (material-theming.scss), temel tema tarafından kullanılıyor. Bu stil sayfasında, Gelişmiş tema düzenleyiciyi kullanarak temayı özelleştirme başlıklı makalede açıklandığı gibi, özelleştirilebilen değişkenler ve SCSS bölümleri kullanılarak geçersiz kılınabilecek değişkenler, işlevler ve mix'ler açıklanmaktadır.

Kullanıcı arayüzü teması seçimlerinize bağlı olarak tipografi, renk ve düzen stillerini tanımlayan ve temel stil sayfası tarafından kullanılan çeşitli SCSS değişkenleri tanımlanır. Tema değişkeni referansında listelenen değişkenleri geçersiz kılabilirsiniz.

Renk paletini özelleştirin

Temel stil düzenleyicisini kullanarak veya tema değişkenlerini geçersiz kılarak renk paletini özelleştirin.

Renk paleti kategorileri hakkında

Entegre portalın renk paleti tanımları, temel temada materyal tasarım renk stili kullanılarak tanımlanan aşağıdaki kategorilerde gruplandırılır.

Temel stil düzenleyiciyi kullanarak renk paletini özelleştirin

Temel stil düzenleyicisini kullanarak birincil ve aksan renk paletlerini hızlı bir şekilde özelleştirin.

Temel stil düzenleyicisini kullanarak renk paletini özelleştirmek için:

1. Tema düzenleyiciye erişin.
2. Birincil rengi özelleştirmek için Birincil renk açılır menüsünde bir renk seçin veya Özel'i tıklayıp metin kutusuna özel bir onaltılık renk değeri girin.
3. Vurgu rengini özelleştirmek için Vurgu rengi açılır menüsünden bir renk seçin veya Özel'i tıklayıp metin kutusuna özel bir onaltılık renk değeri girin.
4. Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
5. Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini bir tarayıcıda önizlemek için Önizle'yi tıklayın.
   . Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portal gezinmenizi tıklayabilirsiniz.
6. Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.

Tema değişkenlerini geçersiz kılarak renk paletini özelleştirin

Tema değişkenlerini geçersiz kılarak renk paletini özelleştirmek için gelişmiş tema düzenleyicisine erişin ve sırasıyla birincil, ikincil, vurgu veya uyarı mesajı renklerini değiştirmek için Değişkenler bölümüne düzenlenmiş değerlerle aşağıdaki değişkenlerden birini veya daha fazlasını ekleyin. Renk paleti kategorileri hakkında bölümüne bakın.

$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green, 700, 100, 900);
$accent: mat-palette($mat-blue, 600, 700, 900);
$warn: mat-palette($mat-red);

Önceden tanımlanmış renk değişkenlerini (ör. $mat-grey) tanımlamak için içe aktarılan malzeme teması SCSS dosyasının (material-theming.scss) içeriğini görüntüleyin. Sayısal değerler sırasıyla varsayılan, daha açık ve daha koyu öğelerin gölgelendirme değerlerini gösterir.

Alternatif olarak kendi renk değişkeninizi de oluşturabilirsiniz. Örneğin:

$my-color-variable: (    
    50 : #f9f0e7,    
    100 : #f0d8c2,    
    200 : #e6bf9a,    
    300 : #dba572,    
    400 : #d49153,    
    500 : #cc7e35,    
    600 : #c77630,    
    700 : #c06b28,    
    800 : #b96122,    
    900 : #ad4e16,    
    A100 : #ffebe0,     
    A200 : #ffc9ad,    
    A400 : #ffa77a,    
    A700 : #ff9661,     
    // Color to render text presented on a background of the same level       
    contrast: (    
        50 : #000000,     
        100 : #000000,     
        200 : #000000,     
        300 : #000000,    
        400 : #000000,     
        500 : #000000,    
        600 : #000000,    
        700 : #ffffff,     
        800 : #ffffff,    
        900 : #ffffff,     
        A100 : #000000,     
        A200 : #000000,     
        A400 : #000000,     
        A700 : #000000,     
    )    
);    

Ardından, aşağıdaki örnekte gösterildiği gibi, renk paletini değiştirmek için bunu kullanın:

$primary: mat-palette($my-color-variable, 900, 200, 400);

Yazı tipi ailesini ve stilleri özelleştirin

Temel stil düzenleyiciyi kullanarak veya tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stilleri özelleştirin. Ayrıca özel bir yazı tipini içe aktarabilirsiniz.

Temel stil düzenleyicisini kullanarak yazı tipi ailesini ve stilleri özelleştirin

Aşağıdaki şekilde gösterildiği gibi temel stil düzenleyicisini kullanarak yazı tipi ailesini ve stilleri hızlı bir şekilde özelleştirin.

Temel stil düzenleyicisini kullanarak yazı tipi ailesini ve stilleri özelleştirmek için:

1. Tema düzenleyiciye erişin.
2. Yazı tipi ailesini değiştirmek için Yazı tipi açılır menüsünde bir değer seçin.
3. Yazı tipi stillerini değiştirmek için Yazı tipi stilleri bölümünü genişletin ve istenen HTML öğelerinin yazı tipi boyutu, satır yüksekliği ve yazı tipi ağırlığı gibi stilleri gerektiği gibi düzenleyin.
4. Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
5. Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini bir tarayıcıda önizlemek için Önizle'yi tıklayın.
   . Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portal gezinmenizi tıklayabilirsiniz.
6. Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.

Tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stilleri özelleştirin

Tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stillerini özelleştirmek için gelişmiş tema düzenleyiciye erişin ve düzenlenmiş değerlere sahip Değişkenler bölümünde bir veya daha fazla yazı tipi ailesi ve stil değişkeni ekleyin.

Örneğin, varsayılan yazı tipini GPC olarak değiştirmek için aşağıdaki değişkeni tanımlayın:

$typography-main-font-family: 'Arial';

Özel yazı tipini içe aktarma

Bir Google yazı tipini (varsayılan yazı tipi grubuna dahil değildir) veya kendi özel yazı tipinizi içe aktarın ve ardından stil sayfanızdaki özel yazı tipini aşağıda açıklandığı gibi kullanın.

Bir Google yazı tipini içe aktarma

Bir Google yazı tipini içe aktarmak için gelişmiş tema düzenleyiciye erişin ve aşağıda gösterildiği gibi Özel Stiller bölümündeki yazı tipini içe aktarın:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

Özel yazı tipini içe aktarma

@font-face CSS kuralını kullanarak kendi özel yazı tipinizi içe aktarın. @font-face kuralı; TrueType (TTF), Web Açık Yazı Tipi Biçimi (WOFF) ve daha pek çok farklı dosya biçimi türünü destekler.

Kendi özel yazı tipinizi içe aktarmak için:

1. İsterseniz yazı tipi dosyasını, Dosya yükleme bölümünde açıklandığı şekilde öğe yöneticisine yükleyebilirsiniz.

2. Gelişmiş tema düzenleyiciye erişin ve Özel Stiller bölümüne @font-face kuralını ekleyin. Burada font-family, yazı tipi adını belirtir, url yazı tipi dosyasının konumunu belirtir (bu durumda öğe yöneticisi), MyCustomFont.tff özel yazı tipi dosyanızın adı ve format yazı tipi biçimini belirtir.

   @font-face {
      font-family: 'MyCustomFont';
      src: url('files/MyCustomFont.tff') format('truetype')
   }
   

Stil sayfanızdaki özel yazı tipine referans verme

Değişkenler bölümündeki yazı tipi ailesi ve stil değişkenlerinden birindeki özel yazı tipine referans verin. Örneğin:

$typography-main: mat-typography-config(    
    $font-family: '"Indie Flower", "Oxygen", sans-serif',    
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers    
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers    
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers    
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers    
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags    
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags    
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags   
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags   
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text   
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text    
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text    
    $button: mat-typography-level(14px, 14px, 500), // Buttons    
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);    

Logoları özelleştir

Portalda kullanılan logoları aşağıdaki konumlardan özelleştirebilirsiniz:

Masaüstü ve mobil ekranlar için gezinme araç çubuğundaki logoyu özelleştirme

Masaüstü ve mobil ekranlarda gezinme araç çubuğundaki logoyu özelleştirin. Tarayıcınızın genişliğine bağlı olarak, logonun masaüstü veya mobil sürümünü görebilirsiniz.

Birincil logoyu silemezsiniz, yalnızca değiştirebilirsiniz. Mobil ekran için logo belirtmezseniz varsayılan olarak birincil logo kullanılır.

Masaüstü ve mobil ekranlarda gezinme araç çubuğunda kullanılan logoyu özelleştirmek için:

1. Şirket logonuzun kullanıma uygun bir veya daha fazla kopyasını edinin.
   . Önerilen boyutlar için önceki tabloya bakın.
2. Tema düzenleyiciye erişin.
3. Masaüstü ekranlarda üst gezinme araç çubuğunda bulunan logoyu değiştirmek için:
   a. Sağ bölmedeki Temel Stiller bölümünde Birincil logo alanının altındaki simgesini tıklayın.
   . b. Yerel dizininizde logonuzun masaüstü sürümünü bulun.
   c. Dosyayı yüklemek için Aç'ı tıklayın.
4. Mobil ekranlarda üst gezinme araç çubuğunda bulunan logoyu değiştirmek için:
   a. Sağ bölmedeki Temel Stiller bölümünde Logo seçenekleri'ni genişletin ve Mobil logo alanının altındaki simgesini tıklayın.
   b. Yerel dizininizde logonuzun mobil sürümüne göz atın.
   c. Dosyayı yüklemek için Aç'ı tıklayın.
5. Değişikliklerinizi sol bölmede önizlemek için Kaydet'i tıklayın.
6. Değişiklikleri portalınızda yayınlamak için Yayınla'yı tıklayın. İstendiğinde işlemi onaylayın.

Site simgesini özelleştirin

Web tarayıcısı adres çubuğunda (ve diğer konumlarda) kullanılan site simgesini özelleştirmek için:

1. Site simgesi olarak kullanılmaya uygun şirket logonuzun bir kopyasını edinin.
   . Önerilen boyut için önceki tabloya bakın.
2. Tema düzenleyiciye erişin.
3. Sağ bölmedeki Temel Stiller bölümünde Logo seçenekleri'ni genişletin ve Site Simgesi alanının altındaki simgesini tıklayın.
4. Yerel dizininizde logonuzun site simgesi sürümüne göz atın.
5. Dosyayı yüklemek için Aç'ı tıklayın.
6. Değişikliklerinizi sol bölmede önizlemek için Kaydet'i tıklayın.
7. Değişiklikleri portalınızda yayınlamak için Yayınla'yı tıklayın. İstendiğinde işlemi onaylayın.

Oturum Açma sayfasındaki logoyu özelleştirme

Geliştirici programınız için kayıt ve oturum açma deneyimini yapılandırırken Oturum Açma sayfasındaki logoyu aşağıdaki şekilde özelleştirin. Şirket bilgilerini yönetin.

Gezinme araç çubuğunu özelleştirme

Aşağıda, gezinme araç çubuğunu özelleştirmeye yönelik bazı hızlı ipuçları verilmiştir:

• Renk paletini özelleştirme konusunda açıklandığı gibi, birincil rengi değiştirerek üstbilgi ve altbilgideki gezinme araç çubuğunun rengini özelleştirin.
• Yazı tipi ailesini ve stilleri özelleştirme konusunda açıklandığı gibi, Yazı Tipi ve Düğmeler stilini değiştirerek üstbilgideki ve altbilgideki gezinme araç çubuğunda bulunan menü öğelerinin yazı tipi boyutunu ve stilini özelleştirin.
• Gelişmiş tema düzenleyiciye erişerek başlık gezinme araç çubuğunun yüksekliğini özelleştirin ve aşağıdaki değişkeni, düzenlenmiş değerinizle Değişkenler bölümüne ekleyin: $layout-header-height: 64px;
• Gelişmiş tema düzenleyiciye erişerek altbilgi gezinme araç çubuğunun yüksekliğini özelleştirin ve aşağıdaki değişkeni, düzenlenmiş değerinizle Değişkenler bölümüne ekleyin: $layout-footer-height: 44px;
• Masaüstü ve mobil ekranlar için gezinme araç çubuğundaki logoyu özelleştirin.

// Main content typography (includes dialog and notification popups)
$typography-main: mat-typography-config(
    $font-family: 'Roboto, "Oxygen", sans-serif',
    $display-4: mat-typography-level(112px, 112px, 300), // One-off huge headers
    $display-3: mat-typography-level(56px, 56px, 400), // One-off large headers
    $display-2: mat-typography-level(45px, 48px, 400), // One-off medium headers
    $display-1: mat-typography-level(34px, 40px, 400), // One-off small headers
    $headline: mat-typography-level(24px, 32px, 400), // <h1> tags
    $title: mat-typography-level(20px, 32px, 500), // <h2> tags
    $subheading-2: mat-typography-level(16px, 28px, 400), // <h3> tags
    $subheading-1: mat-typography-level(15px, 24px, 400), // <h4> tags
    $body-2: mat-typography-level(14px, 24px, 500), // Bolder body text
    $body-1: mat-typography-level(16px, 22px, 400), // Base body text
    $caption: mat-typography-level(12px, 20px, 400), // Smaller body and hint text
    $button: mat-typography-level(14px, 14px, 500), // Buttons
    $input: mat-typography-level(16px, 1.125, 400) // Input form fields
);

.css-selector {
  @include mat-typography-level-to-styles($custom-typography-config, display-3);
}

.main .main-content button.app-save {
  color: blue;
}

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

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

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

$base-theme: light;

$primary: mat-palette($mat-grey, 800, 100, 900); 
$secondary: mat-palette($mat-green); 
$accent: mat-palette($mat-blue); 
$warn: mat-palette($mat-red); 

$primary: mat-palette($mat-green, 800, 100, 900);

$primary: mat-palette($custom-hex-primary, 800, 100, 900);
$secondary: mat-palette($custom-hex-secondary, 800, 100, 900);
$accent: mat-palette($custom-hex-accent, 800, 100, 900);
$warn: mat-palette($custom-hex-warn, 800, 100, 900);

// If using a custom font, import it by URL. 
$typography-main-font-family: 'Roboto, sans-serif';

// Must resolve to a pixel value
$layout-responsive-breakpoint: 900px;
$layout-header-height: 64px;
$layout-header-menu-item-height: 36px;
$layout-header-menu-item-horiz-padding: 16px;
$layout-header-nested-menu-item-vert-padding: 5px;
$layout-header-menu-resp-item-height: 64px;
$layout-footer-height: 44px;
$layout-footer-menu-item-height: 36px;
$layout-footer-menu-item-horiz-padding: 16px;
$layout-footer-nested-menu-item-vert-padding: 5px;
$layout-context-bar-height: 60px;
$layout-context-bar-button-height: 36px;
$layout-context-bar-button-horiz-padding: 16px;
$layout-main-content-max-width: 1400px;
$layout-main-content-vert-padding: 38px;
$layout-horizontal-min-padding: 24px;

// Uses variables declared above
$typography-header: $typography-main;
$typography-footer: $typography-main;
$typography-context-bar: $typography-main;

$typography-context-bar: mat-typography-config(
    $font-family: 'Ubuntu, sans-serif',
    $headline: mat-typography-level(30px, 30px, 500), // Title
    $button: mat-typography-level(19px, 19px, 200) // Action buttons
);

$typography-main-display-4: mat-typography-level(112px, 112px, 300);
$typography-main-display-3: mat-typography-level(56px, 56px, 400);
$typography-main-display-2: mat-typography-level(45px, 48px, 400);
$typography-main-display-1: mat-typography-level(34px, 40px, 400);
$typography-main-headline: mat-typography-level(24px, 32px, 400);
$typography-main-title: mat-typography-level(20px, 32px, 400);
$typography-main-subheading-2: mat-typography-level(16px, 28px, 400);
$typography-main-subheading-1: mat-typography-level(15px, 24px, 400);
$typography-main-body-2: mat-typography-level(14px, 24px, 400);
$typography-main-body-1: mat-typography-level(16px, 22px, 400);
$typography-main-caption: mat-typography-level(12px, 20px, 400);
$typography-main-button: mat-typography-level(14px, 14px, 700);
$typography-main-input: mat-typography-level(16px, 1.125, 400);

// Copies properties declared above into a cohesive object
$typography-main: mat-typography-config(
  $font-family: $typography-main-font-family,
  $display-4: $typography-main-display-4,
  $display-3: $typography-main-display-3,
  $display-2: $typography-main-display-2,
  $display-1: $typography-main-display-1,
  $headline: $typography-main-headline,
  $title: $typography-main-title,
  $subheading-2: $typography-main-subheading-2,
  $subheading-1: $typography-main-subheading-1,
  $body-2: $typography-main-body-2,
  $body-1: $typography-main-body-1,
  $caption: $typography-main-caption,
  $button: $typography-main-button,
  $input: $typography-main-input);