CSS szerkesztése témákhoz

Cikk
07/01/2022
3 perc alatt elolvasható

Az egymásra épülő stíluslapok (CSS) segítségével szabályozhatja webhelye formázását. Alapértelmezés szerint a bootstrap.min.css és theme.css fájlok érhetők el. A létező CSS fájlokat szerkesztheti, és új CSS fájlokat tölthet fel. Egy új CSS fájl feltöltésekor a fájl a Portálfelügyelet alkalmazásban webfájlként válik elérhetővé.

Megjegyzés

Power Apps a portálok a Bootstrap 3.3. x verzión alapulnak, kivéve az Eseményportál. A portál fejlesztői nem helyettesíthetik a Bootstrap 3-at más CSS-tárakkal, mivel a Power Apps portálok egyes forgatókönyvei a Bootstrap 3.3. x-tól függnek. További információkat a jelen cikk A Bootstrap-keretrendszer megértése és a Bootstrap testreszabása szakaszaiban talál.

Egy CSS megnyitása a Kódszerkesztőben:

A portál szerkesztése a Power Apps portálstúdióban való megnyitásához.
Válasszon Témát A képernyő bal oldaláról számított pozíció. A rendszer megjeleníti az elérhető témákat.
Válassza ki a kívánt CSS elemet a kódszerkesztőben való megnyitáshoz.
Szerkessze a kódot, és mentse el a módosításokat.

Új CSS fájl feltöltéséhez:

A portál szerkesztése a Power Apps portálstúdióban való megnyitásához.
Válasszon Témát A képernyő bal oldaláról számított pozíció. A rendszer megjeleníti az elérhető témákat.
Válassza az Egyéni CSS feltöltése lehetőséget.
Tallózással keresse meg és válassza ki a feltöltendő CSS fájlt.

Egyéni CSS fájl törlése

A CSS fájlokat a rendszer webfájlként tárolja. A fájl eltávolításához CSS nyissa meg a Portálkezelés alkalmazást , és válassza a Web Files lehetőséget.
Keresse meg a CSS fájlrekordot. Előfordulhat, hogy a megfelelő rekord megkereséséhez szűrnie kell a Név és a Webhely értékeket.
Miután kiválasztotta a webes fájlrekordot, válassza a Törlés lehetőséget.
A Portal Studióban válassza a Konfiguráció szinkronizálása lehetőséget az egyéni CSS stílusváltozások törléséhez.

Bootstrap-keretrendszer megértése

A Bootstrap egy front-end keretrendszer, amely CSS-t és JavaScript-komponenseket tartalmaz a közös webes alkalmazás interfészelemekhez. Stílusokat tartalmaz navigációs elemekhez, űrlapokhoz, gombokhoz és egy reszponzív rácselrendezés-rendszert, amely lehetővé teszi, hogy a webhely-elrendezések dinamikusan módosuljanak a különböző méretű képernyővel rendelkező telefonok és táblagépek esetén. A Bootstrap elrendezési rendszer segítségével képes egy önálló webhelyet létrehozni, amely megfelelő felületet biztosít az összes, ügyfelek által használható eszköznek.

A portálokhoz mellékelt sablonok szabvány Bootstrap-összetevőkkel valósulnak meg, minimális további egyéni stílusokkal. Így, amikor megvalósítja a sablonokat, akkor igénybe veheti a Bootstrap testreszabási beállításait. Gyorsan személyre szabhatja a témát (betűtípusok, színek, stb.) úgy, hogy az az egész portálon konzisztensen módosuljon.

A Bootstrap testreszabása

A Bootstrap változók egy csoportján keresztül támogatja a testreszabást. Ezen változók valamelyike vagy mindegyike egyéni értéket kaphat, és letölthető a Bootstrap ezen értékek alapján testreszabott verziója.

A Bootstrap-változók ereje az, hogy nem diktálják egy elem stílusát. A keretrendszer összes eleme ezen értékeken alapul, és ezekből származik. Vegyük például a @font-size-base változót. Ez azt a méretet adja meg, amelyet a Bootstrap a normál szöveghez rendel. Azonban a Bootstrap arra is használja ezt a változót, hogy jelezze a fejlécek és egyéb elemek betűméretét. Egy H1 elem mérete meghatározható a @font-size-base méretének 300 százalékaként. Ennek az egy változónak a beállításával következetes módon szabályozható a portál teljes tipográfiai skálája. Hasonlóképpen a @link-color változó határozza meg a hivatkozások színét. Az ehhez az értékhez rendelt színhez a Bootstrap a hivatkozások rámutatási színét az egyéni érték 15 százalékkal sötétebbre állítja be.

A Bootstrap testreszabott verziója létrehozásának szokásos módja a hivatalos Bootstrap-webhelyen keresztül történik. Azonban a Bootstrap népszerűsége miatt több külső webhely is készült erre a célra. Ezek a webhelyek könnyebben kezelhető felületet biztosíthatnak a Bootstrap testreszabásához, vagy a Bootstrap előre megtervezett változatainak letöltését tehetik lehetővé. A hivatalos Bootstrap-testreszabó webhely további információkkal rendelkezik a Bootstrap testreszabásához.

Amikor letölti a Bootstrap testreszabott verzióját, az a következő könyvtárszerkezetet tartalmazza.

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

Vagy a használt testreszabó alkalmazástól függően előfordulhat, hogy csak bootstrap.min.css-t tartalmaz. Ettől függetlenül a bootstrap.min.css fájl tartalmazza a testreszabásokat. A többi fájl azonos a Bootstrap minden egyéni verziója esetén, és így már szerepelnek a portálon.

Kapcsolódó információk