Forstå kilden til en sides styling

Der er flere steder i HubSpot, hvor man kan tilføje content styling, og det anvendes i en bestemt rækkefølge baseret på, hvor det er tilføjet. Nedenfor kan du se, hvordan styling anvendes, hvordan du finder styling på en live-side, og hvordan du kan få hjælp til designredigeringer.

Forstå, hvordan styling anvendes

CSS-styling i HubSpot anvendes i rækkefølge baseret på, hvor den er indstillet i HubSpot, som angivet nedenfor. For eksempel tilsidesættes styling, der er indstillet i et globalt stilark, af styling, der er indstillet på en bestemt side.

1. Brugerdefineret modul-CSS
   1. Stylesheets, der er knyttet til et modul.
   2. CSS tilføjet til CSS-sektionen i et modul.
   3. CSS inde i modulets HubL-markup i en require_css-blok.
2. Stylesheets tilføjet til en skabelon gennem require_css-blokken
3. HubSpots standard stylesheets (for eksempel layout.css)
4. Stylesheets knyttet til skabelonen
   
   
   
   
5. Stylesheets vedhæftet på indstillingsfanen på din side
   
   
   
   
6. Stylesheets vedhæftet i dine indstillinger for alle domæner
7. Stylesheets vedhæftet i dine indstillinger for et specifikt domæne
8. CSS tilføjet i <style>-tags. For eksempel head HTML i dine hjemmesideindstillinger, sideindstillinger eller skabelon.
   
   
   
   
9. Styles tilføjet gennem sideeditoren. HubSpot vil også tilføje !important-tags til disse styles. Læs mere om !important-tags, og hvordan de påvirker styling.

Find styling på en preview- eller live-side

Du kan bruge udviklerværktøjer i din browser til at undersøge de stilarter, der er anvendt på din live hjemmeside eller en preview-side. Der er lidt forskel på, hvordan man fejlsøger styling i de forskellige browsere.

Sådan finder du styling i Google Chrome:

• På din preview- eller live-side skal du højreklikke på det element, du vil undersøge, og derefter vælge Inspicér.
• I elementruden til venstre kan du se sidens HTML. Du kan enten klikke på elementerne for at se deres stilarter, eller du kan bruge markørikonet øverst til venstre i ruden til at klikke på elementer på siden.

  

• I ruden Stilarter til højre kan du se alle de stilarter, der er anvendt på det pågældende element. Du kan markere og fjerne afkrydsningsfelterne ud for hver stilart for at fjerne og anvende stilarten. Det vil hjælpe med at indsnævre, hvilken stilregel du skal ændre.
  
  
  
  
• Til højre for CSS-reglerne kan du se kildenavnet for den pågældende styling, som fortæller dig, hvor stylingen kommer fra. Hold musen over kildenavnet for at se det fulde navn:
  • Når stylingen kommer fra et stilark, vises navnet på stilarket ved siden af CSS-erklæringen i inspektøren. Du kan derefter navigere til din designmanager, finde stilarket og foretage ændringer efter behov.
    
    
    
    
  • Hvis kildenavnet starter med module, kommer stylingen sandsynligvis fra CSS i et modul. Hold musen over kildenavnet for at se det fulde navn på modulet.
    
    
    
    
  • Hvis kildenavnet er User agent stylesheet , er CSS'en en del af browserens standardstyling. Du vil oftest se dette for generel HTML-tag-styling som <p>, <h1>, <h2>, <span>, <div> osv. Denne styling anvendes, når browseren ikke kan finde generelle stylingregler for elementet, men den kan overskrives ved at tilføje dine egne styles til det pågældende element.
    
    
    
    
  • Hvis kildenavnet er sidens URL, kommer CSS'en fra <style>-tags på siden. Stylingen kan f.eks. være indstillet i sidens eller skabelonens hoved-HTML.
    
    
    
    
  • Hvis kildenavnet er sidens URL, og stylingen er rettet mod #hs_cos_wrapper_module_number, bliver stylingen sandsynligvis indstillet i fanen Styles i sideeditoren. HubSpot vil tilføje !important-tags til disse stilarter. Læs mere om !important-tags, og hvordan de påvirker styling.
    
    
    
    
  • Hvis kildenavnet er <style>, bliver stylingen sandsynligvis automatisk inkluderet i elementet. Det skyldes ofte, at stylingen er indstillet i editoren for et HubSpot-aktiv, der kan indlejres, f.eks. en CTA eller møde-widget.
    
    
    
    
  • Hviselement.stylevises ved siden af deklarationen i inspektøren, er CSS'en blevet sat inline. Inline-styling er styling, der føjes direkte til HTML-kildekoden på en side eller til Inline-styling-felterne i en skabelon. For eksempel vil inline-styling i kildekoden se ud som <p style="background:purple;">Hello world</p>.
    
    
    

Du kan finde flere oplysninger om, hvordan du inspicerer en side, i hjælpedokumentationen til din webbrowser:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Få hjælp til designændringer

Den bedste ressource til at foretage ændringer i dine HubSpot-skabeloner eller stylesheets er den oprindelige skabelondesigner. Men der findes en række ressourcer, hvor du kan få yderligere hjælp til indholdsstyling, afhængigt af hvor fortrolig du er med fejlfinding i HTML og CSS.

• Hvis du er fortrolig med at bruge inspektørværktøjerne til at fejlfinde designproblemer på din skabelon:

• • Søg og post på CMS Development Forum på Community for at få tips, råd eller fejlfinding af din kode.
  • Se CMS-referencedokumentationen for tutorials, vejledninger og en oversigt over CMS-frameworket.
  • Kom i kontakt med HubSpots produktteam og andre udviklere, der arbejder i HubSpot, på CMS Developer Community Slack.

• Hvis du ikke er tryg ved at læse eller redigere HTML og CSS i dine skabeloner:

• • Tag kontakt til en certificeret HubSpot-partner med ekspertise i webdesign, som kan hjælpe dig med at tilpasse dine skabeloner.
  • Brug en startskabelon eller en temaskabelon til at redigere sidens stilarter uden at skrive kode.
  • Hvis du bruger en skabelon, der er købt på Asset Marketplace, skal du kontakte skabelonens designer, hvis du har spørgsmål til designet af din side.