이전 글은 스케치북 게시판을 기본으로 활용했는데,

이번엔 fafazboard 스킨을 활용해서 작업해보았습니다.

 

최종적으로 스샷은 이렇습니다.

이미지 33.png

 

1.  fafazboard 설정에서 custom.css 와 custom.js 를 설정 추가해놓습니다.

 

2. CSS

.fafaz .writeForm-extraVars .fafazForm-inputGroup{
    position: relative;
    display: inline-block;
    width: 50%;
    margin-bottom: 1.25em;
    padding: 0 15px 0 0;
    box-sizing: border-box;
}
.fafaz .writeForm-extraVars .fafazForm-inputGroup p{display:none;}
.fafaz .fafazForm-label, .modal-overlay .fafazForm-label{
    margin: 0 0 .7em!important;
    font-weight: 100;
    color: #bbb !important;
    font-size: 0.9em !important;
}
.board-writeForm .tagsinput {
    padding: .5em 1em .2em!important;
}

.formTitle{
    color: #f84f67;
    font-size: 19px;
    line-height: 1.5;
    margin: 0 0 10px !important;
    letter-spacing:-1px;
    font-weight:100;
}

3. js

$(".fafazForm-inputGroup input").each(function(){
   var placeholder_text = $(this).next("p").text();
   $(this).attr("placeholder", placeholder_text);
});
$(".writeForm-extraVars").prepend("<h4 class='formTitle'>고객 기본정보</h4>");
$(".writeForm-extraVars").after("<h4 class='formTitle'>수정 요청내용</h4>");

 

이온디

profile
이온디는 라이믹스를 비롯한 다양한 CMS의 시드뱅크를 꿈꿉니다. 여러분들이 사랑하는 웹소스를 언제든지 사용할 수 있게 하기 위해 이온디는 매일 소스코드를 유지보수하고 있으며, 언제든지 다운로드할 수 있는 소스마켓을 운영하고 있습니다.

#XE마켓 - 이온디스토어
https://eond.com/xemarket/

# XE/라이믹스 단톡방을 운영 중입니다. (비번: 2022)
https://open.kakao.com/o/giaKKnl

# XE/라이믹스 생활코딩 모듈 강좌입니다.
https://opentutorials.org/module/3774
  • profile
    오.. 그때 파파즈에 박스양식 써둔사람입니다 댓글달아둔거 봤어요 파파즈 정말좋은데 조금 아쉬운부분이 많아서 아쉽습니다 파파즈님이 시간이 여유로워지셔서 빨리 패치해주셨으면 좋겠네요
  • profile profile
    네 그 글 보고 예전 소스 뒤적여서 팁 좀 써봤습니다. ㅎ