티스토리 뷰
카페24 모바일 팝업창은 배경이 투명한 png 이미지를 사용해도 하얀 배경과 회색 테두리, 하단의 회색 닫기 창 바까지 원한 적 없는 디자인이 기본으로 설정되어있습니다.
바로 이렇게 말입니다. 원형 팝업창을 만들고 싶을 뿐인데 이게 뭐라고 png를 등록했는데 배경과 테두리, 닫기창이 보이는 걸까요.
카페24 모바일 버전 스마트 디자인 수정을 통해 위처럼 만들어보겠습니다. 그러기 위해서 우선 구조를 알아봐야겠지요.
위와 같이 회색 테두리의 class는 .ec-multi-popup-inner 입니다. 우리는 저기에서 border값만 없애면 되겠습니다.
.ec-multi-popup-inner { border:none!important; }/*팝업 테두리*/
팝업창의 배경 부분은 class .ec-multi-popup-visual 입니다. 여기서 우리는 background-color를 수정하면 되겠습니다.
.ec-multi-popup-visual { background:none!important; }/*팝업 배경*/
오늘 하루 열지 않음 및 닫기 버튼이 있는 영역의 class는 .ec-multi-popup-option 입니다. 저는 이 부분의 배경 색상 없음과 버튼의 위치 수정이 하고 싶습니다.
.ec-multi-popup-option {
background:none!important;
text-align: center!important;
width: 150px;
position: absolute;
top: 88%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}/*팝업 하단 배경, 폰트 컬러, 폰트 정렬, 위치 정렬*/
.ec-multi-popup-option button { font-family:; font-size:11pt; color:#fff!important; }/*닫기버튼 폰트 사이즈, 글꼴, 폰트 컬러*/
width와 position, top, left, transform을 추가했습니다. width는 닫기 버튼의 가로 사이즈를 알맞게 정하여 오늘하루 보지 않기 및 닫기 버튼을 내려쓰기를 하고, position은 부모 div(.ec-multi-popup)기준 top, left 50% 지정 후 translate로 -50%씩 정해 어떤 디바이스에서던 팝업창 안에선 중앙 정렬이 되도록 하려 했습니다. top이 88%인 이유는 위로부터 88% 위치에 위치하도록 하기 위함입니다. 정 중앙에 닫기 버튼이 위치하길 바란다면(아주 적은 확률로 있을까?) top에 50%를 적어주시면 됩니다. 이 position의 top, bottom, left, right 속성을 활용하면 우측 하단 또는 우측 상단 등 자유롭게 닫기 버튼을 이동하실 수 있습니다.
닫기 버튼의 글꼴 및 폰트 사이즈, 컬러를 변경하기 위해 .ec-multi-popup-option button class를 추가했습니다. !important를 넣은 이유는 제가 아무리 스마트 디자인에서 .ec-multi-popup과 관련된 css를 찾을 수 없어 카페24에 문의했더니 이 팝업 관련된 내용은 수정이 불가능하다고 합니다. 카페24의 설정대로 나오고 있는 부분이라, 동일한 class명에 !important로 기존의 카페24의 스타일보다 먼저 반영해야 할 스타일로 우선순위 설정을 하는 겁니다.
<style>
.ec-multi-popup-inner { border:none!important; }/*팝업 테두리*/
.ec-multi-popup-visual { background:none!important; }/*팝업 배경*/
.ec-multi-popup-option {
background:none!important;
text-align: center!important;
width: 150px;
position: absolute;
top: 88%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
/*팝업 하단 배경, 폰트 컬러, 폰트 정렬, 위치 정렬*/
.ec-multi-popup-option button { font-family:; font-size:11pt; color:#fff!important; }
/*닫기버튼 폰트 사이즈, 글꼴, 폰트 컬러*/
</style>완성된 소스를 복사하여 카페24 모바일 스마트 디자인에 붙여 넣기 하겠습니다.
각자가 사용하고있는 디자인마다 다를 수 있습니다. 제가 사용한 무료 디자인은 레이아웃에 head 부분이 있습니다. layout.html 을 찾아 클릭하시면 layout.html파일이 오픈됩니다.
layout.html의 <head></head>사이에 복사한 스타일을 붙여 넣기 합니다.
Ctrl+S를 눌러 저장 후 창을 닫고 새로고침 합니다.
정상적으로 보이는 것을 확인하실 수 있습니다.
혹시 PC에서 모바일 디자인 미리보기에서 아무리 새로고침을 해도 팝업창이 안보이는 경우 아래의 링크를 확인해 주시고 따라주시면 됩니다. PC버전 팝업의 닫기 버튼 디자인 수정 방법도 하기 링크에 설명되어있습니다. 작게나마 도움이 되었다면 좋겠습니다.
[카페24] 모바일 팝업 PC에서 확인하기
카페24 모바일 버전의 팝업을 설정한 후 디자인 미리보기를 하면 팝업이 어떠한 형태로 보여지고 있는지 확인이 불가능 합니다. 물론 스마트 폰으로 보면 되겠지만 번거로움을 생각하면 PC로 작
kindkimyoung.tistory.com
[카페24] PC버전 팝업 창 닫기 버튼 투명하게 변경 하기. (& 위치변경)
우리는 할인 행사, 각종 마케팅, 심지어는 휴무 공지까지 눈에 띄는 독특한 팝업으로 소비자들의 시선을 끌기 위해 많은 노력을 하고 있습니다. 그러나 카페24의 팝업 모듈은 깔끔하지 못한 닫기
kindkimyoung.tistory.com
'사각사각 > 카페24' 카테고리의 다른 글
| [카페24] 반응형 무료 디자인 수정하기 02 - 탑 메뉴 아이콘 위치 변경하기 (14) | 2022.03.06 |
|---|---|
| [카페24] 반응형 무료 디자인 수정하기 01 - 사이드 메뉴 버튼 클릭 시 움직이는 body 효과 삭제하기 (10) | 2022.01.21 |
| [카페24] 모바일 팝업 PC에서 확인하기 (0) | 2021.08.02 |
| [카페24] PC버전 팝업 창 닫기 버튼 투명하게 변경 하기. (& 위치변경) (0) | 2021.07.26 |
| [카페24] 회원정보 수정 이벤트 설정 및 팝업 디자인 변경 하기. (0) | 2020.07.26 |