Edytuj CSS dla motywów

  • Artykuł

Uwaga

Cascading Style Sheets (CSS) umożliwiają sterowanie formatowaniem witryny sieci Web. Domyślnie dostępne są pliki bootstrap.min.css i theme.css. Użytkownik może edytować istniejące pliki CSS i przekazywać nowe pliki CSS. Podczas przekazywania nowego pliku CSS, będzie on dostępny jako plik sieci Web w aplikacji Zarządzanie portalem.

Ważne

Portale Power Apps są oparte na protokole Bootstrap 3.3.x z wyjątkiem Portalu wydarzeń Deweloperzy portalu nie powinni zastępować Bootstrap 3 innymi bibliotekami CSS, ponieważ niektóre scenariusze w portalach Power Apps są zależne od Bootstrap 3.3.x. Więcej informacji można znaleźć w sekcji w tym artykule w sekcji Zrozumienie struktury ładowania początkowego i dostosowywanie struktury ładowania początkowego.

Otwórz CSS w edytorze kodu.

Aby otworzyć plik CSS w edytorze kodu, dokonaj edycji portalu, aby otworzyć go w programie Portale Studio Power Apps.

  1. Wybierz Motyw ikonę motywu. z lewej strony ekranu. Zostaną wyświetlone dostępne motywy.

    Motyw.

  2. Wybierz żądany CSS, aby otworzyć go w edytorze kodu.

  3. Edytuj kod i zapisz zmiany.

Przekaż nowy plik CSS

Aby przekazać nowy plik CSS, dokonaj edycji portalu, aby otworzyć go w programie Portale Studio Power Apps.

  1. Wybierz Motyw ikonę motywu. z lewej strony ekranu. Zostaną wyświetlone dostępne motywy.

  2. Wybierz Przekaż niestandardowe CSS.

    Przekaż niestandardowe CSS.

  3. Wyszukaj i wybierz plik CSS do przekazania.

Usuń plik niestandardowy CSS

Pliki CSS są przechowywane jako pliki sieci web.

  1. Aby usunąć plik CSS, przejdź do aplikacji Zarządzanie portalami i wybierz pliki sieci Web.

  2. Znajdź rekord pliku CSS. W celu znalezienia poprawnego rekordu może być konieczne filtrowanie według wartości Nazwa i Witryna sieci Web.

  3. Po wybraniu rekordu pliku sieci Web wybierz opcję Usuń.

  4. W portalu Studio wybierz Konfigurację synchronizacji, aby wyczyścić zmiany stylu z konfiguracji niestandardowej CSS.

Zrozumienie struktury ładowania początkowego

Struktury ładowania początkowego to struktura przód-tył składająca się z CSS i elementów JavaScript dla typowych dla aplikacji sieci Web elementów interfejsu. Zawiera style dla elementy nawigacyjne, formularze, przyciski, i elastyczny system układu siatki, co umożliwia układom witryn dynamiczne dostosowywanie się do urządzeń o różnych rozmiarach ekranu, takich jak telefony komórkowe i tablety. Za pomocą systemu układu struktury ładowania początkowego możesz opracować jedną witrynę o interfejsie odpowiednim dla wszystkich urządzeń, które mogą być używane przez klientów.

Szablony dołączone do portali są implementowane przy użyciu standardowych składników struktury ładowania początkowego, z minimalnymi dodatkowymi stylami niestandardowymi. Podczas implementowania szablonów można korzystać z opcji dostosowań struktury ładowania początkowego. Można szybko dostosować motyw (czcionki, kolory i tak dalej) szybko, i w taki sposób, aby był on stosowany konsekwentnie dla całego portalu.

Dostosowywanie ładowania początkowego

Ładowanie początkowe obsługuje dostosowywanie przy użyciu zestawu zmiennych. Możesz ustawić niektóre lub wszystkie z tych zmiennych dla wartości niestandardowych, a następnie pobrać niestandardową wersję ładowania początkowego opracowaną na podstawie tych wartości.

Zmienne ładowania początkowego nie wyznaczają stylu pojedynczego elementu. Wszystkie style w strukturze zostają oparte na i pochodzą od tych wartości. Rozważmy na przykład zmienną @font-size-base. Określa rozmiar, który ładowanie początkowe przypisuje do normalnego tekstu. Jednakże ładowanie początkowe używa tej zmiennej również do tego, aby wskazać rozmiar czcionki dla nagłówków i innych elementów. Wielkość elementu H1 może zostać zdefiniowana jako 300% wielkości @font-size-base. Ustawiając tę jedną zmienną kontrolujesz w jednolity sposób całą skalę typograficzną portalu. Podobnie zmienna @link-color określa kolor hiperłączy. Dla koloru przypisanego do tej wartości ładowania początkowego zdefiniuje kolor wskaźnika dla łączy jako o 15% ciemniejszy niż wartość niestandardowa.

Standardowy sposób tworzenia niestandardowej wersji ładowania początkowego odbywa się za pośrednictwem oficjalnej witryny. Jednakże, ze względu na popularność ładownia początkowego w tym samym celu zostały również utworzone liczne witryn innych firm. Te witryny mogą zapewniać łatwiejszy w użyciu interfejs dla dostosowywania ładowania początkowego, lub wstępnie zaprojektowane wersje ładowania początkowego gotowe do pobrania. Oficjalny konfigurator ładowania początkowego zawiera więcej informacji na temat dostosowywania.

Pobrana niestandardowa wersja ładowania początkowego zawiera następującą strukturę katalogów.

css/
    |-- bootstrap.min.css 
img/
    |-- glyphicons-halflings-white.png 
    |-- glyphicons-halflings.png 
js/ 
    |-- bootstrap.min.js

Lub, zależnie od użytej aplikacji konfiguratora, może zawierać tylko bootstrap.min.css. Niezależnie od tego plik bootstrap.min.css zawiera dostosowania. Inne pliki są takie same dla wszystkich niestandardowych wersji ładowania początkowego, i zostały już uwzględnione w Twoim portalu .

Zobacz też

Uwaga

Czy możesz poinformować nas o preferencjach dotyczących języka dokumentacji? Wypełnij krótką ankietę. (zauważ, że ta ankieta jest po angielsku)

Ankieta zajmie około siedmiu minut. Nie są zbierane żadne dane osobowe (oświadczenie o ochronie prywatności).