Dela via

Redigera CSS för teman

  • Artikel

Anteckning

Cascading Style Sheets (CSS) låter dig kontrollera utseendet på din webbplats. Som standard finns filerna bootstrap.min.css och theme.css. Du kan redigera befintliga CSS-filer och ladda upp nya CSS-filer. När du laddar upp en ny CSS-fil blir den tillgänglig som en webbfil i programmet Portal Management.

Viktigt

Power Apps-portalerna bygger på Bootstrap 3.3.x med undantag för händelseportalen. Portalutvecklare bör inte ersätta Bootstrap 3 med andra CSS-bibliotek när vissa scenarier i Power Apps-portaler är beroende av Bootstrap 3.3.x. För mer information, se avsnitten Förstå Bootstrap-ramverk och Anpassa bootstrap i denna artikel.

Öppna CSS i kodredigeraren

Om du vill öppna en CSS-fil i kodredigeraren, redigera portalen så att den öppnas i Power Apps-portalstudion.

  1. Välj ikonen Tema ikonen Tema. från vänster sida av skärmen. Följande teman visas:

    Tema.

  2. Välj önskad CSS för att öppna i kodredigeraren.

  3. Redigera koden och spara ändringarna.

Ladda upp en ny CSS fil

Om du vill överföra en CSS-fil redigerar du portalen så att den öppnas i Power Apps-portalstudio.

  1. Välj ikonen Tema ikonen Tema. från vänster sida av skärmen. Följande teman visas:

  2. Välj Ladda upp anpassad CSS.

    Ladda upp anpassad CSS.

  3. Bläddra fram och välj den CSS-fil du vil ladda upp.

Ta bort en anpassad CSS-fil

Filerna CSS sparas som webbfiler.

  1. För att ta bort CSS-filen, gå till Portalhantering app och väljer Webbfiler.

  2. Leta upp CSS filposten. Du kan behöva filtrera på värdena för Namn och Webbplats för att hitta rätt post.

  3. När webbfilposten är vald, välj Ta bort.

  4. I portalenstudio, välj Synkroniseringskonfiguration för att ta bort stiländringarna från det anpassade CSS.

Förstå Bootstrap-ramverk

Bootstrap är ett klientdelsramverk som innehåller CSS och JavaScript-komponenter för vanliga gränssnittselement i webbprogram. Det innehåller formatmallar för navigeringselement, forms, knappar samt ett responsivt layoutsystem för rutnät, vilket gör att webbplats layouten kan anpassas dynamiskt efter enheter med olika skärmstorlekar, exempelvis mobiler och surfplattor. Med hjälp av layoutsystemet för Bootstrap kan du utveckla en enda webbplats med ett lämpligt gränssnitt för alla enheter som dina kunder kan använda.

Mallarna som ingår i -portaler implementeras med hjälp av standardkomponenter för Bootstrap, med ett minimalt antal ytterligare, anpassade formatmallar. Så om du använder mallarna kan du dra nytta av Bootstrap-anpassningsalternativen. Du kan anpassa temat (teckensnitt, färger och så vidare) snabbt och på ett sätt som tillämpas konsekvent på portalen.

Anpassa Bootstrap

Bootstrap stöder för anpassning med hjälp av en uppsättning variabler. Du kan ange någon eller samtliga dessa variabler som anpassade värden och sedan hämta en anpassad version av Bootstrap som sammanställts baserat på dessa värden.

Kraften hos Bootstrap-variablerna är att de inte styr formatet för ett enstaka element. Alla format i ramverket baseras på och härrörs från dessa värden. Tänk till exempel på variabeln @font-size-base. Denna anger storleken som Bootstrap tilldelar normal brödtext. Emellertid använder Bootstrap även denna variabel för att ange storlek på teckensnitt för rubriker och andra element. Storleken hos ett H1-element kan definieras som 300 procent av storleken på @font-size-base. Genom att ange denna enskilda variabel kan du styra hela portalens typografiska skala på ett konsekvent sätt. På samma sätt kan variabeln @link-color styra färgen på hyperlänkar. För färgen som du tilldelar detta värde, kommer Bootstrap att definiera hovringsfärgen för länkar som 15 % mörkare än ditt anpassade värde.

Standardmetoden för att skapa en anpassad version av Bootstrap är via den officiella Bootstrap-webbplatsen. På grund av populariteten hos Bootstrap har även många webbplatser från tredje part skapats för detta ändamål. Dessa webbplatser kan tillhandahålla ett mer lättanvänt gränssnitt för anpassning av Bootstrap, eller kan också tillhandahålla fördesignade versioner av Bootstrap för hämtning. Den officiella Bootstrap-anpassaren-webbplatsen ger mer information om Bootstrap-anpassning.

När du hämtar en anpassad version av Bootstrap innehåller den följande katalogstruktur.

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

Eller, beroende på vilket anpassningsprogram som används, innehåller den endast bootstrap.min.css. Trots detta är bootstrap.min.css den fil som innehåller dina anpassningar. De andra filerna är samma för alla anpassade versioner av Bootstrap och finns redan inkluderade i din portal.

Se även

Anteckning

Kan du berätta om dina inställningar för dokumentationsspråk? Svara i en kort undersökning. (observera att undersökningen är på engelska)

Undersökningen tar ungefär sju minuter. Inga personuppgifter samlas in (sekretesspolicy).