이전
목록
다음
탈

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

탈퇴회원
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2014-05-13 (화) 17:09:08 · 22500 · 23

링크

lental2.dlike.co.kr (2648)
dlike_co_kr_20140513_165937.jpg
베스트 상품에 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
#PC용

첨부파일

dlike_co_kr_20140513_165937.jpg (173.1 KB) 0회 2014-05-13 17:16
best.zip (35.3 KB) 1044회 2014-05-13 17:09
|

댓글 23개

편편한이웃
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-14 (수) 11:37:11
잘 쓰겠습니다. 감사합니다.
혜민이아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-14 (수) 11:46:38
감사합니다~ ^^
레레스트
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-14 (수) 23:19:07
상당히 이쁘네요
찐찐찐아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-15 (목) 10:48:06
멋집니다.
똘똘추
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-15 (목) 14:11:17
감사합니다~ ^^
wwhwkfyd
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-16 (금) 09:46:01
good
이이시태
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-16 (금) 09:47:35
와 이쁘네요. 제이쿼리를 이용 해 탭 형식으로 만들고 있었는데 덕분에 시간 단축 하게 됐습니다.

감사합니다. 잘 쓸게요.
엄엄마직감
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-19 (월) 15:28:54
영카트를 처음 설치하면 메뉴가 좌측으로 생기는데요.
아름다운수님처럼 메뉴가 상단으로 나타나게 하려면 어떻게 해야 하나요?
스킨이 따로 있는건지요?
아니면 참조할게 있는지요?
탈탈퇴회원
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-19 (월) 23:59:48
영카드에 기본으로 내장된 기능에서 상단으로 위치를 옮기고(header부분이 되겠죠) 세로로된 것을 가로로 css를 수정만 하면 크게 어렵지 않게 가능한 기능입니다. 제가 다 설명 드리긴 어렵고 css를 조금 익히신 후에 다시 보시면 충분히 저 것과 같은 형태의 메뉴를 제작 하시는게 가능할거에요.
엄엄마직감
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-20 (화) 13:07:58
감사합니다.
아름다운수님의 네비게이션메뉴가 너무 이뻐서 질문올렸는데 답변달아주셔서 너무감사합니다.
ll2zeo
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-05-21 (수) 08:37:26
영카트 이용자는 아니지만, 정수기 렌탈를 좀 알아보고 있었는데...ㅎ;
우우물안영혼
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-06-20 (금) 10:15:05
정말 훌륭합니다!
그런데 배우면서 하려니까 어려움이 많네요.
혹시 할인율까지 표시가 가능할까요?
하하우리1
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-07-10 (목) 18:42:02
영카트 생초보입니다......
근데 아름다운수님처럼 게시판을 세로로 배열하려면 어디를 고쳐야하나요?
프프랜드
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-08-04 (월) 17:37:01
감사합니다.^^
oonedo
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-08-23 (토) 18:14:00
정말 깔끔하고 아름다운 스킨입니다.
감사한 마음으로 잘 사용하겠습니다.
oopmaso
프로필 보기이 회원 글보기이 회원의 댓글보기
 2014-12-24 (수) 07:14:17
세로롤 쭈욱 내려집니다..정렬이..ㅠㅠ
행행운배달
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-01-20 (화) 03:56:16
윗분과 마찬가지로 정렬이 가로로 배열되지 않고,,세로로 한개씩 주욱 내려지네요,,,
혹시 아시는 분 없나요?
여여행아
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-01-20 (화) 14:29:57
가로가 아닌 세로로 정렬되는데 어찌 수정해야 하나요?
몰몰코
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-01-25 (일) 04:56:11
세로로 진열이 됩니다.
AAmurtart
프로필 보기이 회원 글보기이 회원의 댓글보기
 2015-03-03 (화) 17:10:00
세로로 진열되시는 분은...

글 쓰신분이 하라는대로 다 하시고..;;

/* 메인 상품 목록 스킨 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에 이 부분이 없을꺼에요~ 추가해 주시면 됩니다.
너너모야민쯩까
프로필 보기이 회원 글보기이 회원의 댓글보기
 2016-04-01 (금) 10:25:15
이분 댓글로 몇시간, 심지어 하루이틀 삽질할거 한방에 해결되었습니다. 감사합니다.
달샘군
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-02-05 (월) 01:02:40
상품이미지 롤오버
숙향
프로필 보기이 회원 글보기이 회원의 댓글보기
 2023-06-04 (일) 10:09:44
5.3.3.3.1버전에 사용해도 되는지 궁금하네요
답변 부탁드릴께요
댓글을 작성하시려면 로그인이 필요합니다.

영카트5 스킨

119건

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

태그 필터 (최대 3개) 전체 PC용 모바일용 Device
+