Hur kan jag själv anpassa utseendet i shoppen? (Avancerade användare) – E37 Hjälpcenter

Introduktion

Denna guide beskriver hur du kan gå tillväga för att göra mindre design-justeringar för din shop och kräver grundläggande kunskaper om CSS-kodning.

Vad innebär CSS och vad gör det?

Cascading Style Sheets (CSS, på svenska stilmall) är ett kodspråk som beskriver presentationsstilen för ett strukturerat dokument som till exempel typsnitt, textstorlek och färg. Med detta sagt så krävs alltså en del kunskap för att våga ge sig ut på detta fält utan att riskera att någonting annat i shoppen går sönder.

Vill ni lära er mer hur CSS fungerar finns det guider och lektioner på nätet att hitta. Nedan finns en bra länk för att komma igång:

https://www.w3schools.com/css/

Fliken CSS i kontrollpanelen

Under kontrollpanelen [Webbplats - Allmänt] finner du fliken "Egen CSS" där möjligheten finns att göra mindre design-justeringar i shoppen. Denna flik används på egen risk och påverkar hela shoppen.

Gå till Kontrollpanelen och klicka sedan på huset Allmänt.

I rutan som dyker upp går du sedan in under fliken Egen CSS

Fliken CSS i en widget

Under de flesta widgets som finns att använda finns en flik för CSS. Fliken ligger alltid längst till höger när du öppnat upp widgeten:

CSS-klass

Här anger du ett klassnamn som widgeten tilldelas, för att kunna återanvända egenskaper som du definierat i kontrollpanelen. Klassnamn anges utan symboler och avskiljer sig med vanligt mellanrum om fler klasser anges för samma widget.

Angivelse av klass:

Definition av klass i Kontrollpanelen:

Exemplet ovan justerar alltså alla H1:or för widgeten till röd färg samt till storlek 42 pixlar.

CSS-kod:

För detta fält gäller samma kunskapsbas som nämndes under rubriken "Fliken CSS i kontrollpanelen", och används på egen risk. Det som skiljer detta fält från fältet under Egen CSS i Kontrollpanelen är att denna flik enbart påverkar just den widget du befinner dig i.

Med detta sagt har du här alltså möjlighet att justera utseendet för en specifik widget utan att det påverkar resterande delar av shoppen.

Varning: Om koden i detta fält skulle vara inkorrekt skriven/formaterad - slutar all CSS-kod för den innehållssidan där widgeten används att fungera.