Opret, rediger og vedhæft CSS-filer

Cascading Stylesheets (CSS) styrer den visuelle fremstilling af siderne på dit websted ved at udvælge og formatere sideelementer. Brug designmanageren til at oprette nye CSS-filer, redigere eksisterende filer og knytte dem til skabeloner, bestemte sider eller hele domæner.

Hvis du vil foretage enkle designændringer på en bestemt side, kan du læse mere om redigering af sideindhold i indholdseditoren. Hvis du bruger en temaskabelon, kan du læse mere om redigering af dine temaindstillinger.

Opret en ny CSS-fil

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. I Finder skal du klikke på Arkiv > Ny filøverst til venstre.
3. Klik på rullemenuen i dialogboksen, og vælg CSS + HubL. 
4. Klik på Næste.
5. Indtast et navn til din fil i feltet Filnavn.
6. Hvis du vil ændre filens placering, skal du klikke på Skift. Vælg en ny filplacering i pop op-vinduet. 
7. Når du er færdig, skal du klikke på Opret.

Rediger en CSS-fil

Når du har oprettet eller åbnet en eksisterende CSS-fil, kan du foretage dine redigeringer i kodeditoren. Ud over standard-CSS understøtter kodeditoren HubL-variabler og makroer, der gør det nemmere at vedligeholde din CSS.

Se en liste over standard-CSS-selektorer til HubSpot-skabeloner under Boilerplate CSS.

1. { local.navDesignManager }}
2. I Finder skal du klikke på Fil > Ny fil eller åbne en eksisterende CSS-fil.
3. Indtast eller opdater CSS-koden i kodeditoren for at foretage dine ændringer. 

For at få et eksempel på, hvordan din HubL vil blive vist, skal du klikke på knappen Vis output øverst i editoren. Der åbnes et panel til højre med det renderede eksempel.

Kontroller for fejl

Før du offentliggør, skal du kontrollere din kode for HubL-fejl. Fejl vises i konsollen nederst, i fejlpanelet til venstre og i rullepanelet til højre i kodeditoren.

Fejl, der forhindrer dig i at offentliggøre, vises med rødt, mens generelle advarsler vises med gult. Nederst i kodeditoren kan du klikke på "Vis detaljer " for at se flere oplysninger om fejlene i fejlkonsollen og på " Skjul detaljer " for at skjule fejlkonsollen.

Udgiv en CSS-fil

Når du har redigeret din CSS-fil, skal du klikke på "Udgiv ændringer" øverst til højre. For at indkalde dette stylesheet i en anden kodet skabelon skal du klikke på rullemenuen "Handlinger" i finder-vinduet og vælge "Kopier offentlig URL". 

Vedhæft stilark til ressourcer

Vedhæft stilark til dine skabeloner, enkelte sider eller til et helt domæne. Stilark anvendes i en bestemt rækkefølge afhængigt af, hvor de er vedhæftet. Listen nedenfor viser den rækkefølge, de anvendes i på dit websted:

1. public_common.css (påkrævet): et stilark, der primært bruges af HubSpots app, men også til visse funktioner på webstedet.
2. HTML-header: link-tags tilføjet til det globale <head> på dit websted under Indhold > Sideindstillinger.
3. Layout.css (påkrævet for drag-and-drop-layouts): standard responsiv CSS-fil, der er knyttet til alle drag-and-drop-skabelonlayouts.
4. Vedhæftede stilark (Sider): stilark, der er knyttet til hele dit websted under Indhold > Sideindstillinger.
5. Vedhæftede stilark (Blog): stilark, der er knyttet til din blog (overskriver webstedets globale stilark) under Indhold > Blogindstillinger.
6. Linkede stilark(anbefales til skabelonlayouter): stilark, der er knyttet til skabelonlayoutet.
7. Yderligere <head>-markering i skabelonen: link-tags tilføjet til <head> i et bestemt skabelonlayout.
8. Sidespecifikke stilark:stilark, der er knyttet i en sides indstillinger.
9. HTML i sidens head:link-tags tilføjet til <head> på en bestemt side i sidens indstillinger.

Vedhæft stilark til skabeloner

Stylesheets kan knyttes til drag-and-drop-skabeloner i inspektoren i designmanageren. For kodede skabeloner tilføjes stylesheets direkte i kodeditoren.

Drag-and-drop-skabeloner

1. Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Designmanager. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Designmanager.
2. Klik på navnet på din træk-og-slip-skabelonfil i Finder.
3. I inspektoren skal du klikke på rullemenuen Tilføj i afsnittet Tilknyttede stilark og vælge dit stilark. For at fjerne et stilark skal du klikke på X.
4. Når du er færdig, skal du klikke på "Udgiv ændringer" øverst til højre for at anvende dine ændringer på de live-sider,der bruger skabelonen.

Kodede skabeloner

For kodede skabeloner tilføjes stilark direkte i kodeeditoren ved hjælp af <link>-tags eller HubL-tagget i filens <head>. Læs mere om kodede skabeloner i udviklerdokumentationen.

Vedhæft stilark til en bestemt side

Bemærk: Dennemulighed er ikke tilgængelig for temaskabeloner. Lær, hvordan du redigerer dine temaindstillinger.

Sådan vedhæfter du et sidespecifikt stylesheet fra indstillingsafsnittet i indholdseditoren:

1. Gå til dit indhold:

   • Websidesider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Webside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Webside.
   • Landingssider: Klik på Mere på din HubSpot-konto, og navigér derefter til Indhold > Landingsside. Hvis Mere ikke vises på din konto, skal du navigere direkte til Indhold > Landingsside.
2. Klik på navnet på din side.
3. I indholdseditoren skal du klikke påmenuen Indstillinger og vælge Avanceret. 
4. I dialogboksen, under afsnittet Stylesheets, skal du klikke på rullemenuen Vedhæft et stylesheet og vælge et stylesheet. For at fjerne et stylesheet skal du klikke på X ved siden af stylesheetet.
5. For at deaktivere stylesheets, der er arvet fra skabelonen eller domænet, skal du klikke på rullemenuen ved siden af stylesheetet og vælgeDeaktiveret.

Vedhæft domæne-stylesheets

Bemærk: Temaskabelonerskal indeholde annotationen enableDomainStylesheets: true for at kunne bruge stilark på domæneniveau. Læs mere om skabelonannotationer.

Sådan knytter du et stilark til et helt domæne:

1. På din HubSpot-konto skal du klikke på indstillingsikonet på den øverste navigationslinje.
2. Klik på Indhold > Sider i menuen i sidepanelet.
3. Klik på rullemenuen for at vælge det domæne, du vil opdatere indstillingerne for.
4. Klik på fanen Skabeloner i afsnittet CSS og stilark og vælg + Tilføj stilark. For at fjerne et stilark skal du klikke på X'et ved siden af det tilknyttede stilark.
5. Klik på Gem.

Bemærk: Når du nedgraderer til HubSpots Starter-abonnement eller gratisværktøjer, forbliver tilknyttede stilark på domæneniveau aktive, indtil du fjerner dem. Når alle stilark er fjernet, kan du ikke længere tilknytte stilark på domæneniveau. Læs mere om nedgradering af et abonnement.