Admin Theme: Customize Your Admin Panel

Shoporamas administration ser som udgangspunkt ens ud for alle. Men du kan selv bestemme, hvordan den skal se ud, hvis du vil have dine egne farver, dit eget logo i toppen, eller bare en tydeligere markering af de ordrer, I skal reagere hurtigt på. Det klarer du under Admin-udseende.

I praksis er det ét tekstfelt, du sætter et par linjer ind i, og så ser administrationen anderledes ud for alle på kontoen.

Sådan finder du Admin-udseende

Åbn menuen i venstre side, rul ned til afsnittet Konto, klik på Firma, og vælg Admin-udseende.

Siden består af én boks, der hedder Custom CSS. Her står der: "Her kan du tilpasse udseendet af din admin-side med CSS. Ændringerne gælder for alle brugere på din konto." Nedenunder er et stort tekstfelt, og i bunden en Gem-knap.

1. Skriv eller indsæt din CSS i tekstfeltet.
2. Klik Gem, eller brug Cmd+S på Mac og Ctrl+S på Windows.
3. Siden indlæses igen, og du ser resultatet med det samme i hele administrationen.

Vil du fortryde det hele, så tøm feltet og klik Gem. Så er standardudseendet tilbage. Der er ikke noget, der går i stykker undervejs.

Hvad er CSS, og hvad kan det?

CSS er det sprog, der styrer, hvordan en side ser ud: farver, skriftstørrelser, afstande, og om et element overhovedet vises. Du peger på det, du vil ændre, og skriver derefter, hvad der skal ske:

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

Reglen siger: "alt med navnet top-app-bar skal have mørkegrøn baggrund", og top-app-bar er netop bjælken øverst i administrationen. !important betyder "dette vejer tungere end det, Shoporama selv har bestemt", og det får du som regel brug for. Du kan skifte farver, ændre skrifttyper og skriftstørrelser, gøre tal tydeligere, flytte rundt på tingene, og skjule elementer, du ikke bruger. Du kan derimod ikke tilføje nye funktioner eller indsætte JavaScript. Feltet ændrer kun, hvordan administrationen ser ud, aldrig hvad den kan.

Hvem og hvad gælder ændringerne for?

• Alle brugere på kontoen. Det er ikke en personlig indstilling. Dine kolleger ser ændringen, næste gang de indlæser en side.
• Alle webshops under samme firma. Længere nede kan du se, hvordan du målretter en enkelt shop.
• Kun administrationen, ikke din butik. Dine kunder ser intet af det. Skal butikkens udseende ændres, foregår det i temaet under Design.
• Kun når man er logget ind. Login-siden er ikke berørt.
• Alle brugere tilknyttet firmaet kan redigere feltet. Der findes ingen særskilt rettighed for det, så aftal internt, hvem der rører ved det.

Tre eksempler, du kan kopiere direkte

1. Giv topbaren din egen farve

Den nemmeste og mest synlige ændring. Skift farvekoden ud med din egen:

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

2. Farv ordrer med en bestemt fragtmetode

Hver ordrelinje i ordreoversigten får automatisk en række navne, der beskriver ordren. Et af dem er fragtmetodens navn med små bogstaver, hvor alt andet end bogstaverne a til z er skiftet til understreg. "Afhentning" bliver til afhentning, og "Post Nord" bliver til post_nord. Skal afhentningsordrer være gule, så pakkeriet fanger dem:

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

Er du i tvivl om det præcise navn, kan du højreklikke på ordrelinjen og vælge "Undersøg" eller "Vis kilde". Der er en trin for trin-gennemgang i Skift baggrundsfarven på ordrer med bestemt levering.

3. Gør ordrenummeret større

Sidder du med telefonen i den ene hånd og skal finde et ordrenummer i en lang liste:

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

Sæt dit eget logo i toppen

Er du et bureau, der administrerer shoppen for en kunde, eller vil du bare have dit eget brand at kigge på, kan du skifte Shoporama-logoet øverst til venstre ud. Logoet skal ligge på en adresse, der kan hentes via https, og adressen skal skrives uden anførselstegn:

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

Vil du hellere bare skjule logoet, kan du nøjes med display: none.

Husk mørk tilstand

Administrationen findes i både en lys og en mørk udgave. Mørk tilstand er en personlig indstilling, som hver bruger selv slår til, så du kan ikke regne med, at dine kolleger sidder i samme udgave som dig. Din CSS skal fungere begge steder.

Faldgruben er lyse farver. En pastelbaggrund, der ser fin ud i lys tilstand, bliver til en skrigende plamage med ulæselig tekst i mørk tilstand. Løsningen er at skrive reglen to gange og sætte body.dark-mode foran den sidste:

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

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

Og test det: slå mørk tilstand til på din egen bruger, kig siden igennem, og slå den fra igen.

Flere shops? Giv hver shop sin egen farve

Den klassiske fejl, når man driver flere webshops fra samme konto, er at rette en pris eller sende en ordre i den forkerte shop. En farvet topbar pr. shop fjerner problemet. Hver shop har sit eget nummer, og det står i adressefeltet i browseren. Står der /admin/da/7/, er du i shop nummer 7, og du målretter den med body.webshop7 foran reglen:

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

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

Der findes ikke en billigere forsikring mod at rette i den forkerte shop. Læs mere i Hvordan opretter jeg en webshop mere.

Hvornår er det pengene værd?

• Bureauer og webudviklere. Sæt jeres eget logo og farver ind, så kunden møder jeres brand ved login.
• Flere shops på én konto. Farvekod hver shop, så ingen redigerer det forkerte sted.
• Pakkeri og lager. Farv de ordrer, der skal håndteres anderledes, for eksempel afhentning i butikken. Færre fejlpakninger er penge sparet.
• Oplæring. Skjul de dele af menuen, en ny kollega ikke skal bruge de første uger.
• Tilgængelighed. Hæv skriftstørrelsen ét sted for alle, hvis tallene er svære at læse.

Godt at vide, før du går i gang

• Det er kosmetik, ikke rettigheder. Skjuler du et menupunkt, findes funktionen stadig, og den kan stadig nås. Skal en medarbejder reelt afskæres, styres det på brugeren. Se Sådan opretter du flere brugere i din shop.
• Feltet tager kun CSS. Ikke JavaScript, sporingskoder, eller HTML. Skal der kode ind på butikken, bruger du Indsæt kode i head og body på din Shoporama shop.
• Nogle tegn kan ikke bruges. Anførselstegn, apostrof, større end-tegnet, og et-tegnet virker ikke i feltet. Se den tekniske sektion nedenfor.
• Navnene kan ændre sig. Vi udvikler løbende på administrationen, så en regel kan holde op med at virke efter en opdatering. Der sker ikke andet, end at ændringen mister effekt.
• Ser du ikke ændringen? Lav en hård genindlæsning med Cmd+Shift+R eller Ctrl+F5.
• Gem en kopi af din CSS i et dokument, så kan du altid sætte den ind igen.

Til dig der er teknisk

Feltets indhold lægges i et style-element i sidehovedet på alle administrationssider for indloggede brugere på firmaet, efter platformens egne stylesheets. Du vinder altså på rækkefølgen, men både utility-klasser og mørk tilstand bruger !important flere steder, så regn med at skulle bruge det selv.

Tegn du ikke kan bruge

Indholdet HTML-escapes, og da et style-element ikke afkoder HTML-entiteter, overlever anførselstegn, apostrof, >, <, og & ikke. I praksis betyder det:

• Brug efterkommer-selektorer, altså .card .card-header, i stedet for barn-selektoren.
• Skriv url(https://...) uden anførselstegn.
• Undgå content med tekstværdier, da de kræver anførselstegn. Billeder via url() virker fint.
• Brug max-width og min-width i media queries, ikke den nyere range-syntaks.
• CSS-nesting med et-tegn virker ikke. Skriv selektorerne fuldt ud.

Til gengæld virker @media, calc(), CSS-variabler, pseudoklasser, og attributselektorer med værdier uden anførselstegn.

Kroge du kan hænge din CSS op på

På body findes blandt andet webshop<nummer> (shoppens nummer fra adressen), dark-mode, og layout-topmenu. Hver ordrelinje i ordreoversigten har blandt andet:

• paid eller unpaid.
• Ordrens status, for eksempel new, process, sent, pending, ready, cancelled, ready_for_pickup, eller picked_up.
• Fragtmetodens navn med små bogstaver, hvor alt andet end bogstaverne a til z er skiftet til understreg. Tal, mellemrum, og æ, ø, å bliver altså også til understreg.
• ean på ordrer med EAN-nummer, credit_note på kreditnotaer, og has_pickup_address eller no_pickup_address alt efter om ordren skal til en pakkeshop.

Den ældre gennemgang i Eget stylesheet (Custom CSS) har et par ekstra eksempler på selektorer i menuen.

Ofte stillede spørgsmål

Jeg kan ikke kode. Kan jeg alligevel bruge det?

Ja. Kopiér eksemplerne herover ind i feltet og ret kun farvekoden. Går det galt, tømmer du feltet og klikker Gem, så er alt som før. Vil du have noget mere avanceret, kan din webudvikler klare det på få minutter, eller du kan skrive til support@shoporama.dk.

Ændrer det noget for mine kunder på selve webshoppen?

Nej. Feltet gælder udelukkende administrationen, altså det du selv ser, når du er logget ind. Dine kunder mærker ingenting. Skal butikkens udseende ændres, gør du det i temaet under Design.

Gælder min CSS også for mine kolleger?

Ja, og det står også på siden: ændringerne gælder for alle brugere på kontoen, i alle de webshops der ligger under samme firma. Giv derfor gerne dine kolleger besked, inden du ændrer noget markant.

Hvordan fortryder jeg, hvis administrationen ser mærkelig ud?

Gå til Konto, Firma, Admin-udseende, markér alt i feltet, slet det, og klik Gem. Så er standardudseendet tilbage. Ser du stadig det gamle, så lav en hård genindlæsning med Cmd+Shift+R eller Ctrl+F5.

Kan jeg have forskellige farver på mine forskellige shops?

Ja. Skriv body.webshop efterfulgt af shoppens nummer foran reglen. Nummeret står i adressen i browseren lige efter sprogkoden. Så har hver shop sin egen farve, og det bliver sværere at rette i den forkerte.

Virker det i mørk tilstand?

Din CSS indlæses i begge tilstande, men bliver ikke tilpasset automatisk. En lys baggrundsfarve bliver også lys for en kollega i mørk tilstand. Skriv derfor en ekstra regel med body.dark-mode foran, og test siden i begge tilstande.

Hvorfor virker min regel ikke?

De tre almindeligste årsager: der mangler !important, så platformens egen styling vinder, selektoren er stavet forkert, eller reglen indeholder anførselstegn eller et større end-tegn, som ikke kan bruges i feltet. Tjek også, at siden er genindlæst helt.

Kan jeg indsætte JavaScript eller et sporingsscript her?

Nej. Indholdet lægges ind som ren CSS, og tegn som mindre end og større end bliver kodet om undervejs, så et script-tag aldrig kan blive kørt. Skal der script ind på selve butikken, findes der et separat sted til det, som er beskrevet i artiklen om at indsætte kode i head og body.

Kan jeg skjule menupunkter, så nye medarbejdere ikke roder i priser og indstillinger?

Du kan skjule dem visuelt, og det er fint til at gøre hverdagen enklere. Men det er ikke en spærring: funktionen findes stadig og kan stadig nås. Skal en bruger reelt ikke have adgang, styres det på brugeren under Konto, Firma, Brugere.

Kan jeg skifte Shoporama-logoet ud med mit eget?

Ja. Du peger på logobilledet i toppen og udskifter det med adressen på dit eget logo. Logoet skal kunne hentes via https, og adressen skrives uden anførselstegn. Det er især oplagt for bureauer, der vil vise deres eget brand over for kunden.

Har du brug for hjælp til en bestemt ændring, er du velkommen til at skrive til support@shoporama.dk. Fortæl gerne præcis hvad du vil have til at se anderledes ud, og send et skærmbillede med.