Dostosowywanie motywu (wersja oryginalna)

Wyświetlasz dokumentację Apigee Edge.
Otwórz dokumentację Apigee X. info

Motyw to globalny arkusz stylów kaskadowych (CSS), który zapewnia jednolity wygląd wszystkich stron portalu. Celem motywu jest umożliwienie jednoczesnej zmiany wyglądu wszystkich stron portalu.

Większość domyślnych stylów dostarczonych z przykładowym portalem jest oparta na Bootstrapie. Motyw możesz dostosować, wyświetlić jego podgląd i opublikować, jak opisano w sekcjach poniżej.

Aby dowiedzieć się, jak dostosować motyw portalu, obejrzyj poniższy film.

Otwieranie edytora motywów

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

Edytor motywów

Jak widać na poprzednim rysunku, edytor motywów umożliwia:

Dodawanie stylów niestandardowych

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

Aby dostosować motyw:

  1. W menu na górnym pasku nawigacyjnym kliknij Motyw.
  2. Dodaj własny kod CSS w panelu edytora stylu po prawej stronie strony.
  3. Aby wyświetlić podgląd zmian w panelu podglądu, kliknij wczytaj ponownie podgląd.
    > Uwaga: możesz kliknąć nawigację portalu, aby wyświetlić podgląd treści na wszystkich stronach.
  4. Aby opublikować zmiany motywu, kliknij Opublikuj.
  5. Aby potwierdzić aktualizację, kliknij Opublikuj.

Dostosuj obraz „Twoje logo” za pomocą logo firmy, zastąp poniższe pliki obrazów w menedżerze plików, przesyłając logo pod tymi samymi nazwami i o podobnych rozmiarach:

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

W razie potrzeby zmodyfikuj też w arkuszu stylów CSS te elementy:

/* ==== 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 zasobami.

Dostosowywanie obrazu tła na stronie głównej

Dostosuj obraz tła na stronie głównej, modyfikując w arkuszu stylów CSS te treści:

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

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

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

  • Zmień format tekstu, który jest nakładany 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;
}

Poznaj reguły specyficzności CSS

Specyficzność CSS to metoda używana przez przeglądarkę do określania priorytetu deklaracji elementów stylu CSS w przypadku wystąpienia konfliktów. Specyficzność CSS jest obliczana przez przypisanie wagi do deklaracji określonego elementu stylu CSS na podstawie jego typu selektora. Im bardziej szczegółowy jest selektor CSS, tym większa jest jego waga. Na przykład atrybut identyfikatora będzie miał większą wagę w obliczeniach niż selektor typu.

Jeśli na przykład w kodzie CSS zdefiniujesz te elementy stylu, element akapitu będzie miał kolor czerwony, ponieważ 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 te deklaracje elementu stylu, każdy tekst umieszczony w tagach <div class="test"></div> będzie miał kolor niebieski, ponieważ deklaracja stylu atrybutu id 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 elementu stylu o tej samej szczegółowości pierwszeństwo ma ostatnia zdefiniowana deklaracja elementu stylu. Na przykład przy podanej kolejności deklaracji elementu stylu element akapitu będzie miał kolor niebieski. 

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

Publikowanie motywu

Aby opublikować w aktywnym portalu dodane przez Ciebie motywy i dostosowania stylu:

  1. W menu nawigacyjnym u góry wybierz Motyw z menu rozwijanego.
  2. Kliknij Opublikuj.

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