Opprett, rediger og legg ved CSS-filer

Cascading Stylesheets (CSS) styrer den visuelle utformingen av sidene på nettstedet ditt ved å velge ut og formatere sideelementer. Bruk designbehandleren til å opprette nye CSS-filer, redigere eksisterende filer og knytte dem til maler, bestemte sider eller hele domener.

For enkle designendringer på en bestemt side kan du lese mer om hvordan du redigerer sideinnhold i innholdsredigereren. Hvis du bruker en temamal, kan du lese mer om hvordan du redigerer temainnstillingene.

Opprett en ny CSS-fil

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. I Finder klikker du på Fil > Ny filøverst til venstre.
3. I dialogboksen klikker du på rullegardinmenyen og velger CSS + HubL. 
4. Klikk på Neste.
5. Skriv inn et navn for filen i feltet Filnavn.
6. Hvis du vil endre plasseringen av filen, klikker du på Endre. I popup-vinduet velger du en ny filplassering. 
7. Når du er ferdig, klikker du på Opprett.

Rediger en CSS-fil

Når du har opprettet eller åpnet en eksisterende CSS-fil, kan du gjøre endringene dine i kodeditoren. I tillegg til standard CSS støtter kodeditoren HubL-variabler og makroer for å gjøre det enklere å vedlikeholde CSS-en din.

For å se en liste over standard CSS-selektorer for HubSpot-maler, sjekk ut Boilerplate CSS.

1. { local.navDesignManager }}
2. I Finder klikker du på «Fil» > «Ny fil » eller åpner en eksisterende CSS-fil.
3. Skriv inn eller oppdater CSS-koden i kodeditoren for å gjøre endringene dine. 

For å forhåndsvise hvordan HubL-koden din vil vises, klikker du på bryteren «Vis utdata» øverst i redigeringsverktøyet. Et panel åpnes til høyre med den renderte forhåndsvisningen.

Sjekk for feil

Før du publiserer, bør du sjekke koden for HubL-feil. Feil vises i konsollen nederst, i feilfeltet til venstre og i rullefeltet til høyre i kodeditoren.

Feil som hindrer deg i å publisere, vises i rødt, mens generelle advarsler vises i gult. Nederst i kodeditoren klikker du på «Vis detaljer» for å se mer informasjon om feilene i feilkonsollen, og «Skjul detaljer » for å skjule feilkonsollen.

Publiser en CSS-fil

Når du har redigert CSS-filen, klikker du på «Publiser endringer » øverst til høyre. For å hente inn dette stilarket i en annen kodet mal, klikker du på rullegardinmenyen «Handlinger » i søkefeltet og velger «Kopier offentlig URL». 

Knytt stilark til ressurser

Knytt stilark til malene dine, enkeltstående sider eller til et helt domene. Stilark brukes i en bestemt rekkefølge basert på hvor de er knyttet. Listen nedenfor viser rekkefølgen de brukes i på nettstedet ditt:

1. public_common.css (påkrevd): et stilark som hovedsakelig brukes av HubSpots app, men også for visse funksjoner på nettstedet.
2. HTML-overskrift: link-koder lagt til i nettstedets globale <head> under Innhold > Sideinnstillinger.
3. Layout.css (påkrevd for dra-og-slipp-oppsett): standard responsiv CSS-fil knyttet til alle dra-og-slipp-maloppsett.
4. Vedlagte stilark (sider): stilark knyttet til hele nettstedet ditt under Innhold > Sideinnstillinger.
5. Vedlagte stilark (Blogg): stilark knyttet til bloggen din (overstyrer nettstedets globale stilark) under Innhold > Blogginnstillinger.
6. Koblede stilark(anbefalt for maloppsett): stilark knyttet til maloppsettet.
7. Ekstra <head>-kode i malen: link-koder lagt til i <head> -delen av et bestemt maloppsett.
8. Sidespesifikke stilark:stilark knyttet til innstillingene for en side.
9. HTML i sidens topp:lenketagger lagt til i <head> for en bestemt side i sidens innstillinger.

Knytt stilark til maler

Stilark kan knyttes til dra-og-slipp-maler i inspektoren i designmanageren. For kodede maler legges stilark til direkte i kodeditoren.

Dra-og-slipp-maler

1. I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Design Manager. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Design Manager.
2. I søkefeltet klikker du på navnet på malfilen du vil dra og slippe.
3. I inspektoren klikker du på rullegardinmenyen Legg til i delen Koblede stilark og velger stilarket ditt. For å fjerne et stilark klikker du på X.
4. Når du er ferdig, klikker du på «Publiser endringer» øverst til høyre for å bruke endringene på de aktive sidenesom bruker malen.

Kodede maler

For kodede maler legges stilark til direkte i kodeditoren ved hjelp av <link>-koder eller HubL-koden i <head> -delen av filen. Les mer om kodede maler i utviklerdokumentasjonen.

Legg til stilark på en bestemt side

Merk: dettealternativet er ikke tilgjengelig for temamaler. Lær hvordan du redigerer temainnstillingene dine.

Slik legger du til et sidespesifikt stilark fra innstillingsdelen i innholdsredigereren:

1. Naviger til innholdet ditt:

   • Nettstedsider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Nettstedsside. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Nettstedsside.
   • Landingssider: I HubSpot-kontoen din klikker du på Mer og navigerer deretter til Innhold > Landingssider. Hvis Mer ikke vises i kontoen din, navigerer du direkte til Innhold > Landingssider.
2. Klikk på navnet på siden din.
3. I innholdsredigereren klikker du påInnstillinger-menyen og velger Avansert. 
4. I dialogboksen, i delen Stilark, klikker du på rullegardinmenyen Legg til et stilark og velger et stilark. For å fjerne et stilark, klikker du på X ved siden av stilarket.
5. For å deaktivere stilark som er arvet fra malen eller domenet, klikker du på rullegardinmenyen ved siden av stilarket og velgerDeaktivert.

Legg til stilark på domenenivå

Merk: temamalermå inneholde annotasjonen enableDomainStylesheets: true for å kunne bruke stilark på domenenivå. Les mer om malannotasjoner.

Slik legger du til et stilark for et helt domene:

1. I HubSpot-kontoen din klikker du på innstillinger-ikonet i den øverste navigasjonslinjen.
2. I sidemenyen klikker du på Innhold > Sider.
3. Klikk på rullegardinmenyen for å velge domenet du vil oppdatere innstillingene for.
4. På fanen Maler, i delen CSS og stilark, klikker du på + Legg til stilark. For å fjerne et stilark klikker du på X ved siden av det tilknyttede stilarket.
5. Klikk på Lagre.

Merk: Når du nedgraderer til HubSpots Starter-abonnement eller gratisverktøy, forblir tilknyttede stilark på domenenivå aktive inntil du fjerner dem. Når alle stilark er fjernet, kan du ikke lenger legge til stilark på domenenivå. Les mer om nedgradering av et abonnement.