Dokumentation AEM as a Cloud Service Användarhandbok

Skapa och använda teman creating-and-using-themes

Last update: Tue Dec 12 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenterfor skapa ny Adaptive Formseller lägga till adaptiv Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.

Version

Artikellänk

AEM 6.5

Klicka här

AEM as a Cloud Service

Den här artikeln

Du kan skapa och använda teman för att anpassa ett anpassat formulär. Ett tema innehåller formatinformation för komponenterna och panelerna. Format innehåller egenskaper som bakgrundsfärger, lägesfärger, genomskinlighet, justering och storlek. När du använder ett tema återspeglas det angivna formatet i motsvarande komponenter. Temat hanteras separat utan referens till ett anpassat formulär.

Du kan hämta och installera AEM Forms referera till innehållspaket från Programvarudistribution portalen för att importera referensteman och mallar till din miljö.

Skapa, hämta eller överföra ett tema creating-downloading-or-uploading-a-theme

Ett tema skapas och sparas som en separat enhet, komplett med metaegenskaper som Adaptiv Forms. Det gör att du kan återanvända ett tema i flera adaptiva Forms. Du kan också flytta ett tema till en annan instans och återanvända det.

Skapa ett tema creating-a-theme

Så här skapar du ett tema:

Klicka Adobe Experience Manager, klicka Forms och klicka Themes.
På sidan Teman klickar du på Create > Theme.
En guide för att skapa ett tema startas.
Ange Name av temat.
Ange ett formulär som du vill förhandsgranska temat i Default Preview for this Theme fält. Klicka Use Default om du vill använda standardformuläret för att förhandsgranska temat.
Ange en Configuration Container. Du kan välja en Configuration Container som innehåller konfigurationsinformation om Adobe-teckensnitt för ditt konto. Du kan också lämna alternativet tomt för tillfället och ange informationen senare från temaegenskaper.
Klicka Create och sedan klicka Edit för att öppna temat i temeredigeraren, eller klicka på Done för att gå tillbaka till temasidan.

Skillnad från teman i Experience Manager 6.5 Forms och tidigare versioner difference-in-themes

Teman som skapats för en Cloud Service-instans:

Har versionsnummer 2.
lagras på /content/dam/formsanddocuments-themes/<theme-name>/
Ange inte alternativ för klientbibliotek. Du kan inte ange en bibliotekskategori och sökväg för klienten.
Har inte behörighet att skriva och uppdatera på /apps-platsen (Forms-användargruppen har inte behörighet att skriva och uppdatera på /apps-platsen).
Innan du överför ett tema som skapats den Experience Manager Forms 6.5 eller tidigare versioner till en Cloud Service-instans, kontrollera att klientbibliotekets plats är inställd på etc/clientlibs/fd/themes. Om klientbiblioteket inte finns i etc mapp, uppdatera platsen till etc/clientlibs/fd/themes. Du kan ändra dina Experience Manager Forms 6.5 eller tidigare versioner. När du har angett platsen för klientbiblioteket kan en administratör överföra teman till Cloud Servicen eller använda verktyget Innehållsöverföring för att migrera teman från 6.5 eller tidigare versioner till Cloud Servicen.

Ändra också namnet på kategorin. Om namnet inte ändras uppstår ett fel theme with same category name exists kan inträffa. När du ändrar kategorinamnet påverkas inte den adaptiva Forms som använder temat.

Hämta ett tema downloading-a-theme

Du kan exportera teman som en zip-fil och använda dessa teman i andra projekt eller i Experience Manager-instanser. Så här hämtar du ett tema:

Klicka Adobe Experience Manager, klicka Forms och klicka sedan på Themes.
På sidan Teman Select ett tema och klicka på Download. En dialogruta med information om temat visas.
Klicka på Download. Temat hämtas som en zip-fil.

NOTE

Om du hämtar ett tema som har ett associerat adaptivt formulär och det associerade adaptiva formuläret är baserat på en anpassad mall, hämtar du även den anpassade mallen. När du överför det hämtade temat och Adaptiv form överför du även den relaterade anpassade mallen.

Överföra ett tema uploading-a-theme

En användare med administratörsbehörighet kan överföra ett tema som har skapats i Experience Manager Forms 6.5 eller tidigare versioner.

Så här överför du ett tema:

Klicka Adobe Experience Manager, klicka Forms och klicka sedan på Themes.
På sidan Teman klickar du på Create > File Upload.
Bläddra och välj ett temapaket på datorn i filöverföringsprompten och klicka på Upload.
Det överförda temat är tillgängligt på temasidan.

Metadata för ett tema metadata-of-a-theme

Lista med metaegenskaper för ett tema (finns på egenskapssidan för ett tema).

Namn

Kan redigeras

Egenskapsbeskrivning

Titel

Visningsnamn för temat.

Beskrivning

Beskrivning av temat.

Typ

Nej

Typ av tillgång.
Värdet är alltid tema.

Skapad

Nej

Datum när temat skapades

Författarnamn

Författare till temat. Beräknas när temat skapas.

Senast ändrat den

Nej

Datum när temat senast ändrades.

Status

Nej

Temats status (ändrad/publicerad).

Publicera i tid

Det är dags att automatiskt publicera temat.

Publicera utanför tid

Det är dags att automatiskt avpublicera temat.

10.

Taggar

En etikett som är kopplad till temat för identifiering och som används för att förbättra sökningen.

Om Theme Editor about-the-theme-editor

Theme Editor är ett användarvänligt och användarvänligt gränssnitt för webbdesigners och utvecklare som innehåller funktioner som krävs för att specificera formatet för olika adaptiva formulär enkelt. När du skapar ett tema lagras det som en separat enhet, som formulär .

Med Theme Editor kan du anpassa stilar för de komponenter som är formaterade i ett tema. Du kan anpassa hur ett formulär på en enhet.

Temaredigeraren är uppdelad i två paneler:

Arbetsyta - Visas på höger sida. Här visas ett exempel på en adaptiv form där alla formatändringar återspeglas direkt. Du kan också markera objekt direkt från arbetsytan för att leta upp format som är kopplade till dem och för att redigera formaten. En enhetsupplösningslinjal längst upp styr arbetsytan. Om du väljer en brytpunkt för upplösning från linjalen visas förhandsvisningen av exempelformuläret för respektive upplösning. Arbetsytan beskrivs i detalj nedan.
Sidebar- Visas på vänster sida. Den har följande objekt:
- Väljare: Visar den komponent som är markerad för formatering och dess egenskaper som du kan formatera. Väljaren representerar alla komponenter av en typ. Om du väljer en textrutekomponent i ett tema för formatering, alla textrutor i formuläret ärva stilen. Med väljare kan du välja en allmän komponent eller en specifik komponent för formatering. En fältkomponent är till exempel en allmän komponent och en textruta är en specifik komponent.
  
  Formatera allmän komponent:
  Ett fält kan vara ett numeriskt fält, t.ex. age, eller ett textfält, t.ex. adress.
  När du formaterar ett fält formateras alla fält, till exempel ålder, namn och adress.
  
  Formateringsspecifik komponent: En specifik komponent påverkar objekt i den specifika kategorin. När du formaterar den numeriska rutkomponenten i temat ärver bara det numeriska ruteobjektet formatet.
  
  Ett textrutefält, till exempel en längre adress och ett numeriskt rutefält som t.ex. ålder, är kortare. Du kan markera ett numeriskt rutfält, minska dess längd och använda det i formuläret. Bredden på alla numeriska rutfält minskas i formuläret.
  
  När du anpassar alla fältkomponenter med en viss bakgrundsfärg ärver alla fält, som ålder, namn och adress, bakgrundsfärgen. När du markerar en numerisk ruta, till exempel age, och minskar bredden på den, minskas bredden på alla numeriska rutor, till exempel ålder, antalet personer i en familj. Bredden på textrutor ändras inte.
- Läge: Gör att du kan anpassa format för ett objekt i ett visst läge. Du kan till exempel ange ett objekts utseende när det är i standardläge, fokusläge, inaktiverat läge, hovring eller felläge.
- Egenskapskategorier: Formategenskaper delas upp i olika kategorier. Exempel: Dimension och placering, Text, Bakgrund, Kant och Effekter. Under varje kategori anger du formatinformation. Under Bakgrund kan du till exempel ange Bakgrundsfärg och Bild och övertoning.
- Avancerat: Gör att du kan lägga till anpassad CSS till ett objekt, vilket åsidosätter de egenskaper som visuella kontroller definierar om det finns en överlappning.
- Visa CSS: Gör att du kan visa CSS för den markerade komponenten.
I sidofältet finns dessutom en pil längst ned. När du klickar på pilen får du ytterligare två alternativ: Simulera lyckade och Simulera fel. Dessa alternativ, tillsammans med de alternativ som beskrivs ovan, beskrivs i detalj nedan.

S. Sidebar B. Arbetsyta

Formatkomponenter styling-components

Du kan använda ett tema i flera adaptiva Formssom importerar komponentformateringen som du har angett i temat. Du kan formatera olika komponenter som titlar, beskrivning, paneler, fält, ikoner och textrutor. Använd widgetar för att konfigurera komponentegenskaper i ett tema. Det krävs ingen tidigare kunskap om CSS eller LESS, men det önskas även om du kan skriva CSS-kod eller använda anpassade väljare i avsnittet CSS-åsidosättningar. Avsnittet CSS-åsidosättningar visas när du markerar en komponent i sidofältet.

Formaterbara komponenter i sidlisten

Alternativ i sidofältet som gör att du kan markera och formatera olika komponenter.

Om du klickar på redigeringsknappen mot en komponent i sidlisten markeras komponenten på arbetsytan. Du kan också formatera komponenten med alternativen i sidlisten.

Vissa komponenter som textruta, numerisk ruta, alternativknapp och kryssruta kategoriseras under generiska komponenter som Fält. Du kan till exempel anpassa stilen på alternativknappar. Om du vill välja alternativknappar för formatering väljer du Field > Widget > Radio Button.

Layout på formatpanelen styling-panel-layouts-br

Teman i AEM Forms har stöd för formatering av element i panelernas layout i dina formulär. Formatering av element i färdiga layouter och anpassade layouter stöds.

De färdiga panelerna är:

Tabbar till vänster
Tabbar överst
Dragspel
Responsiv
guide
Mobil layout
- Panelrubriker i sidhuvudet
- Utan panelrubriker i sidhuvudet

Väljarna varierar för de olika layouterna.
Skräddarsydda layouter från Theme Editor innehåller:

Definiera komponenterna för en layout som kan formateras och CSS-väljare för att unikt identifiera dessa komponenter.
Definiera CSS-egenskaper som kan användas på dessa komponenter.
Definiera formaten för de här komponenterna interaktivt från användargränssnittet.

Olika format för olika skärmstorlekar different-styles-for-different-screen-sizes-br

Skrivbords- och mobillayouter kan ha något eller helt olika format. För mobila enheter har surfplattor och telefoner liknande layouter förutom komponentstorlekar.

Använd Theme Editor-brytpunkter för att definiera alternativ formatering för olika skärmstorlekar. Du kan välja en basenhet eller upplösning som du börjar bygga temat på, och formatvariationerna för andra upplösningar genereras automatiskt. Du kan ändra formateringen för alla upplösningar.

NOTE

Temat skapades först med ett formuläroch sedan tillämpas på olika formulär. Brytpunkterna som används när temat skapas kan skilja sig från formuläret som temat används på. CSS-mediefrågor baseras på formuläret används för att skapa teman och inte för formuläret som temat används på.

Kontexten för formategenskaper ändras i sidofältet när objekt markeras styling-properties-context-changes-in-sidebar-on-selecting-objects

När du markerar en komponent på arbetsytan visas dess formategenskaper i sidlisten. Markera objekttypen och dess läge och ange sedan dess format.

Nyligen använda format i Theme Editor recently-used-styles-in-theme-editor

Temaredigeraren cachelagrar upp till tio format som har använts på en komponent. Du kan använda de cachelagrade formaten med andra komponenter i ett tema. Nyligen använda format är tillgängliga direkt under den markerade komponenten i sidlisten som en listruta. Till att börja med är listan över senast använda format tom.

Resursbibliotek

När du formaterar en komponent cachelagras formaten och visas i listrutan. I det här exemplet är textrutans etikett formaterad för att ändra teckenstorlek och färg. Du kan följa liknande steg när du väljer en bild eller ändrar färger för att formatera en komponent. Lägg märke till hur formatet cachelagras och visas i listrutan när fältetikettens format ändras.

Teckensnittsformat som cachas för en komponent som är tillgänglig för en annan

I det här exemplet ändras formatet för fältetiketten och när du väljer Responsiv panelbeskrivning för formatet läggs en listpost till i resursbiblioteket. Posten i resursbiblioteket kan användas för att ändra formatet för responsiv panelbeskrivning.

När ett format läggs till i resursbiblioteket är det tillgängligt för andra teman och i stilläge i formulärredigerarens användargränssnitt. På samma sätt när du använder stilläget i formulärredigeraren För att formatera en komponent cachelagras formatet och är tillgängligt i teman.

Med plusknappen mot resursbiblioteket kan du spara formatet med ett namn som du anger permanent. Med plusknappen sparas formatet även om du inte klickar på knappen Spara i sidlisten för att tillämpa formatet på en komponent. Den plusknapp som används för att spara ett format för senare bruk är inte tillgänglig i formatläget.

Ange ett anpassat formatnamn för resursbiblioteket

När du anger ett anpassat namn för ett format kopplas formatet till ett tema och är inte längre tillgängligt för andra teman. Så här tar du bort ett sparat format:

I verktygsfältet CANVAS klickar du på Theme Options > Manage Styles.
Välj ett sparat format i dialogrutan Hantera format och klicka på Delete.

Förhandsgranska, spara och ignorera ändringar live-preview-save-and-discard-changes

Ändringar som görs i formatet återspeglas direkt i formuläret laddas i arbetsytan. Med direktförhandsvisning kan du interaktivt definiera och se hur formateringen påverkas. När du ändrar en komponents stil visas Done knappen är aktiverad i sidlisten. Använd Done -knappen.

NOTE

När ett ogiltigt tecken anges i ett fält ändras fältets färggräns till rött och ett felmeddelande visas i skärmens övre vänstra hörn. Om du t.ex. anger alfabet i en textruta som accepterar numeriska tecken som indata, har inmatningsramens kantlinjefärg ändrats till röd. Du kan inte spara ett sådant tema utan att lösa det fel som visas längst ned på skärmen.

Tema med en annan adaptiv form theme-with-another-adaptive-form

När du skapar ett tema skapas det med ett formulär som levereras med Theme Editor. Du anger format för komponenter i det här formuläret. I stället för det formulär som levereras med Theme Editor kan du välja ett formulär efter eget val för att skapa en formatering och förhandsgranska resultatet.

Ersätta det aktuella formuläret eller på arbetsytan i temeredigeraren:

På panelen TEMAREDIGERARE klickar du på Theme Options > Configure.
Gå till fliken Allmänt och välj ett formulär för Adaptive Form fält.

Gör om/Ångra redo-undo

Du kan ångra eller göra om oönskade ändringar som inträffar av misstag. Använd gör om-/ångra-knapparna på arbetsytan.

Gör om och ångra åtgärder

Knappar för att göra om/ångra visas när du formaterar en komponent i temeredigeraren.

Använda Theme Editor using-the-theme-editor

Med Theme Editor kan du redigera ett tema som du har skapat eller överfört. Navigera till Forms & Documents > Themes, och välj ett tema och öppna det. Temat öppnas i temaredigeraren.

Som nämndes ovan har temaredigeraren två paneler: Sidofältet och Canvas.

Anpassa framgångsläget för komponenten för textrutewidgeten i Theme Editor. Komponenten markeras i Canvas och dess läge markeras i sidlisten. De formateringsalternativ som finns i sidofältet används för att anpassa utseendet på en komponent.

Använda Canvas using-canvas

Temat skapas antingen i det färdiga formuläret eller med ett formulär efter eget val. På arbetsytan visas förhandsgranskningen av formuläret eller används för att skapa temat med anpassningar som anges i temat. Linjalen ovanför formuläret används för att bestämma layouten baserat på visningsstorleken på enheten.

I verktygsfältet Arbetsyta ser du:

Toggle Side Panel : Visa eller dölj sidofältet.
Theme Options : Tillhandahåller tre alternativ
- Konfigurera: Tillhandahåller alternativ för att välja förhandsgranskningsformuläret och Adobe Fonts.
- Visa tema-CSS: Genererar CSS för det valda temat.
- Hantera format: Tillhandahåller alternativ för att hantera text- och bildformat
- Hjälp: Kör en guidad visning av en bild i Theme Editor.
Emulator : Emulerar temats utseende för olika visningsstorlekar. En visningsstorlek behandlas som en brytpunkt i emulatorn. Du kan markera en brytpunkt och ange ett format för den. Skrivbordet och handdatorn är till exempel två brytpunkter. Du kan ange olika format för varje brytpunkt.

När du markerar en komponent på arbetsytan visas komponentens verktygsfält ovanpå. Med komponentverktygsfältet kan du välja komponenter eller växla till generiska komponenter. Du kan till exempel markera en numerisk textruta på en panel. Följande alternativ visas i komponentens verktygsfält:

Numeric Box Widget: Gör att du kan markera komponenten för att anpassa dess utseende i sidofältet.
Field Widget: Gör att du kan välja den generiska komponenten för formatering. I det här exemplet markeras alla textindatakomponenter (textruta/numerisk ruta/numerisk nummerlista/datumindata) för formatering.
: Välj den överordnade komponenten för formatering. Om du markerar en numerisk ruta och väljer den här ikonen markeras fältkomponenten. Om du markerar en fältkomponent och väljer den här ikonen markeras panelen. Om du fortsätter att trycka på den här ikonen för markering, kommer du att välja layouten för formatering.

NOTE

Vilka alternativ som är tillgängliga i komponentverktygsfältet varierar beroende på vilken komponent du väljer.

Använda sidofält using-rail

Sidofältet i temeredigeraren innehåller alternativ för att anpassa format för komponenter i ett tema och använda väljare. Med väljarna kan du välja en grupp komponenter eller enskilda komponenter, och du kan söka efter väljare i sidofältet. Du kan skriva väljare för anpassade komponenter.

När du väljer en komponent på arbetsytan eller väljare i sidofältet visas alla alternativ som du kan använda för att anpassa dess format i sidlisten.
Nedan visas de alternativ som visas i sidofältet när du markerar en komponent:

Läge
Egenskapssida
Simulera fel/lyckade

Läge state

Ett läge är en indikator på användarinteraktion med en komponent. Om en användare t.ex. anger felaktiga data i en textruta ändras textrutans status till ett feltillstånd. Med temaredigeraren kan du ange format för ett visst läge.

Alternativen för att anpassa lägesformat varierar för olika komponenter.

Egenskapssida property-sheet

Egenskap

Använd

Dimensioner och position

Gör att du kan formatera justering, storlek, placering och placering av komponenter i temat.

Du kan välja mellan visningsinställningar, utfyllnad, marginal, bredd, höjd och Z-index.

Du kan också använda layoutläget för att definiera komponenternas bredd med ett enkelt dra och släpp-gränssnitt. Mer information finns i Använd layoutläget för att ändra storlek på komponenter.

Text

Här kan du anpassa textformaten i temats komponent.

Du vill till exempel ändra hur texten som anges i textrutan ser ut.

Du kan välja mellan teckensnittsfamilj, bredd, färg, storlek, radhöjd, textjustering, teckenavstånd, textindrag, understrykning, kursiv stil, textomformning, vertikal justering, baslinje och riktning.

Bakgrund

Fyll komponentens bakgrund med en bild eller en färg.

Kant

Här kan du välja hur kanten för komponenten ska se ut. Du vill till exempel att textrutan ska ha en djup röd, tjock kant med en prickad linje.

Du kan välja mellan bredd, stil, radie och färg för ramen.

Effekter

Gör att du kan lägga till specialeffekter i komponenter som opacitet, blandningsläge och skuggor.

Avancerat

Gör att du kan lägga till:

Egenskaper för ::before och ::after pseudoelement om du vill lägga till innehåll efter eller före standardinnehållet i väljaren och formatera det.
Se CSS-pseudoelement.
Anpassad CSS-kod infogad till en komponent.

När du lägger till en anpassad CSS-kod åsidosätter den anpassningen som du lade till med alternativen i sidofältet.

Simulera fel/lyckade simulate-error-success

Alternativen Simulera fel och Slutfört finns längst ned i sidlisten. Du kan visa dem med en Visa/dölj-pil längst ned i sidlisten. Med hjälp av temaredigeraren kan du formatera olika lägen för en komponent.

Du kan till exempel lägga till ett numeriskt fält i formuläret och ange dess format i temaredigeraren. När en användare skriver ett alfanumeriskt värde i fältet vill du att bakgrundsfärgen för textrutan ska ändras. Du markerar det numeriska fältet i temat och använder lägesalternativet i sidofältet. Du väljer felläget i sidlisten och ändrar bakgrundsfärgen till röd. Om du vill förhandsgranska beteendet kan du använda alternativet Simulera fel i sidofältet. Alternativen Simulera fel och Slutfört beskrivs i detalj nedan:

Simulera lyckade: Gör att du kan se hur en komponent ser ut om du anger dess format för att lyckas. I ett formulär kan kunderna till exempel ange lösenord. Användare kan ange lösenord enligt de riktlinjer som du anger. När en användare skriver ett lösenord enligt de riktlinjer som du anger ändras textrutan till grönt. När textrutan blir grön är den klar. Du kan ange en stil för en komponent i ett lyckat tillstånd och simulera dess utseende med alternativet Simulera lyckade.
Simulera fel: Gör att du kan se hur en komponent ser ut om du anger dess format för feltillstånd. I ett formulär kan kunderna till exempel ange lösenord. Användare kan ange lösenord enligt de riktlinjer som du anger. När en användare skriver ett lösenord som inte följer alla riktlinjer som du anger blir textrutan röd. När textrutan blir röd är den i feltillstånd. Du kan ange format för en komponent i feltillstånd och simulera dess utseende med alternativet Simulera fel.

Formatera en komponent styling-a-component

I ditt formulär har du till exempel två typer av textrutor: en som bara accepterar numeriska värden och en annan som accepterar alfanumeriska värden. Du kan anpassa formateringen för textrutan som bara accepterar numeriska värden (en numerisk ruta).

Så här anpassar du formateringen för en viss komponent (en numerisk ruta i det här exemplet):

I temeredigeraren markerar du den numeriska rutan på arbetsytan.
När du markerar den numeriska rutan visas komponentens verktygsfält med tre alternativ:
- Numeric Box Widget
- Field Widget
Välj Numeric Box Widget.
Sidofältets rubrik ändras till Numerisk rutwidget och visar alternativ för att anpassa dess utseende.
Använd Dimension & Position i sidofältet för att anpassa komponentens storlek. Se till att staten är Default.

Istället för att markera Numeric Box Widget, markera Field Widget i komponentens verktygsfält och utför stegen ovan. När du väljer dimensioner för Field Widget har alla textrutor utom den numeriska rutan samma storlek.

Formatera fält för ett visst läge styling-fields-given-state

Med komponentverktygsfältet kan du även ange komponentformat för de olika lägena. Om en komponent till exempel är inaktiverad är den i inaktiverat läge. Vanliga lägen för en komponent som du kan formatera i temaredigeraren är: Standard, Fokus, Disabled, Error, Success och Hover. Du kan markera en komponent på arbetsytan och använda alternativet Läge i sidofältet för att anpassa dess utseende.

Så här anpassar du formateringen för en komponent i ett visst läge:

Markera en komponent på arbetsytan och välj lämpligt alternativ i komponentens verktygsfält.
I sidofältet visas alternativ för att anpassa komponentens format.
Välj ett läge i sidofältet. Exempel: Feltillstånd.
Använd alternativ som Border, Background i sidlisten för att anpassa hur komponenten ser ut.
Använd Simulate Error längst ned i sidlisten om du vill se hur stilen ser ut vid redigering.

När du anpassar en komponents format efter att du har angett dess läge, visas anpassningen bara för komponenten för det angivna läget. Om du till exempel anpassar komponentens format när hovringsläget är markerat. Anpassningen visas för komponenten när du flyttar pekaren över komponenten i det återgivna formuläret som du använder temat på.

Om du vill simulera beteendet för andra lägen än fel och lyckade, använder du förhandsgranskningsläget. Om du vill använda förhandsgranskningsläget klickar du på Preview i sidverktygsfältet.

Formatera layouter för mindre skärmar styling-layouts-for-smaller-displays

Använd linjalen på arbetsytan för att markera brytpunkter för enheter med mindre skärmar. Klicka på emulatorn på arbetsytan om du vill visa linjaler och brytpunkter. Med brytpunkterna kan du förhandsgranska ett formulär för visningsstorlekar som gäller olika enheter som telefoner och surfplattor. Det finns stöd för flera visningsstorlekar i Theme Editor.

Så här formaterar du komponenter för olika brytpunkter:

Markera en brytpunkt ovanför linjalen på arbetsytan.
En brytpunkt representerar en mobil enhet och dess visningsstorlek.
Använd sidlisten för att anpassa formulärformateringen -komponenter i temat för den valda visningsstorleken.
Se till att anpassningen sparas.

Du kan formatera formulär -komponenter för flera enheter. Formulär -komponenter för datorer och mobila enheter kan ha helt olika format.

Använda Web Fonts i ett tema using-web-fonts-in-a-theme

Du kan nu använda teckensnitt som finns i en webbtjänst i ett adaptivt formulär . Körklar, Adobe Fonts, Adobe webbteckensnittstjänst, är tillgänglig som en konfiguration. Om du vill använda Adobe Fonts skapar du ett kit, lägger till teckensnitt i det och hämtar Kit-ID:t från Adobe Fonts.

Så här konfigurerar du Adobe Fonts i Experience Manager:

Klicka på i författarinstansen Adobe Experience Manager>Tools >Deployment>Cloud Services.
På Cloud Services sida, navigera till och öppna Adobe Fonts alternativ. Öppna konfigurationsmappen och klicka på Create.
På Create Configuration anger du en rubrik för konfigurationen och klickar på Create.

Du omdirigeras till konfigurationssidan.
Ange ditt kit-ID i dialogrutan Redigera komponent som visas och klicka på OK.

Så här konfigurerar du ett tema för Adobe Fonts-konfigurationen:

Öppna ett tema i temaredigeraren i författarinstansen.
Gå till temaredigeraren Theme Options > Configure.
I Adobe Fonts Configuration väljer du ett kit och klickar på Save.

Nu ser du att teckensnitten har lagts till i temats egenskap font-family.

Välja teckensnitt i temaredigeraren selecting-fonts-in-theme-editor

Du kan använda ±knappen för att lägga till ett teckensnitt. När du lägger till ett teckensnitt visas det i sidlisten.

Nytt teckensnitt i temaredigeraren

Förutom alternativet för temakonfiguration kan du även lägga till ditt teckensnitt från temaredigeraren. Skriv det teckensnitt du vill använda i fältet för teckensnittsfamiljen under sidofältet och tryck på returtangenten på tangentbordet.

Skriva och välja teckensnitt i temaredigeraren

När du väljer ett teckensnitt läggs det till i listan över teckensnittsfamiljer. Du kan använda alternativet Mask i temaredigeraren för att inaktivera eller aktivera de listade teckensnitten.

Flera teckensnitt

Du kan se ändringen av komponentens teckensnitt.

Fältet Teckensnittsfamilj stöder flera teckensnitt. När du skriver ett teckensnitt letar webbläsaren efter det och använder det på den markerade komponenten. Om webbläsaren inte kan hitta något teckensnitt söker den efter ett teckensnitt som finns bredvid det i familjen. Du kan börja med att skriva det teckensnitt du söker efter. Om du inte hittar det teckensnitt du vill använda kan du skriva ett generiskt teckensnitt i familjen och använda det.

Maskformat som används i temaredigeraren mask-styles-applied-in-theme-editor

Du kan maskera format som används i ett tema. I temaredigerarens sidlist kan du använda om du vill inaktivera ett använt format. Om du till exempel ändrar dimensionerna för en komponent i ett formulär kan du sedan använda maskknappen till vänster om en egenskap för att inaktivera den. När du sparar ett tema behålls de valda maskningsalternativen.

Maskalternativ som är tillgängliga i temaredigerarens sidlist

I exemplet nedan visas maskerade och omaskerade format i ett tema.

Maskerade och omaskerade format

Använda ett tema i ett formulär applying-a-theme-to-a-form-or-interactive-communication-br

Så här använder du ett tema i ett adaptivt formulär:

Öppna formuläret i redigeringsläge. Om du vill öppna ett formulär i redigeringsläge markerar du ett formulär och klickar på Open.
Markera en komponent i redigeringsläget och klicka sedan på > Adaptive Form Container och klicka sedan på .

Du kan redigera egenskaperna för formuläret i sidlisten.
Klicka på Styling.
Välj temat från Adaptive Form Theme listruta och klicka Done .

Du kan också definiera ett tema för ett anpassat formulär när du skapar det.

Ändra tema för ett formulär vid körning change-theme-of-a-form-at-runtime

Ett tema formaterar olika komponenter i ett formulär. Du kan använda themeOverride för att dynamiskt ändra ett formulärs tema. En vanlig URL för ett formulär är:

https://<server>:<port>/content/forms/af/test.html

Du kan använda parametern themeOverride för att tillämpa ett tema på körningen.

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

The themeOverride kan du ange en sökväg till ett tema. Formulärets tema ändras och formuläret uppdateras med uppdaterade format.

Hämta specifikt utseende med teman specific-af-appearance

Med AEM Forms, tillsammans med det färdiga standardtemat för arbetsytan, finns det många andra teman. Om du vill utforma formuläret med andra teman, tillsammans med fler ändringar, kopierar du temat från temabiblioteksmappen. Klistra in de kopierade temana utanför temabiblioteksmappen och redigera det kopierade temat efter de ändringar du vill.

Så här kopierar du ett tema:

I redigeringsinstansen navigerar du till Adobe Experience Manager > Forms > Themes.
Öppna mappen Temabibliotek.
I temabiblioteksmappen håller du pekaren över motsvarande färdiga tema och väljer Copy.
Klistra in det kopierade temat utanför temabiblioteksmappen.
Anpassa det kopierade temat.

När du har anpassat temat kan du använda det i formuläret .

NOTE

Ändra inte de teman som är tillgängliga i temabiblioteksmappen. Den här mappen innehåller systemteman. Alla ändringar du har gjort i dessa teman skrivs över när du installerar en nyare version eller snabbkorrigering av AEM Forms.

Inverkan på andra användningsområden för anpassade formulär impact-on-other-adaptive-form-use-cases

Publicera/avpublicera ett formulär: När du publicerar ett formulär publiceras även det tema som används på (om det inte redan är publicerat)
Importera/exportera ett formulär: När du importerar eller exporterar ett formulär importeras eller exporteras även det tillhörande temat automatiskt.
Referenser till ett formulär: Avsnittet Referenser i formulärreferenser innehåller en extra post för temat.
Senast ändrad i ett formulär: Uppdaterades när det associerade temat ändras.

CSS-genereringssekvens css-generation-sequence

När du väljer Visa CSS samlar temaredigeraren in all formatinformation och skapar en CSS. Den samlar in information i följande ordning:

Användardefinierad formatering, som anges med egenskaperna i sidofältet.
CSS-format som tillhandahålls med alternativet CSS-åsidosättning.

En textrutas bakgrundsfärg är till exempel blå. Du ändrar den till rosa med hjälp av egenskaperna i sidlisten. När du genererar CSS ser du textrutans bakgrundsfärg som rosa. När bakgrundsfärgen har ändrats med hjälp av egenskaperna använder en annan författare alternativet CSS-åsidosättning för att ändra textrutan för bakgrundsfärgen till vit. När du genererar CSS ser du bakgrundsfärgen som vit i den genererade CSS-koden.

Felsöka format debugging-styles

När du anger format för komponenter i Theme Editor genereras en CSS. När du formaterar en allmän komponent formateras även flera komponenter som ingår i den. När du till exempel formaterar ett fält formateras även textrutan och etiketten i det. När du formaterar textrutan i fältet får den sin egen CSS. Om du vill felsöka den CSS som genererats för fältet och komponenten, innehåller Theme Editor alternativ som gör att du kan visa CSS.

Du kan se den genererade CSS-koden med följande alternativ:

Visa CSS i sidlisten: När du markerar en komponent i temat kan du se alternativet VISA CSS i sidlisten. Den visar genererad CSS, inklusive CSS för ::before och ::after pseudoelement.
Visa tema-CSS i verktygsfältet Arbetsyta: Klicka på > View Theme CSS. Du kan se hela temats CSS som genererats från de egenskaper som du har definierat i Theme Editor.

Felsökning, rekommendationer och bästa praxis troubleshooting-recommendations-and-best-practices

Undvika resurser från ett annat tema

När du redigerar ett tema kan du bläddra bland och lägga till resurser (till exempel bilder) från andra teman. Du redigerar till exempel bakgrunden på en sida. Om du till exempel väljer Page > Background > Add > Image visas en dialogruta där du kan bläddra bland och lägga till bilder i andra teman.
Du kan stöta på problem med det aktuella temat om en resurs läggs till från ett annat tema och det andra temat flyttas eller tas bort. Du bör undvika att bläddra bland och lägga till resurser från andra teman.

Du kan också skapa ett tema, skapa kopior av det och sedan ändra formatet som finns i de kopierade temana för liknande användningsfall.
Se Hämta specifikt utseende med teman

Temeredigeraren:

Med Theme Editor kan du skapa teman som du kan använda för att utforma formuläret <!>— eller interaktiv kommunikation —>. Du kan ange komponenternas format i ett tema, vilket ger enhetlighet i utseende och känsla i flera formulär som du utvecklar. Du bör ange formatinformation i ett tema och sedan använda temat i ett formulär.

*Textformat:

Du kan formatera komponenter med stilläget i formuläret <!>— eller interaktiv kommunikation —> flerkanaligt redigeringsprogram när du arbetar med ett formulär. Om du använder formatläge för att ändra formulärkomponentens format åsidosätts den formatering som anges i temat. Om du vill ändra format för vissa komponenter i ett visst formulär läser du Textbunden formatering av komponenter.
Ändra layoutbredd för behållarpanelen

Du bör inte ändra bredden på behållarpanelens layout. När du anger bredden på en behållarpanel blir den statisk och anpassas inte till olika skärmar.
När formulärredigeraren eller temaredigeraren ska användas för att arbeta med sidhuvud och sidfot

Använd temaredigeraren om du vill formatera sidhuvud och sidfot med formatalternativ som teckensnittsformat, bakgrund och genomskinlighet.
Om du vill ange information som logotypbild, företagsnamn i sidhuvud och copyrightinformation i sidfoten använder du alternativen för formulärredigeraren.

Se även see-also

recommendation-more-help

fbcff2a9-b6fe-4574-b04a-21e75df764ab