Tip & Tech

활용팁

홈 > 회원포럼 > 활용팁
활용팁

팝업창 닫기2 - 색상별로(?) 바꾸기

기존에 팝업창닫기 세련되게(?)바꾸기를 올렸는데^^

닫기 부분 색상별로 샘플로 만들어서 다시 올립니다.


팝업창 하단에 닫기 버튼 있는곳의 디자인색상을 여러가지로

선택해서 할 수 있도록 샘플을 추가하였습니다.

기본컬러(그레이), 보라색, 초록색, 하늘색, 밝은 오렌지 컬러의 5가지 입니다.

CSS 파일 바꿀때, 원하는 색상의 CSS코드로 넣어주시면 됩니다

-----------------------------------------------------------------


팝업창 하단에 보면

" 00시간 동안 다시 열지 않습니다 " 와 " 닫기 " 버튼이 있는데

팝업창 디자인의 기본형은 박스형태로 영카트스타일입니다.

그래서 현재 가장 많이 쓰이는 방식으로 디자인과 구성을 변경하였습니다.

실제 적용된 사이트에서 직접 확인해보시면

좀더 사실적으로 사이트에 적용된 팝업창의 디자인과 사이트의 어울림을 보실 수 있습니다


[ 팝업창디자인 미리보기 ]

http://icecreamplay.cafe24.com/ 



-------------------------------------------------------------------------------

< 팝업창디자인 적용하기 >


(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로 변경해주면 됩니다.


기본컬러(그레이), 보라색, 초록색, 하늘색, 밝은 오렌지 컬러의 5가지 입니다.

CSS 파일 바꿀때, 원하는 색상의 CSS코드로 넣어주시면 됩니다


▶기본컬러(그레이) 

.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}


▶보라색 컬러 

.hd_pops_footer {padding:10px 0;background:#9055A2;color:#EBDFEE;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#9055A2;color:#EBDFEE;}


▶초록색 컬러 

.hd_pops_footer {padding:10px 0;background:#56A902;color:#BFDFA0;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#56A902;color:#BFDFA0;}


▶하늘색 컬러 

.hd_pops_footer {padding:10px 0;background:#03A6FF;color:#BAE3FF;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#03A6FF;color:#BAE3FF;}


▶밝은 오렌지 컬러 

.hd_pops_footer {padding:10px 0;background:#FFC952;color:#333;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#FFC952;color:#333;}



[ 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/







1 Comments
팁 감사드립니다!
남은 연휴 즐겁게 보내세요~
제목
최근 글
최근 댓글
Facebook Twitter GooglePlus KakaoStory NaverBand