NemProgrammering.dk logo

Sådan retter du i din sides design ved hjælp af et child theme

Avanceret WordPress » Sådan retter du i din sides design ved hjælp af et child theme # 6
Denne video kræver medlemskab
Læs mere!
Sådan retter du i din sides design ved hjælp af et child theme

Information om denne video

Underviser: Thomas M. Iversen   Video: 12:40   Lektion nr. 6 af 39

I denne lektion viser jeg dig, hvordan du nemt og hurtigt, ved hjælp af dit child theme, kan ændre på din hjemmesides design. Jeg viser eksempelvis, hvordan jeg kan ændre baggrundsfarven på min footer, hvordan jeg tilføjer en kant på footeren, hvordan jeg med kun få linjer kode kan skifte udseendet på min søgeknap og meget mere.

Faktisk er det kun din fantasi og evner indenfor CSS, der sætter grænser for, hvilke rettelser du kan lave i dit tema, når først dit child theme er på plads.

Har du spørgsmål eller problemer med at lave rettelser i dit eget tema, skal du være velkommen til at skrive til mig i kommentarsporet nedenfor.

I næste video skal vi arbejde videre med tilpasninger til vores tema. Vi skal prøve at lave layout og struktur ændringer på siden, således at du ikke blot lærer at ændre designet på din side, men også hele sidens struktur og layout, hvis det er det du ønsker.

Spørgsmål og kommentarer

Kun medlemmer med adgang til dette kursus kan stille spørgsmål og kommentere. Bliv medlem her!

  • Thomas I. siger:

    Hej Klaus,

    Jeg går direkte til dine spørgsmål:

    1) Det skal den fordi temaet er bygget op til at bruge media queries til at styre CSS´en ved forskellige skærmstørrelse (se her https://www.nemprogrammering.dk/Tutorials/CSS/V2/12-display-media-queries.php). Nogle styles skal altså kun gælde, når skærmen er en bestemt størrelse og det er tilfældet ved den sidste styling. Den skal ikke indsættes ved de andre to fordi de gælder ligegyldigt, hvor stor skærmen er.

    2) Det er svært at sige. Jeg bruger den seneste version af Chrome, og det ligner det samme som du ser i videoen. Er du sikker på, at du bruger Chrome og ikke Edge eller Firefox, hvor der også findes et “inspector” værktøj?

    Mvh.
    Thomas

  • klaus h. siger:

    Hej Thomas

    1) Hvorfor skal den sidste ændring, som du laver i Child Theme (dvs. formindskelsen af mellemrummet – paddingen), og som du gennemgår i denne video suppleres med koden “@media screen and (min-width: 48em) {” ?

    Og hvorfor skal den kode så ikke indsættes ved de to foregående ændringer i Child Temaet, som du også gennemgår?? Og hvornår skal man så huske på ved indsættelse af ændringer i Child Theme, at der skal lægges noget supplerede kode ind, udover den kode, som lige styrer det pågældende element?

    2) Når jeg bruger developer tools i Chrome, ser mit HTML vindue (til venstre) og CSS vinduet (til højre) noget anderledes ud end dit i videoen, herunder at det er forskellige faner.
    Antager at det skyldes en opdatering.

    Imidlertid har jeg ikke i CSS ruden (til højre) noget der viser – når jeg kører musen ned over CSS koderne – hvor jeg er henne på hjemmesiden. Hvad er årsagen til det? Jeg kan heller ikke, ved at trykke på den lille “firkant” ud for en farve, få den farvepalet frem, som du bruger i videoen (der sker ikke noget, når jeg “klikker”). Har du noget bud på hvad det kan skyldes??

    På forhånd tak for svar og stor ros for nogle super og meget pædagogiske videoer.

    Mvh
    Klaus

  • Morten A. siger:

    Hej

    Jeg forsøger at sætte nye farver ind i mit child style.css
    Og kommer ud for ikke at kunne ændre det, der står i siden af css koden “(index):57” I google browseren. Så der er ikke nogen linje i css filen, forsøger så at bruge class for at ændre det.
    Kan se man godt kan redigere i muligheden i selve theme, men skulle jeg ikke også kunne gøre det fra min child css file også.
    Vil bare lige høre, så jeg ved at når der står sådan, så kan man ikke, eller?

    Med venlig hilsen
    Morten

    1. Thomas I. siger:

      Hej Morten,

      Hvis der står (index): så er det fordi at css-koden bliver skrevet ud direkte i dit dokument og ikke i et stylesheet. Prøv at tjek kildekoden til siden og søg efter den styling du gerne vil ændre. Du vil sandsynligvis kunne finde koden direkte i HTML´en på siden.

      Du burde dog også kunne overskrive denne CSS ved at bruge !important efter din styling i dit stylesheet, f.eks. “font-size: 16 !important;”

      1. Morten A. siger:

        Hej Thomas

        Det lyder godt, det vil jeg prøve.
        Mange tak for hjælpen.

        Med venlig hilsen
        Morten

      2. Morten A. siger:

        Så er der styr på det :o)
        Tak for hjælpen

        Med venlig hilsen
        Morten