우커머스 예약 – CSS 스타일

우커머스 예약 – CSS 스타일

사용자 화면에서 WooCommerce Bookings 캘린더의 색상을 변경하려면 몇 가지 CSS 스타일을 수정하면 됩니다.

WordPress에 자식 테마를 사용하지 않거나 테마에서 사용자 지정 CSS를 입력할 수 없는 경우 사용자 지정 CSS 편집기가 내장된 Jetpack 플러그인을 설치할 수 있습니다.

참고: 이것은 개발자 수준의 문서입니다. 코드에 익숙하지 않고 잠재적 충돌을 해결하는 경우 WooExpert 또는 개발자에게 도움을 요청하십시오. 우커머스 지원 정책에 따라 사용자 지정에 대한 지원을 제공하지 않는다고 합니다.

아래는 다양한 캘린더 요소(Elements)의 스타일입니다.

/* 
WooCommerce Bookings datepicker 캘린더의 색상 스타일을 수정합니다.
현재 밑의 CSS는 모두 검은색으로 되어있으므로 모두 변경해야 합니다.
색상 16진수(hex) 코드로 지정합니다.
*/

/* 월 헤더 배경색 */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker-header {
	background-color: #000000;
}

/* 이전 / 다음 달 화살표 배경색 */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-next, 
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker .ui-datepicker-prev {
	background-color: #000000;
}

/* 허용되지 않는 경우 이전 / 다음 달 화살표, 사용할 수 없는 달력 날짜 */
.ui-state-disabled, 
.ui-widget-content .ui-state-disabled, 
.ui-widget-header .ui-state-disabled {
	opacity: 0.35;
}

/* 요일 헤더 배경색 */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th {
	background-color: #000000;
}

/* 요일 헤더 글꼴 색상 */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker th {
	color: #000000;
}

/* 과거 그리고 사용 불가능한 캘린더 배경 색상 (사용 불가능) */
.ui-datepicker-calendar tbody {
	background-color: #000000;
}

/* 사용 가능한 달력 날짜 배경색 */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a {
	background-color: #000000 !important;
}

/* 사용 가능한 달력 일 호버 배경색 */
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.bookable a:hover {
	background-color: #000000 !important;
}

/* 완전히 예약된 날짜 */
.wc-bookings-date-picker .ui-datepicker td.fully_booked a, 
.wc-bookings-date-picker .ui-datepicker td.fully_booked span {
	background-color: #000000 !important;
}

/* 완전히 예약된 달력 날짜 색상 투명도 */
 .wc-bookings-date-picker .ui-datepicker td.ui-state-disabled {
	opacity: .35;
 }


/* 가능 여부 규칙에 따라 예약할 수없는 날짜 */
.wc-bookings-date-picker .ui-datepicker td.not_bookable {
	background-color: #FFFFFF !important;
}

/* 달력 배경색의 오늘 날짜 */ 
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-today a { 
	background-color: #000000 !important; 
}

/* 시간 블록 */
#wc-bookings-booking-form .block-picker li a {
	background-color: #FFFFFF !important;
}

/* 시간 블록 호버 */
#wc-bookings-booking-form .block-picker li a:hover {
	background-color: #000000 !important;
}

/* 선택된 날짜 */ 
#wc-bookings-booking-form .wc-bookings-date-picker .ui-datepicker td.ui-datepicker-current-day a {
	background-color: #000000 !important; 
} 

/* 선택된 시간 블록 */ 
#wc-bookings-booking-form .block-picker li a.selected { 
background: #ffffff !important; 
}

원문: https://docs.woocommerce.com/document/woocommerce-bookings-calendar-css-style-elements/

코멘트 제출