xetown 에서 무료로 배포해주신 덕분에 너무 잘사용하고 있습니다.
다만 회원가입 확장모듈(join_extend)사용시
약관을 초기페이지에 나타내주는데
체크박스가 보이질 않아서 선택할 수가 없는데
다른 레이아웃으로 변경하면 정상적으로 나타나는데
flat layout에선 보이질 않아 다음단계로의 진행이 어렵네요 ㅠ
(해당 페이지의 소스를 보면
<p class="checkAgreement"><input name="" type="checkbox" value="" id="checkPrivateAgreement" class="inputCheck" /><label for="checkPrivateAgreement">개인정보취급방침에 동의 합니다.</label></p>
이런식으로 코드가 있긴 있습니다.
아무래도 flatlayout의 css checkbox를 안보이게 가리는데, join_extend의 스킨에도 영향을 미친 것 같은데.. (털썩)
혹시 해결하신 분이 계시다면 조언 부탁드립니다.
![1111.png [File Size:36.7KB/Download:6]](/files/download/link/681125/35a6ed98bb6da73de1912066f17d15e6/1111.png){kind=link}
댓글 21
제가 사용한 방법은 문제가 되는 자료들마다 css요소에 !important 로 보이지 않는 것을 다시 보이게 처리 했습니다.
레이아웃단에서 안보이게 처리하다보니 그이하 모듈이나 애드온에서 전부 그게 먹어버리더군요.
css를 몰라서 !important가 안보이게 하는 명령어군요~~! 찾아보겠습니다
!important값의 경우, CSS 속성에서
background-color:yellow
background-color:red 이런 식으로 지정해 주게 되면, 나중에 적용된 red로 배경색이 나타나게 되는데요,
background-color:yellow; !important
background-color:red;
이런 식으로 지정해 주게 되면, yellow라는 속성이 중요하니 뒤에 다른 값이 오더라도 그 값을 무시하라는 의미가 됩니다. ^^
아 무슨의미인지 정확히 알곘습니다.
자칫.. yellow가 중요하지 않다라고 판단할뻔했네요..
c언어에서 !가 반대의 경우라서..
/* checkbox style */
input[type="checkbox"] {display: none;}
input[type="checkbox"] + label span {display: inline-block; line-height: 14px; vertical-align: middle;}
input[type="checkbox"] + label span.check-dummy {width: 14px; height: 14px; background-repeat: no-repeat; background-position: left top;}
input[type="checkbox"]:checked +label span.check-dummy {background-position: left -14px;}
.exvar input[type="checkbox"] {display: inline;}
이 부분이 display: none;으로 되어있었네요!
해당 부분을 지우면 보이긴하는데
다른 문제가 생길 것 같아서 못건들이겠고
join_extend/skins/default/css
에서
.joinContent input[type="checkbox"] {display: none; !important}
.joinContent input[type="checkbox"] + label span {display: inline-block; line-height: 14px; vertical-align: middle; !important}
.joinContent input[type="checkbox"] + label span.check-dummy {width: 14px; height: 14px; background-repeat: no-repeat; background-position: left top; !important}
.joinContent input[type="checkbox"]:checked +label span.check-dummy {background-position: left -14px;}
.joinContent input[type="checkbox"] {display: inline; !important}
를 추가하면 정상적으로 보입니다..
혹시 다른분들을 위해 남겨둡니다@.@
@웹지기 @라쿠 혹시 위젯이 레이아웃 메뉴를 덥쳐버리는데 이 부분은 어딜 손봐야할까요..?
리쿠님 말씀대로라면 사이드 메뉴 부분 css 뒤에 !important를 넣어주면 위젯위로 올라갈 수 있을 것 같은데
side를 담당하는 css 이름이 뭘까요?
.menu 붙은 css들이 많이 보이는데
엌 체크박스 문제는 해결했는데 ㅠ
또 위젯이 사이드 메뉴바를 덮어버리는 문제가 있네요..
이번에는 레이아웃보다 위젯이 우선순위가 더 높나보네요.
기존 레이아웃들엔 그런 문제가 없었는데
메뉴가 뒤로 숨는거로 설명하신거라면...
해당부분 z-index 를 높여주면 메뉴가 올라올듯 합니다. 그림으로 그걸 질문한건지 알수가 없네요.
아 질문이 정확하지 않아서 죄송합니다.
레이아웃 좌측 최상단에
-
-
-
버튼을 누르면 좌측에서 옆으로 나오면서 사이드 메뉴가 보이는데
저 위젯 페이지에서는 해당 버튼을 눌러도 사이드 메뉴가 뒤로가있는지 덮인건지..
다른 메뉴들의 버튼을 누를수가 없네요 ㅠ
(그림에서 나타난 것처럼 메뉴를 누르면 최상단에 로그인/회원가입 사이드 메뉴는 보이는데
그 아래 부분 메뉴들이 보이지 않아요..)
레이어를 최상단에 넣는 옵션인 것으로보아 말씀하신 대로 옵션을 주면 될 것 같네요
고맙습니다~
웹의 경우에는 레이어가 존재합니다. 그렇기 때문에 어떤 요소가 어떤 요소 위에 존재하고, 어떤 요소가 어떤 요소 밑에 존재하는지 정해줄 필요가 있죠.
이때 사용하는 속성이 z-index입니다. z축(수직축)을 기준으로 해서 얼마나 높은 위치에 존재하냐는걸 z-index 수치를 통해서 규정해 줍니다.
A[z-index : 800]
...
A[z-index : 3]
A[z-index : 2]
A[z-index : 1]
이런 식으로 z-index를 이용해서 각 레이어를 어떻게 쌓는지 알려주는 셈이죠. 만약 특정 레이어가 말씀하신대로 '윗쪽'으로 올려주는 기능이 필요할때는 z-index를 사용해줘야 합니다.
이걸 flat레이아웃 css에서 !important로 우선순위를 주면 될 것 같은데.. menu 부분 여기저기에 !important를 붙여는 보고 있는데
문제 해결은 되지 않네요;ㅁ;
잘못된 답변이었군요 ㅠ
더 감동입니다+_+
.opt_chk input[type=radio],.opt_chk input[type=checkbox]{display:inline !important;margin:0}
스케치북은 이렇게 수정하시면 됩니다.