Del via

Redigere CSS til temaer

  • Artikel

Bemærk

Med Cascading Style Sheets (CSS) kan du styre formateringen af dit websted. Som standard er bootstrap.min.css- og theme.css-filer tilgængelige. Du kan redigere de eksisterende CSS-filer og overføre nye CSS-filer. Når du overfører en ny CSS-fil, bliver den tilgængelig som en webfil i appen Portaladministration.

Vigtigt

Power Apps-portaler er baseret på Bootstrap 3.3.x med undtagelse af Arrangementsportal. Portaludviklere skal ikke erstatte Bootstrap 3 med andre CSS-biblioteker, da nogle af scenarierne i Power Apps-portaler er afhængige af Bootstrap 3.3.x. Du kan finde flere oplysninger i afsnittene Om Bootstrap-struktur og Tilpasse Bootstrap i denne artikel.

Åbne en CSS i kodeeditor

Hvis du vil åbne en CSS i kode-editor skal du redigere portalen for at åbne den i Power Apps Portal Studio.

  1. Vælg Tema ikonet Tema. i venstre side af skærmen. De tilgængelige temaer vises.

    Tema.

  2. Vælg den ønskede CSS for at åbne den i kodeeditoren.

  3. Rediger koden, og gem ændringerne.

Overføre en ny CSS-fil

Hvis du vil overføre en ny CSS-fil, skal du redigere portalen for at åbne den i Power Apps Portal Studio.

  1. Vælg Tema ikonet Tema. i venstre side af skærmen. De tilgængelige temaer vises.

  2. Vælg Overfør brugerdefineret CSS.

    Overfør brugerdefineret CSS.

  3. Gå til CSS-filen, og markér den for at overføre den.

Slette en brugerdefineret CSS-fil

CSS-filerne gemmes som webfiler.

  1. Hvis du vil fjerne CSS-filen, skal du gå til appen Portaladministration og vælge Webfiler.

  2. Find CSS-filposten. Det kan være nødvendigt at filtrere på værdierne Navn og Websted for at finde den rette post.

  3. Vælg Slet, når webfilposten er valgt.

  4. Vælg Synkroniseringskonfiguration i portalstudiet for at rydde ændringerne fra den brugerdefinerede CSS.

Om Bootstrap-strukturen

Bootstrap er en front-end-struktur, der indeholder CSS og JavaScript-komponenter til fælles grænsefladeelementer i webprogrammer. Det indeholder typografier til navigationselementer, formularer, knapper og et responsivt gitterlayoutsystem, som gør det muligt for webstedets layout dynamisk at tilpasse sig enheder, der har forskellige skærmstørrelser, f.eks. telefoner og tablets. Ved hjælp af Bootstrap-layoutsystemet er det muligt at udvikle et enkelt websted, der giver en passende grænseflade til alle de enheder, dine kunder måtte bruge.

De skabeloner, der følger med portaler, er implementeret ved hjælp af Bootstrap-standardkomponenter med minimale yderligere brugerdefinerede typografier. Så når du implementerer skabelonerne, kan du drage fordel af Bootstrap-tilpasningsmulighederne. Du kan hurtigt tilpasse temaet (skrifttyper, farver og så videre) og på en måde, som anvendes konsekvent på tværs af portalen.

Tilpasse Bootstrap

Bootstrap understøtter tilpasning ved hjælp af et sæt af variabler. Du kan angive alle eller nogle af disse variabler til brugerdefinerede værdier og derefter hente en brugerdefineret version af Bootstrap, der er kompileret på baggrund af disse værdier.

Styrken i Bootstrap-variabler er, at de ikke dikterer typografien for de enkelte elementer. Alle typografier i strukturen er baseret på og afledt af disse værdier. Du kan f.eks. overveje variablen @font-size-base. Dette angiver den størrelse, som Bootstrap tildeler til normal brødtekst. Men Bootstrap bruger også denne variabel til at angive skriftstørrelsen til overskrifter og andre elementer. Størrelsen på et H1-element kan defineres som 300 procent af størrelsen af @font-size-base. Ved at indstille denne ene variabel styrer du hele den typografiske skala for din portal på en ensartet måde. På samme måde styrer variablen @link-color farven på links. Uanset hvilken farve du tildeler denne værdi, definerer Bootstrap farven for at pege på links som 15 procent mørkere end din brugerdefinerede værdi.

Som standard oprettes en brugerdefineret version af Bootstrap via det officielle Bootstrap-websted. Men på grund af den store udbredelse af Bootstrap er mange tredjepartswebsteder også blevet oprettet til dette formål. Disse websteder kan indeholde en mere brugervenlig grænseflade til tilpasning af Bootstrap eller foruddefinerede versioner af Bootstrap, som du kan downloade. Det officielle websted for Bootstrap-tilpasseren indeholder flere oplysninger om Bootstrap-tilpasning.

Når du henter en tilpasset version af Bootstrap, indeholder den følgende mappestruktur.

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

Eller afhængigt af det tilpasserprogram, der bruges, indeholder den måske kun bootstrap.min.css. Uanset hvad, er bootstrap.min.css den fil, der indeholder dine tilpasninger. De andre filer er de samme for alle tilpassede versioner af Bootstrap og er allerede inkluderet i din portal.

Se også

Bemærk

Kan du fortælle os om dine sprogpræferencer for dokumentation? Tag en kort undersøgelse. (bemærk, at denne undersøgelse er på engelsk)

Undersøgelsen tager ca. syv minutter. Der indsamles ingen personlige data (erklæring om beskyttelse af personlige oplysninger).