Ændring af farver og synlighed med CSS

Introduktion

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

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, 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 du vil skjule shoppens Telefon & CVR opslagsfelt (omend det kunne være hvilket som helst element i shoppen) som findes under checkout:

Læg en vare i kurven og gå til checkoutsiden i SmartWeb. 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 "div.w-userlookup" (Eksemplet herover er vist i Google Chrome, men du kan også benytte Firefox).

Når du har noteret strengen "div.w-userlookup", skal den indsættes i shoppen som CSS. CSS er små tekstelementer du nemt kan indsætte via knappen Indsæt CSS i design manageren, som du finder under Webshop > Design. Klik på knappen Ret design og herefter på knappen Indsæt CSS:

Ved at angive strengen "div.w-userlookup" og tilføje en åben ("{") og lukket ("}") tuborgklamme (Tastaturgenvej AltGr+7 og AltGr+0), med teksten "display:none;" skjules 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.

Hvis vi herefter genindlæser shoppens checkout side (ved at taste F5), kan vi nu se ændringen:

Gennemgang af eksempel

Strukturen for den indsatte CSS defineres på følgende måde:

• Selector: Selectoren "div.w-userlookup" identificerer i dette eksempel opslagsfeltet Telefon & CVR. Selectoren består i dette tilfælde af HTML-elementet "div" og den tilhørende CSS klasse "w-userlookup" –begreber du kan lære mere om 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 udfra selectorerne lægger på layoutet, som vi netop har vist i eksemplet i starten af artiklen. Koden for det skjulte element bliver med andre ord stadig serveret til browseren, som herefter skjuler elementet for brugeren, 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 overskrift, 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. "#ff0000". 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 SmartWeb, 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:

    div.w-userlookup
    {
        color: #3366cc;
        background-color: #c4ecff;
        border-style: solid;
        border-width: 1px;
        border-color: #3399ff;
        padding: 3px;
        margin-bottom: 15px;
    }

    div.w-userlookup hr
    {
        border-top: 1px dashed #3366cc;
    }

–vil elementet efterfølgende se således ud, når du besøger shoppen:

Her er et andet eksempel hvor vi styler sidemenuen med produktkategorier. 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:

Du kan evt. kopiere eksemplet og benytte det i din egen shop til at farvelægge sidemenuen, med dine egne farver. Benyt fremgangsmåden som vist i eksemplet længere oppe i artiklen for at indsætte koden i SmartWeb.

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.

Arbejde på kopi af design template

Hvis du ikke ønsker at arbejde på dit aktive design, kan du oprette en kopi af det aktive design, for herefter at teste på en inaktiv design template. 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 en deaktiveret designtemplate, skal du først gå ind og redigere den deaktiverede template ved at klikke på Ret design. Når du er inde på den deaktiverede design template klikker du på Se online hvorefter du ser shoppen i et preview:

Du kan forlade dit preview igen (så du ser det aktive design) ved at klikke på den grå overlay boks i bunden af siden, 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:

• 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