Inline styling van adaptieve formuliercomponenten

U kunt de algemene weergave en stijl van een adaptief formulier definiëren door stijlen op te geven met de themaeditor🔗. Bovendien kunt u inline CSS-stijlen toepassen op afzonderlijke adaptieve formuliercomponenten en deze direct bekijken. Inline stijlen overschrijven de opmaak die in het thema is opgenomen.

Inline CSS-eigenschappen toepassen

Inline stijlen toevoegen aan een component:

  1. Open het formulier in de formuliereditor en wijzig de modus in opmaakmodus. Tik op canvas-drop-down > Stijl om de modus te wijzigen in de opmaakmodus.

  2. Selecteer een component op de pagina en tik op de bewerkknop edit-button. Stijleigenschappen worden geopend in de zijbalk.

    U kunt ook componenten selecteren in de boomstructuur van de formulierhiërarchie in het zijpaneel. De boomstructuur in de formulierhiërarchie is beschikbaar als formulierobjecten op de zijbalk.

    U kunt ook een component selecteren in de zijbalk. In de modus Stijl worden componenten weergegeven onder Formulierobjecten. In de lijst Formulierobjecten in het zijpaneel worden echter componenten zoals velden en deelvensters vermeld. Velden en deelvensters zijn algemene componenten die componenten kunnen bevatten, zoals tekstvak en keuzerondjes.

    Wanneer u een component selecteert in het zijpaneel, ziet u alle vermelde subcomponenten en de eigenschappen van de geselecteerde component. U kunt een specifieke subcomponent selecteren en deze opmaken.

  3. Klik op een tabblad in de zijbalk om CSS-eigenschappen op te geven. U kunt eigenschappen opgeven, zoals:

    • Dimension en positie (weergave-instelling, opvulling, hoogte, breedte, marge, positie, z-index, zwevend, wissen, overloop)
    • Tekst (lettertypefamilie, dikte, kleur, grootte, lijnhoogte en uitlijning)
    • Achtergrond (afbeelding en verloop, achtergrondkleur)
    • Rand (breedte, stijl, kleur, straal)
    • Effecten (schaduw, dekking)
    • Geavanceerd (hiermee kunt u aangepaste CSS voor de component schrijven)

  4. Op dezelfde manier kunt u stijlen toepassen op andere delen van een component, zoals Widget, Bijschrift en Help.

  5. Tik Done om de wijzigingen te bevestigen of Cancel om de wijzigingen te verwijderen.

Voorbeeld: inline stijlen voor een veldcomponent

In de volgende afbeeldingen wordt een tekstveld weergegeven voor- en nadat er inline stijlen op zijn toegepast.

Component van tekstvak voordat inline-opmaak wordt toegepast

Component van tekstvak voordat inline-stijleigenschappen worden toegepast

Let op de wijziging in de stijl van het tekstvak zoals wordt getoond in de volgende afbeelding na het toepassen van de volgende CSS-eigenschappen.

Kiezer

CSS-eigenschap

Waarde

Effect

Veld

border

Randbreedte =2 px

Randstijl=Effen

Randkleur=#1111

Hiermee maakt u een zwarte rand van 2 px breed rond het veld

Tekstvak

background-color

#6495ED

Hiermee wijzigt u de achtergrondkleur in CornflowerBlue (#6495ED)

Opmerking: U kunt een kleurnaam of de hexadecimale code opgeven in het waardeveld.

Label

Afmetingen en positie > breedte

100 px

Hiermee stelt u de breedte in op 100 px voor het label
Pictogram Help-veld Tekst > Lettertypekleur #2ECC40 Hiermee wijzigt u de kleur van het gezicht van het Help-pictogram.

Lange beschrijving

text-align

center

Lijnt de lange beschrijving voor het centreren uit

Stijl van tekstvak na inline-opmaak wordt
toegepastFiguur:component Tekstvak na toepassing van inline-stijleigenschappen

Na de bovenstaande stappen kunt u andere componenten selecteren en opmaken, zoals deelvensters, verzendknoppen en keuzerondjes.

OPMERKING

De stijleigenschappen variëren op basis van de component die u selecteert.

Op deze pagina