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 stil sayfasından oluşur. Temaların amacı, portal sayfalarınızın tümünde görünümü ve tarzı tek seferde değiştirmenize olanak tanımaktır.
Temanızı aşağıdaki bölümlerde açıklandığı şekilde özelleştirebilir, önizleyebilir ve yayınlayabilirsiniz.
Tema düzenleyiciyi keşfetme
Tema düzenleyicide portalınızın temasını özelleştirin, önizleyin ve yayınlayın.
Tema düzenleyiciye erişmek için:
- Yan gezinme araç çubuğunda Yayınla > Portallar'ı seçin, 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 vurgulandığı gibi, tema düzenleyici şunları yapmanıza olanak tanır:
- Temel stiller tema düzenleyicisini kullanarak aşağıdaki öğeler de dahil olmak üzere temel stilleri hızlıca özelleştirin:
- Aşağıdakiler dahil ancak bunlarla sınırlı olmamak üzere gelişmiş tema düzenleyicisinde tema değişkenlerini geçersiz kılın veya tema stili öğelerini özelleştirin:
- Tema değişikliklerinizi önizleme
- Portalınızı tarayıcıda önizleme
- Temayı canlı portalınızda yayınlayın.
Temel tema hakkında
Sitenin görünümünü tanımlayan temel tema stili kurallarının çoğu Angular Material Design'a dayanır. Angular Material Design, birleşik bir etkileşimli deneyim sağlamak için ızgara tabanlı düzenler, tutarlı bileşenler ve stil kullanır.
Stil kuralları, Sassy Cascading Style Sheet (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ı boyunca yeniden kullanılabilen genel değişkenler.
- Stil sayfası geliştirme süresini kısaltmak için iç içe kurallar.
- Mixin'ler ve işlevler 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, içerik web sayfasında oluşturulmadan önce derlenir ve eski düz CSS'ye dönüştürülür.
Temel tema, bir Angular Material stil sayfası olan
material theming SCSS dosyasını (material-theming.scss) kullanır. Bu stil sayfası, Gelişmiş tema düzenleyiciyi kullanarak temayı özelleştirme bölümünde açıklandığı gibi, özel değişkenler ve SCSS bölümleri kullanılarak geçersiz kılınabilecek değişkenleri, işlevleri ve karışımları bildirir.
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 bir dizi SCSS değişkeni bildirilir. Tema değişkeni referansında listelenen değişkenleri geçersiz kılabilirsiniz.
Renk paletini özelleştirme
Temel stil düzenleyiciyi 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.
| Kategori | Stiller |
| Birincil | Gezinme araç çubukları, başlıklar, kart başlıkları ve düğmeler |
| İkincil | <pre> ve <code> metni
|
| Vurgu rengi | Gezinme, bağlantılar ve vurgulu düğmeler |
| Uyar | Uyarılar ve hatalar |
Temel stil düzenleyiciyi kullanarak renk paletini özelleştirme
Temel stil düzenleyiciyi kullanarak birincil ve vurgu renk paletlerini hızlıca özelleştirin.
Temel stil düzenleyiciyi kullanarak renk paletini özelleştirmek için:
- Tema düzenleyiciye erişin.
- Birincil rengi özelleştirmek için Birincil renk açılır listesinde bir renk seçin veya Özel'i tıklayıp metin kutusuna özel bir onaltılık renk değeri girin.
- Vurgu rengini özelleştirmek için Vurgu rengi açılır listesinde bir renk seçin veya Özel'i tıklayıp metin kutusuna özel bir onaltılık renk değeri girin.
- Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
- Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizleme'yi tıklayın.
Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portalınızın gezinme bölümünü tıklayabilirsiniz. - 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ştirme
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 ayarlanmış değerlere sahip aşağıdaki değişkenlerden birini veya daha fazlasını ekleyin. Renk paleti kategorileri hakkında başlıklı makaleyi inceleyin.
$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) belirlemek için içe aktarılan Material temalı 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.
Dilerseniz 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 kullanın:
$primary: mat-palette($my-color-variable, 900, 200, 400);
Yazı tipi ailesini ve stillerini özelleştirme
Temel stil düzenleyiciyi kullanarak veya tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stillerini özelleştirin. Özel bir yazı tipini de içe aktarabilirsiniz.
Temel stil düzenleyiciyi kullanarak yazı tipi ailesini ve stilleri özelleştirme
Temel stil düzenleyicisini kullanarak yazı tipi ailesini ve stillerini aşağıdaki şekilde gösterildiği gibi hızlıca özelleştirin.
Temel stil düzenleyiciyi kullanarak yazı tipi ailesini ve stillerini özelleştirmek için:
- Tema düzenleyiciye erişin.
- Yazı tipi ailesini değiştirmek için Yazı tipi açılır listesinde bir değer seçin.
- Yazı tipi stillerini değiştirmek için Yazı tipi stilleri bölümünü genişletin ve istenen HTML öğeleri için yazı tipi boyutu, satır yüksekliği ve yazı tipi ağırlığı da dahil olmak üzere stilleri gerektiği gibi düzenleyin.
- Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
- Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizleme'yi tıklayın.
Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portalınızın gezinme bölümünü tıklayabilirsiniz. - 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 stillerini özelleştirme
Yazı tipi ailesini ve stillerini tema değişkenlerini geçersiz kılarak özelleştirmek için gelişmiş tema düzenleyiciye erişin ve Değişkenler bölümüne ayarlanmış değerlere sahip bir veya daha fazla yazı tipi ailesi ve stili değişkeni ekleyin.
Örneğin, varsayılan yazı tipini Arial olarak değiştirmek için aşağıdaki değişkeni tanımlayın:
$typography-main-font-family: 'Arial';
Özel bir yazı tipini içe aktarma
Varsayılan yazı tipi grubunda yer almayan bir Google yazı tipini veya kendi özel yazı tipinizi içe aktarın, ardından özel yazı tipine stil sayfanızda referans verin (aşağıda açıklandığı gibi).
Google yazı tipini içe aktarma
Google yazı tipini içe aktarmak için gelişmiş tema düzenleyiciye erişin ve yazı tipini aşağıdaki resimde gösterildiği gibi Özel Stiller bölümünde içe aktarın:
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
Özel bir 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 Open Font Format (WOFF) ve daha fazlası dahil olmak üzere çeşitli dosya biçimi türlerini destekler.
Kendi özel yazı tipinizi içe aktarmak için:
- İsteğe bağlı olarak, Dosya yükleme bölümünde açıklandığı şekilde yazı tipi dosyasını öğe yöneticisine yükleyin.
Gelişmiş tema düzenleyicisine erişin ve
@font-facekuralını Özel Stiller bölümüne ekleyin. Buradafont-familyyazı tipi adını,urlyazı tipi dosyasının konumunu (bu durumda, varlık yöneticisi),MyCustomFont.tffözel yazı tipi dosyanızın adını veformatyazı tipi biçimini belirtir.@font-face { font-family: 'MyCustomFont'; src: url('files/MyCustomFont.tff') format('truetype') }
Stil sayfanızda özel yazı tipine referans verin.
Değişkenler bölümündeki yazı tipi ailesi ve stili değişkenlerinden birinde ö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ştirme
Portalda kullanılan logoları aşağıdaki konumlarda özelleştirebilirsiniz:
| Logo konumu | Varsayılan dosya boyutu |
|---|---|
| Masaüstü gezinme araç çubuğu | 196 x 32 piksel |
| Mobil gezinme araç çubuğu | 156 x 32 piksel |
| Tarayıcı adres çubuğundaki site simgesi (ve diğer konumlar) | 32 x 32 piksel |
| Oturum açma sayfası | 392 x 64 piksel |
Masaüstü ve mobil ekranlar için gezinme araç çubuğundaki logoyu özelleştirme
Masaüstü ve mobil ekranlar için gezinme araç çubuğundaki logoyu özelleştirin. Tarayıcınızın genişliğine bağlı olarak logonun masaüstü veya mobil versiyonunu görebilirsiniz.
Birincil logoyu silemezsiniz, yalnızca değiştirebilirsiniz. Mobil görüntü için bir 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:
- Şirket logonuzun kullanıma uygun bir veya daha fazla kopyasını edinin.
Önerilen boyutlar için önceki tabloya bakın. - Tema düzenleyiciye erişin.
- Masaüstü ekranlarında üst gezinme araç çubuğundaki 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. - Mobil ekranlarda üst gezinme araç çubuğundaki logoyu değiştirmek için:
a. Sağ bölmedeki Temel Stiller altında Logo seçenekleri'ni genişletin ve Mobil logo alanının altındaki simgesini tıklayın.
b. Yerel dizininizde logonuzun mobil versiyonuna göz atın.
c. Dosyayı yüklemek için Aç'ı tıklayın. - Değişikliklerinizi sol bölmede önizlemek için Kaydet'i tıklayın.
- 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ştirme
Web tarayıcısının adres çubuğunda (ve diğer konumlarda) kullanılan site simgesini özelleştirmek için:
- Favicon olarak kullanıma uygun bir şirket logosu kopyası edinin.
Önerilen boyut için önceki tabloya bakın. - Tema düzenleyiciye erişin.
- Sağ bölmedeki Temel Stiller altında Logo seçenekleri'ni genişletin ve Favicon alanının altındaki simgesini tıklayın.
- Yerel dizininizde logonuzun site simgesi sürümüne göz atın.
- Dosyayı yüklemek için Aç'ı tıklayın.
- Değişikliklerinizi sol bölmede önizlemek için Kaydet'i tıklayın.
- 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 Şirket bilgilerini yönetme başlıklı makalede açıklandığı gibi, oturum açma sayfasındaki logoyu özelleştirin.
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 bölümünde açıklandığı gibi birincil rengi değiştirerek üstbilgi ve altbilgideki gezinme araç çubuğunun rengini özelleştirin.
- Yazı tipi ailesini ve stillerini özelleştirme başlıklı makalede açıklandığı gibi, Yazı tipi ve Düğmeler stilini değiştirerek üstbilgi ve altbilgideki gezinme araç çubuğunda yer alan menü öğelerinin yazı tipi boyutunu ve stilini özelleştirin.
- Gelişmiş tema düzenleyicisine erişerek başlık gezinme araç çubuğunun yüksekliğini özelleştirin ve Değişkenler bölümüne aşağıdaki değişkeni ayarladığınız değerle birlikte ekleyin:
$layout-header-height: 64px; - Gelişmiş tema düzenleyicisine erişerek altbilgi gezinme araç çubuğunun yüksekliğini özelleştirin ve Değişkenler bölümünde aşağıdaki değişkeni ayarladığınız değerle birlikte ekleyin:
$layout-footer-height: 44px; - Masaüstü ve mobil ekranlar için gezinme araç çubuğundaki logoyu özelleştirin.
Arka plan resmini özelleştirme
Aşağıdaki görevlerden herhangi birini yaparak ana sayfadaki arka plan resmini özelleştirin:
home-background.jpg resminin kendi sürümünüzü aynı ad ve göreli dosya boyutuyla (3.000 piksel x 1.996 piksel) öğe yöneticisine yükleyin. Daha fazla bilgi için Öğelerinizi yönetme başlıklı makaleyi inceleyin.
Gelişmiş tema düzenleyicisine erişerek ve Özel Stiller bölümüne aşağıdaki SCSS'yi ayarlanmış değerlerle ekleyerek arka plan resmi dosya adını ve dolgusunu değiştirin:
#index { &.main { .main-content { padding: 0; background-image: url('/files/home-background.jpg'); background-size: cover; } } }Gelişmiş tema düzenleyicisine erişerek ve Özel Stiller bölümüne aşağıdaki SCSS'yi ayarlanmış değerle birlikte ekleyerek portaldaki tüm sayfalara arka plan resmi ekleyin:
body { background-image: url('/files/background-image.jpg'); }
Tipografiyi özelleştirme
Gelişmiş tema düzenleyicisine erişerek ve Değişkenler bölümünde aşağıdaki tipografi değişkenlerinden bir veya daha fazlasının değerlerini ayarlayarak tipografiyi özelleştirin:
$typography-main$typography-header$typography-footer$typography-context-bar
Örneğin:
// 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
);
Ardından, aşağıdaki örnekte gösterildiği gibi tipografiyi belirli bir CSS seçiciye uygulayabilirsiniz:
@include mat-base-typography($custom-typography-config, '.css-selector');
Alternatif olarak, aşağıdaki örnekte gösterildiği gibi, özel tipografide tanımlanan belirli bir tipografi düzeyini bir CSS seçiciye uygulayabilirsiniz:
.css-selector {
@include mat-typography-level-to-styles($custom-typography-config, display-3);
}
Gelişmiş tema düzenleyiciyi kullanarak temayı özelleştirme
Tema değişkenlerini geçersiz kılarak veya tema stil öğelerini doğrudan özelleştirerek temayı özelleştirin.
Tema değişkenlerini geçersiz kılma
Gelişmiş tema düzenleyicisinin Değişkenler bölümünde tema değişkenlerini geçersiz kılın. Tema değişkenlerinin listesi için Tema değişkeni referansı başlıklı makaleyi inceleyin.
Örneğin, başlık ve altbilgi gezinme araç çubuklarının yüksekliğini özelleştirmek için gelişmiş tema düzenleyicinin Değişkenler bölümüne sırasıyla aşağıdaki değişkenleri ayarlanan değerlerle birlikte ekleyin:
Diğer örnekler için şu makaleye bakın:
- Tema değişkenlerini geçersiz kılarak renk paletini özelleştirme
- Tema değişkenlerini geçersiz kılarak yazı tipi ailesini ve stillerini özelleştirme
Tema değişkenlerini geçersiz kılmak için:
- Tema düzenleyiciye erişin.
- Sağ bölmede Gelişmiş'i tıklayın.
- Değişkenler'i tıklayın.
- Değişken geçersiz kılmalarınızı ekleyin.
Geçersiz kılınabilecek değişkenlerin listesi için Tema değişkeni referansı başlıklı makaleyi inceleyin. - Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
- Gelişmiş tema düzenleyiciyi kapatmak için x işaretini tıklayın.
- Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizleme'yi tıklayın. Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portalınızın gezinme bölümünü tıklayabilirsiniz.
- Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.
Tema stili öğelerini özelleştirme
Tema stili öğelerini doğrudan gelişmiş tema düzenleyicisinin Özel Stiller bölümünde özelleştirin.
Örneğin, portalda uygulamaları kaydederken görünen Yeni uygulama sayfasındaki Oluştur düğmesinin rengini değiştirmek için aşağıdaki tema stili öğesini ayarlanmış bir değerle birlikte ekleyin:
.main .main-content button.app-save {
color: blue;
}
Ayrıca Arka plan resmini özelleştirme başlıklı makaleyi de inceleyin.
Tema stili öğelerini özelleştirmek için:
- Tema düzenleyiciye erişin.
- Sağ bölmede Gelişmiş'i tıklayın.
- Özel Stiller'i tıklayın.
- Tema stil öğelerinizi ekleyin.
- Değişikliklerinizi kaydetmek için Kaydet'i tıklayın.
- Gelişmiş tema düzenleyiciyi kapatmak için Kapat'ı x tıklayın.
- Değişikliklerinizi önizleme bölmesinde görüntüleyin veya portal değişikliklerini tarayıcıda önizlemek için Önizleme'yi tıklayın.
Not: Tüm sayfalardaki değişiklikleri görüntülemek için önizleme bölmesinde portalınızın gezinme bölümünü tıklayabilirsiniz. - Temanızı yayınlamak için Yayınla'yı tıklayın. Güncellemeyi onaylamanız istenir.
Portal sayfasında tam genişlikte bir panel oluşturma
Portal sayfasında tam genişlikte bir panel oluşturmak için:
- Tema stili öğelerini özelleştirme bölümünde açıklandığı gibi, gelişmiş tema düzenleyicide aşağıdaki tema stili öğelerini ekleyin:
.full-width__container { position: relative; left: 50%; right: 50%; max-width: 100vw; margin-left: -50vw; margin-right: -50vw; background-image: url("/files/your-image.jpg"); background-size: cover; background-position: 50% 50%; padding: 0; } .full-width__centered { @include centered-content(); } .full-width__content { // Add any 'additional' padding here and NOT in .full-width__centered. Adding padding to // .full-width__centered will result in a horizontal scroll bar. You can exclude this class // and corresponding <div> container if no additional padding control other than the // min page padding is needed. } - Sayfa düzenleyiciyi kullanarak portal içeriği geliştirme başlıklı makalede açıklandığı gibi, portal sayfası içeriğini aşağıdaki
<div>öğesini içerecek şekilde düzenleyin:<div class="full-width__container"> <div class="full-width__centered"> <div class="full-width__content"> <!-- Include this div if you need additional padding --> <h2>Full Width Container</h2> <p> This content will align with the page header and other content outside of this full width container </p> </div> </div> </div>
Temayı yayınlama
Eklediğiniz tema ve stil özelleştirmelerini canlı portalda yayınlamak için:
- Tema düzenleyiciye erişin.
- Yayınla'yı tıklayın.
Yayınlanan içeriğinizi canlı portalda görüntülemek için üst gezinme araç çubuğunda Portalı Görüntüle'yi tıklayın.
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 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 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 id ö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
Tema değişkeni referansı
Aşağıdaki bölümlerde, Tema değişkenlerini geçersiz kılma başlıklı makalede açıklandığı gibi, gelişmiş tema düzenleyicinin Değişkenler bölümünde geçersiz kılınabilecek değişkenler özetlenmektedir.
- Temel tema değişkeni
- Renk paleti değişkenleri
- Yazı tipi ailesi ve stil değişkenleri
- Yazı biçimi değişkenleri
Temel tema değişkeni
Site genelinde kullanılan temel temanın ön plan renklerini özelleştirin. Geçerli değerler light ve dark'dir.
$base-theme: light;
Renk paleti değişkenleri
Birincil, ikincil, vurgu ve uyarı mesajı renklerini değiştirmek için aşağıdaki değişkenleri değiştirerek renk paletini özelleştirin. Renk paleti kategorileri hakkında başlıklı makaleyi inceleyin.
$primary: mat-palette($mat-grey, 800, 100, 900);
$secondary: mat-palette($mat-green);
$accent: mat-palette($mat-blue);
$warn: mat-palette($mat-red);
Sayısal değerler sırasıyla varsayılan, daha açık ve daha koyu öğelerin gölgelendirme değerlerini gösterir. Önceden tanımlanmış renk değişkenlerini belirlemek için material theming SCSS dosyasının (material-theming.scss) içeriğini görüntüleyin.
Örneğin, birincil renk paletini aşağıdaki gibi yeşile değiştirebilirsiniz:
$primary: mat-palette($mat-green, 800, 100, 900);
Yalnızca temel temada tanımlanan varsayılan renk kümesinin gölgelendirme değerlerini özelleştirmek için aşağıdaki kodu, ayarlanmış gölgelendirme değerleriyle birlikte ekleyin:
$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);
Yazı tipi ailesi ve stil değişkenleri
Yazı tipi ailesini ve stillerini özelleştirin.
// 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;
Daha ayrıntılı kontrol için aşağıdaki örnekte gösterildiği gibi kendi özel tipografinizi belirtin:
$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
);
Tipografi değişkenleri
Angular Material tipografisini özelleştirin. Her bir tipografi düzeyi, yazı tipi boyutunu, satır yüksekliğini ve yazı tipi ağırlığını tanımlar.
$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);