Arbeta med CSS-åsidosättningsfiler

Artikel
05/28/2024

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ättningfil 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ättningfil kan vara aktiv på en plats i taget. Därför måste alla aktiva åsidosättningar finnas i en enda åsidosättningfil.
Ä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ättningfil

Om du vill skapa en CSS åsidosättningfil 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ättningfil

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

I redigeringsverktygen går du till webbplatsen.
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.
Överst i huvuddesignfönstret väljer du fliken CSS åsidosätt om den inte redan är markerad.
Under tillgängliga CSS åsidosättningar väljer du överför CSS-fil. Ett filwebbläsarfönster visas.
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ättningfil

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

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.
Bredvid CSS filnamnet, välj förhandsgranska webbplats.
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.
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ättningfil på din aktiva webbplats

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

Notering

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

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

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.
Under CSS filnamnet väljer du aktivera. Åsidosättningfilen blir omedelbart aktiv på din aktiva webbplats.

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

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

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.
Under CSS filnamnet väljer du inaktivera. Åsidosättningfilen 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ättningfil.