[mail form] 메일폼 editor와 view에서 스타일 맞추기

admin에서 editor로 작성하는 자동 메일폼이 있음

editor에서 작성한 레이아웃과 미리보기 view 페이지에서 보이는 레이아웃이 다름

 

원인 : editor 페이지에서는 editor 스타일이 적용되고 view 페이지에는 admin에 사용한 부트스트랩이 적용

 

해결 : 메일의 view페이지에도 editor와 동일한 스타일이 적용되도록 스타일 추가

 

 

 

1. /js/ckeditor/contents.css

=> editor에 삽입된 스타일을 제거하기 위해 reset.css에서 하단 부분만 복붙해 에디터 스타일 css 하단에 추가

/* =============================================

*  mail form editor style override

============================================== */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub , sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, /*table*/, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0;padding: 0;border: 0;font-size: 100%;/*font: inherit;*/vertical-align: baseline;}
.h1, .h2, .h3, h1, h2, h3, .h4, .h5, .h6, h4, h5, h6{margin: 0;}
ul, ol{margin: 0;}
p{margin: 0;}

2. /admin/include/css/custom.css

 

=> 메일 view 페이지에 h1~h6까지 html에서 기본으로 적용하는 스타일을 삽입

=> editor 스타일과 마찬가지로 여백 reset 위해 하단부분 추가

 

/* =============================================

*  mail form editor style override

============================================== */
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub , sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, /*table*/, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{margin: 0;padding: 0;border: 0;font-size: 100%;/*font: inherit;*/vertical-align: baseline;}
.h1, .h2, .h3, h1, h2, h3, .h4, .h5, .h6, h4, h5, h6{margin: 0;}
ul, ol{margin: 0;}
p{margin: 0;}

.mail-con h1{font-size: 2em;}
.mail-con h2{font-size: 1.5em;}
.mail-con h3{font-size: 1.17em;}

.main-con h4{font-size: 1em;}
.mail-con h5{font-size: 0.83em;}
.mail-con h6{font-size: 0.67em;}

3. include/functions/functions-mail.php

line: 215 mail-con 스타일 변경
style="font-size: 13px;line-height: 1.3;word-break: keep-all;"

 

 

 

 

여백은 reset 하지 않기로 결정

1번은 적용 X

2번의 h1~h6 부분만 추가

3번은 프로젝트별로 판단해 알맞게 적용