Dostosowywanie motywu (wersja oryginalna)

Przeglądasz dokumentację Apigee Edge.
Otwórz dokumentację Apigee X. Informacje

Motyw składa się z globalnego kaskadowego arkusza stylów (CSS), który zapewnia jednolity wygląd wszystkich stron w portalu. Motywem jest możliwość zmiany wyglądu i stylu wszystkich stron portalu jednocześnie.

Większość stylów domyślnych dostępnych w przykładowym portalu jest opartych na wczytywaniach. Możesz dostosować i opublikować motyw, a także zobaczyć jego podgląd zgodnie z opisem w sekcjach poniżej.

Obejrzyj film, aby dowiedzieć się, jak dostosować motyw portalu.

Otwieranie edytora motywów

Dostosuj, wyświetl podgląd i opublikuj motyw portalu w edytorze motywów. Aby otworzyć edytor motywów, w menu na górnym pasku nawigacyjnym wybierz Motyw.

Edytor motywów

Jak już wspomnieliśmy na poprzedniej ilustracji, edytor motywów umożliwia:

Dodaj style niestandardowe

Dostosuj motyw, dodając własny kod CSS w panelu edytora stylów. Obsługiwane są wszystkie elementy stylu CSS.

Aby dostosować motyw:

  1. W menu na górnym pasku nawigacyjnym wybierz Motyw.
  2. Dodaj własny kod CSS w panelu edytora stylów po prawej stronie.
  3. Aby wyświetlić podgląd zmian, kliknij Załaduj ponownie podgląd.
    > Uwaga: możesz klikać elementy nawigacyjne w portalu, aby zobaczyć podgląd treści na wszystkich stronach.
  4. Aby opublikować zmiany motywu, kliknij Opublikuj.
  5. Kliknij Opublikuj, aby potwierdzić aktualizację.

Dostosuj obraz „Twoje logo” na logo swojej firmy. Zastąp poniższe pliki graficzne w menedżerze plików, przesyłając logo, używając tych samych nazw i względnych rozmiarów plików:

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

Dodatkowo w razie potrzeby zmodyfikuj te treści w arkuszu stylów CSS:

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



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

Więcej informacji znajdziesz w artykule Zarządzanie komponentami.

Dostosuj obraz tła na stronie głównej

Dostosuj obraz tła na stronie głównej, modyfikując poniższe treści w arkuszu stylów CSS.

  • Zmień plik obrazu tła i jego położenie.
    Możesz przesłać do menedżera plików własną wersję obrazu portal-hero.jpg, używając tej samej nazwy i względnego rozmiaru pliku (1440 x 540 pikseli). Jeśli chcesz użyć innej nazwy pliku, zmień wartość background-image w kodzie CSS poniżej. 

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

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

  • Zmień format tekstu, który nakłada się na obraz tła. 

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

Omówienie reguł specyficzności CSS

Szczegółowość CSS opisuje metodę używaną przez przeglądarkę do określania pierwszeństwa deklaracji elementów stylu CSS w przypadku wystąpienia konfliktów. Szczegółowość CSS jest obliczana przez zastosowanie wagi do deklaracji elementu stylu CSS na podstawie jego typu selektora. Im bardziej szczegółowy selektor arkusza CSS, tym większa waga. Na przykład atrybut „identyfikator” będzie miał w obliczeniach większą wagę niż selektor typu.

Jeśli np. zdefiniujesz w kodzie CSS te elementy stylu, ten element będzie miał kolor czerwony, bo deklaracja elementu stylu p w elemencie div jest bardziej szczegółowa niż deklaracja elementu stylu p.

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

Podobnie, jeśli w kodzie CSS zdefiniujesz podane niżej deklaracje elementów stylu, tekst w tagach <div class="test"></div> będzie miał kolor niebieski, ponieważ deklaracja stylu atrybutu identyfikator w elemencie div jest bardziej szczegółowa niż deklaracja elementu stylu div.

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

W przypadku deklaracji elementów stylu o tej samej specyfice obowiązuje ostatnia zdefiniowana deklaracja elementu stylu. Na przykład w kolejności podanych niżej deklaracji elementów stylu element akapitu będzie miał kolor niebieski. 

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

Opublikuj motyw

Aby opublikować w aktywnym portalu dodane dostosowania motywu i stylu:

  1. W menu w górnym menu nawigacyjnym wybierz Motyw.
  2. Kliknij Opublikuj.

Aby wyświetlić opublikowane treści w aktywnym portalu, kliknij Aktywny portal na górnym pasku nawigacyjnym.