영카트5로 쇼핑몰을 만들어보고 있는데, 필요하신분이 계실거 같아서 오늘본 상품이미지를 원으로 보여주는 스킨을 올립니다.

제가 css 이런거 기본개념이 부족해서 지저분하고 필요없는 부분도 있을건데 필요없는 부분이 있으면 제거하고 사용하시면 됩니다.


-- 적용방법--

1. 첨부한 boxtodayview.skin.php 파일을 다운받아서 skin/shop/basic 폴더에 올립니다.
2. 아래 코드를 복사해서 skin/shop/basic/style.css 19~34줄에 덮어 씌웁니다.
  (/* 오늘 본 상품 */ 부분)

/* 오늘 본 상품 */
#stv {z-index:1001;position:relative;float:right;width:100px}
#stv_list {position:absolute;right: -115px;/*오늘본 상품 오른쪽으로 빼기*/width:100px; border-bottom:0px solid #ddd;background:#fff}
#stv_list h2 {margin:0px auto;padding:10px 0 8px;background:#f9f9f9;border-bottom:0px dotted #aaa;border-top:0px solid #ddd;width:100%;font-weight:bold;font-size:13px;font-family:Malgun Gothic;color:#444;text-align:center;letter-spacing:-0.1em}
#stv_pg {display:block;margin:5px 0 0}
#stv_list p {padding:20px 0;text-align:center}
#stv_btn {text-align:center;zoom:1}
#stv_btn:after {display:block;visibility:hidden;clear:both;content:""}

/* 이전, 다음 */
#stv_btn button {float:left;margin:0;padding:8px 0 2px;width:47px;border:0;background:#fff;color:#A07171;font-weight:bold;text-align:center}
#stv_btn span  {float:left;padding:8px 0 0px;font-size:12px;color:#ccc;list-style:none}
#stv_ul {margin:0 0 10px ;padding:0;list-style:none}
.stv_item {display:none;padding:5px 9px;text-align:center;word-break:break-all}

/* 오늘 본 이미지 동그랗게 원으로*/
.stv_item img {margin:0px 0;border-radius: 150px; /* 이미지의 크기의 반만큼 반경을 잡아줌 */}

#stv_nb {margin:0;padding:0; list-style:none;border:1px solid #ddd;border-top:none}
#stv_nb li {margin:0px auto;padding:12px 0px 12px 0px;font-size:12px;font-family:돋움;color:#666;text-align:center; border-top:1px solid #ddd;width:100%;list-style:none}
#stv_nb a {display:block}

제가 오늘본 상품이 나오는 부분을 아래로 내리고 위에는 배너를 추가했는데요.
첨부해드리는 파일에는 배너부분은 없습니다. 이부분은 원하시는거로 꾸미시면 됩니다.

위 소스에서 상품이미지를 동그랗게 해주는 부분은
/* 오늘 본 이미지 동그랗게 원으로*/
.stv_item img {margin:0px 0;border-radius: 150px; /* 이미지의 크기의 반만큼 반경을 잡아줌 */}
이곳 입니다.

다른부분 필요없으시면 style.css에 이부분만 적용하시면 됩니다.


이미지 사이즈나 화면에 보여줄 갯수는
boxtodayview.skin.php 맨 상단에서 수정하세요.

<?php
$tv_idx = get_session("ss_tv_idx");

$tv_div['top'] = 0;
$tv_div['img_width'] = 85; //가로
$tv_div['img_height'] = 85; // 세로
$tv_div['img_length'] = 3; // 한번에 보여줄 이미지 수

85x85 사이즈에 3개이상 클릭시 이전/다음 링크버튼이 나타납니다.