주 콘텐츠로 건너뛰기

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

원하는 이미지 업로드 후, form_onetouch_user.css에 새 이미지 경로를 지정해 주세요.

 

자세히 알아보기

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

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

 

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

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

    2. [관리자] 디자인 > 디자인 보관함 에서 스마트 디자인 편집창의 '전체화면 보기 > css > 모듈(module) > 주문(order)'에 form_onetouch_user.css 파일을 생성하여 소스를 추가하고, 각 이미지 경로 및 파일명을 입력하세요.

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

      #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; }

       

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

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

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

       

 

Note

  • 미선택 또는 비활성화 상태의 라디오 버튼과 체크 박스 디자인을 변경하지 않을 경우 'form_onetouch_user.css'에서 관련 선언을 제거하세요.
  • 원본 CSS 파일인 'form_onetouch.css'에 기입된 내용을 참고하여 'form_onetouch_user.css'에 원하는 값을 입력하면 더욱 쉽게 작업할 수 있어요.

  • 커스텀 파일인 form_onetouch_user.css의 경우 자동 업그레이드되지 않아요.

  • form_onetouch.css 참조 문구를 삭제하게 되면 주문서 기능 업그레이드 시 신규 기능 관련 디자인이 정상 작동하지 않을 수 있으므로 유의해 주세요.

 

연관 콘텐츠

이 페이지가 도움이 되었나요?
현재 콘텐츠