CSS 코드를 사용하여 양식 사용자화하기

기본 제공 양식 디자이너 외에도 양식 빌더에서 CSS를 사용하여 양식을 사용자화할 수도 있습니다. 이 가이드에는 양식에서 시도하거나 사용할 수 있는 CSS 코드의 몇 가지 예가 포함되어 있습니다. 양식에 CSS를 적용하려면 사용자 정의 CSS 코드 삽입을 참조하십시오 .

페이지에 배경 이미지 추가

다음 CSS 코드를 사용하면 양식에 대한 사용자 정의 배경 이미지를 추가할 수 있습니다.

.supernova {
background-image: url('{image_url}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}

{image_url} 을 원하는 배경화면 이미지 URL로 대체하세요.

페이지 배경을 투명하게 만들기

임베드 양식에서 유용하며, 웹 페이지의 배경을 사용하기 위해 양식이 필요한 경우 다음 코드를 사용할 수 있습니다.

.supernova, body {
background: none;
}

양식 배경을 투명하게 만들기

다음 코드는 양식의 배경과 그림자를 제거하여 평평하고 투명하게 만듭니다.

.form-all {
background: none !important;
box-shadow: none;
}

양식 위의 간격 제거

임베드 양식에 유용한 다음 코드는 양식 위의 추가 공간을 제거합니다.

body, .form-all {
margin-top: 0;
}

머리글 배경색 변경

다음 코드를 사용하여 양식에 있는 모든 머리글 요소의 배경색을 변경합니다.

.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}

부제목 색상 변경

다음 코드는 모든 머리글 요소의 하위 제목의 텍스트 색상을 변경합니다.

.form-subHeader {
color: #00b000 !important;
}

모든 하위 레이블 색상 변경

다음 CSS 코드를 사용하여 양식의 모든 하위 레이블 색상을 변경하십시오.

.form-sub-label {
color: #ffb21d;
}

하이라이트 효과 색상 변경

다음 코드를 사용하여 입력 필드의 배경 강조 표시를 변경할 수 있습니다.

.form-line-active {
background: #ccffcc;
}

양식 필수항목의 별 색상 변경

기본적으로 빨간색이며 아래 코드는 필드의 “필수” 표시를 변경합니다.

.form-required {
color: cyan !important;
}

양식을 왼쪽으로 정렬

임베드 양식에 유용하며 다음 코드를 사용하여 양식을 왼쪽으로 이동할 수 있습니다.

.form-all {
margin: 0;
}

양식을 사용자 정의하는 데 도움이 필요하면 언제든지 Jform 지원 에 문의해주세요.