5 superenkla CSS-koder som hjälper dig att anpassa din WordPress-webbplats
CSS är svårt!
Låter det som något du skulle kunna säga? Du skulle inte vara ensam. CSS (eller Cascading Style Sheet) är ett kodningsspråk som kan vara en tuff liten bebis att brottas med.
Att säga att CSS är svårt är dock lite väl hårt. Precis som alla andra språk kan CSS vara lite knepigt att förstå till en början, men när du väl förstår grunderna börjar saker och ting falla på plats.
Det bästa sättet att lära sig CSS är att förstå vad det är och hur det fungerar. Sedan kan du lära dig några grundläggande kodutdrag som hjälper dig att förstå den första förståelsen lite mer och du kan börja designa på nolltid!
Vårt inlägg kommer att göra just det.
Vad är CSS?
Självklart betyder CSS Cascading Style Sheet, men alla kommer att berätta det för dig. Men det hjälper inte riktigt, eller hur?
Det finns ett enklare sätt att förstå vad det är.
Tänk på HTML som ramen på ett hus och CSS som färgen på utsidan. När du målar husets kantlist eller färgar altanen på framsidan, ändrar det då själva husets ram?
Nej, det gör det inte. Istället ändrar det bara utseendet på saker och ting. Husets grund och stomme förblir oförändrade.
Detta är vad CSS är.
Det ändrar utseendet på din webbplats, men det stör inte grunden eller kärnan i den.
Varje hus har färg. Varje WordPress-tema använder CSS.
De arbetar tillsammans för att skapa en webbplats och du kan använda några ganska enkla CSS-kodutdrag för att ändra den så kallade ”färgen” på ditt tema.
Det är faktiskt så att du kanske blir förvånad över hur enkelt det är.
Simpel CSS-redigering ett: Redigering av typsnitt och en snabb lektion i att skriva kod
När du använder ett tema som Genesis Framework behövs det lite CSS för att ändra något så enkelt som typsnittet som används på din webbplats. Men oroa dig inte. Det är verkligen inte så svårt att göra.
För att göra CSS-ändringar i ditt tema behöver du först ett anpassat CSS-område för att göra dessa justeringar. Ändra inte stilarket som är inbyggt i ditt tema.
Använd i stället ett insticksprogram som det anpassade CSS-alternativet som kommer att laddas i Jetpack. Alla CSS-ändringar du gör där kommer att åsidosätta den förutbestämda CSS:en i ditt tema.
För att du ska kunna redigera typsnittet måste du ta reda på vilket område du vill redigera.
Det finns 7 huvudområden där du kan redigera ditt typsnitt:
- Alla 6 typsnittstyper för rubriker
- Kropptypsnittet
Taggmarkupen för dessa är enkel. Om du till exempel vill ändra teckensnittet för rubrik 1 som visas på din webbplats använder du taggen h1. Om du vill ändra teckensnittet Heading 2 skulle taggen vara, h2 och så vidare.
Här är ett exempel på hur du skriver CSS-kod för att ändra teckensnittet Heading 1:
h1 { font-family: 'Georgia'; }
Nu är det sant att du kan försöka kopiera och klistra in det, men jag vill att ni ska få en bättre förståelse för hur det här verkligen fungerar.
Den första delen som skrivs (h1) är teckensnittet du vill ändra. Den här symbolen ({ ) öppnar din kodrad och den här ( } ) stänger den.
Okej, okej.
Det här låter antagligen fortfarande förvirrande, men när jag lärde mig CSS lärde jag mig själv ett praktiskt trick för att komma ihåg hur man skriver CSS korrekt. Så här:
h1 { öppnar dörren till sin garderob
I jakt på något att byta om till:
Och sedan stänger han dörren}
Tillbaka till ämnet; här är ett annat exempel på hur du kan göra ändringar i ditt typsnitt.
body { font-family: 'Arial'; }
Då jag ändrar elementet från h1 till body har jag nu sagt till formatmallarna att jag vill ändra typsnittet för kroppen som visas i inlägg och på sidor till Arial-teckensnittet.
Det är ganska enkelt, eller hur?
Om ditt tema är aktiverat för Google Font kan du till och med använda teckensnitten därifrån på din webbplats också.
Simpel CSS-redigering två: Redigera teckensnittsfärg
Detta lilla CSS-trick är ett trevligt sätt att ändra färgen på menyteckensnittet eller färgen på kroppsteckensnittet. Precis som de kodutdrag som skrevs ovan är det bara några korta rader kod som behövs för att verkligen ändra saker.
Säg att jag vill ändra färgen på mitt teckensnitt för rubrik 2 till något annat. Jag kan göra det genom att följa ett liknande upplägg som vi gjorde tidigare (minns du historien?) men med de viktigaste kodraderna lite ändrade. Så här:
h2 { color: #4f4f4f; }
Bemärk att ämnet är definierat som h2 och att vi fortfarande har öppnings- och sluttaggarna ({}), men sättet som koden är skriven på är lite annorlunda jämfört med ovan när vi skrev koden för en typsnittsändring.
Till skillnad från teckensnittet som behövde stängas av parenteser, (’ ’ ’) behöver inte elementet hex color det.
Nu behöver du inte skriva kod för samma ämne om och om igen för att ändra vissa aspekter av det. Du kan kombinera koden för samma ämne för att göra det lättare att hitta och ändra saker i framtiden. Du kan till exempel kombinera Font och Font Color i samma kodrad.
body { font-family: 'Roboto'; color: #4f4f4f; }
Se hur jag gjorde det?
Jag har två rader kod inuti den enda ämnesraden. När du behöver göra flera ändringar i ett enda ämne kan du spara tid genom att skriva ut koden på det här sättet. Se bara till att du stänger dessa enskilda kodrader med ett semikolon (;) innan du går vidare till nästa rad.
Notera: för att komma ihåg att göra detta kan du tänka på semikolonet som en punkt i slutet av din mening. Du avslutar aldrig en mening utan punkt. Du avslutar aldrig en kodrad i CSS utan semikolon.
Enklare CSS-redigering tre: Bakgrundsfärg och ett webbläsarverktyg som du inte ens visste att du hade
Redigera färgen på vissa saker på din webbplats är ett annat superenkelt CSS-trick. Allt du behöver veta är element eller ämne som du vill ändra.
Ett praktiskt verktyg som många designers använder – däribland jag själv – är verktyget Inspect Element i vår Google Browser. Detta är ett fantastiskt också för att försöka hitta rätt ämne att ändra och definiera.
För att hitta det dubbelklickar du helt enkelt med musen för att få upp alternativen som du kan se nedan. Välj Inspektera element och du kan nu söka efter de redigerbara elementen på din webbplats.
Se den här bilden här?
Jag har ett menyalternativ markerat i en annan färg än resten av min meny för att stå. För att göra det använde jag verktyget Inspektera element för att ta reda på det korrekta namnet som jag ska redigera.
När jag nu bläddrar över menyalternativet kommer det faktiska kodnamnet som det har fått att synas i mina markeringar. Den som jag ändrar hade namnet: #menu-item-473 (Du kan se att det är namnet i den gula rutan. Dess namn är markerat i blått.)
Det är namnet på det ämne som jag ville ändra. För att ändra bakgrundsfärgen för det menyalternativet börjar jag raden med dess namn och förklarar att jag vill ändra bakgrunden, så här:
#menu-item-473 { background-color: #D65050; }
Även här börjar jag med att tala om för Stylesheet vilket ämne jag vill ändra (#menyalternativ-473) och sedan talar jag om för Stylesheet vad det ska ändra (bakgrundsfärg) och vad det ska ändras till (#D65050).
Vad du än bestämmer dig för att ändra bakgrunden till kommer att ha ett annat namn än det här, men tack och lov kommer Inspect Element-alternativet i din webbläsare att göra det mycket lättare att hitta det.
En annan fantastisk sak med Google Inspect Element Tool är att du kan redigera saker och ting i realtid för att få allting rätt, och sedan kan du kopiera och klistra in allt ditt redigeringsarbete därifrån, till ditt CSS Custom Style Sheet. Snacka om tidsbesparing!
Simple CSS Edit Four: Float
Ibland är det trevligt att kunna göra något lite annorlunda med din huvudmeny eller fördefinierade widgetar på din webbplats. Kanske vill du ta ett menyalternativ och placera det längre till höger än de andra alternativen, ungefär som jag gjorde med menyn på bilden ovan. (Även bilden nedan i full bredd.)
För att göra detta kan du använda kodutdraget Float för att göra just detta. Precis som i stegen ovan ska du använda verktyget Inspektera element för att hitta namnet på det ämne du vill ändra. Den som är avbildad här är densamma som den som nämns ovan. (#menu-item-473)
För att få det här objektet att flytta över, men fortfarande se snyggt ut på en mobilskärm, är detta den kod jag skrev:
#menu-item-473 { background-color: #D65050; float: right; }
Det var verkligen så enkelt. Nu har jag ett menyalternativ som sticker ut, vilket var vad jag behövde. Du kan också tillämpa detta på andra saker än dina menyalternativ.
Om du till exempel har en widget som du vill flytta, kan du använda kodutdraget float: right; eller float: left; för att ändra var widgeten visas.
Det tar lite tid och kräver lite justering, men CSS blir lättare att använda ju längre du håller på med det.
Simple CSS Edit Five: Textjustering
Att justera din text är något du kan göra i ett inlägg, visst. Men hur är det med dina widget-titlar, eller något liknande?
Du kan använda den här CSS-koden för att enkelt justera titeln på din widget-text.
Jag använder Genesis Framework för mina webbplatser, och det här är koden som krävdes för att justera titlarna på mina widgetar:
.footer-widgets .widget-title { text-align: center; }
Elementet eller ämnesnamnet i ditt tema kan skilja sig något från detta, men du får en uppfattning.
Denna lilla kod kommer att hålla min text i mina widgettitlar i sidfoten centrerad, och eftersom jag proklamerar .footer-widgets tillsammans med .widget-title är det bara titlarna i sidfoten som är centrerade.
Så det är det! 5 superenkla sätt som du kan redigera ditt tema med hjälp av CSS! CSS är som vilket annat språk som helst. Det är svårt i början, men när du väl har kommit över den första puckeln av att förstå är det en barnlek.