Správa souborů CSS

Kaskádové styly (CSS) umožňují ovládat formátování a styl vašeho webu.

Ve výchozím nastavení budou mít nové weby Power Pages nainstalovány soubory bootstrap.min.css, theme.css a portalbasictheme.css jako součást šablon webu.

Styl můžete upravit s využitím pracovního prostoru Formátování nebo můžete nahrát své vlastní soubory CSS.

Když nahrajete nový vlastní soubor CSS, bude k dispozici jako webový soubor v aplikaci Správa portálu.

Poznámka:

Weby Power Pages používají systém Bootstrap 3.3.x. Vývojáři webu by neměli nahrazovat Bootstrap 3 jinými knihovnami CSS, protože některé ze scénářů Power Pages jsou závislé na systému Bootstrap 3.3.x. Další informace viz části Pochopení rámce Bootstrap a Přizpůsobení bootstrap v tomto článku.

Správa vlastních souborů CSS v pracovním prostoru Formátování

  1. Umožňuje přejít na Power Pages.

  2. Vyberte příkaz Upravit na webu, do kterého chcete přidat stránku.

  3. Vyberte pracovní prostor Formátování.

  4. Vyberte možnost Spravovat CSS umístěnou pod různými možnostmi v pracovním prostoru Formátování.

    Manage CSS files using design studio.

Nahrání souborů CSS

V panelu Spravovat CSS uvidíte seznam výchozích souborů CSS:

  • bootstrapmin.css
  • theme.css
  • portalbasictheme.css

Chcete-li nahrát vlastní soubor CSS, vyberte příkaz Nahrát a zvolte vlastní soubor CSS.

Upload CSS files using design studio.

Poznámka:

  • Nahrát můžete vlastní soubor CSS o velikosti do 1 MB.
  • Kdysi je vlastní soubor CSS nahrán, zobrazí se jeho náhled na pravé straně.
  • Nahrané vlastní soubory CSS budou použitelné na všechny motivy.

Více možností

Vyberte tři tečky ... vpravo od vlastního souboru CSS, a v rozvinuté nabídce můžete nastavit vyšší nebo nižší prioritu souboru nebo vlastní soubor CSS zakázat.

Poznámka:

Soubory CSS uvedené dole mají vyšší prioritu, což znamená, že pokud dva soubory obsahují aktualizaci se stejnou vlastností, použije se aktualizace obsažená v souboru uvedeném níže v seznamu.

Order of precedence for CSS files.

Architektura

Jakýkoli vlastní soubor CSS má nižší prioritu než výchozí soubor portalbasictheme.css a vyšší než theme.css. Toto stanovení priorit má podpořit přizpůsobení stylů v panelu stylů u integrovaných možností formátování.

Poznámka:

Doporučujeme využívat vlastní CSS k formátování pouze u stylů, které nejsou k dispozici po rozbalení v podokně stylů.

Upozorňující

Nedeaktivujte, neodstraňujte ani neměňte pořadí zobrazení žádného z výchozích souborů CSS (bootstrap.min.css, theme.css nebo portalbasictheme.css). V návrhovém studiu uvidíte chybu.
Update CSS files using the Portals Management app.
Otevřete aplikaci Správa portálu a obnovte výchozí stav a pořadí zobrazení výchozích souborů CSS, abyste vyřešili problém.

Odstranění vlastního souboru CSS

  1. Soubory CSS jsou uloženy jako webové soubory. Chcete-li odebrat vlastní soubor CSS, přejděte do aplikace Správa portálu a vyberte Webové soubory.

  2. Vyhledejte záznam vlastního souboru CSS. Možná budete muset filtrovat podle hodnot Název a Webová stránka k nalezení správného záznamu.

  3. Jakmile je vybrán záznam webového souboru, vyberte Odstranit.

  4. V návrhovém studiu vyberte Konfigurace synchronizace, čímž vymažete změny stylu z vlastního souboru CSS.

Porozumění rámci bootstrap

Bootstrap je front-endový rámec, který zahrnuje šablony stylů CSS a komponenty JavaScript pro společné prvky rozhraní pro webové aplikace. Obsahuje styly pro navigační prvky, formuláře, tlačítka a rychlý systém rozložení mřížky, což umožňuje rozložení webu dynamicky se přizpůsobit zařízením s různou velikostí obrazovky, jako jsou telefony a tablety. Pomocí rámce Bootstrap je možné vyvinout jediný web, který nabízí odpovídající rozhraní pro všechna zařízení, která může zákazník používat.

Šablony obsažené v Power Pages jsou implementovány pomocí standardních komponent Bootstrap s minimem dalších vlastních stylů. Takže při implementaci šablony můžete využít výhod možností vlastního nastavení Bootstrap. Můžete rychle přizpůsobit motiv (písma, barvy a tak dále) takovým způsobem, aby se výsledek konzistentně aplikoval v celém webu.

Prizpůsobení bootstrap

Bootstrap podporuje vlastní nastavení pomocí sady proměnných. Některé nebo všechny tyto proměnné lze nastavit na vlastní hodnoty a potom stáhnout vlastní verzi Bootstrap kompilovanou na základě těchto hodnot.

Výhodou proměnných Bootstrap je to, že nediktují styl jednoho prvku. Všechny styly v rámci vycházejí a odvozují se od těchto hodnot. Zvažte například proměnnou @font-size-base. Tato hodnota určuje velikost, kterou Bootstrap přiřazuje normálnímu textu. Bootstrap však tuto proměnnou používá také k označení velikosti písma pro nadpisy a další prvky. Velikost prvku H1 může být definována jako 300 procent velikosti @font-size-base. Nastavením této jediné proměnné tak můžete jednotným způsobem řídit celý typografický rozsah portálu. Podobně proměnná @link-color určuje barvu hypertextových odkazů. Po přiřazení barvy této hodnotě nadefinuje Bootstrap barvu při ukázání na odkazy jako tmavší o 15 procent oproti vlastní hodnotě.

Standardní způsob, jak vytvořit vlastní verzi Bootstrap, je přes oficiální web Bootstrap. Nicméně vzhledem k popularitě Bootstrap vzniklo pro tento účel rovněž mnoho webů jiných společností. Tyto weby mohou poskytovat rozhraní pro snadnější vlastní nastavení Bootstrap nebo předem navržené verze Bootstrap ke stažení. Oficiální web pro úpravy Bootstrap poskytuje více informací o vlastním nastavení Bootstrap.

Když stáhnete upravenou verzi Bootstrap, obsahuje následující adresářovou strukturu.

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

Nebo – podle typu použité aplikace úpravce – může obsahovat pouze bootstrap.min.css. Bez ohledu na to je bootstrap.min.css soubor, který obsahuje vlastní nastavení. Ostatní soubory jsou stejné pro všechny vlastní verze Bootstrap a jsou již součástí vašeho portálu aplikace.

Viz také