간단한 메인 베스트 상품 진열 스킨입니다. > 영카트5 스킨

영카트5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.

간단한 메인 베스트 상품 진열 스킨입니다. 정보

메인상품진열 간단한 메인 베스트 상품 진열 스킨입니다.

첨부파일

best.zip (35.3K) 1038회 다운로드 2014-05-13 17:09:08

본문

베스트 상품에 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
추천
9
  • 복사

댓글 전체

영카트를 처음 설치하면 메뉴가 좌측으로 생기는데요.
아름다운수님처럼 메뉴가 상단으로 나타나게 하려면 어떻게 해야 하나요?
스킨이 따로 있는건지요?
아니면 참조할게 있는지요?
영카드에 기본으로 내장된 기능에서 상단으로 위치를 옮기고(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에 이 부분이 없을꺼에요~ 추가해 주시면 됩니다.
© SIRSOFT
현재 페이지 제일 처음으로