Stijl uw adaptieve formulier do-not-publish-style-your-adaptive-form
Leer hoe u een aangepast thema maakt, afzonderlijke componenten opmaakt en weblettertypen in een thema gebruikt
Deze zelfstudie is een stap in de Uw eerste adaptieve formulier maken reeks. U wordt aangeraden de reeks in chronologische volgorde te volgen om het volledige gebruik van de zelfstudie te begrijpen, uit te voeren en aan te tonen.
Over de zelfstudie about-the-tutorial
U kunt thema's gebruiken om een adaptief formulier een unieke vormgeving en stijl te geven. U kunt thema's uit de doos toepassen die van de adaptieve redacteur van vormen worden voorzien of douanethema's van uw tot stand brengen. AEM Forms biedt een themaeditor om aangepaste thema's te maken. Met één thema kunt u hetzelfde adaptieve formulier weergeven dat u op mobiele apparaten, tablets of desktops hebt geopend. Eerdere kennis van CSS of LESS is niet vereist voor het gebruik van de themaeditor, maar is wel gewenst.
Aan het einde van de zelfstudie leert u:
- Een thema uit het vak toepassen op een adaptief formulier
- Een thema maken voor een adaptief formulier met de themaeditor
- Afzonderlijke componenten opmaken
- Bonussectie: Weblettertypen gebruiken in een aangepast thema
Het formulier ziet er ongeveer als volgt uit nadat u de zelfstudie hebt voltooid:
Voordat u begint before-you-start
Download de koptekst- en logo-afbeeldingen hieronder op uw lokale computer. De koptekst van de shipping-address-add-update-form Het adaptieve formulier gebruikt de koptekst- en logo-afbeeldingen. De koptekstafbeelding wordt rechts van de koptekst weergegeven.
Stap 1: Een thema toepassen op het aangepaste formulier step-apply-a-theme-to-your-adaptive-form
De adaptieve vormenredacteur verstrekt veelvoudige uit-van-de-doos thema's. Als u geen aangepaste stijl wilt gebruiken voor het aangepaste formulier, kunt u ook uw aangepaste formulieren publiceren met een thema dat buiten de verpakking valt. Thema's zijn onafhankelijk van adaptieve vormen. U kunt hetzelfde thema toepassen op meerdere adaptieve formulieren. Een thema toepassen op een adaptief formulier:
-
Open het aangepaste formulier voor bewerking.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
Open eigenschappen van Container voor adaptieve vorm. Navigeer in de eigenschappenbrowser naar Basis > Aangepast formulierthema. De Aangepast formulierthema worden alle kant-en-klare thema's en aangepaste thema's weergegeven. Standaard wordt het thema Canvas toegepast.
-
Selecteer een thema in het menu Aangepast formulierthema veld. Bijvoorbeeld: Onderzoeken. Tikken
Afbeelding: Aangepast formulier met het standaardthema
Afbeelding: Aangepast formulier met het thema Beoordeling
Stap 2: Het aangepaste formulier bijwerken step-update-your-adaptive-form
Voor het hierboven weergegeven ontwerp zijn wijzigingen vereist in de plaatsaanduidingstekst en het logo van het bestaande adaptieve formulier. Voer de volgende stappen uit om de vereiste wijzigingen aan te brengen:
-
Wijzig het bestaande logo en de tekst van de koptekst. Het logo verwijderen:
-
Open het formulier in de formuliereditor.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
Tik op de afbeelding met het logo in de koptekstcomponent en tik op
-
Tik op Uploaden, selecteer het bestand logo.png en tik op
-
Tikkoptekst,
We.Retailen tikken
we retail. Alleen vette opmaak toepassen opweinwe retail.
-
-
Titel verwijderen en plaatsaanduidingstekst toevoegen:
- Tik op het veld Customer ID en tik op
- Kopieer de inhoud van de Titel aan de Plaatsaanduidingstekst veld.
- De inhoud van het dialoogvenster Titel veld en tik
- Herhaal de vorige drie stappen voor alle tekstvakken, het numerieke vak en het e-mailveld in het formulier.
- Tik op het veld Customer ID en tik op
Stap 3: Een aangepast thema maken voor uw aangepaste formulier step-create-a-custom-theme-for-your-adaptive-form
U kunt themaeditor om aangepaste thema's te maken. De themaredacteur is een almachtige redacteur WYSIWYG. Het is een visuele methode om CSS op diverse componenten van een adaptieve vorm toe te passen. Het biedt fijnere besturingselementen voor stijlcomponenten en deelvensters van een adaptieve vorm.
Een thema is een afzonderlijke entiteit, zoals adaptieve formulieren. Deze bevat stijlen (CSS) voor de componenten en deelvensters van een adaptief formulier. Stijlen omvatten CSS-eigenschappen zoals achtergrondkleuren, statuskleuren, transparantie, uitlijning en grootte. Wanneer u een thema toepast, wordt de opgegeven stijl toegepast op de corresponderende componenten van een adaptief formulier.
In deze zelfstudie maakt u een stijl van de kop- en voettekst, tekst en numerieke componenten, de bijlage en knoppen. Laten we beginnen met het maken van een thema:
Een thema maken create-a-theme
-
Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Thema's. De standaard-URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
-
Tikken Create en selecteert u Theme. De pagina Thema maken met de velden die nodig zijn om een thema te maken, wordt weergegeven. De velden Titel en Naam zijn verplicht:
- Titel: Geef een titel van het thema op. Bijvoorbeeld: Globaal thema. Met de titel kunt u het thema herkennen aan de lijst met thema's.
- Naam: Geef de naam van het thema op. Bijvoorbeeld: Globaal thema. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch een waarde voor het naamveld gegenereerd. U kunt de voorgestelde waarde wijzigen. Het naamveld mag alleen alfanumerieke tekens, afbreekstreepjes en onderstrepingstekens bevatten. Alle ongeldige invoer wordt vervangen door een afbreekstreepje.
-
Tikken Maken. Er wordt een thema gemaakt en er verschijnt een dialoogvenster waarin u het formulier kunt openen om het te bewerken. Tikken Openen om het nieuwe thema op een nieuw tabblad te openen. Het thema wordt geopend in de themaeditor. Voor het opmaken gebruikt de themaeditor een adaptief formulier dat niet in de doos bij AEM Forms wordt geleverd.
Voor informatie over het gebruiken van thema redacteur UI, zie Informatie over de themaeditor.
-
Tikken Themaopties
Afbeelding: Thema-editor met het adaptieve formulier voor het verzendadres-add-update
Afbeelding: Adaptief formulier met het standaardformulier
Stijlkop- en voettekst style-header-and-footer
Koptekst en voettekst geven een consistent en duidelijk beeld van een adaptief formulier. Over het algemeen bevat de koptekst het logo en de naam van de organisatie, bevat de voettekst copyrightinformatie en deze blijven in meerdere vormen van een organisatie identiek. De kop- en voettekst van het adaptieve formulier voor het verzendadres-add-update-formulier opmaken:
-
Navigeren door de Koptekst > Tekst in het deelvenster Kiezers. Het deelvenster Kiezers bevindt zich links van de themaeditor. Tik op
-
Stel de volgende eigenschappen in in het dialoogvenster Tekst accordeon en tik
table 0-row-2 1-row-2 2-row-2 3-row-2 Eigenschap Waarde Lettertypefamilie Arial Lettertypekleur FFFFFF Tekengrootte 54px -
Tik op de koptekstwidget en tik op Koptekst. De opties voor het opmaken van de koptekstwidget worden links weergegeven. Breid uit Dimension en positie accordeon instellen Hoogte tot
120pxen tikken -
Breid de Achtergrondaccordeon van de kopbalwidget uit, plaats Achtergrondkleur tot
F6921E.Overslaan Afbeelding en verloop > + Toevoegen, tikken Afbeelding. Stel de volgende eigenschappen in en tik op
table 0-row-2 1-row-2 2-row-2 3-row-2 Eigenschap Waarde afbeelding Upload header-style.png. De afbeelding is gedownload in het dialoogvenster Voordat u begint sectie. Positie Rechts onder Naast elkaar Niet herhalen -
Tik in de themaeditor op het logo in de koptekst en tik op Koptekstlogo. Breid de Dimension en Positie accordeon uit, plaats de volgende eigenschappen en tik
- Boven: 1.5 rem
- Onder: -35 px
- Links: 1rem
Tip: Tik op de knop
- Tik op de voettekstwidget en tik op Voettekst. Breid uit Achtergrond accordeon instellen Achtergrondkleur tot
F6921Een tikken
De component voor gegevensvastlegging opmaken en een achtergrond op het adaptieve formulier toepassen style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form
U kunt meerdere componenten in een adaptief formulier gebruiken om gegevens vast te leggen. Bijvoorbeeld tekstvak en numeriek vak. U kunt identieke stijl aan alle gegevens verstrekken vangt componenten of afzonderlijke stijl voor elke component. In deze zelfstudie wordt een identieke stijl toegepast op numerieke vakken (Customer ID, ZIP Code) en tekstvakken (Customer ID, Name, Shipping Address, State, Email). De componenten voor gegevensvastlegging opmaken:
- Tik op het veld Customer ID en tik op Widget veld optie. Stel de volgende eigenschappen in en tik op
-
Tik op het lege gebied boven het veld Customer ID en tik op Container voor responsieve deelvensters. Stel de Achtergrond > Achtergrondkleur tot F1F2F2. Tikken
De knoppen opmaken style-the-buttons
U kunt een aangepast thema gebruiken om een identieke stijl toe te passen op alle knoppen van het aangepaste formulier en inline styling om een stijl op een specifieke knoop toe te passen. De knoppen opmaken:
- Tik op de knop Verzenden en tikken op Knop optie. Stel de volgende eigenschappen in en tik op
-
Het aangepaste thema toepassen, Global Theme, in uw adaptieve vorm. Als de stijl niet op het adaptieve formulier wordt weerspiegeld, maakt u de cache van de browser leeg en probeert u het opnieuw.
Stap 4: Afzonderlijke componenten opmaken step-style-individual-components
Sommige stijlen zijn alleen van toepassing op een bepaalde component. Dergelijke componenten worden opgemaakt in de editor voor adaptieve formulieren.
-
Open het aangepaste formulier voor bewerking. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
Selecteer op de bovenste balk de optie Stijl optie.
-
Tik op de knop Koppelen en tikken op
table 0-row-2 1-row-2 2-row-2 Eigenschap Waarde Float Links Breedte 10% -
Tik op de knop Door de overheid goedgekeurd adresbewijs tikken en tikken op de knop
- Tik op de knop Verzenden en tikken op
Stap 5: Bonussectie: Weblettertypen gebruiken in een aangepast thema step-bonus-section-using-web-fonts-in-a-custom-theme
U kunt verschillende lettertypen gebruiken om een adaptief formulier te ontwerpen. Op alle apparaten waarop het adaptieve formulier wordt weergegeven, worden mogelijk niet de fonts gebruikt om het adaptieve formulier te ontwerpen. U kunt een service voor weblettertypen gebruiken om de vereiste lettertypen aan het doelapparaat te leveren.
Adobe Typekit is een service voor weblettertypen. U kunt de service configureren en gebruiken met adaptieve formulieren. Adobe Typekit in een adaptieve vorm gebruiken:
-
Een Adobe Typekit -account, een kit maken, lettertype Myriad Pro aan de kit toevoegen, de kit publiceren en de kit-id ophalen. U hebt Adobe Typekit-lettertypen (weblettertypen) in een adaptieve vorm nodig.
-
Navigeer op de AEM Forms-server naar
Geef in het dialoogvenster Configuratie maken een Titel voor de configuratie en klik op Maken. U wordt opnieuw gericht aan de configuratiepagina. Geef in het dialoogvenster Component bewerken dat wordt weergegeven uw Kit-id en klik op OK.
-
Vorm uw thema om de configuratie te gebruiken TypeKit. Open in de instantie van de auteur Globaal thema in de themaeditor. Navigeer in de themaeditor naar Thema-opties
De lettertypen die aan de Typekit zijn toegevoegd, kunnen worden geselecteerd in het dialoogvenster Tekst van alle componenten.