Förstå källan till en sidas styling

Det finns flera ställen där innehållsstyling kan läggas till i HubSpot, och den tillämpas i en specifik ordning baserat på var den läggs till. Nedan får du veta hur styling tillämpas, hur du hittar styling på en live-sida och hur du får hjälp med designredigeringar.

Förstå hur styling tillämpas

CSS-styling i HubSpot tillämpas i ordning baserat på var den är inställd i HubSpot, enligt listan nedan. Till exempel åsidosätts styling som anges i en global stilmall av styling som anges på en specifik sida.

1. Anpassad modul-CSS
   1. Stylesheets som är kopplade till en modul.
   2. CSS som läggs till i CSS-avsnittet i en modul.
   3. CSS inuti modulens HubL-markup inom ett require_css-block
2. Stylesheets som läggs till i en mall via require_css-blocket
3. HubSpots standardformatmallar (t.ex. layout.css)
4. Stylesheets som bifogas mallen
   
   
   
   
5. Stylesheets som bifogas på inställningsfliken på din sida
   
   
   
   
6. Stylesheets bifogade i dina inställningar för alla domäner
7. Stylesheets bifogade i dina inställningar för en specifik domän
8. CSS som läggs till inom <style>-taggar. Till exempel head-HTML i webbplatsinställningarna, sidinställningarna eller mallen.
   
   
   
   
9. Stilar som läggs till via sidredigeraren. HubSpot kommer också att lägga till ! important-taggar till dessa stilar. Läs mer om !important-taggar och hur de påverkar styling.

Hitta styling på en förhandsgranskning eller live-sida

Du kan använda utvecklarverktyg i din webbläsare för att undersöka de stilar som tillämpas på din live-webbplats eller en förhandsgranskningssida. Varje webbläsare varierar något i hur man felsöker styling.

Så här hittar du styling i Google Chrome:

• Högerklicka på det element som du vill undersöka på förhandsgransknings- eller live-sidan och välj sedan Inspektera.
• I rutan Element till vänster ser du sidans HTML. Du kan antingen klicka på elementen för att visa deras stilar eller använda markörikonen längst upp till vänster i rutan för att klicka på sidans element.

  

• I panelen Stilar till höger ser du alla stilar som tillämpas på det elementet. Du kan markera och avmarkera kryssrutorna bredvid varje stil för att ta bort och tillämpa stilen. Detta hjälper dig att begränsa vilken stilregel du ska ändra.
  
  
  
  
• Till höger om CSS-reglerna ser du källnamnet för den stilen, vilket talar om varifrån stilen kommer. Håll muspekaren över källnamnet för att se det fullständiga namnet:
  • När stylingen kommer från en formatmall visas namnet på formatmallen bredvid CSS-deklarationen i inspektören. Du kan sedan navigera till din designhanterare, hitta formatmallen och göra ändringar efter behov.
    
    
    
    
  • Om källnamnet börjar med module kommer stylingen troligen från CSS i en modul. Håll muspekaren över källnamnet för att visa modulens fullständiga namn.
    
    
    
    
  • Om källnamnet är User agent stylesheet , är CSS en del av webbläsarens standardstyling . Du kommer oftast att se detta för allmän HTML-taggstyling som <p>, <h1>, <h2>, <span>, <div>, etc. Denna styling tillämpas när webbläsaren inte kan hitta allmänna stylingregler för elementet, men den kan skrivas över genom att lägga till dina egna stilar till det elementet.
    
    
    
    
  • Om källnamnet är sidans URL kommer CSS:en från <style>-taggarna på sidan. Stylingen kan till exempel ställas in i sidans eller mallens huvud-HTML.
    
    
    
    
  • Om källnamnet är sidans URL och stylingen är inriktad på #hs_cos_wrapper_module_number, ställs stylingen sannolikt in på fliken Styles i sidredigeraren. HubSpot kommer att lägga till ! important-taggar till dessa stilar. Läs mer om !important-taggar och hur de påverkar styling.
    
    
    
  • Om källnamnet är <style> inkluderas troligen stylingen automatiskt med elementet. Ofta beror detta på styling som ställts in i redigeraren för en inbäddningsbar HubSpot-tillgång, till exempel en CTA- eller möteswidget.
    
    
    
    
  • Omelement.stylevisas bredvid deklarationen i inspektören har CSS:en ställts in inline. Inline-styling är styling som läggs till direkt i HTML-källkoden på en sida eller i Inline-stylingfälten i en mall. Exempelvis skulle inline-styling i källkoden se ut som <p style="background:purple;">Hello world</p>.
    
    

Mer information om hur du inspekterar en sida finns i hjälpdokumentationen för din webbläsare:

• Chrome
• Firefox
• Microsoft Edge
• Safari

Få hjälp med designredigeringar

Den bästa resursen för att göra ändringar i dina HubSpot-mallar eller stylesheets är den ursprungliga malldesignern. Det finns dock en mängd olika resurser för att få ytterligare hjälp med innehållsstyling, beroende på din komfortnivå med felsökning av HTML och CSS.

• Om du är bekväm med att använda inspektörsverktygen för att felsöka designproblem i din mall:

• • Sök och skriv inlägg på CMS Development Forum på Community för att få tips, råd eller felsökning av din kod.
  • Se CMS-referensdokumentationen för handledning, guider och en översikt över CMS-ramverket.
  • Ta kontakt med HubSpots produktteam och andra utvecklare som arbetar i HubSpot på CMS Developer Community Slack.

• Om du inte är bekväm med att läsa eller redigera HTML och CSS i dina mallar:

• • Ta kontakt med en certifierad HubSpot-partner med expertis inom webbdesign som kan hjälpa dig att anpassa dina mallar.
  • Använd en temamall för att redigera sidstilar utan att skriva någon kod.
  • Om du använder en mall som köpts från Asset Marketplace, kontakta mallens designer om du har frågor om utformningen av din sida.