위젯 스킨 자료실
글수 194
| 라이센스 | GPL2 |
|---|---|
| 기타 라이센스 | 제홈페이에 사용중인 탭방식의 최근 게시물 |
| 적용 버전 | 정식버전(1.0이후) |
미천한 실력에 탭 최근게시물 스킨에 한번 도전해 봤습니다.
애플스킨이었던가요?? 최근 게시물에 사용되었던..
아무튼 그 스킨의 테두리 소스를 거의 그래도 가져와 옷만 입혀 보자는 생각으로 시작했는데.. 이게 만만치가 않네요..
아직 너무 이상한 형태로 공개하기 두렵지만..
그래도 어느정도까지는 봐줄만 한것 같고.. 그냥 그대로 쓸분도 혹시나 있을것 같기도 해서..
고수님들의 조언 + 수정을 바라기에 이렇게 용기내어 올려봅니다.^^;;

좌측이 올린 스킨이고, 우측은 기존 스킨입니다. 딱봐도 별 차이는 없죠.. ㅡ.ㅡ;;
그냥 테두리에 옷만 입혔습니다.
그런데 문제가 좀 있습니다. 머리를 잘쓰면 해결이 될것도 같은데 방법도 실력도 모자라네요..
좌측 상단의 빨강색 동그라미 부분에 1px정도 라인이 생깁니다.
아주 보기 싫진 않지만 신경은 쓰이네요..
이건 상단 좌측이 이미지라서 어쩔수 없이 발생한 문제 같기도 하지만..
배치만 잘하면 해결될줄 알고 계속 시도해봤는데.. 적당한 방법이 떠오르지가 않네요..
(고수님들 방법좀 알려주세요..!!!!)
그리고 더 심각한 문제는 IE6에서 일어나는데요... ㅡ.ㅡ;;

혹시나 하고 IE6에서도 한번 보니... 역시나 이렇게 되네요..
수정하고 싶은데 실력의 한계가 벽이 됩니다.
일단 올려놓고.. 배우면서 수정할 생각에 무턱되고 올렸습니다.
너그러히 봐주세요^^
실제 적용은 http://www.uyano.com/bbs/ 여기서 보시면 됩니다.
설치는 /zbxe/widgets/tab_newest_document/skins/ 에 올리시면 되겠네요..
------------------------------------------------------------------------------------------------------------------
08.4.10 수정 내용
비나무님께서 수정을 위해 힘써주시고 계신데요..
일단 올려주신 첫번째 올려주신 IE6에서의 여백문제와
아래서 지적된 좌우라인 이미지 색상문제만 해결한걸 다시 올립니다.
일단 제가 만든 허접소스는 고수님들의 수정을 위해 건드리지 않습니다. ^^;;
좀더 깔끔한걸 원하시면 비나무님 댓글에 있는 비나무님 수정본을 받으시면 좋겠네요..
애플스킨이었던가요?? 최근 게시물에 사용되었던..
아무튼 그 스킨의 테두리 소스를 거의 그래도 가져와 옷만 입혀 보자는 생각으로 시작했는데.. 이게 만만치가 않네요..
아직 너무 이상한 형태로 공개하기 두렵지만..
그래도 어느정도까지는 봐줄만 한것 같고.. 그냥 그대로 쓸분도 혹시나 있을것 같기도 해서..
고수님들의 조언 + 수정을 바라기에 이렇게 용기내어 올려봅니다.^^;;

좌측이 올린 스킨이고, 우측은 기존 스킨입니다. 딱봐도 별 차이는 없죠.. ㅡ.ㅡ;;
그냥 테두리에 옷만 입혔습니다.
그런데 문제가 좀 있습니다. 머리를 잘쓰면 해결이 될것도 같은데 방법도 실력도 모자라네요..
좌측 상단의 빨강색 동그라미 부분에 1px정도 라인이 생깁니다.
아주 보기 싫진 않지만 신경은 쓰이네요..
이건 상단 좌측이 이미지라서 어쩔수 없이 발생한 문제 같기도 하지만..
배치만 잘하면 해결될줄 알고 계속 시도해봤는데.. 적당한 방법이 떠오르지가 않네요..
(고수님들 방법좀 알려주세요..!!!!)
그리고 더 심각한 문제는 IE6에서 일어나는데요... ㅡ.ㅡ;;

혹시나 하고 IE6에서도 한번 보니... 역시나 이렇게 되네요..
수정하고 싶은데 실력의 한계가 벽이 됩니다.
일단 올려놓고.. 배우면서 수정할 생각에 무턱되고 올렸습니다.
너그러히 봐주세요^^
실제 적용은 http://www.uyano.com/bbs/ 여기서 보시면 됩니다.
설치는 /zbxe/widgets/tab_newest_document/skins/ 에 올리시면 되겠네요..
------------------------------------------------------------------------------------------------------------------
08.4.10 수정 내용
비나무님께서 수정을 위해 힘써주시고 계신데요..
일단 올려주신 첫번째 올려주신 IE6에서의 여백문제와
아래서 지적된 좌우라인 이미지 색상문제만 해결한걸 다시 올립니다.
일단 제가 만든 허접소스는 고수님들의 수정을 위해 건드리지 않습니다. ^^;;
좀더 깔끔한걸 원하시면 비나무님 댓글에 있는 비나무님 수정본을 받으시면 좋겠네요..

나의 zbXE 홈페이지
http://www.uyano.com/
내가 만든 스킨들을 공휴합니다. 놀러오세요^^*
2008.04.08 16:50:43 (*.180.186.65)
일단 IE6에서 오른쪽 부분 공간이 뜨는 부분은 해결을 했는데,
첫번째 탭의 좌측 이미지 처리 부분 때문에 조금 고민이 되네요.. ㅡㅡ;;;;
그 부분 수정이 되면 수정본 올려드릴게요.
첫번째 탭의 좌측 이미지 처리 부분 때문에 조금 고민이 되네요.. ㅡㅡ;;;;
그 부분 수정이 되면 수정본 올려드릴게요.
2008.04.08 17:28:02 (*.180.186.65)
그런데 우야노님...
IE6에서 가끔 탭이 안 나오는 경우가 있지 않나요?
외부 내용없는 부분을 클릭해야만 나오는...
기본으로 돌려도 그렇게 나오는 경우가 꽤 자주 있던데???
일단 퇴근 시간이 넘어서 집에 가서 더 연구해 볼게요.
혹시 IE6에서 오른쪽에 배경이 삐져나오는 문제 때문에 꺼려지시는 분은...
18번째 줄을 아래와 같이 고쳐보세요.
.uyano_tapbox .on div { float:left; margin-top:1px; height:13px; background:#ffffff; border-bottom:6px solid #FFFFFF; font-size:8pt; padding:7px 9px 0 9px; margin-right:4px; _margin-right:2px; font-weight:bold; color:orange; }
진한 파란색으로 표시된 부분이 IE6 때문에 넣은 부분입니다.
다른 분들이 첫번째 이미지 부분 해결하실 수 있으면 더 좋고요.
이래 저래 머리를 써봐도 프로그래밍에 문외한이라 첫번째 이미지에 대한 부분 처리가 어렵네요.. ㅡㅡ;;
IE6에서 가끔 탭이 안 나오는 경우가 있지 않나요?
외부 내용없는 부분을 클릭해야만 나오는...
기본으로 돌려도 그렇게 나오는 경우가 꽤 자주 있던데???
일단 퇴근 시간이 넘어서 집에 가서 더 연구해 볼게요.
혹시 IE6에서 오른쪽에 배경이 삐져나오는 문제 때문에 꺼려지시는 분은...
18번째 줄을 아래와 같이 고쳐보세요.
.uyano_tapbox .on div { float:left; margin-top:1px; height:13px; background:#ffffff; border-bottom:6px solid #FFFFFF; font-size:8pt; padding:7px 9px 0 9px; margin-right:4px; _margin-right:2px; font-weight:bold; color:orange; }
진한 파란색으로 표시된 부분이 IE6 때문에 넣은 부분입니다.
다른 분들이 첫번째 이미지 부분 해결하실 수 있으면 더 좋고요.
이래 저래 머리를 써봐도 프로그래밍에 문외한이라 첫번째 이미지에 대한 부분 처리가 어렵네요.. ㅡㅡ;;
2008.04.10 00:33:23 (*.138.49.224)
이거 탭방식 스킨 수정하다 예전에 겪었던 문제 인데 어찌 어찌 해결했는데..
기억이 가물 하네요...
시간 될때 스킨 다운받아서 코드좀 봐야겠음다 ^^

올리신 스킨의 좌우측 이미지와 탭을 감싸고 있는 테두리 색갈이 맞지 않네요? ^^
기억이 가물 하네요...
시간 될때 스킨 다운받아서 코드좀 봐야겠음다 ^^

올리신 스킨의 좌우측 이미지와 탭을 감싸고 있는 테두리 색갈이 맞지 않네요? ^^
2008.04.10 01:13:38 (*.135.224.72)
우야노님 탭방식 최근 게시물의 문제점의 일부를 수정한 파일을 첨부파일로 올려드립니다.
위에 나왔듯이 IE6의 경우 오른쪽의 배경 이미지가 삐져나오는 문제가 있는데 해결했습니다.
IE6에서는 한 가지 문제가 더 있더군요.
탭 간의 이동시 폭값이 왔다갔다 하는 문제요.
그래서 핵을 이용해서 최대한 비슷하게 보이도록 조정했습니다.
그리고 테두리의 색상이 약간 차이가 있는 문제를 수정했고요.
div가 나중에 수정하려 할 때 찾기가 어려운 문제가 있어서 div를 정리를 좀 했습니다.


위에 보시는 것처럼 첫번째 이미지 처리 문제는 해결은 못했습니다만,
캡쳐에서 보시는 것처럼 테두리가 깨끗하게 보이는 것이 차라리 났겠다 싶어서 이미지를 약간 수정했습니다.
보기에는 더 깨끗하게 보이더군요... ^^;;;;;;;
수정본을 사용하시려면 uyano_tapbox.zip 을 다운로드 받으시면 됩니다.
첫번째 이미지 처리 문제는 고수분들이 해결해 주셔야 할 듯...
위에 나왔듯이 IE6의 경우 오른쪽의 배경 이미지가 삐져나오는 문제가 있는데 해결했습니다.
IE6에서는 한 가지 문제가 더 있더군요.
탭 간의 이동시 폭값이 왔다갔다 하는 문제요.
그래서 핵을 이용해서 최대한 비슷하게 보이도록 조정했습니다.
그리고 테두리의 색상이 약간 차이가 있는 문제를 수정했고요.
div가 나중에 수정하려 할 때 찾기가 어려운 문제가 있어서 div를 정리를 좀 했습니다.


위에 보시는 것처럼 첫번째 이미지 처리 문제는 해결은 못했습니다만,
캡쳐에서 보시는 것처럼 테두리가 깨끗하게 보이는 것이 차라리 났겠다 싶어서 이미지를 약간 수정했습니다.
보기에는 더 깨끗하게 보이더군요... ^^;;;;;;;
수정본을 사용하시려면 uyano_tapbox.zip 을 다운로드 받으시면 됩니다.
첫번째 이미지 처리 문제는 고수분들이 해결해 주셔야 할 듯...
2008.04.10 05:02:51 (*.24.179.190)
비나무님 감사합니다.
저도 문제가 완전히 해결될때까지는 비나무님이 올려주신 수정본 써야겠네요..
그리고 탭출력문제는 안될리가 없을겁니다. 그 부분은 손도 안된거라서 ^^;;;
제가 올려놓고 저는 점점 손도 못데는 영역으로 넘어가버린것 같습니다. @@ 그리고...
님 기대할께요. 해결하신적인 있다고 하셔서 더 기대됩니다.
꼭~좀 수정해 주세요^^
2008.04.11 01:46:08 (*.177.113.67)
계속 수정 할라다 수정할라다 일이 생기고 반복되네요 ㅋㅋ
수정하다말았는데 시간이 없어서 몇가지만 말씀 드리겠음다..
탭 박스중 메뉴 블럭을 재배치 하신다 보면 됩니다.
블럭을 아래로 1칸 좌로 1칸 이동이죠..
9 라인의 padding:0px 2px 3px 2px; 값중 마지막 2px 값을 1로 수정하면 좌1픽셀이 사라 짐다..
16, 18 라인의 margin-top:1px; height:13px; 값을 margin-top:2px; height:12px; 해주면 아래로 1칸이 내려간거죠.
(절대값이 있으므로 13은 12로 바꾸어준거죵)
일케하면 좌측 1픽셀은 사라집니다.
ie6 에서의 밀림 현상은 아직 않봤음다..
2008.04.11 19:57:58 (*.135.224.72)
IE6에서의 밀림현상은 역시 IE6의 박스버그와 관련이 있더군요...
그래서, 위의 핵을 사용한 줄(18번째 줄)을,
.uyano_tapbox .on div { float:left; margin-top:1px; height:13px; background:#ffffff; border-bottom:6px solid #FFFFFF; font-size:8pt; padding:7px 9px 0 9px; _padding:7px 11px 0 11px; margin-right:4px; _margin-right:2px; font-weight:bold; color:orange; }
위와 같이 IE6를 위한 핵을 한번 더 사용하여 좌측 패딩값을 조정한 것입니다.(분홍색 진한 글씨 부분입니다)
그러면 그 현상이 거의 사라지죠... ^^;;
저 값만 잘 조절하면 밀림현상이 안 보이도록 설정할 수 있을 듯... ^^;;
그래서, 위의 핵을 사용한 줄(18번째 줄)을,
.uyano_tapbox .on div { float:left; margin-top:1px; height:13px; background:#ffffff; border-bottom:6px solid #FFFFFF; font-size:8pt; padding:7px 9px 0 9px; _padding:7px 11px 0 11px; margin-right:4px; _margin-right:2px; font-weight:bold; color:orange; }
위와 같이 IE6를 위한 핵을 한번 더 사용하여 좌측 패딩값을 조정한 것입니다.(분홍색 진한 글씨 부분입니다)
그러면 그 현상이 거의 사라지죠... ^^;;
저 값만 잘 조절하면 밀림현상이 안 보이도록 설정할 수 있을 듯... ^^;;
2008.04.20 10:10:31 (*.34.136.30)
우야노님 탭 순서를 바꿀수 있나요?
공지사항을 좌측 첫번째에 두고 싶은데 자꾸 다른 게시판이 좌측 첫번째에 먼저 오네요.







우야노님도 이제 스킨까지 만드시네요...
탭방식의 최근게시물 스킨은 첨인것 같네요.
좋은 자료 올려주셔서 감사합니다.