Så här ändrar du standardfärgen för textval i WordPress

Vill du ändra standardfärgen för textmarkeringen i WordPress?

Ibland kanske du vill att standardfärgen för textavsnittet ska kontrastera mer mot bakgrundsfärgen. På så sätt kan användarna se exakt vad som markeras i innehållet.

I den här artikeln kommer vi att visa dig hur du ändrar standardfärgen för textval i ditt WordPress-tema.

Varför ändra standardfärgen för textval i WordPress?

Textmarkeringsfärg avser den färg som visas när du markerar en text i ett content. Like this:

I vissa fall kanske du vill ändra den här färgen eftersom den inte ser bra ut med din WordPress website design. Färgschemat spelar en viktig roll för att få din site att se bra ut och hålla en konsekvent varumärkesupplevelse.

Om du run en WordPress blogg, då kanske du också vill ändra standardfärgen för textval om du tycker att den inte sticker ut tillräckligt från resten av innehållet, vilket gör det svårt att läsa.

Med detta sagt, låt oss se hur du kan ändra standardfärgen för textval i WordPress. Använd bara länkarna under för att hoppa till den metod du vill använda:

Metod 1: Använda WordPress Theme Settings (Lätt)

Vissa WordPress themes allow you to change the settings for your typography and fonts, including the default text selection color. För att kontrollera om detta är fallet för ditt theme måste du gå till Appearance ” Customize.

Note : Om du använder ett block theme har du inte det här alternativet och du måste gå till metod 2 för att ändra färgen på textvalet.

Här letar du efter inställningar som är märkta med ”Colors”.

Om du ser en tabs som heter ”General”, ”Global” eller liknande innehåller den ofta temats färginställningar.

Om du till exempel använder det populära temat Astra WordPress måste du selecta tabben ”Global”.

Därefter klickar du på ”Colors” för att se alla de olika färgerna som utgör detta WordPress theme.

Därefter måste du clicka på ”Accent”.

Detta öppnar en färgväljare där du kan selecta en new textmarkeringsfärg.

När du gör ändringar uppdateras live preview automatiskt. På så sätt kan du prova olika Settings för att se vad som passar din WordPress website bäst.

När du är nöjd med dina ändringar klickar du bara på ”Publicera” för att få dem att börja gälla.

Efter det kommer du att se den nya textmarkeringsfärgen live på din WordPress blogg eller website.

Även om du inte ser några färginställningar i WordPress tema customize, är det fortfarande värt att kontrollera temats dokumentation för att se om det finns ett sätt att ändra standardfärgen för textval.

You can even reach out to the themes utvecklare för att få hjälp. För mer information, vänligen se vår guide om hur man korrekt ber om support för WordPress och får det.

Metod 2: Använda kod för att ändra textmarkeringsfärg (fungerar med alla teman)

Om du inte kan se ett sätt att ändra textmarkeringsfärgen i theme customize, är ett annat alternativ att använda CSS-kod.

Ofta hittar du CSS code snippets i WordPress tutorials med instruktioner för att add dem till ditt temas functions.php-fil.

Det största problemet är att även ett litet misstag i code snippet kan helt förstöra din WordPress site. För att inte tala om att du kommer att förlora all din custom code när du uppdaterar WordPress theme.

Det är där WPCode kommer in i bilden. Detta code snippets plugin gör det enkelt att add to custom code till WordPress utan att orsaka några error eller göra din site otillgänglig.

Det första du behöver göra är att installera och aktivera det gratis pluginet WPCode. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

Efter aktivering, head till Code Snippets ” Add Snippet i din WordPress adminpanel.

Här är det bara att hovera musen över ”Add Your Custom Code”.

När det dyker upp klickar du på knappen ”Use snippet”.

Till att börja med skriver du in en titel för det anpassade code snippet. Detta kan vara vad som helst som hjälper dig att identifiera snippet i WordPress dashboard senare, gillar ”Ändra färg för textval”.

Efter det måste du öppna dropdown ’Code Type’ och välja ’CSS Snippet’.

Du kan sedan add to följande CSS i boxen Code Preview:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    color: #fff;
}

Notice that we added two styles. CSS-väljaren :: moz-selection fungerar med webbläsaren Firefox, och CSS-väljaren ::selection fungerar med andra populära webbläsare som Google Chrome, Safari, IE9+ och Opera.

I exemplet ovan kommer hexkoden # att ändra länkens färg till grön, så du måste ändra bakgrundsfärg: #008000 till den färg du vill använda för den markerade texten.

Om du ej är säker på vilken hex-kod du ska använda, kan du utforska olika färger och få deras koder på HTML Color Codes website.

När du är nöjd med hur din kod ser ut klickar du bara på ”Inaktiverad” toggle för att visa ”Aktiv” istället.

Klicka sedan på ”Save Snippet” för att göra CSS-snippet live.

You can now visit your website to see the changes in action.

Så här såg det ut på vår demo website.

Upptäck fler tips och tricks för typografi i WordPress

Vill du customize fonten på din website i WordPress, men vet inte hur? Kontrollera dessa guider för att hjälpa dig komma igång:

• De bästa typografiska tilläggen för WordPress för att förbättra din design
• Så här ändrar du enkelt storleken på fonten i WordPress
• Vad är en Web Safe Font + Bästa Web Safe Fonts (Beginner’s Guide)
• Så här lägger du enkelt till Icon Fonts i ditt WordPress Theme
• Så här addar du till insticksprogram i WordPress Posts

Vi hoppas att denna tutorial hjälpte dig att lära dig hur du ändrar standardfärgen för textval i WordPress. Du kanske också vill se vår guide om de bästa page builders med drag and drop för WordPress och hur du säljer fonts online med WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.