적응형 양식 스타일 지정 do-not-publish-style-your-adaptive-form

편집할 적응형 양식을 엽니다.

http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

적응형 양식 컨테이너 ​의 속성을 엽니다. 속성 브라우저에서 기본 > 적응형 양식 테마 ​로 이동합니다. 적응형 양식 테마 필드에는 기본 테마 및 사용자 지정 테마가 모두 나열됩니다. 기본적으로 캔버스 테마가 적용됩니다.

적응형 양식 테마 필드에서 테마를 선택합니다. 예: 설문 조사 테마. 선택한 테마를 적용할 수 있도록 를 선택하십시오.

그림: 기본 테마를 사용하는 적응형 양식

그림: 설문 조사 테마를 사용한 적응형 양식

헤더의 기존 로고 및 텍스트를 변경합니다. 로고를 제거하려면:

1. 양식 편집기에서 양식을 엽니다.

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. header 구성 요소에서 로고 이미지를 선택하고 속성 ​을 선택합니다. image 속성에서 X를 선택하여 기존 로고 이미지를 제거합니다.

3. 업로드 ​를 선택하고 logo.png를 선택한 다음 를 선택하여 변경 내용을 저장합니다. 시작하기 전에 섹션에 이미지가 다운로드되었습니다.

4. 헤더 텍스트 We.Retail을(를) 선택하고 edit ​을(를) 선택합니다. 헤더 텍스트를 we retail(으)로 변경합니다. we retail의 we에만 굵게 서식을 적용합니다.

   

제목을 제거하고 자리 표시자 텍스트를 추가합니다.

1. 고객 ID 필드를 선택하고 속성을 선택합니다.

2. 제목 필드의 내용을 자리 표시자 텍스트 필드에 복사합니다.

3. 제목 필드의 내용을 삭제하고 를 선택합니다.

4. 양식의 모든 텍스트 상자, 숫자 상자 및 전자 메일 필드에 대해 이전 세 단계를 반복합니다.

   

AEM 작성자 인스턴스에 로그인하고 Adobe Experience Manager > Forms > 테마(으)로 이동합니다. 기본 URL은 http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes입니다.

만들기 ​를 선택하고 테마 ​를 선택합니다. 테마를 만드는 데 필요한 필드가 있는 테마 만들기 페이지가 나타납니다. 제목 및 이름 필드는 필수입니다.

• 제목: 테마의 제목을 지정합니다. 예: 전역 테마. 제목을 사용하면 테마 목록에서 테마를 식별할 수 있습니다.
• 이름: 테마의 이름을 지정합니다. 예: 전역 테마. 지정한 이름의 노드가 저장소에 만들어졌습니다. 제목 입력을 시작하면 이름 필드에 대한 값이 자동으로 생성됩니다. 제안 값을 변경할 수 있습니다. 이름 필드에는 영숫자 문자, 하이픈 및 밑줄만 포함될 수 있습니다. 잘못된 모든 입력은 하이픈으로 대체됩니다.

만들기 ​를 선택합니다. 테마가 만들어지고 편집할 양식을 여는 대화 상자가 나타납니다. 새 탭에서 새로 만든 테마를 열려면 열기 ​를 선택합니다. 테마가 테마 편집기에서 열립니다. 스타일링을 위해 테마 편집기는 AEM Forms과(와) 함께 제공되는 기본 적응형 양식을 사용합니다.

테마 편집기 UI 사용에 대한 자세한 내용은 테마 편집기 정보를 참조하십시오.

테마 옵션 > 구성 ​을 선택합니다. 미리 보기 양식 필드에서 배송 주소 추가 업데이트 양식 적응형 양식을 선택하고 를 선택한 다음 저장 ​을 선택합니다. 이제 테마 편집기는 기본 적응형 양식 대신 고유한 적응형 양식을 사용하도록 구성되었습니다. 테마 편집기로 돌아가려면 취소 ​를 선택하십시오.

그림: 배송 주소 추가 업데이트 양식 적응형 양식이 있는 테마 편집기

그림: 기본 양식이 있는 적응형 양식

선택기 패널에서 머리글 > 텍스트 옵션을 탐색합니다. 선택기 패널은 테마 편집기의 왼쪽에 있습니다. 패널이 표시되지 않으면 사이드 패널 전환을 선택합니다.

텍스트 아코디언에서 다음 속성을 설정하고 를 선택합니다.

헤더 위젯을 선택하고 헤더 ​을(를) 선택합니다. 헤더 위젯의 스타일을 지정하는 옵션이 왼쪽에 나타납니다. Dimension 및 위치 아코디언을 확장하고 높이 ​을(를) 120px(으)로 설정한 다음 을(를) 선택합니다.

헤더 위젯의 배경 아코디언을 확장하고 배경색 ​을 F6921E.(으)로 설정합니다.

이미지 및 그라데이션 > + 추가 위로 마우스를 가져간 후 이미지 ​를 선택하십시오. 다음 속성을 설정하고 을(를) 선택합니다.

테마 편집기에서 헤더에서 로고를 선택하고 헤더 로고 ​를 선택합니다. Dimension 및 위치 아코디언을 확장하고 다음 속성을 설정한 다음 를 선택합니다.

바닥글 위젯을 선택하고 바닥글 ​을(를) 선택합니다. 배경 아코디언을 확장하고 배경색 ​을(를) F6921E(으)로 설정한 다음 을(를) 선택합니다.

고객 ID 필드를 선택하고 필드 위젯 옵션을 선택하십시오. 다음 속성을 설정하고 을(를) 선택합니다.

고객 ID 필드 위에 빈 영역을 선택하고 반응형 패널 컨테이너 ​를 선택합니다. 배경 > 배경색 ​을(를) F1F2F2로 설정합니다. 를 선택합니다.

제출 단추를 선택하고 단추 옵션을 선택합니다. 다음 속성을 설정하고 을(를) 선택합니다.

사용자 지정 테마, 전역 테마를 적응형 양식에 적용하세요. 스타일이 적응형 양식에 반영되지 않으면 브라우저 캐시를 지우고 다시 시도하십시오.

편집할 적응형 양식을 엽니다. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

상단 표시줄에서 스타일 옵션을 선택합니다.

첨부 단추를 선택하고 아이콘을 선택합니다. Dimension 및 위치 아코디언에서 다음 속성을 설정합니다.

정부 승인 주소 증명 옵션을 선택하고 아이콘을 선택합니다. 다음 속성을 설정합니다.

제출 단추를 선택하고 아이콘을 선택합니다. 다음 속성을 설정합니다.

원하는 글꼴이 있는 경우 </> 단추를 클릭하여 웹 프로젝트에 패밀리를 추가합니다.

웹 프로젝트에 글꼴 추가 대화 상자가 나타납니다.

웹 프로젝트의 이름을 지정합니다.

포함할 글꼴 가중치와 스타일을 선택하려면 확인란을 선택합니다.

프로젝트를 만들려면 클릭 ​을(를) 선택하십시오.

화면에서 포함 코드와 URL을 복사합니다.

웹 프로젝트 창을 닫으려면 완료 ​를 클릭하십시오.

AEM 인스턴스에 로그인하고 URL http://server:port/crx/de/index.jsp#(으)로 이동합니다.

CRXDE에 폴더 구조를 만듭니다(예: /apps/[fontslibrary]/[customlibrary(clientlibrary)]).

새로 만든 clientlibs 폴더로 이동하여 allowProxy 및 categories 속성을 추가하십시오.

/apps/[fontslibrary]/[customlibrary(clientlibrary)](으)로 이동하여 css 폴더를 만듭니다.

생성된 CSS 폴더로 이동하여 파일을 만듭니다. 예를 들어 파일을 fonts.css(으)로 만들고 포함 코드를 URL과 함께 붙여 넣습니다.

변경 사항을 저장합니다.