Formulier uiterlijk aanpassen
Door de CSS van het formulier aan te roepen kun je kleuren, formaten en meer aanpassen. De knop kun je ook aanpassen door een speciale extra shortcode.
Om de stijl aan te passen roep je de CSS class die je wilt aanpassen aan in “custom css”.
Je kunt dit op verschillende manieren doen, als je hier nog niet bekend mee bent adviseren wij om het te doen via Weergave > Customizer, Custom CSS JS, https://www.codecenter.nl/pr/tutorial/css/css3_buttons.
Het is wel handig dat je ervaring hebt met CSS. Onderstaand enkele voorbeelden van aanpassingen waar andere gebruikers wel eens om hebben gevraagd. Deze kun je combineren tot het gewenste resultaat.
Kleur en stijl van formulier en knop aanpassen
Je kunt de stijl (kleur, vorm) van de grote “Betaal” knop onderaan het formulier aanpassen. Om de stijl van de knop aan te passen met een extra shortcode, plaats je in je Paytium formulier de knop met [paytium_button /]. Er zijn enkele mogelijke parameters:
- label: hier kun je de tekst van de knop aanpassen
- class: hier kun je een CSS class meegeven, die je in je eigen custom css kunt aanroepen
- style: hier kun je direct CSS waardes invoeren
Dit is een simpel voorbeeld van een formulier met de [paytium_button /] shortcode.
[paytium name="Formulier XYZ" description="Product omschrijving"] [paytium_field type="open" label="Donatie bedrag:" default="25" /] [paytium_button label="Nu doneren!" class="hello" style="background-color: red" /] [/paytium]
Daarnaast kun je ook de stijl aan te passen via CSS roep je de volgende class aan in je custom css.
.pt-checkout-form button {
background-color: #15A346;
}
Betaalknop aanpassen en zichtbaar maken in een bepaalde/verschillende plekken op je formulier.
Als voorbeeld de betaalknop zichtbaar maken in 3 kolommen zonder dat het verdwijnt in 2 van de kolommen.
Waar het als eerste geplaatst is, wordt onderdeel van een genummerde lijst.
Let dan vooral op in dit geval dat de stijlen van een mogelijke module die gebruikt wordt niet overgenomen worden en hierdoor uit de kolomranden ‘vallen’.
Dit kan opgelost worden door aan je stijlknop een style attribute toe te voegen aan je shortcode zoals dit:
[paytium_button label="Betaal" style="background-color: #74d96:color #ff;” /]
Je kan ook een CSS code aan je thema toevoegen die specifiek gericht is op het volgende klasse:
Breedte van een formulier aanpassen
Standaard staat het formulier in een smalle kolom, maar dat kun je eenvoudig aanpassen met de onderstaande CSS.
.pt-checkout-form {
width: 100%;
}
Formulier in twee kolommen
Als je veel velden hebt, wil je wellicht dat ze verdeeld worden over twee kolommen, zodat je formulier nite te lang is. Dat kan met onderstaande CSS.
.pt-checkout-form {
width: 100%;
}
.pt-form-group {
display: inline-block;
width: 45%;
margin-right: 10px;
}
Style – Invoervelden veranderen
Roep de CSS van het formulier aan, daarmee kun je kleuren, formaten en meer aanpassen. Om de stijl aan te passen roep je de CSS class die je wilt aanpassen aan in “custom css”. (Je kunt echt elke gewenste stijl toevoegen met je eigen CSS in je thema)
Scenario : “Je invoervelden voor de aantallen worden niet goed getoond”
CSS in je themastijl:
Het ziet er zo uit vanwege je themastijlen. Je moet het een beetje veranderen. Om dit te doen, is het gewenst een beetje CSS-code toe te voegen in je thema als je wilt dat de ‘quantity’
Hoe?
Voeg een soortgelijke onderstaande CSS code toe.
.paytium-spinner {
} margin: 0;
Als de +/- knoppen minder breed wilt maken, kan je vervolgens bijvoorbeeld ook de
eigenschap “padding” toevoegen.
.paytium-spinner {
margin: 0;
} padding: 5px 10px;
Niet echt bekend met CSS ?
Handige links om je verder op weg te helpen:
Hoe in je thema in CSS hoogte/ breedte/ lijntjes in je velden te veranderen
Style – Invoervelden veranderen (CSS in je themastijl)
Roep de CSS van het formulier aan, daarmee kun je kleuren, formaten en meer aanpassen. Om de stijl aan te passen roep je de CSS class die je wilt aanpassen aan in “custom css”. (Je kunt echt elke gewenste stijl toevoegen met je eigen CSS in je thema)
Scenario : “Je invoervelden voor de aantallen worden niet goed getoond”
Het ziet er zo uit vanwege je themastijlen. Je moet het een beetje veranderen. Om dit te
doen, is het gewenst een beetje CSS-code toe te voegen in je thema aan de ‘quantity’ invoervelden
Hoe?
Voeg een soortgelijke onderstaande CSS code toe.
.paytium-spinner {
} margin: 0;
Als de +/- knoppen minder breed wilt maken, kan je vervolgens bijvoorbeeld ook de
eigenschap “padding” toevoegen.
.paytium-spinner {
margin: 0;
} padding: 5px 10px;
Gewenst resultaat :
Niet echt bekend met CSS ?
Handige links om je verder op weg te helpen:
https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
https://nl.wordpress.org/plugins/custom-css-js/
https://www.codecenter.nl/pr/tutorial/css/css3_buttons
Hoe in je thema in CSS hoogte/ breedte/ lijntjes in je velden te veranderen
Hoe in je thema in CSS hoogte/ breedte/ lijntjes in je velden te veranderen
Het lukt niet met de CSS de radio buttons van hoogte te veranderen zonder dat de tekst ook mee wordt veranderd of het hokje waar mensen hun e-mailadres in moeten invullen is groter en buiten de lijntjes, hoe verander je dat?
Ok, het is altijd goed om te weten dat het niet Paytium gerelateerd is maar heel specifiek een CSS kwestie is in je thema of op een andere plek. Je kan echt elke gewenste stijl toevoegen met je eigen CSS in je thema.
Je kan bijvoorbeeld de regelhoogte van het label wijziging in ‘normaal’ of een andere benodigde waarde naar keuze. Zie rode pijl in willekeurige voorbeeld:
Of de radio input “margin-top” naar 0 instellen:
Zie rode pijl in willekeurige voorbeeld:
Tip:
Als je je eigen CSS class aan een field group wilt toevoegen, kan dat met class="jouw_css_class"
Een field group is een <div> waarin een <label> en bijvoorbeeld een <input
type="text"/> of <select> zich bevinden.
Hoe velden/labels te verbergen:
Je kan een CSS code aan je thema toevoegen die specifiek gericht is op het verbergen van Paytium labels.
`.pt-form-group label { display: none }`
Je kan zelfs ook de style tag aan je shortcode toevoegen als je een label alleen op een bepaalde pagina wilt verbergen:
`<style>.pt-form-group label { display: none }</style>`