Så här lägger du till anpassad CSS i WP Simple Pay

Behöver du anpassa dina WP Simple Pay-betalningsformulär med anpassad CSS? Det finns några sätt att lägga till anpassad CSS på din WordPress-webbplats för dina formulär och andra sidelement.

Du kan inaktivera WP Simple Pays "bestämda stilar" och ärva ditt temas stilar genom att besöka Simple Pay Pro → Inställningar → Allmänt → Avancerat.

1. Redigera din temas stylesheet-fil direkt (vanligtvis style.css). Var dock försiktig med eventuella temauppdateringar som kommer att skriva över dina ändringar, vilket är anledningen till att vi rekommenderar #2 eller #3.
2. Lägg till en separat CSS-fil i ditt tema och använd funktionen wp_enqueue_style för att referera till den i din functions.php eller ett separat anpassat plugin.
3. Lägg till CSS i ditt temas sidhuvud med hjälp av gratispluginet WP Code. Gå till Kodavsnitt → Sidhuvud & Sidfot, och lägg sedan till din CSS enligt nedan.

Om du behöver avregistrera pluginets stilar från vissa sidor, se detta kodavsnitt i vårt bibliotek med kodavsnitt.

Anpassningstips

För närvarande har vi ingen CSS-stilguide för WP Simple Pay-betalningsformulär. Det bästa sättet att hitta klass- och ID-namnen du behöver ändra är att inspektera sidelementen med hjälp av webbläsarens utvecklarverktyg.

Här är en utmärkt guide för att komma igång med denna metod: Grunderna i att inspektera element: Anpassa WordPress för gör-det-själv-användare

WP Simple Pay-formulärelementens CSS-klasser och ID:n tenderar att börja med simpay-.

Här är ett exempel där formulärets ID är 83 och textfältets ID är 4:

<style>
#simpay-form-83 #simpay-text-4 { display: none; }
</style>

Här är ett exempel på hur man ändrar färgen på utcheckningsknappen från grön till blå när man använder visningsalternativen Inbäddat eller Överlagring.

<style>
.simpay-checkout-btn { background-color: #428bca !important; }
.simpay-checkout-btn:hover { background-color: #037ad0 !important; }
</style>