Eget stilark (tilpasset CSS)

Med Custom Stylesheet-funksjonen kan du legge til egendefinert CSS både i nettbutikken og i administrasjonssystemet. Det er ideelt for designjusteringer som å endre farger, skrifttyper, marginer eller skjule elementer - uten å endre temafiler.

Slik legger du til CSS

1. Gå til Firma i menyen
2. Klikk på Egendefinert stilark
3. Skriv inn CSS-koden din i tekstfeltet
4. Klikk på Lagre

CSS-koden din vil lastes inn etter de eksisterende stilarkene, så reglene dine vil overskrive standardstilene. Dette gjelder både for nettbutikkens forside og administrasjonspanelet.

Tilpasninger av nettbutikken

Her er eksempler på typiske tilpasninger til nettbutikkens forside:

Endre bakgrunnsfargen på toppteksten:

header { background-colour: #1a1a2e; }

Endre skrifttypen:

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

Skjul et element på forsiden:

.element-class { display: none; }

Tilpasninger for administratorer

Du kan også bruke det egendefinerte stilarket til å tilpasse utseendet på administratorpanelet. Nedenfor finner du en fullstendig oversikt over CSS-klasser og ID-er du kan bruke.

Bestillingsliste - CSS-klasser på bestillingsrader

Hver bestillingsrad i bestillingslisten har en rekke dynamiske CSS-klasser som du kan bruke til å style bestillinger basert på status, betaling og leveringsmetode.

Betalingsstatus

Eksempel - rød bakgrunn på ubetalte bestillinger:

.unpaid { bakgrunnsfarge: #ffe0e0 !important; }

Bestillingsstatus

Status for bestillingsraden legges til direkte som en klasse:

Eksempel - Grønn bakgrunn på sendte og betalte bestillinger:

.paid.sent { bakgrunnsfarge: #ddffeb !important; }

Eksempel - Gråtonet visning av kansellerte bestillinger:

.cancelled { background-color: #eee !important; opacity: 0.7; }

Leveringsmetode

Navnet på leveringsmetoden konverteres automatisk til en CSS-klasse. Alle bokstaver blir små bokstaver, og spesialtegn erstattes med understrek. For eksempel blir "Hjemmeadresse med GLS" til klassen .home_address_with_gls.

Eksempel - Fargekodede bestillinger etter leveringsmetode:

/* GLS-ordrer med oransje bakgrunn */ .home_address_with_gls { background-color: #fff3e0 !important; } /* PostNord-bestillinger med blå bakgrunn */ .postdanmark_to_home_address { background-color: #e3f2fd !important; }

Betalingsgateway

Hver bestillingslinje får en klasse basert på ID-en til betalingsgatewayen i formatet .payment-{ID}. Du finner ID-en ved å gå til Innstillinger → Betalingsgatewayer og se URL-adressen når du klikker på Rediger.

Eksempel - Grønn bakgrunn for bestillinger som er betalt med en spesifikk gateway:

.payment-{id} { bakgrunnsfarge: #c8e6c9 !important; }

Andre bestillingslinjeklasser

Eksempel - Fremhev EAN-bestillinger:

.ean { bakgrunnsfarge: #c2caff !important; }

Bestillingsdetaljer - klasser i den utvidede visningen

Når du klikker på en bestilling i listen, vises bestillingsdetaljer med disse klassene:

Ordreinnhold

Lagerstatus

Eksempel - Rød tekst på varer som ikke er på lager:

.itemsnotinstock { farge: #ff0000 !important; font-weight: bold; }

Knapper i bestillingslisten

Knappene i bestillingslisten har faste ID-er som du kan style:

Primære knapper

Fraktknapper

Eksempel - Fremhev utskriftsknappen:

#btn-print { background-color: green !important; color: white !important; }

Eksempel - Skjul fraktknapper du ikke bruker:

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

Nettbutikk-spesifikk styling

Hvis du administrerer flere nettbutikker fra samme selskap, kan du style administratoren forskjellig for hver nettbutikk. Body-elementet har klassen webshop{ID}, der ID er nettbutikkens ID-nummer.

Eksempel - Forskjellig topptekstfarge per nettbutikk:

/* Din første nettbutikk - rød header */ body.webshop{id} nav.top-app-bar { background-color: #ad3c3c !important; } /* Din andre nettbutikk - blå topptekst */ body.webshop{id} nav.top-app-bar { background-color: #2a50a6 !important; }

Layout og navigasjon

Eksempel - Endre fargen på menyen til venstre:

.drawer-light .drawer-menu .nav-link { farge: #333 !important; } .drawer-light .drawer-menu .nav-link:hover { background-color: #f0f0f0f0 !important; }

Andre nyttige elementer

Populære bruksområder

Fargekoding av bestillingslisten

Et populært oppsett er å fargekode ordrelisten for raskt å kunne skille mellom betalte/ubebetalte bestillinger og ulike statuser:

/* Ubetalte bestillinger i lys rødt */ .unpaid { background-color: #fff0f0 !important; } /* Betalte og sendte bestillinger i lysegrønt */ .paid.sent { background-color: #f0fff0 !important; } /* Annullerte bestillinger gråtonet */ .cancelled { background-color: #f5f5f5 !important; opacity: 0.6; } /* EAN-bestillinger i lyseblått */ .ean { background-color: #f0f4ff !important; }

Uthev viktige handlingsknapper

/* Grønn utskriftsknapp */ #btn-print { background-color: #28a745 !important; color: white !important; } /* Grønn GLS-knapp */ #btn-gls-api { background-color: #ff9800 !important; color: white !important; }

Gjør bestillingslisten bredere

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

Marker tydelig varer som ikke er på lager

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

Slik finner du riktig CSS-selector

Slik finner du den nøyaktige klassen eller ID-en til et element:

1. Høyreklikk på elementet i nettleseren
2. Velg Inspiser element (Inspect )
3. Finn klassen (f.eks. class="unpaid sent") eller ID-en til elementet
4. Bruk klassen eller ID-en som en CSS-velger i stilarket ditt

Større designendringer

Egendefinerte stilark er egnet for mindre tilpasninger. For større designendringer anbefales det å redigere selve temafilene via SFTP. Se artikkelen Logg inn med SFTP for å komme i gang.

CSS-jukselapp

Her er en rask oversikt over de mest brukte CSS-egenskapene, slik at du kan komme i gang uten å måtte slå det opp.

Farger

Farger kan angis som navn, hex-koder eller RGB:

/* Hex-kode (mest brukt) */ colour: #ff0000; /* Rød tekst */ background-color: #f0f0f0; /* Lysegrå bakgrunn */ /* Fargenavn */ color: red; background-color: white; /* RGB med transparens */ background-color: rgba(0, 0, 0, 0, 0, 0, 0.1); /* Svart, 10 % synlig */

Nyttige fargekoder:

Skrifttype (font-family)

/* Endre font */ font-family: 'Georgia', serif; font-family: 'Arial', sans-serif; font-family: 'Courier New', monospace; /* Google Fonts (legg til import øverst i stilarket ditt) */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); font-family: 'Open Sans', sans-serif;

Tekst

font-size: 14px; /* Tekststørrelse */ font-weight: bold; /* Fet tekst (eller 400, 600, 700) */ font-style: italic; /* Kursiv */ text-align: center; /* Sentrert (venstre, høyre, midt) */ text-decoration: underline; /* Understreking */ text-transform: uppercase; /* Store bokstaver (små bokstaver, store bokstaver) */ line-height: 1,5; /* Linjeavstand: 1.5; /* Linjeavstand */ letter-spacing: 1px; /* Bokstavavstand */

Bakgrunn

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

Rammer (border)

border: 1px solid #ccc; /* Ramme rundt hele elementet */ border-bottom: 2px solid #333; /* Kun nedre ramme */ border-left: 4px solid #28a745; /* Grønn venstre ramme */ border-radius: 8px; /* Avrundede hjørner */ border: none; /* Fjern ramme */

Avstand (margin og padding)

/* Padding = indre avstand */ padding: 10px; /* Alle sider */ padding: 10px 20px; /* Top/bottom, left/right */ padding-left: 15px; /* Left only */ /* Margin = ytre avstand */ margin: 10px; /* Alle sider */ margin-bottom: 20px; /* Bottom only */ margin: 0 auto; /* Centre an element */

Vis/skjul

display: none; /* Skjul helt (fyller ikke) */ visibility: hidden; /* Usynlig (fyller fortsatt) */ opacity: 0.5; /* Semi-transparent (0 = usynlig, 1 = full) */

Størrelse

width: 100%; /* Full bredde */ max-width: 800px; /* Maksimal bredde */ height: 50px; /* Fast høyde */ min-height: 200px; /* Minimumshøyde */

Skygger

box-shadow: 0 2px 4px rgba(0,0,0,0,0,0,0.1); /* Myk skygge */ box-shadow: 0 4px 12px rgba(0,0,0,0,0.15); /* Kraftig skygge */ box-shadow: none; /* Fjern skyggen */

Trenger du hjelp? Kontakt oss på support@shoporama.dk.