티스토리 비밀글 체크 박스 디자인 변경하는 방법입니다.
체크 박스 디자인
<p class="secretWrap"> <input type="checkbox" name="[##_rp_input_is_secret_##]" class="checkbox" /> <label for="secret"> 비밀글 </label> </p>skin.html 문서에 비밀글 체크 부분의 Label 태그가 <label for=”secret”> 비밀글 </label> 이런 식으로 되어있으면 불가능합니다. 웹상에서 “비밀글”이란 문구를 클릭했을 때 [##_rp_input_is_secret_##] 치환자가 없어 체크 박스에 체크 반응이 없음으로 불가능 합니다.
<p class="secretWrap"> <input type="checkbox" id="[##_rp_input_is_secret_##]" name="[##_rp_input_is_secret_##]" class="checkbox" /> <label for="[##_rp_input_is_secret_##]" class="secret"> 비밀글 </label> </p> 위와 같이 label 태그에 [##_rp_input_is_secret_##] 치환자가 걸려 있어야 합니다. label 태그가 체크박스 기능을 하는지 확인하셨으면 “비밀글”이란 문구를 label 태그 밖으로 빼주시고 CSS 시트 수정해주면 됩니다.
label.secret { display:inline-block; width:14px; height:14px; border:1px solid #222; cursor:pointer; } label 태그를 이용하여 체크 박스를 만들어 줍니다. 기본적인 디자인으로 문구가 없는 공백이기 때문에 block 과 사이즈는 필수이고 테두리는 박스 표현을 해주고 커서는 손가락 모양으로 만들어줘서 기능을 하는 박스임을 알려 줍니다.
input.checkbox { display:none; }기존 체크박스는 label 태그가 대신함으로 { display:none; } 속성값으로 화면상에서 지워 줍니다.
<input type="checkbox"> id="[##_rp_input_is_secret_##]" name="[##_rp_input_is_secret_##]" class="checkbox" /> <label for="[##_rp_input_is_secret_##]" class="secret"></label> 비밀글 input.checkbox:checked + label.secret:after { content:'2714'; font-size:12px; } 체크박스에 체크가 되면 label 태그에도 체크 문양이 생깁니다.
content:’2714′; <- 체크문양 만들기, font-size:12px; <- 체크 문양 크기
임의로 만든 체크 문양이 배경색과 같이 안보일수 있으니 색상도 지정해주면 편합니다. 이미지를 사용하여 사용할 수도 있고 체크 박스 디자인 마음것 변경 가능 합니다.
방명록도 같은 방법으로 가능합니다. 방명록과 댓글에 label 태그에 같은 이름 속성으로 걸려 있다면 한 번에 변경됩니다. 비밀글이라는 문구 위치가 조금 애매해질 것인데 저는 그냥 <span>으로 감싸고 { position:absolute } 띄워 버렸습니다. ^^;;
input.checkbox { display:none; } label.secret { display:inline-block; width:14px; height:14px; border:1px solid #222; cursor:pointer; } input.checkbox:checked + label.secret:after { content:'2714'; font-size:12px; }