원터치 주문서의 스타일을 변경하고 싶어요.

CSS 스타일 변경 방법

1. 사용자 스타일 수정이 필요한 경우 [관리자] 디자인 > 디자인 보관함 에서 스마트 디자인 편집창으로 접속 후 좌측의 화면 추가를 클릭해주세요.

2. 쇼핑몰 화면 추가를 클릭 후 'css > 모듈(module) > 주문(order)' 폴더를 선택하시고,
   파일명에 'form_onetouch_user.css' 이름의 신규 CSS 파일을 생성하세요.

3. 해당 파일에 수정이 필요한 정보를 입력해 주세요. 이 때, form_onetouch_user.css에서 #userStyle #mCafe24Order { }를 사용해야 스타일 적용이 가능해요.

4. 주문서 작성(orderform.html)을 아래와 같이 세팅할 경우 form_onetouch_user.css의 입력 내용이 우선 적용되어요. 정의되지 않은 스타일의 경우 form_onetouch.css의 자동 업그레이드 스타일이 적용되어요.

   ▼ 아래와 같이 파란색 소스를 추가해 주세요.

     <!--@css(/css/module/order/form_onetouch.css)-->
     <!--@css(/css/module/order/form_onetouch_user.css)-->

    

원터치 주문서의 라디오 버튼 / 체크박스 디자인을 변경하고 싶어요.

원터치 주문서에 사용되는 선택 요소

편리한 모바일 쇼핑 경험을 제공하기 위해 원터치 주문서는 일반적인 라디오 버튼과 체크 박스 디자인보다 큰 디자인을 사용하고 있어요. 이로 인해 작은 모바일 화면 내에서도 선택 및 취소 액션을 쉽게 할 수 있어요.

라디오 버튼 / 체크 박스 디자인 변경 방법

1. FTP를 이용하여 변경하려는 라디오 버튼과 체크박스 디자인을 업로드 하세요.

2. [관리자] 디자인 > 디자인 보관함 에서 스마트 디자인 편집창으로 접속 후 좌측의 화면 추가를 클릭해주세요.

3. 쇼핑몰 화면 추가를 클릭 후 'css > 모듈(module) > 주문(order)' 폴더를 선택하시고,

   파일명에 'form_onetouch_user.css' 이름의 신규 CSS 파일을 생성하세요.

4. ▼ 아래와 같이 파란색 소스를 추가해 주세요.

   #mCafe24Order input[type="checkbox"] {margin:0; width:24px; height:24px; border:0; cursor:pointer; background:url("체크박스(미선택 상태) 이미지 경로 및 파일명 입력") no-repeat 0 0; background-size:24px 24px; -webkit-appearance:none; }
   #mCafe24Order input[type="radio"] { margin:0; width:25px; height:25px; border:0; cursor:pointer; background:url("일반 라디오 버튼(미선택 상태) 이미지 경로 및 파일명 입력") no-repeat 0 0; background-size:25px 25px; -webkit-appearance:none; }
   #mCafe24Order .fRadio[type="radio"] { width:33px; height:33px; background-image:url("배송지 목록/결제수단에 표시될 라디오 버튼(미선택 상태) 이미지 경로 및 파일명 입력"); background-size:33px 33px; }
   #mCafe24Order input:not(:disabled):checked[type="checkbox"] { background-image:url("체크박스(선택 상태) 이미지 경로 및 파일명 입력"); -webkit-appearance:none; }
   #mCafe24Order input:not(:disabled):checked[type="radio"] { background-image:url("일반 라디오 버튼(선택 상태) 이미지 경로 및 파일명 입력"); -webkit-appearance:none; }
   #mCafe24Order .fRadio:not(:disabled):checked[type="radio"],
   #mCafe24Order .selected > .fRadio { background-image:url("배송지 목록/결제수단에 표시될 라디오 버튼(선택 상태) 이미지 경로 및 파일명 입력"); }
   #mCafe24Order input:disabled[type="checkbox"] { background-image:url("체크박스(비활성화 상태) 이미지 경로 및 파일명 입력"); -webkit-appearance:none; }

    

5. 주문서 작성(orderform.html)를 아래와 같이 세팅할 경우 form_onetouch_user.css의 입력 내용이 우선 적용되어요. 정의되지 않은 스타일의 경우 form_onetouch.css의 자동 업그레이드 스타일이 적용되어요.

   ▼ 아래와 같이 파란색 소스를 추가해 주세요.

     <!--@css(/css/module/order/form_onetouch.css)-->
     <!--@css(/css/module/order/form_onetouch_user.css)-->