Uređivanje CSS za teme

Kaskadni listovi stilova (CSS) omogućuju vam kontrolu oblikovanja web-mjesta. Prema zadanim postavkama dostupne su datoteke bootstrap.min.css i theme.css. Možete urediti postojeće CSS datoteke i prenijeti nove CSS datoteke. Kada prenesete novi CSS datoteku, ona će biti dostupna kao web-datoteka u aplikaciji Upravljanje portalima.

Napomena

Power Apps portali temelje se na Bootstrapu 3.3.x, osim Portal događaja. Programeri portala ne bi trebali zamijeniti Bootstrap 3 drugim CSS bibliotekama jer neki od scenarija u Power Apps portalima ovise o Bootstrapu 3.3.x. Dodatne informacije potražite u odjeljcima Razumijevanje Bootstrap okvira i Prilagodba Bootstrap okvira u ovom članku.

Da biste otvorili CSS u uređivaču kodova:

  1. Uredite portal da biste ga otvorili u Power Apps portalima Studio.

  2. Odaberite Tema Ikona teme. s lijeve strane zaslona. Prikazuju se dostupne teme.

    Tema.

  3. Odaberite željeni CSS da biste ga otvorili u uređivaču kodova.

  4. Uredite kod i spremite promjene.

Da biste prenijeli novu CSS datoteku:

  1. Uredite portal da biste ga otvorili u Power Apps portalima Studio.

  2. Odaberite Tema Ikona teme. s lijeve strane zaslona. Prikazuju se dostupne teme.

  3. Odaberite Prenesi prilagođene CSS.

    Prenesite prilagođene CSS.

  4. Pregledajte i odaberite CSS datoteku za prijenos.

Razumijevanje Bootstrap okvira

Bootstrap je front-end okvir koji uključuje CSS i JavaScript komponente za uobičajene elemente sučelja web aplikacije. Uključuje stilove za elemente navigacije, obrasce, tipke i responzivni sustav rasporeda rešetke koji dopušta rasporedima web-mjesta automatsko prilagođavanje uređajima s različitim veličinama zaslona, kao što su telefoni i tableti. Koristeći Bootstrap sustav izgleda možete razviti jedno mjesto koje predstavlja odgovarajuće sučelje za sve uređaje koje klijenti mogu koristiti.

Predlošci dostupni u sklopu s portalima implementirani su uz pomoć standardnih Bootstrap komponenti s minimalnim brojem dodatnih prilagođenih stilova. Tako da pri implementaciji predložaka možete iskoristiti Bootstrap mogućnosti prilagodbe. Možete brzo prilagoditi temu (fontove, boje i tako dalje) tako da se ona dosljedno primjenjuje na cijeli portal.

Prilagodba Bootstrap okvira

Bootstrap podržava prilagodbu putem skupa varijabli. Možete postaviti određene ili sve varijable na prilagođene vrijednosti, a zatim preuzeti prilagođenu verziju Bootstrap okvira koja je sastavljena na temelju tih vrijednosti.

Snaga Bootstrap varijabli je u tome da one ne diktiraju stil pojedinog elementa. Svi stilovi u okviru temelje se i izvedeni su pomoću tih vrijednosti. Na primjer, uzmite u obzir varijablu @font-size-base. Određuje veličinu koju Bootstrap dodjeljuje normalnom tekstu. Međutim, Bootstrap također koristi ove varijable da bi naznačio veličine fonta za naslove i druge elemente. Veličina H1 elementa može se definirati da bude 300 posto veličine varijable @font-size-base. Postavljanjem te jedne varijable kontrolirate čitavo tipografsko skaliranje na portalu na dosljedan način. Isto tako, varijabla @link-color kontrolira boju hiperveza. Za boju koju dodijelite toj vrijednosti Bootstrap će definirati boju pri prelasku pokazivačem za veze 15 posto tamniju od prilagođene vrijednosti.

Standardni način za stvaranje prilagođene verzije Bootstrap okvira je na službenom Bootstrap web-mjestu. Međutim, zbog popularnosti Bootstrap okvira mnogo web-mjesta trećih strana također je stvoreno u tu svrhu. Ta web-mjesta mogu pružati sučelje koje je jednostavnije za prilagodbu Bootstrap okvira ili unaprijed dizajnirane verzije Bootstrap okvira za preuzimanje. Web-mjesto sa službenim alatom za prilagođavanje Bootstrap okvira sadrži dodatne informacije o prilagodbi Bootstrap okvira.

Prilikom preuzimanja prilagođene verzije Bootstrap okvira, on sadrži strukturu direktorija navedenu u nastavku.

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

Ili, ovisno o aplikaciji koja se upotrebljava za prilagođavanje, može sadržavati samo bootstrap.min.css. Unatoč tome, bootstrap.min.css je datoteka koja sadrži prilagodbe. Ostale datoteke su jednake za sve prilagođene verzije Bootstrap okvira i već su uključene u portal.

Pogledajte