Ændring af farver og synlighed med CSS

Introduktion

Vi har lavet denne guide for at give en introduktion til at arbejde med CSS i shopsystemet.

Hvis du f.eks. ønsker at foretage mindre tilpasninger af shoppens design, så som at skifte tekst- og baggrundsfarve på en knap, der ikke direkte kan ændres i design managerens foruddefinerede indstillinger uden at alle andre knapper også skifter farve, eller skjule et element som du ikke ønsker skal vises på shoppen, så kan du benytte CSS. Med CSS kan du med ganske lidt kode tage fat i shoppens HTML struktur (den kode som beskriver shoppens udseende) og manipulere denne efter ønske. Når kundens browser kommer forbi shoppen efterfølgende og læser den nye kode ind, vil elementet være rettet ud fra din indsatte CSS-kode.

Ved mere avancerede tilpasninger af shoppens designfiler (ændring af billed- og bannerstørrelser, rokering af elementer mv.), kan vi henvise til følgende guide for udviklere. Vores kundeservice kan ligeledes henvise til en af vores designpartnere, hvis du får brug for yderligere hjælp til tilpasning af design.

Bemærk: Vores kundeservice yder ikke support på tilpasset kode.

Eksempel

Vi starter med at demonstrere CSS med et eksempel og så gennemgår vi det tekniske omkring koden efterfølgende. Lad os f.eks. sige at vi ønsker at ændre farven på vores produkttitler:

Besøg et produkt i shoppen. Tast CTRL+SHIFT+C i Chrome eller Firefox browseren for at aktivere inspektøren. Inspektørværktøjet forvandler din musemarkør til at vise hvilken streng, der identificerer det pågældende element på siden (også kaldet en Selector), som i dette tilfælde er "h1.m-product-title.product-title":

Eksemplet herover er vist i Google Chrome, men du kan også benytte Firefox.

Når du har noteret strengen "h1.m-product-title.product-title", skal den indsættes i shoppen som CSS. CSS er små tekstelementer du nemt kan indsætte via menupunktet Indsæt CSS i design manageren, som du finder under Webshop > Design. Klik på Handlinger og herefter på Indsæt CSS:

Ved at angive strengen "h1.m-product-title.product-title" og tilføje en åben ("{") og lukket ("}") tuborgklamme (Tastaturgenvej AltGr+7 og AltGr+0), med teksten "color: #FFA606;" ændres farven på det pågældende element. Det er vigtigt at CSS-elementerne som angiver de ændringer du ønsker at foretage, er placeret imellem de to klammer, som vist her:

Bemærk: Husk at klikke Gem efter du har indsat din kode. Bemærk også at forskellige designs kan benytte forskellige selectors og eksemplerne er dermed ikke garanteret at virke på tværs af designs, men skal oprettes individuelt med de selectors det pågældende design benytter.

Hvis vi herefter genindlæser produktsiden (ved at taste F5), så kan vi se ændringen, at vores produkttitel er blevet orange:

Gennemgang af eksempel

Strukturen for den indsatte CSS i eksemplet ovenfor, defineres på følgende måde:

• Selector: Selectoren h1.m-product-title.product-title identificerer i dette eksempel titelfeltet på produktet. Selectoren består i dette tilfælde af HTML-elementet h1 og de tilhørende CSS klasser .m-product-title og .product-title. Du kan lære mere om begreberne på denne side hvis du ønsker at vide mere om CSS.
• Deklaration: Tuborgklammerne som indsættes efter selectoren fortæller browseren hvor deklarationen starter og slutter.
• Egenskab & Værdi: Egenskaberne påfører ændringer til det element, som du rammer med din selector. Du kan have så mange egenskaber i din deklaration som du ønsker. Når du sætter en værdi på en egenskab i CSS, afsluttes linjen altid med semikolon for at indikere hvor elementet slutter. Egenskaber og værdier kaldes ved deres engelske navne "properties and values", når du tilgår dokumentationen på nettet.

Når kunden besøger shoppen med sin browser, får browseren leveret shoppens kode for den pågældende side (der bla. består af HTML, CSS og JavaScript), som den herefter omdanner til det visuelle layout der udgør shoppens brugerflade (hvilket ud over sidens struktur, indbefatter download af billeder og kørsel af scripts mv.). I denne proces gennemløber browseren den tilhørende CSS-kode, som den ud fra selectorerne lægger på layoutet, som vi netop har vist i eksemplet i starten af artiklen. Koden for den sorte overskrift bliver med andre ord stadig serveret til browseren, som herefter farver elementet på baggrund af CSS'en.

På baggrund af ovenstående vil man, hvis den leverede kode overholder kode standarderne, forstå at det er browserens evne til at fortolke koden som giver udslag i det viste resultat. Hermed kan man også uddrage at ældre browsere, som ikke længere vedligeholdes af udgiverne, ikke altid formår at fortolke nyere kodestandarder som forventet. Et eksempel kunne være Internet Explorer. Det er imidlertid muligt at tage højde for dette i sin kode, hvilket dog rækker ud over formålet med denne artikel.

Tekst- og elementfarver

Ud fra eksemplet ovenfor vil du kunne benytte mange andre CSS-elementer til at style dit design. Hvis du f.eks. sætter en farve på en knap eller brødtekst mv. så kan dette enten gøres via farvens standardiserede engelske navn f.eks. "red", eller via en farvekode f.eks. "#FFA606", som vi har gjort i eksemplet ovenfor. Fordelen ved at benytte farvekoder frem for navne, er at farvekombinationerne er utallige med farvekoder, hvorimod farvenavne kun dækker over 140 standardiserede farvenuancer som er godkendt på tværs af alle browsere. Farvekoderne starter med "#" og kaldes HEX farvekoder, eller Hexadecimal farver. HEX-farver er standarden for farvekoder i HTML og CSS og derfor benyttes de som udgangspunkt til angivelse af farver i CSS.

For at finde frem til den farvekode du ønsker at indsætte i Hostedshop, kan du f.eks. benytte denne farvevælger: HTML color Picker

Herunder kan du se nogle eksempler med farver og tilsvarende farvekoder. Du bestemmer selv om du vil benytte farvens navn eller farvekode, så længe du ikke indsætter flere egenskaber af samme type, indenfor samme deklaration. Indsætter du alligevel flere egenskaber af samme type som f.eks. "color:", benyttes den sidst indsatte egenskab, da koden læses oppefra og ned af browseren.

    color: black;
    /* Samme værdi med farvekode: */
    color: #000000;

    background-color: white;
    /* Samme værdi med farvekode: */
    background-color: #ffffff;

    border-style: solid;
    border-width: 5px;
    border-color: #ff0000;

CSS-egenskaberne og deres værdier som vist herover, indsættes imellem tuborgklammerne som beskrevet i eksemplet i starten af artiklen, forudsat at du ved hvilket element du vil ændre (via dets selector). Du kan indsætte så mange egenskaber du ønsker. Hvis du indsætter en egenskab som ikke gælder for det pågældende HTML element du forsøger at ramme med selectoren, ignoreres dette som regel af browseren.

Indsættes f.eks. følgende CSS i vores eksempel ovenfor:

    h1.m-product-title.product-title
    {
        color: #3366cc;
        background-color: #c4ecff;
        border-style: solid;
        border-width: 1px;
        border-color: #3399ff;
        padding: 3px;
    }

Så vil elementet efterfølgende se således ud når du besøger produktet:

Her er et andet eksempel hvor vi styler en sidemenu med produktkategorier i blå nuancer, som skifter farve når vi fører musen hen over elementerne. Vi har valgt at indsætte kommentarer og samle koden i enkelte linjer, så den fylder mindre:

    /* Link farve */
    .nav-menu li a {color: #3399ff;}
    /* Link aktiv farve */
    .nav-menu li.active > a {color: #3366cc;}
    /* Link mouse-over farve */
    .nav-menu li a:hover {color: #3366cc;}

    /* Menu baggrundsfarve */
    div.panel.panel-border.column-box.b-productcategories {background-color: #b7dbff;}
    /* Menu overskrift baggrund */
    div.panel-heading.b-productcategories-header.b-header {background-color: #d7ebff;}
    /* Menu overskrift tekst farve */
    div.panel-heading.b-productcategories-header.b-header span {color: #3366cc;}

Resultatet ser således ud:

Bemærk: Eksemplet herover benytter en række CSS egenskaber som du kan studere nærmere på denne side. Via linket kan du fremsøge og nærstudere de forskellige egenskaber og deres værdier. Som nævnt, yder vi ikke support på kodetilpasning og det vil derfor være et selvstudium i CSS via de links vi bla. har suppleret i bunden af artiklen. Bemærk også at forskellige designs kan benytte forskellige selectors og eksemplerne er dermed ikke garanteret at virke på tværs af designs.

Arbejde på kopi af design

Hvis du ikke ønsker at arbejde på dit aktive design, kan du oprette en kopi af det aktive design, for herefter at teste på den inaktive kopi af designet. Dermed kan ændringerne ikke ses på shoppen, før du er tilfreds med resultatet, hvorefter du kan aktivere den tilrettede kopi:

For at se din shop igennem et deaktiveret design, skal du først gå ind og redigere det deaktiverede design ved at klikke på Tilpas. Når du er inde på det deaktiverede design klikker du på Se online hvorefter shoppen vises i et preview med det inaktive design:

Du kan forlade dit preview igen (så du ser det aktive design) ved at klikke på overlay boksen i bunden af siden med teksten Afslut preview, som vist når du besøger shoppen i din browser:

Du kan læse mere om kopiering, aktivering og navngivning af design templates i denne artikel.

Nyttige links

Værktøj:

• Farvevælger: HTML color Picker
• Tekst editorer med CSS-formatering og syntaksfremhævning: Notepad++ og VS Code
• Populært værktøj til bla. at teste CSS: CodePen
• Hent Firefox browseren her
• Hent Google Chrome browseren her

Artikler:

• Mere information omkring CSS kode editoren i shoppen
• Du kan læse mere om billedformater og filstørrelser i denne artikel
• Læs mere om sikker redigering af design templates i denne artikel
• Læs mere om CSS-elementer (selectors, properties og values) her
• Du kan læse mere om formatering af tekst med CSS her
• Du kan læse mere om farver med CSS her
• Du kan læse mere om rammer og CSS her
• Se en liste over de 140 standardiserede farvenavne her
• Læs mere om avanceret tilretning af shoppens design filer her
• Du kan se en liste over browserkompatibilitet her