Dela via

Arbeta med CSS-åsidosättningsfiler

Retail Interest Group från Dynamics 365 Commerce har flyttat från Yammer till Viva Engage. Om du inte har åtkomst till den nya Viva Engage-communityn fyller du i det här formuläret (https://aka.ms/JoinD365commerceVivaEngageCommunity) som ska läggas till och fortsätter att delta i de senaste diskussionerna.

Denna artikel beskriver varför, när och hur du använder åsidosättande Cascading Style Sheets (CSS)-filer i Microsoft Dynamics 365 Commerce.

Permanenta webbplatsstilar bör vanligtvis hanteras via webbplatsens tema. Teman ger grundläggande CSS och stilinställningar för modulerna på alla sidor på din webbplats. Teman skapas med hjälp av Dynamics 365 Commerce online Software Development Kit (SDK) och de distribueras till dina webbplatser via Microsoft Dynamics Lifecycle Services (LCS). Tema felsökningsfunktioner och konfigurationer av modulgränssnitt i SDK hjälp webbplatsutvecklare skapar anpassningsbara och sammanhängande designpaket för webbplatsen. När dessa designpaket distribueras till en webbplats kan webbplatsförfattarna fokusera på att skapa, redigera och publicera innehåll i stället för webbplatsutveckling.

Med tanke på den vanliga livscykeln för ett tema kan beroendet för utvecklare att göra formatändringar via SDK och LCS distributionspipeline vara oöverkomliga i vissa fall. Webbplatsprototyper eller snabbkorrigeringar kan verka omständligt om SDK inte har konfigurerats eller om du inte har tid att vänta på en LCS-distribution.

I dessa fall kan CSS åsidosätta filer hjälpa. I Commerce redigeringsverktyg kan autentiserade användare ladda upp en CSS-fil, förhandsgranska den och sedan aktivera den för att åsidosätta webbplatsens tema. Omkostnader för SDK- eller LCS-distribution krävs inte. Åsidosättningar som anges i en CSS åsidosättningsfil kan vara så liten som en ändring i en enda textstil eller så vittomfattande som en fullständig varumärkesöversyn.

Innan du använder CSS åsidosättningsfiler bör du vara medveten om följande begränsningar:

  • Endast en CSS åsidosättningsfil kan vara aktiv på en plats i taget. Därför måste alla aktiva åsidosättningar finnas i en enda åsidosättningsfil.
  • Även om du kan förhandsgranska åsidosättningarna i Commerce redigeringsverktygen finns det inga särskilda felsökningsfunktioner som hjälper dig att identifiera eventuella buggar som åsidosättningarna introducerar. Med andra ord, när du använder CSS åsidosättningsfiler, har du inte samma verktygsuppsättning som SDK ger för modul och redigeringsvalidering.

CSS åsidosätta filer ger dock ett snabbt sätt att göra en prototyp av en design eller implementera en snabbkorrigering innan en fullständig temauppdatering har utvecklats och distribuerats.

Skapa en CSS åsidosättningsfil

Om du vill skapa en CSS åsidosättningsfil kan du använda valfri integrerad utvecklingsmiljö (IDE), textredigerare eller källkodsredigerare. Ett typiskt tillvägagångssätt är att använda vanliga webbfelsökare i din webbläsare för att identifiera stilväljare, egenskaper och värden på din befintliga webbplats. I de flesta webbläsare kan du ändra värden och förhandsgranska dem i felsökaren. När du har identifierat de ändringar du vill göra kan du spara dem i din egen CSS-fil.

Överför en CSS åsidosättningsfil

Så här överför du en CSS-fil till din webbplats i Commerce.

  1. I redigeringsverktygen går du till webbplatsen.

  2. I navigeringsfönstret till vänster, välj Design.

    Notering

    Beroende på vilken version av Commerce redigeringsverktyg du använder kan du behöva expandera inställningarna i navigeringsfönstret innan du kan välja design.

  3. Överst i huvuddesignfönstret väljer du fliken CSS åsidosätt om den inte redan är markerad.

  4. Under tillgängliga CSS åsidosättningar väljer du överför CSS-fil. Ett filwebbläsarfönster visas.

  5. I Utforskaren bläddrar du till och väljer en CSS-fil och väljer sedan öppna Den överförda CSS-filen visas nu under tillgängliga CSS åsidosättningar.

Förhandsgranska en CSS åsidosättningsfil

För att förhandsgranska en CSS åsidosättningsfil innan du gör den aktiv på din aktiva webbplats.

  1. I navigeringsfönstret till vänster väljer du design och sedan på fliken CSS åsidosätt under tillgängliga CSS åsidosättningar, leta upp CSS-filen som du vill förhandsgranska.
  2. Bredvid CSS filnamnet, välj förhandsgranska webbplats.
  3. I dialogrutan Välj en URL väljer du URL-adressen till den webbplats som du vill visa åsidosättningen för och väljer sedan OK.
  4. Om det finns flera varianter för den valda webbadressen väljer du önskad variant i dialogrutan Förhandsgranska variationer som visas.

En ny webbläsarflik eller ett nytt fönster öppnas, där du kan validera dina stilåsidosättningar mot din webbplats. Du kan sedan dela URL:en med andra autentiserade Commerce-användare för granskning och feedback.

Aktivera en CSS åsidosättningsfil på din aktiva webbplats

När du har förhandsgranskat och godkänt CSS åsidosättningsfilen kan du aktivera den på din aktiva webbplats.

Notering

Endast en CSS åsidosättningsfil kan vara aktiv på en plats i taget. Om du aktiverar en ny åsidosättningsfil inaktiveras den tidigare åsidosättningsfilen. Kontrollera därför att alla obligatoriska åsidosättningar finns i en enda CSS åsidosättningsfil.

Gör så här om du vill aktivera en CSS åsidosättningsfil.

  1. I navigeringsfönstret till vänster väljer du design och sedan på fliken CSS åsidosätt under tillgängliga CSS åsidosättningar, leta upp CSS-filen som du vill aktivera.
  2. Under CSS filnamnet väljer du aktivera. Åsidosättningsfilen blir omedelbart aktiv på din aktiva webbplats.

Inaktivera en CSS åsidosättningsfil på din aktiva webbplats

Så här inaktiverar du en CSS åsidosättningsfil på din webbplats.

  1. I navigeringsfönstret till vänster väljer du design och sedan på fliken CSS åsidosätt under tillgängliga CSS åsidosättningar, leta upp CSS-filen som du vill inaktivera.
  2. Under CSS filnamnet väljer du inaktivera. Åsidosättningsfilen blir omedelbart inaktiv på din aktiva webbplats.

Tips!

Om du vill komma åt ytterligare alternativ för CSS åsidosättningsfiler väljer du ellipsen (...) bredvid CSS-filnamnet. Alternativen Hämta, Byt namn och Ersätt är användbara för snabba ändringar i en befintlig CSS åsidosättningsfil.

Ytterligare resurser

Lägga till en logotyp

Välja ett tema för webbplatsen

Arbeta med förinställda stilar

Lägga till en favoritikon

Lägga till ett copyrightmeddelande

Lägg till språk på din webbplats

Lägga till skriptkod på webbsidor för att stödja telemetri

  • Last updated on