Eget stilark (tilpasset CSS)

Med funksjonen «Eget stilark» kan du legge til brukerdefinert CSS både i nettbutikken din og i administrasjonsgrensesnittet. Dette er ideelt for designjusteringer som endring av farger, skrifttyper, marginer eller skjuling av elementer — uten å endre i temafilene.

Slik legger du til CSS

1. Gå til Design i menyen
2. Klikk på «Stylesheet»
3. Skriv inn CSS-koden din i tekstfeltet
4. Klikk på «Lagre»

CSS-koden din lastes inn etter de eksisterende stilarkene, slik at reglene dine overstyrer standardstilene. Dette gjelder både nettbutikkens forside og administrasjonspanelet.

Tilpasninger av nettbutikken

Her er eksempler på typiske tilpasninger av nettbutikkens forside:

Endre bakgrunnsfargen på toppteksten:

header {
    background-color: #1a1a2e;
}

Endre skrifttype:

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

Skjul et element på forsiden:

.element-class {
    display: none;
}

Administratorinnstillinger

Du kan også bruke Egne stilark til å tilpasse utseendet på admin-panelet. Nedenfor finner du en fullstendig oversikt over CSS-klassene og ID-ene du kan bruke.

Ordreoversikten — CSS-klasser på ordrerader

Hver ordrerad i ordrelisten har en rekke dynamiske CSS-klasser som du kan bruke til å style ordrer basert på status, betaling og leveringsmåte.

Betalingsstatus

Eksempel — Rød bakgrunn på ubetalte bestillinger:

.unpaid {
    background-color: #ffe0e0 !important;
}

Ordrestatus

Ordrekøens status legges til direkte som klasse:

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

.paid.sent {
    background-color: #ddffeb !important;
}

Eksempel — Dempet 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å, og spesialtegn erstattes med understreker. For eksempel blir «Hjemmeadresse med GLS» til klassen .hjemmeadresse_med_gls.

Eksempel — Marker bestillinger med farge etter leveringsmetode:

/* GLS-bestillinger med oransje bakgrunn */
.hjemmeadresse_med_gls {
    background-color: #fff3e0 !important;
}

/* PostNord-bestillinger med blå bakgrunn */
.postdanmark_til_privatadresse {
    background-color: #e3f2fd !important;
}

Betalingsgateway

Hver ordrelinje får en klasse basert på betalingsgatewayens ID i formatet .payment-{ID}. Du finner ID-en ved å gå til Integrasjoner → Betalingsgatewayer og se på URL-en når du klikker på «Rediger».

Eksempel — Grønn bakgrunn for bestillinger betalt med en bestemt gateway:

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

Andre klasser for ordrerekker

Eksempel — Fremhev EAN-bestillinger:

.ean {
    background-color: #c2caff !important;
}

Ordredetaljer — klasser i den utvidede visningen

Når du klikker på en ordre i listen, vises ordredetaljer med disse klassene:

Ordreinnhold

Lagerstatus

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

.itemsnotinstock {
    color: #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 firma, kan du tilpasse utseendet i administrasjonspanelet for hver nettbutikk. Body-elementet har klassen webshop{ID}, der ID er nettbutikkens ID-nummer.

Eksempel — Ulik farge på toppteksten for hver nettbutikk:

/* Din første nettbutikk — rød topptekst */
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 {
    color: #333 !important;
}

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

Andre nyttige elementer

Populære bruksområder

Fargekoding av ordrelisten

Et populært oppsett er å fargekode ordrelisten, slik at du raskt kan skille mellom betalte/ubetalte ordrer og ulike statuser:

/* Ubetalte ordrer i lys rød */
.unpaid {
    background-color: #fff0f0 !important;
}

/* Betalte og sendte ordrer i lys grønn */
.paid.sent {
    background-color: #f0fff0 !important;
}

/* Avbestilte ordrer med redusert gjennomsiktighet */
.cancelled {
    background-color: #f5f5f5 !important;
    opacity: 0.6;
}

/* EAN-bestillinger i lys blå */
.ean {
    background-color: #f0f4ff !important;
}

Fremhev 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;
}

Tydelig markering av varer som ikke er på lager

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

Slik finner du riktig CSS-selektor

For å finne den nøyaktige klassen eller ID-en til et element:

1. Høyreklikk på elementet i nettleseren din
2. Velg «Undersøk element » (Inspect)
3. Finn elementets klasse (f.eks. class="unpaid sent") eller ID
4. Bruk klassen eller ID-en som CSS-selektor i stilarket ditt

Større designendringer

«Eget stylesheet» egner seg godt til mindre tilpasninger. For større designendringer anbefales det å redigere selve temafilene via SFTP. Se artikkelen «Logg inn med SFTP» for å komme i gang.

CSS-sjekkliste

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, heksadesimalkoder eller RGB:

/* Hex-kode (mest brukt) */
color: #ff0000;              /* Rød tekst */
background-color: #f0f0f0;  /* Lys grå bakgrunn */

/* Fargenavn */
color: red;
background-color: white;

/* RGB med gjennomsiktighet */
background-color: rgba(0, 0, 0, 0.1);  /* Svart, 10 % synlig */

Nyttige fargekoder:

Skrifttype (font-family)

/* Bytt skrifttype */
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 (left, right, center) */
text-decoration: underline; /* Understreking */
text-transform: uppercase;  /* Store bokstaver (lowercase, capitalize) */
line-height: 1.5;           /* Linjeavstand */
letter-spacing: 1px;        /* Bokstavavstand */

Bakgrunn

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

Rammer (border)

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

Avstander (margin og padding)

/* Padding = innvendig avstand */
padding: 10px;              /* Alle sider */
padding: 10px 20px;         /* Topp/bunn, venstre/høyre */
padding-left: 15px;         /* Kun venstre */

/* Margin = ytre avstand */
margin: 10px;               /* Alle sider */
margin-bottom: 20px;        /* Kun nederst */
margin: 0 auto;             /* Sentrer et element */

Vis/skjul

display: none;       /* Skjul helt (tar ikke plass) */
visibility: hidden;  /* Usynlig (tar fortsatt plass) */
opacity: 0.5;        /* Halvt gjennomsiktig (0 = usynlig, 1 = fullt) */

Størrelse

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

Skygger

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

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