Egen stilmall (anpassad CSS)

Med Custom Stylesheet-funktionen kan du lägga till anpassad CSS i både din webbshop och din admin-backend. Det är perfekt för designjusteringar som att ändra färger, teckensnitt, marginaler eller dölja element - utan att ändra temafiler.

Hur man lägger till CSS

1. Gå till Företag i menyn
2. Klicka på Anpassad stilmall
3. Ange din CSS-kod i textfältet
4. Klicka på Spara

Din CSS kommer att laddas efter de befintliga formatmallarna, så dina regler kommer att skriva över standardformatmallarna. Detta gäller både för webbshopens förstasida och för adminpanelen.

Anpassningar av webbshoppen

Här följer exempel på typiska anpassningar av webbshopens förstasida:

Ändra bakgrundsfärg på sidhuvudet:

header { bakgrundsfärg: #1a1a2e; }

Ändra teckensnittet:

body { font-family: 'Georgia', serif; }

Dölja ett element på förstasidan:

.element-class { display: none; }

Anpassningar för administratörer

Du kan också använda Custom Stylesheet för att anpassa utseendet på adminpanelen. Nedan hittar du en fullständig översikt över de CSS-klasser och ID:n som du kan använda.

Orderlista - CSS-klasser på orderrader

Varje orderrad i orderlistan har ett antal dynamiska CSS-klasser som du kan använda för att styla ordrar baserat på deras status, betalning och leveransmetod.

Betalningsstatus

Exempel - Röd bakgrund på obetalda beställningar:

.obetald { bakgrundsfärg: #ffe0e0 !viktigt; }

Status för order

Status för orderraden läggs till direkt som en klass:

Exempel - Grön bakgrundsfärg på skickade och betalda order:

.paid.sent { bakgrundsfärg: #ddffeb !important; }

Exempel - Gråtonad visning av avbeställda order:

.cancelled { bakgrundsfärg: #eee !important; opacitet: 0,7; }

Leveransmetod

Namnet på leveransmetoden konverteras automatiskt till en CSS-klass. Alla bokstäver blir gemener och specialtecken ersätts med understreck. Till exempel blir "Hemadress med GLS" klassen .home_address_with_gls.

Exempel - Färgkodade beställningar efter leveransmetod:

/* GLS-order med orange bakgrund */ .home_address_with_gls { background-color: #fff3e0 !important; } /* PostNord-beställningar med blå bakgrund */ .postdanmark_to_home_address { background-color: #e3f2fd !important; }

Betalningsgateway

Varje orderrad får en klass som baseras på betalningsgateway-ID:t i formatet .payment-{ID}. Du hittar ID:t under Inställningar → Betalningsgateways och ser URL:en när du klickar på redigera.

Exempel - Grön bakgrund för ordrar som betalats med en specifik gateway:

.betalning-{id} { bakgrundsfärg: #c8e6c9 !important; }

Andra klasser för orderrader

Exempel - Markera EAN-beställningar:

.ean { bakgrundsfärg: #c2caff !important; }

Orderdetaljer - klasser i den expanderade vyn

När du klickar på en order i listan visas orderdetaljer med dessa klasser:

Orderinnehåll

Lagerstatus

Exempel - Röd text på artiklar som inte finns i lager:

.itemsnotinstock { färg: #ff0000 !important; font-weight: bold; }

Knappar i orderlistan

Knapparna i orderlistan har fasta ID:n som du kan utforma:

Primära knappar

Knappar för leverans

Exempel - Markera utskriftsknappen:

#btn-print { bakgrundsfärg: grön !viktig; färg: vit !viktig; }

Exempel - Dölj fraktknappar som du inte använder:

#btn-swipbox, #btn-gls { display: none !important; }

Webshop-specifik styling

Om du hanterar flera webbshoppar från samma företag kan du styla administratören på olika sätt för varje webbshop. Body-elementet har klassen webshop{ID} där ID är webbshoppens ID-nummer.

Exempel - Olika färg på sidhuvudet per webbshop:

/* Din första webbshop - röd header */ body.webshop{id} nav.top-app-bar { background-color: #ad3c3c !important; } /* Din andra webbshop - blå header */ body.webshop{id} nav.top-app-bar { background-color: #2a50a6 !viktigt; }

Layout och navigering

Exempel - Ändra färg på vänstermenyn:

.drawer-light .drawer-menu .nav-link { färg: #333 !important; } .drawer-light .drawer-menu .nav-link:hover { bakgrundsfärg: #f0f0f0 !viktigt; }

Andra användbara element

Populära användningsfall

Färgkodning av orderlistan

Ett populärt upplägg är att färgkoda orderlistan för att snabbt kunna skilja mellan betalda/obetalda order och olika statusar:

/* Obetalda ordrar i ljusrött */ .unpaid { bakgrundsfärg: #fff0f0 !important; } /* Betalda och skickade ordrar i ljusgrönt */ .paid.sent { background-color: #f0fff0 !important; } /* Avbeställda order gråtonade */ .cancelled { background-color: #f5f5f5 !important; opacity: 0.6; } /* EAN-order i ljusblått */ .ean { background-color: #f0f4ff !important; }

Markera viktiga åtgärdsknappar

/* Grön utskriftsknapp */ #btn-print { background-color: #28a745 !important; color: white !important; } /* Grön GLS-knapp */ #btn-gls-api { background-color: #ff9800 !important; färg: vit !important; }

Gör orderlistan bredare

.container-fluid { max-width: 100% !important; }

Markera tydligt artiklar som inte finns i lager

.itemsnotinstock { färg: #ff0000 !important; font-weight: bold; font-size: 1.1em; }

Så här hittar du rätt CSS-väljare

För att hitta den exakta klassen eller ID:t för ett element:

1. Högerklicka på elementet i din webbläsare
2. Välj Inspektera element (Inspektera)
3. Hitta klassen (t.ex. class="unpaid sent") eller ID för elementet
4. Använd klassen eller ID:t som en CSS-väljare i din stilmall

Större designändringar

Egen stilmall är lämplig för mindre anpassningar. För större designändringar rekommenderar vi att du redigerar själva temafilerna via SFTP. Se artikeln Logga in med SFTP för att komma igång.

CSS-fuskark

Här är en snabb översikt över de vanligaste CSS-egenskaperna så att du kan komma igång utan att behöva slå upp dem.

Färger

Färger kan anges som namn, hex-koder eller RGB:

/* Hex-kod (vanligast förekommande) */ colour: #ff0000; /* Röd text */ background-color: #f0f0f0; /* Ljusgrå bakgrund */ /* Färgnamn */ color: red; background-color: white; /* RGB med transparens */ background-color: rgba(0, 0, 0, 0, 0, 0.1); /* Svart, 10% synlig */

Användbara färgkoder:

Teckensnitt (font-family)

/* Byt typsnitt */ font-family: 'Georgia', serif; font-family: 'Arial', sans-serif; font-family: 'Courier New', monospace; /* Google Fonts (lägg till import längst upp i stilmallen) */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); font-family: 'Open Sans', sans-serif;

Text

font-size: 14px; /* Textstorlek */ font-weight: bold; /* Fet text (eller 400, 600, 700) */ font-style: italic; /* Kursiv */ text-align: center; /* Centrerad (vänster, höger, mitten) */ text-decoration: underline; /* Understreck */ text-transform: uppercase; /* Versaler (gemener, versaler) */ line-height: 1.5; /* Linjeavstånd */ letter-spacing: 1px; /* Bokstavsavstånd */

Bakgrund

bakgrundsfärg: #f0f0f0; background-image: url('https://example.com/bg.png'); background-size: cover; /* Fyller hela området */ background-repeat: no-repeat;

Gränser (border)

border: 1px solid #ccc; /* Kant runt hela elementet */ border-bottom: 2px solid #333; /* Endast nedre kant */ border-left: 4px solid #28a745; /* Grön vänsterkant */ border-radius: 8px; /* Rundade hörn */ border: none; /* Ta bort kant */

Avstånd (marginal och utfyllnad)

/* Padding = inre avstånd */ padding: 10px; /* Alla sidor */ padding: 10px 20px; /* Topp/botten, vänster/höger */ padding-left: 15px; /* Endast vänster */ /* Margin = yttre avstånd */ margin: 10px; /* Alla sidor */ margin-bottom: 20px; /* Endast botten */ margin: 0 auto; /* Centrera ett element */

Visa/dölj

display: none; /* Dölj helt (fyller inte i) */ visibility: hidden; /* Osynlig (fyller fortfarande i) */ opacity: 0.5; /* Halvgenomskinlig (0 = osynlig, 1 = full) */

Storlek

width: 100%; /* Full bredd */ max-width: 800px; /* Maximal bredd */ height: 50px; /* Fast höjd */ min-height: 200px; /* Minsta höjd */

Skuggor

box-shadow: 0 2px 4px rgba(0,0,0,0,0,0.1); /* Mjuk skugga */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Tung skugga */ box-shadow: none; /* Ta bort skuggan */

Behöver du hjälp med något? Kontakta oss på support@shoporama.dk.