쇼핑몰 팝업창 세련되게(?) + 이동 + 화살표표시 정보
기타 쇼핑몰 팝업창 세련되게(?) + 이동 + 화살표표시관련링크
http://icecreamplay.cafe24.com/
347회 연결
http://storefarmers.cafe24.com
257회 연결
첨부파일
본문
기존에 올린 스킨에 팝업창이동하기 추가에 마우스오버시 화살표로 이동가능 표시 추가
팝업창 하단에 보면 " 00시간 동안 다시 열지 않습니다 " 와 " 닫기 " 버튼이 있는데
팝업창 디자인의 기본형은 박스형태로 영카트스타일로 팁을 올려드린적이 있습니다.
여기에 팝업창 이동하기를 추가하였습니다.
여기에 링크된것은 마우스 손 모양이 표시되고,
하단에 닫기 있는곳의 여백공간에 마우스오버시 이동 화살표 표시되도록 추가하였습니다
팝어창에 마우스를 클릭한 상태에서 위치를 옮겨보시면 정상적으로
이동할 수 있는것을 확인할 수 있습니다^^
실제 적용된 사이트에서 직접 확인해보시면
좀더 사실적으로 사이트에 적용된 팝업창의 디자인과 사이트의 어울림을 보실 수 있습니다
[ 팝업창디자인 미리보기 ]
http://icecreamplay.cafe24.com/
[ 영카트NEW관리자모드 미리보기 ]
http://storefarmers.cafe24.com/adm
아이디: kim 비밀번호: 1111
--------------------------------------------------------------------------------------------------------------------------
< 팝업창디자인 적용하기 >
(1) newwin.inc.zip 를 다운받아서 압축을 풉니다
(2) bbs 와 mobile 폴더째로 같은 폴더에 덮어쓰거나, 폴던안에 파일을 같은 위치에 덮어쓰면 됩니다
- bbs/newwin.inc.php
- mobile/newwin.inc.php
(3) 팝업창에 적용되는 css 파일을 수정해줍니다. 수정해줄 css파일이 좀 많습니다^^
css 파일에서 " .hd_pops_footer " , " .hd_pops_footer button " 로 정의된 css를
아래 표시된 스타일 css로 변경해주면 됩니다.
[ CSS 적용해줄 파일들 ]
css / default.css
css / default_shop.css
css / mobile.css
css / mobile_shop.css
theme / 사용하는테마 / css / default.css
theme / 사용하는테마 / css / default_shop.css
theme / 사용하는테마 / css / mobile.css
theme / 사용하는테마 / css / mobile_shop.css
------------------------------------------------------------------------------
간단한 스킨으로 편리함을 느끼시는 분도 있고, 별감흥이 없는분들도 계실것입니다^^
이상 간단 스킨 이었습니다.
[ 팝업창디자인 미리보기 ]
http://icecreamplay.cafe24.com/
[ 영카트NEW관리자모드 미리보기 ]
http://storefarmers.cafe24.com/adm
아이디: kim 비밀번호: 1111
팝업창 하단에 보면 " 00시간 동안 다시 열지 않습니다 " 와 " 닫기 " 버튼이 있는데
팝업창 디자인의 기본형은 박스형태로 영카트스타일로 팁을 올려드린적이 있습니다.
여기에 팝업창 이동하기를 추가하였습니다.
여기에 링크된것은 마우스 손 모양이 표시되고,
하단에 닫기 있는곳의 여백공간에 마우스오버시 이동 화살표 표시되도록 추가하였습니다
팝어창에 마우스를 클릭한 상태에서 위치를 옮겨보시면 정상적으로
이동할 수 있는것을 확인할 수 있습니다^^
실제 적용된 사이트에서 직접 확인해보시면
좀더 사실적으로 사이트에 적용된 팝업창의 디자인과 사이트의 어울림을 보실 수 있습니다
[ 팝업창디자인 미리보기 ]
http://icecreamplay.cafe24.com/
[ 영카트NEW관리자모드 미리보기 ]
http://storefarmers.cafe24.com/adm
아이디: kim 비밀번호: 1111
--------------------------------------------------------------------------------------------------------------------------
< 팝업창디자인 적용하기 >
(1) newwin.inc.zip 를 다운받아서 압축을 풉니다
(2) bbs 와 mobile 폴더째로 같은 폴더에 덮어쓰거나, 폴던안에 파일을 같은 위치에 덮어쓰면 됩니다
- bbs/newwin.inc.php
- mobile/newwin.inc.php
(3) 팝업창에 적용되는 css 파일을 수정해줍니다. 수정해줄 css파일이 좀 많습니다^^
css 파일에서 " .hd_pops_footer " , " .hd_pops_footer button " 로 정의된 css를
아래 표시된 스타일 css로 변경해주면 됩니다.
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff;cursor:move;}
.hd_pops_footer {padding:10px 0;background:#33353E;color:#A39B97;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#33353E;color:#A39B97}
[ CSS 적용해줄 파일들 ]
css / default.css
css / default_shop.css
css / mobile.css
css / mobile_shop.css
theme / 사용하는테마 / css / default.css
theme / 사용하는테마 / css / default_shop.css
theme / 사용하는테마 / css / mobile.css
theme / 사용하는테마 / css / mobile_shop.css
------------------------------------------------------------------------------
간단한 스킨으로 편리함을 느끼시는 분도 있고, 별감흥이 없는분들도 계실것입니다^^
이상 간단 스킨 이었습니다.
[ 팝업창디자인 미리보기 ]
http://icecreamplay.cafe24.com/
[ 영카트NEW관리자모드 미리보기 ]
http://storefarmers.cafe24.com/adm
아이디: kim 비밀번호: 1111
추천
3
3
댓글 전체
매번 이런거 너무 좋네요~~
감사합니다~!!
감사합니다~!!
10월26일 오전9:40 이전에 다운받으신 분들은 다시 받아주세요^^
팝업창 이동 스크립트가 빠져서 수정해서 올렸습니다
팝업창 이동 스크립트가 빠져서 수정해서 올렸습니다
좋은 소스를 공개해 주셔서 감사합니다. 정체되지않고 지속적으로 발전하는 모습이 보기 좋습니다.
감사합니다 잘쓰겠습니다
아 이런건 정성이 없으면
감사합니다
감사합니다
와 무슨 홈페이지가 정말 아이스크림같이 화려하네요. 예뻐요. 와오 부럽부럽