Om du använder någorlunda aktuell version av WordPress-kärnan går det att lägga in anpassad CSS direkt via Utseende -> Anpassa -> Extra CSS. Sedan den möjligheten dök upp har jag nästan slutat att använda barnteman.
Webbplatsen kanske säger åt webbläsaren att style.css går att återanvända. Prova en ”hård” omladdning av sidan (På Windows är det Ctrl-F5) för att tvinga omladdning av alla filer för sidan). Det här är min huvudteori.
I webbläsarens utvecklarverktyg kan du kolla vilka filer som hämtas i. Där kan du också undersöka var den CSS-kod finns som faktiskt används för ett visst objekt. Dessa funktioner kan vara lite bökiga, men kan ibland ge ledtrådar för att bättre förstå vad som (inte) händer.
Lycka till!
Trådstartare
gurra
(@gurra)
Tack för snabbt svar.
En kort bakgrund till min fråga. Vill framför allt ändra dels bakgrundsfärg i menyer, dels färg på menytexterna. För detta finns i style.css färdiga classer, vid sajtens skapande justerat något i barntemat. Det är ändringarna jag nu försöker göra med färgerna som inte slår igenom (men de gamla, vid skapandet ändrade färgerna ligger alltså hela tiden kvar).
Ett par kommentarer/frågor angående dina tips:
Extra CSS: Har aldrig använt, så är definitivt osäker på hur det fungerar. Kan jag här lägga in aktuell class med de nya justeringarna? Skriver denna då över/ersätter den klass som ligger i style.css?
Har testat hård omladdning. Det hjälper inte.
Gissar att du med webbläsarens utvecklarverktyg menar det som i Firefox kallas ”Inspektera”. Kan väljas om jag högerklickar på en sida på sajten. Det lilla jag kollat verkar användbart, om än som du säger något bökigt. Ska kolla vidare och se vad jag kan hitta.
Mycket tacksam om du har ett svar på Extra CSS-frågorna ovan. Är det mer komplicerat än så så får jag läsa på.
CSS som du lägger in under ”Extra CSS” läggs in ”inline” med själva sidan. Om du provar att lägga till CSS via inspekteraren i Firefox och den ”tar”, så bör samma kod ta även om du lägger in den via Extra CSS.
Det är en smärre vetenskap hur en webbläsare prioriterar mellan konkurrerande CSS-klausuler för varje objekt på sidan. Jag brukar försöka att ange klasser (och ibland ID) så pass specifikt att jag inte behöver trumfa igenom min CSS med ”!important”, men ibland är det nästan omöjligt, i synnerhet om utvecklaren varit lat och själv använt !important här och där.
Kolla att du faktiskt laddar upp din style.css till rätt katalog. Du kan också öppna CSS-filen i webbläsaren och kolla om den har det innehåll du förväntar dig. Det kan bidra till att begränsa ”sökytan”.
Trådstartare
gurra
(@gurra)
Ok. Här finns en del att testa och kolla upp. Ja det verkar vara en smärre vetenskap detta.
Kort fråga: Angående att öppna CSS-filen i webbläsaren – menar du att via Siteditorn i menyn i ”Inspector/Webbläsarens utvecklarverktyg” se om jag hittar den style.css jag använder i barntemat? Här finns en massa stilmallar att välja mellan, och den jag använder i barntemat finns med och ser korrekt ut.
Är säker på att jag lägger style.css i rätt katalog.
I övrigt, ingen fråga om förklaring, men kanske intressant : När jag väljer Inspektör i menyn i ”Inspector/Utvecklarverktyget” och markerar en kodrad med ett id och en class (som inte finns i style.css, men där classen har ett snarlikt namn som den som jag jobbar med) då visas just den class, som jag jobbar med, under ”stilfältet” strax till höger i Inspector/Utvecklarverktyget. Alla deklarationer finns med och verkar vara ”aktiva”, undantaget den som rör bakgrundsfärgen som är överstruken, just den deklaration jag testat med. Den överstrukna deklaration har korrekt färgkod, men uppenbarligen måste färgen tas från annan plats (vilket väl förklarar varför det inte spelar någon roll om jag ändrar färgkoden i style.css). Frågan är fortfarande bara var ifrån färgen bestäms. Det är jag själv som la in just denna färgkod från början. Den kan alltså inte tas från någon annan .css på sajten. Jag får gräva vidare i detta mysterium.
Om du ser ditt kommando men det är gråmarkerat betyder det att egenskapen tilldelas ett värde med högre prioritet någon annanstans. Det går att leta reda på källan.
Jag använder Firefox på engelska, så jag ger kommandona jag väljer på engelska.
- Högerklicka objektet ifråga och välj ”Inspect (Q)”.
- I inspektörens högra fönster väljer jag fliken ”Computed”.
- Bläddra fram önskad egenskap, t.ex. background-color. Dess aktuella slutliga värde är synligt direkt i listan.
- Öppna egenskapen genom att klicka på triangelsymbolen. Då visas vilket eller vilka CSS-kommandon som använts för att få fram aktuellt värde. Där visas även filnamn och radnummer.
- Om du pekar med markören över filnamnet ser du hela sökvägen till filen och kan kolla om det är ”rätt fil”.
Trådstartare
gurra
(@gurra)
Tack. Det här ska jag verkligen testa. Gjorde bara en snabbkoll nu, men det dök upp några frågetecken. Jag ska kolla vidare imorgon.
Trådstartare
gurra
(@gurra)
Har kollat upp, tror det mesta, av det du tipsat om. Har lärt mig en hel del användbart. Tacksam för. Dock lyckades jag aldrig komma fram till lösningen på hur jag skulle ändra bakgrundsfärgen på undermenyerna i mobilversionen av sajten (donyoakupunktur.se), där menytexterna inte syntes igenom. Har testat med Inline bl a. Hittade dock en nödlösnig – det gick, till skillnad från mycket annat, att ändra textfärgen direkt i style.css på de icke aktiva menyvalen till en färg som gav något bättre kontrast. Jag nöjer mig med nödlösningen så länge. Kanske testar vidare längre fram när jag har mer tid.
Mycket märkligt det här tycker jag, att vissa teman lägger över en del av selektorerna och deklarationerna i style.css till Inline (vilket jag tolkar är det som hade skett och som förklarar att ändringarna jag gjorde i style.css inte slog igenom). Då missar man ju möjligheten att kunna justera sajtens utseende på ett enkelt sätt.
Ett stort tack för all hjälp och alla tips!
För en temautvecklare är det väldigt enkelt att låta en procedur mata ut CSS:en från temats inställningar inline. Det kan leda till en något långsammare webbplats och problem med hur man trumfar över temats CSS (i synnerhet om temat självt använder !important), men utvecklarens jobb blir ju lite enklare…
Sök på internet efter ”specificity CSS” om du vill fördjupa dig mer.
Trådstartare
gurra
(@gurra)
Tack för förklaring och tips!
