Skapa, redigera och bifoga CSS-filer

Cascading Stylesheets (CSS) styr det visuella utseendet på webbplatsens sidor genom att välja ut och formatera sidelement. Använd designhanteraren för att skapa nya CSS-filer, redigera befintliga och koppla dem till mallar, specifika sidor eller hela domäner.

För enkla designändringar på en specifik sida kan du läsa mer om hur du redigerar sidinnehåll i innehållsredigeraren. Om du använder en temamall kan du läsa mer om hur du redigerar dina temainställningar.

Skapa en ny CSS-fil

1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
2. I sökfönstret klickar du på Arkiv > Ny fillängst upp till vänster.
3. I dialogrutan klickar du på rullgardinsmenyn och väljer CSS + HubL. 
4. Klicka på Nästa.
5. Ange ett namn på filen i fältet Filnamn.
6. Om du vill ändra filens plats klickar du på Ändra. I popup-rutan väljer du en ny plats för filen. 
7. När du är klar klickar du på Skapa.

Redigera en CSS-fil

När du har skapat eller öppnat en befintlig CSS-fil gör du dina ändringar i kodredigeraren. Förutom standard-CSS stöder kodredigeraren HubL-variabler och makron för att underlätta underhållet av din CSS.

För att se en lista över standard-CSS-selektorer för HubSpot-mallar, kolla in Boilerplate CSS.

1. { local.navDesignManager }}
2. I Finder klickar du på Arkiv > Ny fil eller öppnar en befintlig CSS-fil.
3. I kodredigeraren anger eller uppdaterar du CSS-koden för att göra dina ändringar. 

För att förhandsgranska hur din HubL kommer att renderas klickar du på knappen Visa utdata högst upp i redigeraren. En panel öppnas till höger med den renderade förhandsgranskningen.

Kontrollera om det finns fel

Innan du publicerar ska du kontrollera om det finns HubL-fel i koden. Fel visas i konsolen längst ner, i felpanelen till vänster och i rullningslisten till höger i kodredigeraren.

Fel som hindrar dig från att publicera visas i rött, medan allmänna varningar visas i gult. Längst ner i kodredigeraren klickar du på ”Visa detaljer” för att se mer information om felen i felkonsolen och på ”Dölj detaljer” för att dölja felkonsolen.

Publicera en CSS-fil

När du har redigerat din CSS-fil klickar du på Publicera ändringar uppe till höger. För att anropa denna stilmall i en annan kodad mall klickar du på rullgardinsmenyn Åtgärder i sökfältet och väljer Kopiera offentlig URL. 

Bifoga stilmallar till tillgångar

Bifoga stilmallar till dina mallar, enskilda sidor eller till en hel domän. Stilmallar tillämpas i en specifik ordning baserat på var de är bifogade. Listan nedan visar i vilken ordning de tillämpas på din webbplats:

1. public_common.css (obligatorisk): en stilmall som främst används av HubSpots app, men även för vissa webbplatsfunktioner.
2. HTML-rubrik: länktaggar som läggs till i webbplatsens globala <head> under Innehåll > Sidinställningar.
3. Layout.css (krävs för dra-och-släpp-layouter): standardfil för responsiv CSS som är kopplad till alla dra-och-släpp-malllayouter.
4. Bifogade stilmallar (sidor): stilmallar som är kopplade till hela webbplatsen under Innehåll > Sidinställningar.
5. Bifogade stilmallar (Blogg): stilmallar som är kopplade till din blogg (åsidosätter webbplatsens globala stilmallar) under Innehåll > Blogginställningar.
6. Länkade stilmallar(rekommenderas för mallayouter): stilmallar som är kopplade till mallayouten.
7. Ytterligare <head>-markering i mallen: länktaggar som lagts till i <head> för en viss malllayout.
8. Sidspecifika stilmallar:stilmallar som kopplas till i en sidas inställningar.
9. HTML i sidans head-del:länktaggar som lagts till i <head> för en viss sida i sidans inställningar.

Koppla stilmallar till mallar

Stilmallar kan kopplas till dra-och-släpp-mallar i inspektorn i designhanteraren. För kodade mallar läggs stilmallar till direkt i kodredigeraren.

Dra-och-släpp-mallar

1. I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Designhanterare. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Designhanterare.
2. Klicka på namnet på din mallfil för dra och släpp i sökaren.
3. I inspektorn klickar du på rullgardinsmenyn Lägg till i avsnittet Länkade stilmallar och väljer din stilmall. För att ta bort en stilmall klickar du på X.
4. När du är klar klickar du på Publicera ändringar längst upp till höger för att tillämpa dina ändringar på de live-sidorsom använder mallen.

Kodade mallar

För kodade mallar kopplas stilmallar direkt i kodredigeraren med hjälp av <link>-taggar eller HubL-taggen i filens <head>. Läs mer om kodade mallar i utvecklardokumentationen.

Lägg till stilmallar till en specifik sida

Observera: det häralternativet är inte tillgängligt för temamallar. Läs mer om hur du redigerar dina temainställningar.

Så här lägger du till ett sidspecifikt stilark från inställningsavsnittet i innehållsredigeraren:

1. Navigera till ditt innehåll:

   • Webbplatssidor: I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Webbplatssidor. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Webbplatssidor.
   • Landningssidor: I ditt HubSpot-konto klickar du på Mer och navigerar sedan till Innehåll > Landningssidor. Om Mer inte visas i ditt konto navigerar du direkt till Innehåll > Landningssidor.
2. Klicka på namnet på din sida.
3. I innehållsredigeraren klickar du påmenyn Inställningar och väljer Avancerat. 
4. I dialogrutan, i avsnittet Stilmallar, klickar du på rullgardinsmenyn Bifoga en stilmall och väljer en stilmall. För att ta bort en stilmall klickar du på X bredvid stilmallen.
5. För att inaktivera stilmallar som ärvs från mallen eller domänen klickar du på rullgardinsmenyn bredvid stilmallen och väljerInaktiverad.

Bifoga domänstilmallar

Observera: temamallarmåste innehålla anteckningen enableDomainStylesheets: true för att kunna använda stilmallar på domännivå. Läs mer om mallanteckningar.

Så här lägger du till en stilmall för en hel domän:

1. I ditt HubSpot-konto klickar du på inställningsikonen i det övre navigeringsfältet.
2. Klicka på Innehåll > Sidor i sidomenyn.
3. Klicka på rullgardinsmenyn för att välja den domän vars inställningar du vill uppdatera.
4. På fliken Mallar, i avsnittet CSS och stilmallar, klickar du på + Lägg till stilmall. För att ta bort en stilmall klickar du på X bredvid den bifogade stilmallen.
5. Klicka på Spara.

Observera: när du nedgraderar till HubSpots Starter- eller gratistjänster förblir bifogade stilmallar på domännivå aktiva tills du tar bort dem. När alla stilmallar har tagits bort kan du inte längre bifoga stilmallar på domännivå. Läs mer om att nedgradera ett abonnemang.