간단한 메인 베스트 상품 진열 스킨입니다.
베스트 상품에 best라는 라벨과 간단한 이미지 마우스오버 효과를 넣은 스킨입니다.
파일은 img 폴더, 롤어버 jquery폴더, 스킨파일, 스타일 시트 로 구성되어 있습니다.
main90.skin.php 파일은
/skin/shop/사용하는 스킨 폴더에 업로드 해 주신 후 관리자 페이지에서 원하시는 항목에 해당 스킨 사용설정을 해 주시면 됩니다.
img폴더는
폴더의 이미지를 /skin/shop/사용하는 스킨/img 에 넣어 주세요
롤오버 jquery 는
/plugin 폴더에 업로드 해주시면 됩니다.
style.css 파일은 style.css 파일의 내용을 복사하신 후 /skin/shop/사용하는 스킨/style.css 파일을 여신 후 붙여 넣기 해 주세요
/* 참고사항 */
best 라벨은 8 까지만 이미지가 있습니다. 9, 10, 11, 12 까지 만드시려면 img 폴더에 첨부된 psd파일로 만드시면 될거에요.
스킨은 넓이 960px에 상품의 이미지 사이즈는 208 x 208 입니다. 사용하시는 분의 사이트에 맞게 이미지를 변경하실때 jquery 롤오버 내에 있는 스타일 시트의 사이즈도 변경해 주세요. 그렇지 않으면 마우스 오버시 크기가 맞지 않습니다.
ie7.0 에서까지 정상 작동되는 것 확인했습니다. 궁금한 점은 댓글로 남겨주시면 확인하는대로 답변 드릴게요.
허접하지만 조금이나 도움이 되었으면 합니다. 감사합니다.
미리보기 http://lental2.dlike.co.kr
파일은 img 폴더, 롤어버 jquery폴더, 스킨파일, 스타일 시트 로 구성되어 있습니다.
main90.skin.php 파일은
/skin/shop/사용하는 스킨 폴더에 업로드 해 주신 후 관리자 페이지에서 원하시는 항목에 해당 스킨 사용설정을 해 주시면 됩니다.
img폴더는
폴더의 이미지를 /skin/shop/사용하는 스킨/img 에 넣어 주세요
롤오버 jquery 는
/plugin 폴더에 업로드 해주시면 됩니다.
style.css 파일은 style.css 파일의 내용을 복사하신 후 /skin/shop/사용하는 스킨/style.css 파일을 여신 후 붙여 넣기 해 주세요
/* 참고사항 */
best 라벨은 8 까지만 이미지가 있습니다. 9, 10, 11, 12 까지 만드시려면 img 폴더에 첨부된 psd파일로 만드시면 될거에요.
스킨은 넓이 960px에 상품의 이미지 사이즈는 208 x 208 입니다. 사용하시는 분의 사이트에 맞게 이미지를 변경하실때 jquery 롤오버 내에 있는 스타일 시트의 사이즈도 변경해 주세요. 그렇지 않으면 마우스 오버시 크기가 맞지 않습니다.
ie7.0 에서까지 정상 작동되는 것 확인했습니다. 궁금한 점은 댓글로 남겨주시면 확인하는대로 답변 드릴게요.
허접하지만 조금이나 도움이 되었으면 합니다. 감사합니다.
미리보기 http://lental2.dlike.co.kr
첨부파일
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 23개
감사합니다. 잘 쓸게요.
아름다운수님처럼 메뉴가 상단으로 나타나게 하려면 어떻게 해야 하나요?
스킨이 따로 있는건지요?
아니면 참조할게 있는지요?
아름다운수님의 네비게이션메뉴가 너무 이뻐서 질문올렸는데 답변달아주셔서 너무감사합니다.
그런데 배우면서 하려니까 어려움이 많네요.
혹시 할인율까지 표시가 가능할까요?
근데 아름다운수님처럼 게시판을 세로로 배열하려면 어디를 고쳐야하나요?
감사한 마음으로 잘 사용하겠습니다.
혹시 아시는 분 없나요?
글 쓰신분이 하라는대로 다 하시고..;;
/* 메인 상품 목록 스킨 10 */
.smt_10 .smt_li {position:relative;float:left;margin:0 10.5px 10px 0;border:1px solid #d6d6d6;padding:11px;background:#FFF;}
.smt_10 .smt_li:hover{border:2px solid #0085da;padding:10px 10px 9px 10px}
.smt_10 .smt_last {margin:0 0 10px !important}
.smt_10 .smt_clear {clear:both}
.smt_10 .smt_a {display:inline-block;position:relative;text-decoration:none;cursor:pointer}
.smt_10 .smt_a:focus, .smt_10 .smt_a:hover {text-decoration:none}
.smt_10 .smt_img {margin:0 0 10px;}
.smt_10 .smt_maker_name{font-size:12px}
.smt_10 .smt_txt {margin:0 0 5px;font-size:16px;font-weight:bold;font-family: 'Oswald', sans-serif;}
.smt_10 .smt_txt .smt_model_txt{font-size:14px;color:#999;display:inline-block;padding-right:5px;font-weight:normal}
.smt_10 .smt_icon {margin:0;border-top:1px solid #f1f1f1;padding-top:10px}
.smt_10 .smt_id {display:block;margin:0 0 5px}
.smt_10 .smt_basic {margin:0 0 10px}
.smt_10 .smt_cost .smt_lental_txt{font-size:12px;color:#999;display:inline-block;padding-right:5px}
.smt_10 .smt_cost {display:block;margin:0 0 5px;font-weight:bold;font-size:16px;color:#222;font-family: 'Oswald', sans-serif;text-align:right;}
.smt_10 .smt_cost strike {display:block;margin:0 0 5px;color:#999;font-weight:normal;}
.smt_10 .smt_sns {text-align:right;border-top:1px solid #f1f1f1;padding-top:5px}
.smt_10 .smt_maker{font-family:'Nanum Gothic'}
.smt_10 .smt_basic{display: block;margin-bottom:2px;overflow: hidden;height: 13px;width: 100%;font-size: 11px;line-height: 13px;color: #888;letter-spacing: -1px;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;font-weight:normal;font-family: '돋움',dotum,sans-serif;}
.smt_10 .smt_best{display:block;position:absolute;top:-4px;left:10px;width:50px;height:46px;z-index:10}
아마 style.css에 이 부분이 없을꺼에요~ 추가해 주시면 됩니다.
답변 부탁드릴께요