5 super enkle CSS-koder til at hjælpe dig med at tilpasse dit WordPress-websted
CSS er svært!
Lyder det som noget, du kunne sige? Du ville ikke være alene. CSS (eller Cascading Style Sheet) er et kodningssprog, der kan være en hård lille baby at vride rundt med.
Men at sige, at CSS er svært, er lidt hårdt. Som ethvert andet sprog kan CSS være lidt svært at forstå i starten, men når du først har forstået det grundlæggende, begynder tingene at falde på plads.
Den bedste måde at lære CSS på er at forstå, hvad det er, og hvordan det fungerer. Derefter kan du lære nogle grundlæggende kodestumper for at få lidt mere fat i den første forståelse, og så er du i gang med at designe på ingen tid!
Vores indlæg vil gøre netop det.
Hvad er CSS?
Sikkert, CSS betyder Cascading Style Sheet, men det vil alle fortælle dig. Det hjælper dog ikke rigtig, gør det?
Der er en nemmere måde at forstå, hvad det er.
Tænk på HTML som rammen på et hus og CSS som malingen udvendigt. Når du maler husets beklædning eller bejdser terrassen foran, ændrer det så selve husets ramme?
Nej, det gør det ikke. I stedet ændrer det blot tingenes udseende. Husets fundament og ramme forbliver det samme.
Det er det, CSS er.
Det ændrer udseendet af dit websted, men det forstyrrer ikke fundamentet eller kernen i det.
Alle huse har maling på sig. Ethvert WordPress-tema bruger CSS.
De arbejder sammen for at skabe et websted, og du kan bruge nogle ret enkle CSS-kodesnipsler til at ændre den såkaldte “maling” på dit tema.
Faktisk vil du måske blive overrasket over, hvor nemt det er.
Enkle CSS-redigering et: Redigering af skrifttypen og en hurtig lektion i at skrive kode
Når du bruger et tema som Genesis Framework, kræver det noget CSS at ændre noget så simpelt som den skrifttype, der bruges på dit websted. Men du skal ikke bekymre dig. Det er virkelig ikke så svært at gøre.
For at foretage CSS-ændringer i dit tema har du først brug for et brugerdefineret CSS-område til at foretage disse justeringer. Du skal ikke ændre det stilark, der er indbygget i dit tema.
I stedet skal du bruge et plugin som den brugerdefinerede CSS-indstilling, der kommer indlæsning i Jetpack. Alle dine CSS-ændringer, du foretager derinde, tilsidesætter den forudbestemte CSS i dit tema.
Hvor du kan redigere skrifttypen, skal du finde ud af, hvilket område du vil redigere.
Der er 7 hovedområder, som du kan redigere din skrifttype:
- Alle 6 overskriftsskrifttyper
- Korpusskrifttypen
Tag-markupen for disse er enkel. Hvis du f.eks. ønsker at redigere den skrifttype Heading 1, der vises på dit websted, skal du bruge tagget h1. Hvis du ville ændre skrifttypen Heading 2, ville tagget være, h2 og så videre.
Her er et eksempel på, hvordan du skriver CSS-kode for at ændre din Heading 1-skrifttype:
h1 { font-family: 'Georgia'; }
Nu er det rigtigt, du kan prøve at kopiere og indsætte det, men jeg vil gerne have, at I får en bedre forståelse af, hvordan det virkelig fungerer.
Den første del, der skrives (h1), er det emne, du ønsker at ændre. Dette symbol ({ ) åbner din kodelinje, og dette symbol ( } ) lukker den.
Okay, okay.
Dette lyder sikkert stadig forvirrende, men da jeg lærte CSS, lærte jeg mig selv et praktisk trick til at huske, hvordan man skriver CSS korrekt. Sådan her:
h1 { åbner døren til sit skab
I jagten på noget at skifte til:
Og så lukker han døren}
Back on topic; her er endnu et eksempel på, hvordan du kan foretage ændringer i din skrifttype.
body { font-family: 'Arial'; }
Gennem at ændre elementet fra h1 til body har jeg nu fortalt stilarket, at jeg ønsker at ændre den skrifttype, der vises i indlæg og på sider, til Arial-skrifttypen.
Det er ret simpelt, ikke?
Hvis dit tema er Google Font aktiveret, kan du endda også bruge skrifttyperne derfra på dit websted.
Enkle CSS-redigering to: Rediger skrifttypefarve
Dette lille CSS-trick er en fin måde at ændre farven på din menu-skrifttype eller farven på skrifttypen i kroppen. Ligesom de kodestumper, der er skrevet ovenfor, kræver det blot et par korte kodelinjer for virkelig at ændre tingene.
Sig, at jeg ønsker at ændre farven på min Heading 2-skrifttype til noget andet. Det kan jeg gøre ved at følge en lignende skitse, som vi gjorde før (kan du huske historien?), men med de vigtigste kodelinjer ændret en smule. Som her:
h2 { color: #4f4f4f; }
Bemærk, at emnet er defineret som h2, og vi har stadig åbnings- og lukningstags ({}), men måden koden er skrevet på er dog lidt anderledes end ovenfor, da vi skrev koden til en skrifttypeændring.
I modsætning til skrifttypen, der skulle lukkes af med parenteser, (‘ ‘ ) behøver hex color-elementet ikke det.
Nu behøver du ikke at skrive kode til det samme emne igen og igen for at ændre visse aspekter af det. Du kan kombinere koden for det samme emne for at gøre tingene lettere at finde og ændre i fremtiden. Du kan f.eks. kombinere skrifttype og skriftfarve i den samme kodelinje.
body { font-family: 'Roboto'; color: #4f4f4f; }
Se, hvordan jeg gjorde det?
Jeg har to kodelinjer inde i den ene emnelinje. Når du skal foretage flere ændringer i et enkelt emne, kan du spare tid ved at skrive koden ud på denne måde. Du skal blot sørge for at lukke de enkelte kodelinjer med et semikolon (;), før du går videre til den næste linje.
Note: For at hjælpe dig med at huske at gøre dette, skal du tænke på semikolonet som et punktum i slutningen af din sætning. Du afslutter aldrig en sætning uden et punktum. Du afslutter aldrig en kodelinje er CSS uden et semikolon.
Enkle CSS-redigering tre: Baggrundsfarve og et browserværktøj, som du ikke engang vidste, at du havde
Redigering af farven på visse ting på dit websted er et andet supernemt CSS-trick. Det eneste, du skal vide, er elementet eller emnet, som du gerne vil ændre.
Et praktisk værktøj, som mange designere bruger – inklusive mig selv – er værktøjet Inspect Element i vores Google Browser. Dette er også et fantastisk til at forsøge at finde det rigtige emne at ændre og definere.
For at finde det skal du blot dobbeltklikke med musen for at trække mulighederne frem, som du kan se nedenfor. Vælg Inspect Element, og du kan nu søge i de elementer, der kan redigeres på dit website.
Se dette billede her?
Jeg har ét menupunkt fremhævet i en anden farve end resten af min menu for at stå. For at gøre det brugte jeg mit Inspect Element Tool til at finde ud af det korrekte navn, som jeg skal redigere.
Nu, når jeg ruller over menupunkterne, vil det faktiske kodenavn, som det er givet, dukke op i mine fremhævninger. Den, som jeg ændrer, havde navnet på: #menu-item-473 (Du kan se, at det er navnet på den i den gule boks. Dens navn er fremhævet med blåt.)
Det er navnet på det emne, som jeg ønskede at ændre. For at ændre baggrundsfarven på det pågældende menupunkt starter jeg linjen med dets navn og erklærer, at jeg vil ændre baggrunden, således:
#menu-item-473 { background-color: #D65050; }
Og igen starter jeg med at fortælle Stylesheet det emne, jeg vil ændre (#menu-item-473), og derefter fortæller jeg det, hvad det skal ændre (background-color), og hvad det skal ændres til (#D65050).
Hvad du end beslutter dig for at ændre baggrunden for, vil have et andet navn end dette, men heldigvis vil Inspect Element-indstillingen i din browser gøre det meget nemmere at finde det.
En anden fantastisk ting ved Google Inspect Element Tool er, at du kan redigere ting i realtid for at få tingene helt rigtigt, og så kan du kopiere og indsætte alt dit redigeringsarbejde derfra til dit CSS Custom Style Sheet. Taler om tidsbesparelse!
Simple CSS Edit Four: Float
Sommetider er det rart at kunne gøre noget lidt anderledes med din primære menu eller foruddefinerede widgets på dit websted. Måske vil du gerne tage, et menupunkt og placere det længere til højre end på de andre punkter slags som jeg gjorde med menuen afbilledet ovenfor. (Også afbilledet nedenfor i fuld bredde.)
For at gøre dette kan du bruge kodeudsnittet Float til at gøre netop dette. Ligesom i trinene ovenfor skal du bruge værktøjet Inspect Element Tool til at finde navnet på det emne, du ønsker at ændre. Den afbildede her er den samme som den, der er nævnt ovenfor. (#menu-item-473)
For at få dette emne til at flytte sig over, men stadig se pænt ud på en mobilskærm, er dette den kode, jeg skrev:
#menu-item-473 { background-color: #D65050; float: right; }
Det var seriøst så nemt. Nu har jeg et menupunkt, der skiller sig ud, hvilket var det, jeg havde brug for. Du kan også anvende dette på andre ting end dine menupunkter.
Fors eksempelvis, hvis du har en widget, som du gerne vil omplacere, kan du bruge kodestumpen float: right; eller float: left; til at ændre, hvor din widget vises.
Det tager lidt tid og kræver lidt justering, men CSS bliver nemmere at bruge, jo længere du roder rundt med det.
Enkle CSS-redigering fem: Tekstjustering
At justere din tekst er noget, du kan gøre i et indlæg, helt sikkert. Men hvad med dine widget-titler eller lignende?
Du kan bruge denne CSS-kode til nemt at justere din widget-teksttitel.
Jeg bruger Genesis Framework til mine websteder, og dette er den kode, det tog for at justere titlerne på mine widgets:
.footer-widgets .widget-title { text-align: center; }
Element- eller emnenavnet i dit tema kan afvige en smule fra dette, men du får idéen.
Denne lille kode vil holde min tekst i mine footer-widgettitler centreret, og da jeg proklamerer .footer-widgets sammen med .widget-title, er det kun footer-titlerne med center.
Så det er det! 5 super simple måder, som du kan redigere dit tema på ved hjælp af CSS! CSS er som ethvert andet sprog. Det er svært i starten, men når du først er kommet over den indledende pukkel af forstå, er det en leg.