Forstå kilden til en sides styling

Det er flere steder i HubSpot der du kan legge til innholdsstyling, og den brukes i en bestemt rekkefølge basert på hvor den er lagt til. Nedenfor finner du informasjon om hvordan styling brukes, hvordan du finner styling på en live-side, og hvordan du kan få hjelp med designredigeringer.

Forstå hvordan styling brukes

CSS-styling i HubSpot brukes i rekkefølge basert på hvor den er angitt i HubSpot, som vist nedenfor. For eksempel overstyres styling som er angitt i et globalt stilark, av styling som er angitt på en bestemt side.

1. Tilpasset modul-CSS
   1. Stilark som er knyttet til en modul.
   2. CSS lagt til i CSS-delen av en modul.
   3. CSS inne i HubL-markeringen av modulen i en require_css-blokk
2. Stilark lagt til i en mal gjennom require_css-blokken
3. HubSpots standard stilark (for eksempel layout.css)
4. Stilark knyttet til malen
   
   
   
   
5. Stilark som er lagt til i innstillingsfanen på siden din
   
   
   
   
6. Stilark som er lagt til i innstillingene for alle domener
7. Stilark som er lagt til i innstillingene for et bestemt domene
8. CSS lagt til i <style>-koder. For eksempel i HTML-hodet i nettstedinnstillingene, sideinnstillingene eller malen.
   
   
   
   
9. Stiler lagt til gjennom sideredigeringsprogrammet. HubSpot vil også legge til !important -tagger til disse stilene. Finn ut mer om !important-tagger og hvordan de påvirker stylingen.

Finne stiler på en forhåndsvisning eller live-side

Du kan bruke utviklerverktøyene i nettleseren din til å undersøke stilene som er brukt på live-nettstedet eller en forhåndsvisningsside. Det er litt forskjellig hvordan du feilsøker stiler i de ulike nettleserne.

Slik finner du stiler i Google Chrome:

• Høyreklikk på elementet du vil undersøke, på forhåndsvisningssiden eller live-siden, og velg deretter Inspiser.
• I Elementer-ruten til venstre ser du HTML-koden på siden. Du kan enten klikke på elementene for å vise stilene deres, eller du kan bruke markørikonet øverst til venstre i ruten til å klikke på elementer på siden.

  

• I Stil-ruten til høyre ser du alle stilene som er brukt på det aktuelle elementet. Du kan velge og fjerne merket i avmerkingsboksene ved siden av hver stil for å fjerne og bruke stilen. Dette hjelper deg med å avgrense hvilken stilregel du skal endre.
  
  
  
  
• Til høyre for CSS-reglene ser du kildenavnet for den aktuelle stilen, som forteller deg hvor stilen kommer fra. Hold musepekeren over kildenavnet for å se det fullstendige navnet:
  • Når stylingen kommer fra et stilark, vises navnet på stilarket ved siden av CSS-deklarasjonen i inspektøren. Du kan deretter navigere til designbehandleren din, finne stilarket og gjøre endringer etter behov.
    
    
    
    
  • Hvis kildenavnet begynner med module, kommer stylingen sannsynligvis fra CSS-en til en modul. Hold musepekeren over kildenavnet for å se hele navnet på modulen.
    
    
    
    
  • Hvis kildenavnet er User agent stylesheet , er CSS-en en del av nettleserens standardstil . Du ser dette oftest for generell HTML-tag-styling som <p>, <h1>, <h2>, <span>, <div> osv. Denne stylingen brukes når nettleseren ikke finner generelle stylingsregler for elementet, men den kan overskrives ved at du legger til dine egne stiler for elementet.
    
    
    
    
  • Hvis kildenavnet er sidens URL, kommer CSS-en fra <style>-taggene på siden. Stilen kan for eksempel være angitt i HTML-hodet på siden eller malen.
    
    
    
    
  • Hvis kildenavnet er sidens URL og stylingen er rettet mot #hs_cos_wrapper_module_number, blir stylingen sannsynligvis angitt i Styles-fanen i sideredigeringsprogrammet. HubSpot vil legge til !important -tagger i disse stilene. Finn ut mer om !important-tagger og hvordan de påvirker stylingen.
    
    
    
  • Hvis kildenavnet er <style>, blir stylingen sannsynligvis automatisk inkludert med elementet. Ofte skyldes dette en styling som er angitt i redigeringsprogrammet for en HubSpot-ressurs som kan bygges inn, for eksempel en CTA eller en møtewidget.
    
    
    
    
  • Hviselement.stylevises ved siden av deklarasjonen i inspektøren, har CSS-en blitt satt inline.Inline-styling er styling som legges til direkte i HTML-kildekoden på en side, eller i Inline-styling-feltene i en mal. Inline-styling i kildekoden kan for eksempel se ut som <p style="background:purple;">Hello world</p>.
    
    

Hvis du vil ha mer informasjon om hvordan du inspiserer en side, kan du se i hjelpedokumentasjonen for nettleseren din:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Få hjelp med designendringer

Den beste ressursen for å gjøre endringer i HubSpot-maler eller stilark er den opprinnelige maldesigneren. Det finnes imidlertid en rekke ressurser for å få ytterligere hjelp med innholdsstilen, avhengig av hvor komfortabel du er med feilsøking av HTML og CSS.

• Hvis du er komfortabel med å bruke inspektørverktøyene til å feilsøke designproblemer i malen din:

• • Søk og skriv innlegg på CMS Development Forum i fellesskapet for å få tips, råd eller feilsøking av koden din.
  • Se CMS-referansedokumentasjonen for opplæringsprogrammer, veiledninger og en oversikt over CMS-rammeverket.
  • Ta kontakt med HubSpots produktteam og andre utviklere som jobber med HubSpot på CMS Developer Community Slack.

• Hvis du ikke er komfortabel med å lese eller redigere HTML og CSS i malene dine:

• • Ta kontakt med en sertifisert HubSpot-partner med ekspertise innen nettstedsdesign som kan hjelpe deg med å tilpasse malene dine.
  • Bruk en temamal for å redigere sidestiler uten å skrive kode.
  • Hvis du bruker en mal som er kjøpt fra Asset Marketplace, kan du kontakte malens designer hvis du har spørsmål om utformingen av siden din.