Admin-utseende: tilpass admin-panelet ditt

Shoporamas administrasjonsgrensesnitt ser i utgangspunktet likt ut for alle. Men du kan selv bestemme hvordan den skal se ut, hvis du vil ha dine egne farger, din egen logo øverst, eller bare en tydeligere markering av de ordrene du må reagere raskt på. Dette gjør du under «Admin-utseende».

I praksis er det ett tekstfelt du skriver inn et par linjer i, og så ser administrasjonsgrensesnittet annerledes ut for alle på kontoen.

Slik finner du «Admin-utseende»

Åpne menyen på venstre side, bla ned til delen Konto, klikk på Firma og velg Admin-utseende.

Siden består av én boks som heter «Custom CSS». Her står det: «Her kan du tilpasse utseendet på administrasjonssiden din med CSS. Endringene gjelder for alle brukere på kontoen din.» Under dette er det et stort tekstfelt, og nederst en «Lagre»-knapp.

1. Skriv inn eller lim inn CSS-koden din i tekstfeltet.
2. Klikk på «Lagre», eller bruk Cmd+S på Mac og Ctrl+S på Windows.
3. Siden lastes inn på nytt, og du ser resultatet umiddelbart i hele administrasjonsområdet.

Hvis du vil angre alt, tømmer du feltet og klikker på «Lagre». Da gjenopprettes standardutseendet. Ingenting går i stykker underveis.

Hva er CSS, og hva kan det?

CSS er språket som styrer hvordan en side ser ut: farger, skriftstørrelser, avstander og om et element i det hele tatt vises. Du peker på det du vil endre, og skriver deretter hva som skal skje:

.top-app-bar {
  background: #14532d !important;
}

Regelen sier: «alt med navnet top-app-bar skal ha mørkegrønn bakgrunn», og top-app-bar er nettopp linjen øverst i administrasjonspanelet. !important betyr «dette har høyere prioritet enn det Shoporama selv har bestemt», og det vil du som regel trenge. Du kan bytte farger, endre skrifttyper og skriftstørrelser, gjøre tall tydeligere, flytte rundt på elementene og skjule elementer du ikke bruker. Du kan derimot ikke legge til nye funksjoner eller sette inn JavaScript. Feltet endrer bare hvordan administrasjonspanelet ser ut, aldri hva det kan.

Hvem og hva gjelder endringene for?

• Alle brukere på kontoen. Dette er ikke en personlig innstilling. Kollegaene dine ser endringen neste gang de laster inn en side.
• Alle nettbutikker under samme firma. Lenger ned kan du se hvordan du tilpasser en enkelt butikk.
• Kun administrasjonsgrensesnittet, ikke nettbutikken din. Kundene dine ser ingenting av dette. Hvis utseendet på nettbutikken skal endres, gjøres det i temaet under «Design».
• Kun når man er logget inn. Innloggingssiden påvirkes ikke.
• Alle brukere tilknyttet firmaet kan redigere feltet. Det finnes ingen egen rettighet for dette, så avtal internt hvem som skal endre det.

Tre eksempler du kan kopiere direkte

1. Gi toppmenyen din egen farge

Den enkleste og mest synlige endringen. Bytt ut fargekoden med din egen:

.top-app-bar {
  background: #14532d !important;
}

2. Fargelegg ordrer med en bestemt fraktmetode

Hver ordrelinje i ordreoversikten får automatisk en rekke navn som beskriver ordren. Ett av dem er navnet på fraktmetoden med små bokstaver, der alt annet enn bokstavene a til z er erstattet med understreker. «Afhentning» blir til afhentning, og «Post Nord» blir til post_nord. Hvis avhentingsbestillinger skal være gule, slik at pakkesenteret fanger dem opp:

tr.afhentning {
  background: #fff3cd !important;
}

Hvis du er i tvil om det nøyaktige navnet, kan du høyreklikke på ordrelinjen og velge «Undersøk» eller «Vis kilde». Det finnes en trinnvis gjennomgang i Endre bakgrunnsfargen på ordrer med bestemt levering.

3. Gjør ordrenummeret større

Hvis du sitter med telefonen i den ene hånden og skal finne et ordrenummer i en lang liste:

.shoporama-order-id-link {
  font-size: 16px;
  font-weight: 700;
}

Sett inn ditt eget logo øverst

Er du et byrå som administrerer nettbutikken for en kunde, eller vil du bare ha ditt eget merke å se på, kan du bytte ut Shoporama-logoen øverst til venstre. Logoen må ligge på en adresse som kan hentes via https, og adressen skal skrives uten anførselstegn:

.navbar-brand img {
  content: url(https://dit-domaene.dk/logo.svg);
  width: 160px;
}

Hvis du heller bare vil skjule logoen, kan du nøye deg med display: none.

Husk mørk modus

Administrasjonsgrensesnittet finnes i både en lys og en mørk versjon. Mørk modus er en personlig innstilling som hver bruker selv slår på, så du kan ikke regne med at kollegene dine bruker samme versjon som deg. CSS-en din må fungere i begge modusene.

Fallgruven er lyse farger. En pastellbakgrunn som ser fin ut i lys modus, blir til en skrikende flekk med uleselig tekst i mørk modus. Løsningen er å skrive regelen to ganger og sette body.dark-mode foran den siste:

tr.afhentning {
  background: #fff3cd !important;
}

body.dark-mode tr.afhentning {
  background: #3a3320 !important;
}

Og test det: slå på mørk modus på din egen brukerkonto, se gjennom siden, og slå den av igjen.

Flere nettbutikker? Gi hver butikk sin egen farge

Den klassiske feilen når man driver flere nettbutikker fra samme konto, er å endre en pris eller sende en ordre i feil butikk. En farget toppmeny for hver butikk løser problemet. Hver nettbutikk har sitt eget nummer, og dette vises i adressefeltet i nettleseren. Hvis det står /admin/da/7/, er du i nettbutikk nummer 7, og du målretter den med body.webshop7 foran regelen:

body.webshop1 .top-app-bar {
  background: #14532d !important;
}

body.webshop7 .top-app-bar {
  background: #7c2d12 !important;
}

Det finnes ingen billigere måte å unngå å gjøre endringer i feil nettbutikk. Les mer i «Hvordan oppretter jeg en nettbutikk til?».

Når er det verdt pengene?

• Byråer og webutviklere. Sett inn deres eget logo og farger, slik at kunden møter merkevaren deres ved innlogging.
• Flere nettbutikker på én konto. Fargekode hver nettbutikk, slik at ingen redigerer på feil sted.
• Pakking og lager. Merk ordrene som skal håndteres annerledes, for eksempel henting i butikken. Færre feilpakkinger betyr sparte penger.
• Opplæring. Skjul de delene av menyen som en ny kollega ikke trenger de første ukene.
• Tilgjengelighet. Øk skriftstørrelsen på ett sted for alle, hvis tallene er vanskelige å lese.

Godt å vite før du setter i gang

• Dette er kosmetiske endringer, ikke rettighetsbegrensninger. Hvis du skjuler et menypunkt, finnes funksjonen fortsatt, og den kan fortsatt nås. Skal en medarbeider faktisk utestenges, styres dette på brukernivå. Se «Slik oppretter du flere brukere i nettbutikken din».
• Feltet godtar kun CSS. Ikke JavaScript, sporingskoder eller HTML. Hvis du skal legge inn kode i nettbutikken, bruker du «Sett inn kode» i head- og body-delen av Shoporama-nettbutikken din.
• Noen tegn kan ikke brukes. Anførselstegn, apostrof, større enn-tegnet og et-tegnet fungerer ikke i feltet. Se den tekniske delen nedenfor.
• Navnene kan endres. Vi utvikler administrasjonsgrensesnittet kontinuerlig, så en regel kan slutte å fungere etter en oppdatering. Det skjer ikke noe annet enn at endringen mister sin virkning.
• Ser du ikke endringen? Gjør en hard oppfriskning med Cmd+Shift+R eller Ctrl+F5.
• Lagre en kopi av CSS-koden din i et dokument, så kan du alltid sette den inn igjen.

Til deg som er teknisk anlagt

Innholdet i feltet legges inn i et style-element i toppteksten på alle administrasjonssider for innloggede brukere i firmaet, i henhold til plattformens egne stilark. Du vinner altså på rekkefølgen, men både utility-klasser og mørk modus bruker !important flere steder, så regn med at du må bruke det selv.

Tegn du ikke kan bruke

Innholdet blir HTML-escapet, og siden et style-element ikke dekoder HTML-entiteter, overlever ikke anførselstegn, apostrof, >, < og &. I praksis betyr det:

• Bruk etterkommer-selektorer, altså .card .card-header, i stedet for barn-selektoren.
• Skriv url(https://...) uten anførselstegn.
• Unngå «content» med tekstverdier, da disse krever anførselstegn. Bilder via url() fungerer fint.
• Bruk max-width og min-width i mediespørsmål, ikke den nyere range-syntaksen.
• CSS-nesting med et-tegn fungerer ikke. Skriv selektorene i sin helhet.

Derimot fungerer @media, calc(), CSS-variabler, pseudoklasser og attributtselektorer med verdier uten anførselstegn.

Hooker du kan henge CSS-en din på

På body finnes blant annet webshop<nummer> (nettbutikkens nummer fra adressen), dark-mode og layout-topmenu. Hver ordrelinje i ordreoversikten har blant annet:

• paid eller unpaid.
• Ordrens status, for eksempel new, process, sent, pending, ready, cancelled, ready_for_pickup eller picked_up.
• Navnet på fraktmetoden med små bokstaver, der alt annet enn bokstavene a til z er erstattet med understreker. Tall, mellomrom og æ, ø, å blir altså også til understreker.
• ean på ordrer med EAN-nummer, credit_note på kreditnotaer, og has_pickup_address eller no_pickup_address, avhengig av om ordren skal til en pakkeshop.

Den eldre gjennomgangen i «Eget stylesheet (Custom CSS) » har et par ekstra eksempler på selektorer i menyen.

Ofte stilte spørsmål

Jeg kan ikke kode. Kan jeg likevel bruke det?

Ja. Kopier eksemplene ovenfor inn i feltet og endre bare fargekoden. Hvis det går galt, tømmer du feltet og klikker på «Lagre», så blir alt som før. Hvis du ønsker noe mer avansert, kan webutvikleren din ordne det på få minutter, eller du kan skrive til support@shoporama.dk.

Vil dette endre noe for kundene mine i selve nettbutikken?

Nei. Feltet gjelder utelukkende administrasjonen, altså det du selv ser når du er logget inn. Kundene dine merker ingenting. Hvis utseendet på nettbutikken skal endres, gjør du det i temaet under «Design».

Gjelder min CSS også for kollegene mine?

Ja, og det står også på siden: endringene gjelder for alle brukere på kontoen, i alle nettbutikkene som tilhører samme firma. Gi derfor gjerne kollegene dine beskjed før du endrer noe vesentlig.

Hvordan angre jeg hvis administrasjonsgrensesnittet ser rart ut?

Gå til Konto, Firma, Admin-utseende, merk av alt i feltet, slett det og klikk på Lagre. Da er standardutseendet tilbake. Hvis du fremdeles ser det gamle, kan du foreta en hard oppfriskning med Cmd+Shift+R eller Ctrl+F5.

Kan jeg ha forskjellige farger på de ulike nettbutikkene mine?

Ja. Skriv body.webshop etterfulgt av nettbutikkens nummer foran regelen. Nummeret står i adressefeltet i nettleseren rett etter språkkoden. Da får hver nettbutikk sin egen farge, og det blir vanskeligere å gjøre feil i den gale.

Fungerer det i mørk modus?

CSS-en din lastes inn i begge modusene, men tilpasses ikke automatisk. En lys bakgrunnsfarge vil også være lys for en kollega i mørk modus. Skriv derfor en ekstra regel med «body.dark-mode» foran, og test siden i begge modusene.

Hvorfor fungerer ikke regelen min?

De tre vanligste årsakene: det mangler !important, slik at plattformens egen styling tar overhånd, selektoren er feilstavet, eller regelen inneholder anførselstegn eller et større enn-tegn, som ikke kan brukes i feltet. Sjekk også at siden er lastet inn helt på nytt.

Kan jeg legge inn JavaScript eller et sporingsskript her?

Nei. Innholdet legges inn som ren CSS, og tegn som «mindre enn» og «større enn» blir omkodet underveis, slik at en script-tag aldri kan kjøres. Hvis det skal legges inn et skript i selve nettbutikken, finnes det et eget sted for dette, som er beskrevet i artikkelen om å legge inn kode i head og body.

Kan jeg skjule menypunkter, slik at nye medarbeidere ikke roter med priser og innstillinger?

Du kan skjule dem visuelt, og det er fint for å gjøre hverdagen enklere. Men det er ikke en sperring: funksjonen finnes fortsatt og kan fortsatt nås. Skal en bruker virkelig ikke ha tilgang, styres dette under Konto, Firma, Brukere.

Kan jeg bytte ut Shoporama-logoen med min egen?

Ja. Du klikker på logobildet øverst og erstatter det med adressen til din egen logo. Logoen må kunne hentes via https, og adressen skrives uten anførselstegn. Dette er spesielt nyttig for byråer som ønsker å vise frem sitt eget merke overfor kunden.

Hvis du trenger hjelp med en bestemt endring, kan du gjerne skrive til support@shoporama.dk. Fortell gjerne nøyaktig hva du ønsker å endre, og legg ved et skjermbilde.