게시판 만들기 – 디자인 최적화

qpress 2020년 3월 18일 48

KBoard의 게시판 디자인을 QPRESS 테마의 스타일에 최적화 시키는 방법을 설명합니다. QPRESS 테마 스타일 적용전의 KBoard Default Skin은 아래와 같은 모습을 보입니다.

CSS 코드 추가

아래의 CSS 코드를 ‘테마 디자인>사용자정의하기>추가CSS’에 삽입 합니다.

/* KBoard CSS */
#kboard-default-list div {
    font-size: var(--font-size-body);
}
#kboard-default-list .kboard-list-header .kboard-total-count {
    font-size: var(--font-size-body);
}
#kboard-default-list .kboard-category .kboard-category-list {
    background-color:transparent;
}
#kboard-default-list .kboard-category .kboard-category-list li a {
    padding: 6px 14px;
    font-size: var(--font-size-body);
    color: #000;
    background: var(--shade)!important;
    border-radius: 20px;
    transition:all .2s;
}
#kboard-default-list .kboard-category .kboard-category-list li.kboard-category-selected a {
    background: var(--main)!important;
    font-weight: normal;
    border-bottom: 0px;
    color: #fff!important;
}
#kboard-default-list .kboard-category .kboard-category-list li a:hover {
    box-shadow:1px 1px 50px 50px rgba(0,0,0,0.4) inset;color:#fff;
}
.kboard-default-poweredby {display:none}
a.kboard-default-button-small,
input.kboard-default-button-small,
button.kboard-default-button-small {
    padding: 4px 12px;
    font-size: var(--font-size-body);
    color: #fff !important;
    background: var(--main)!important;
    border-radius: var(--default-radius);
}
.kboard-search button{
    background: var(--gray)!important;
}
#kboard-default-list .kboard-list-header .kboard-sort select,
#kboard-default-list .kboard-search input,
#kboard-default-list .kboard-search select {
    padding: 4px 8px;
    font-size: var(--font-size-body);
    color: #000000;
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
}
#kboard-default-editor .kboard-content .editor-textarea:focus,
#kboard-default-list .kboard-list-header .kboard-sort select:focus,
#kboard-default-list .kboard-search select:focus,
#kboard-default-list .kboard-search input:focus,
#kboard-default-editor input[type=text]:focus,
#kboard-default-editor input[type=email]:focus,
#kboard-default-editor input[type=number]:focus,
#kboard-default-editor input[type=date]:focus,
#kboard-default-editor input[type=password]:focus {
   outline: none;
   border-color:rgb(26, 140, 255);
   box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.25);
   z-index:99999999999!important;
}
#kboard-default-list .kboard-pagination .kboard-pagination-pages li a {
    border-radius: var(--default-radius);
}
#kboard-default-list .kboard-pagination .kboard-pagination-pages li:hover a,
#kboard-default-list .kboard-pagination .kboard-pagination-pages li.active a {
    border: 0;
    color: #fff;
    background-color: var(--main);
    border-radius: var(--default-radius);
}
#kboard-default-list .kboard-list thead tr td {
    border-bottom: 1px solid var(--border-color);
    border-top: 2px solid var(--border-color);
    background-color : var(--shade);
    font-size:var(--font-size-body);
}
#kboard-default-list .kboard-list table {
    border-bottom: 2px solid var(--border-color);
}
#kboard-default-document .kboard-title h1 {
    padding: 12px 0px;
    color: unset;
}
#kboard-default-document .kboard-detail {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background-color: var(--shade);
    font-size: unset;
}
#kboard-default-document .kboard-control {
    border-top:1px solid var(--border-color);
    margin-top:15px;
}
#kboard-default-document .kboard-title h1 {
    color: unset;
}
#kboard-default-document .kboard-button-action {
    padding: 8px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--default-radius);
}
#kboard-default-document .kboard-content .content-view {
    padding: 22px 0px;
}
#kboard-default-editor {
    overflow: inherit;
}
#kboard-default-editor .kboard-content .editor-textarea,
#kboard-default-editor input[type=text],
#kboard-default-editor input[type=email],
#kboard-default-editor input[type=number],
#kboard-default-editor input[type=date],
#kboard-default-editor input[type=password] {
    /* all:initial; */
    width:100%;
    padding: 20px 8px;
    font-size: var(--font-size-body);
    color: #000000;
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    box-sizing:border-box;
    float:right;
}
#kboard-default-editor select:hover,
#kboard-default-editor input[type=text]:hover,
#kboard-default-editor input[type=email]:hover,
#kboard-default-editor input[type=number]:hover,
#kboard-default-editor input[type=date]:hover,
#kboard-default-editor input[type=password]:hover{ border-bottom: 1px solid var(--border-color)}
#kboard-default-editor select:focus,
#kboard-default-editor input[type=text]:focus,
#kboard-default-editor input[type=email]:focus,
#kboard-default-editor input[type=number]:focus,
#kboard-default-editor input[type=date]:focus,
#kboard-default-editor input[type=password]:focus{ border: 1px solid #5897fb}
#kboard-default-editor .kboard-content .editor-textarea {
    height: 250px;
}
#kboard-default-editor .kboard-control {
    margin-top:15px;
    border-top:1px solid var(--border-color);
}
@media screen and (max-width: 600px) {
    #kboard-default-list .kboard-search input,
    #kboard-default-list .kboard-search select,
    #kboard-default-list .kboard-search button {
        box-sizing: unset;
        min-width:unset;
        width:unset;
    }
    #kboard-default-list .kboard-search select{
        width:50px;
    }
    #kboard-default-list .kboard-control {
        text-align: center;
    }
}

.kboard-comments-default {
    border-top : 1px solid var(--border-color);
    background-color: transparent;
}
.kboard-comments-default .kboard-comments-wrap {
    padding: 20px 0 15px 0;
}
.kboard-comments-default .kboard-comments-wrap {
    padding: 15px 15px 0 0;
}
.kboard-comments-default .comments-header {
    padding: 0 0 0 0px;
    margin-top:15px;
}
.kboard-comments-default .comments-header hr{
    margin-top:10px!important;
}
.kboard-comments-default .kboard-comments-wrap {
    padding: 15px 0px 0 0;
}
.kboard-comments-default .kboard-comments-wrap .comment-list {
    padding: 0px 0px 0 0;
}
.kboard-comments-default .comments-list {
    padding: 0 0 0 0px;
}

.kboard-comments-default li .comments-list {
    padding-left:15px!important;
}
.kboard-comments-default hr {
    border-bottom: 1px dashed var(--border-color) !important;
}

.kboard-comments-default .kboard-comments-form {
    margin-top:15px;
    background-color:var(--shade);
    padding:20px;
    border:1px solid var(--border-color);
}
.kboard-comments-default .kboard-comments-form .comment-textarea,
.kboard-comments-default input[type=text],
.kboard-comments-default input[type=email],
.kboard-comments-default input[type=number],
.kboard-comments-default input[type=date],
.kboard-comments-default input[type=file],
.kboard-comments-default input[type=password] {
    height: auto;
    padding: 4px 8px;
    font-size: var(--font-size-body);
    color: #000000;
    border-radius: var(--default-radius);
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}
.kboard-comments-default .kboard-comments-form .comment-textarea:focus,
.kboard-comments-default input[type=text]:focus:focus:focus:focus:focus:focus,
.kboard-comments-default input[type=email]:focus:focus:focus:focus:focus,
.kboard-comments-default input[type=number]:focus:focus:focus:focus,
.kboard-comments-default input[type=date]:focus:focus:focus,
.kboard-comments-default input[type=file]:focus:focus,
.kboard-comments-default input[type=password]:focus {
    outline: none;
   border-color:rgb(26, 140, 255);
   box-shadow: 0 0 0 3px rgba(26, 140, 255, 0.25);
   z-index:99999999999!important;
}
.kboard-comments-default .kboard-comments-form .comments-field .comments-field-label {
    vertical-align: middle;
}
.kboard-comments-default input[type=file]{
    background-color:var(--shade);
    border:0;
}
.kboard-comments-default .kboard-comments-form .comments-submit-button input[type=submit] {
    background-color: var(--main);
    border-radius:var(--default-radius);
    color: white;
}
/* End of KBoard CSS */

코드 삽입 후 게시판을 보면 아래와 같이 QPRESS 공통 스타일이 적용된 게시판을 볼 수 있습니다.