간단한 메인 베스트 상품 진열 스킨입니다. 정보
메인상품진열 간단한 메인 베스트 상품 진열 스킨입니다.
관련링크
http://lental2.dlike.co.kr
2612회 연결
첨부파일
본문
베스트 상품에 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
추천
9
9
댓글 전체
잘 쓰겠습니다. 감사합니다.

감사합니다~ ^^

상당히 이쁘네요
멋집니다.

감사합니다~ ^^
good
와 이쁘네요. 제이쿼리를 이용 해 탭 형식으로 만들고 있었는데 덕분에 시간 단축 하게 됐습니다.
감사합니다. 잘 쓸게요.
감사합니다. 잘 쓸게요.

영카트를 처음 설치하면 메뉴가 좌측으로 생기는데요.
아름다운수님처럼 메뉴가 상단으로 나타나게 하려면 어떻게 해야 하나요?
스킨이 따로 있는건지요?
아니면 참조할게 있는지요?
아름다운수님처럼 메뉴가 상단으로 나타나게 하려면 어떻게 해야 하나요?
스킨이 따로 있는건지요?
아니면 참조할게 있는지요?

영카드에 기본으로 내장된 기능에서 상단으로 위치를 옮기고(header부분이 되겠죠) 세로로된 것을 가로로 css를 수정만 하면 크게 어렵지 않게 가능한 기능입니다. 제가 다 설명 드리긴 어렵고 css를 조금 익히신 후에 다시 보시면 충분히 저 것과 같은 형태의 메뉴를 제작 하시는게 가능할거에요.

감사합니다.
아름다운수님의 네비게이션메뉴가 너무 이뻐서 질문올렸는데 답변달아주셔서 너무감사합니다.
아름다운수님의 네비게이션메뉴가 너무 이뻐서 질문올렸는데 답변달아주셔서 너무감사합니다.

영카트 이용자는 아니지만, 정수기 렌탈를 좀 알아보고 있었는데...ㅎ;
정말 훌륭합니다!
그런데 배우면서 하려니까 어려움이 많네요.
혹시 할인율까지 표시가 가능할까요?
그런데 배우면서 하려니까 어려움이 많네요.
혹시 할인율까지 표시가 가능할까요?
영카트 생초보입니다......
근데 아름다운수님처럼 게시판을 세로로 배열하려면 어디를 고쳐야하나요?
근데 아름다운수님처럼 게시판을 세로로 배열하려면 어디를 고쳐야하나요?
감사합니다.^^
정말 깔끔하고 아름다운 스킨입니다.
감사한 마음으로 잘 사용하겠습니다.
감사한 마음으로 잘 사용하겠습니다.
세로롤 쭈욱 내려집니다..정렬이..ㅠㅠ
윗분과 마찬가지로 정렬이 가로로 배열되지 않고,,세로로 한개씩 주욱 내려지네요,,,
혹시 아시는 분 없나요?
혹시 아시는 분 없나요?

가로가 아닌 세로로 정렬되는데 어찌 수정해야 하나요?
세로로 진열이 됩니다.
세로로 진열되시는 분은...
글 쓰신분이 하라는대로 다 하시고..;;
/* 메인 상품 목록 스킨 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에 이 부분이 없을꺼에요~ 추가해 주시면 됩니다.
글 쓰신분이 하라는대로 다 하시고..;;
/* 메인 상품 목록 스킨 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에 이 부분이 없을꺼에요~ 추가해 주시면 됩니다.

이분 댓글로 몇시간, 심지어 하루이틀 삽질할거 한방에 해결되었습니다. 감사합니다.
상품이미지 롤오버
5.3.3.3.1버전에 사용해도 되는지 궁금하네요
답변 부탁드릴께요
답변 부탁드릴께요