본문 바로가기

Whatever스킨 - 댓글창 대화방처럼 꾸미기

토미타미 2023. 1. 16. 23:43
나를 바꾸는 한 마디

목차

whatever스킨 댓글창 꾸미기
적용 예시

안녕하세요! 오늘은 whatever스킨 댓글창 꾸미기를 해보려고 합니다. 사실 크게 생각이 없던 부분인데. 우연히 본 댓글창이 대화창 형태로 구조가 이루어져 이뻐 보여서 적용해 봤어요. 윤프로 코드가 개발새발해님 포스팅을 참고해서 적용했고 해당 댓글창 html 구조가 기존 whatever스킨에 대입하기엔 변경해야 할 부분이 너무 많아서 동일한 스킨(오디세이) 댓글 구조를 사용해 제 방식대로 조금 수정했습니다.

보시는 것처럼 내 댓글(관리자)이 오른쪽이고 상대방(방문자)이 왼쪽에 위치해서 채팅방 느낌을 주는 형태입니다. 댓글이 많을 경우 댓글 입력하기 위해서 스크롤을 많이 내려야 하는 게 불편하다 생각이 들어서 댓글입력란 부분은 편의상 댓글보다 위에 배치했어요. 아직 부족한 게 많은 상태지만 이용하는데 큰 문제가 없어 그냥 사용 중입니다. 혹시 문제점 또는 의견 있으시면 알려주세요.

 

 

 

 

 

 

HTML 편집하기

 

whatever스킨 댓글창 꾸미기
댓글창 꾸미기

더보기 
<s_rp_input_form>
			<div class="comment-form">
				<s_rp_member>
						<div class="field">
							<s_rp_guest>
							<input type="text" name="" value="" placeholder="이름">
							<input type="password" name="" value="" placeholder="암호">
							</s_rp_guest>
						<div class="secret">
													<input type="checkbox" name="" id="secret">
													<label for="secret" tabindex="0">Secret</label>
												</div>
											</div>
										</s_rp_member>
										<div class='textarea'>
										<textarea name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
										<div class="submit">
											<button type="submit" class="btn" onclick="">등록</button>
										</div>
										</div>
								</div>
								</s_rp_input_form>

							<!-- area-reply -->
                        <div class="area-reply">
                          <s_rp_container>
                            <ul class="list-reply">
                              <s_rp_rep>
                                <li id='' class="item-reply ">
                                  <span class="thumbnail" style="background-image:url('')"></span>
                                  <div class="box-content">
                                    <div class="box-meta">
                                      <strong></strong>
                                      <span class="date"></span>
                                    </div>
																		<div>
                                    <p class="text"></p>
                                    </div>                                   
                             <div class="control">
                            <a href="#" class="link-comment" onclick="">답글</a>
														<a href="">댓글주소</a>
														<a href="#" onclick="">수정/삭제</a>		
										         </div>
                  

                                  </div>

                                  <s_rp2_container>
                                    <!-- list-reply-comment -->
                                    <ul class="list-reply-comment">
                                      <s_rp2_rep>
                                        <li id='' class="item-reply ">
                                          <span class="thumbnail" style="background-image:url('')"></span>
                                          <div class="box-content">
                                            <div class="box-meta">
                                              <strong></strong>
                                            <span class="date"></span>  
                                            </div>
																						<div>
                                            <p class="text"></p>
																						
                                            </div>

																						<div class="control">
																		<a href="">댓글주소</a>
																		<a href="#" onclick="">수정/삭제</a>
																	</div>

                                          </div>
                                        </li>
                                      </s_rp2_rep>
                                    </ul>
                                    <!-- // list-reply-comment -->
                                  </s_rp2_container>
                                </li>
                              </s_rp_rep>
                            </ul>
                          </s_rp_container>
                        </div>
                        <!-- // area-reply -->

더보기를 누르시면 CSS창이 나옵니다. [스킨편집-HTML-HTML편집]에서 를 검색하시고 위 내용을 <s_rp>와 </s_rp> 사이에 있는 기존 구조와 교체해 주시면 됩니다. 저는 앞서 말했듯이 댓글 입력란이 먼저 오게 설정했는데. 작성된 댓글이 먼저 나오게 하려고 하면 <s_rp input_form>부터 </s_rp_input_form>까지 내용을 가장 뒤로 옮기시면 됩니다!

 

 

CSS 변경하기

 

whatever스킨 댓글창 꾸미기
댓글창 꾸미기

더보기 
/* area-reply - 상세페이지 댓글*/
.area-reply {
    margin-bottom: 60px;
}
.area-reply a {
    text-decoration: none;
    font-size: 13px;
    line-height: 1.69;
    color: #909090;
}
.blind {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    margin: -1px;
    width: 1px;
    height: 1px;
}

.area-reply .item-reply {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 25px 0 24px 0;
    border-bottom: 1px solid #eee;
}

.area-reply .thumbnail {
    display: block;
    width: 48px;
    height: 48px;
    margin-right: 10px;
    background-size: cover;
    background-position: 50% 50%;
    border-radius: 50px;
}

.area-reply .box-content {
    width: calc(100% - 64px);
}

.area-reply .box-content .box-meta {
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.69;
}

.area-reply .box-content .box-meta strong a {
    font-weight: 400;
    color: #333;
		margin-right: 10px;
}

.area-reply .date {
    position: relative;
    color: #909090;
    font-size: 13px;
    line-height: 1.69;
    padding-right: 10px;
    text-align: right;
    display: block;
}

.area-reply .box-content .box-meta .date:before {
    content: '';
    position: absolute;
    top: 9px;
    left: 7px;
    width: 2px;
    height: 2px;
    background: #c5c5c5;
		display: none;
}

.area-reply .box-content .box-meta .date a {
    position: relative;
    padding-left: 18px;
    color: #909090;
}

.area-reply .box-content .box-meta .date a:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 7px;
    width: 2px;
    height: 2px;
    background: #c5c5c5;
}

/*방문자 댓글창*/
.area-reply .box-content .text {
    font-size: 14px;
    line-height: 1.43;
    color: #000000;
    word-break: break-all;
		border: 1px solid #e6e6e6;
		padding: 10px;
		box-shadow: 2px 5px 8px 0px #e7e7e794;
		    margin: 0 0px 3px 0;
    position: relative;
    border-radius: 20px 20px 20px 20px;
    background-color: #f5f5f5;
		margin-right: 45px;
}
.area-reply .box-content .text:after {
content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 0.625em solid transparent;
    border-right-color: #e6e6e6;
    border-left: 0;
    border-top: 0;
    margin-top: -0.312em;
    margin-left: -0.625em;
    margin-right: 0;
    right: auto;
}


.area-reply .box-content .box-modify {
    position: absolute;
    top: 24px;
    right: -9px;
    font-size: 13px;
}

.area-reply .box-content .button-modify {
    width: 20px;
    height: 20px;
    padding: 10px 0 10px 10px;
    background: url(./images/icon-modify.svg) no-repeat;
    background-size: 14px;
    background-position: 50% 50%;
    border: none;
    cursor: pointer;
}

.area-reply .box-content .list-modify {
    display: none;
    position: absolute;
    top: 6px;
    left: -76px;
    width: 80px;
    border: 1px solid #e8e8e8;
}

.area-reply .box-content .list-modify li {
    border-bottom: 1px solid #e8e8e8;
}

.area-reply .box-content .list-modify li:last-child {
    border-bottom: none;
}

.area-reply .box-content .list-modify a {
    display: block;
    line-height: 29px;
    text-align: center;
    color: #333;
		background-color:#fff;
}

.area-reply .list-reply-comment {
    width: 100%;
    /*margin: 30px 0 -30px 0;*/
    padding: 40px 0 28px 110px;
    
    /*border-top: 1px solid #f0f0f0;*/
    /*border-bottom: 1px solid #f0f0f0;*/
}

.area-reply .list-reply-comment .item-reply.rp_general {
    margin-bottom: 5px;
    padding: 0;
    border-bottom: none;
    display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: left;
}
.area-reply .list-reply-comment .item-reply.rp_admin {
    margin-bottom: 10px;
    padding: 0;
    border-bottom: none;
    display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row-reverse;
		text-align: right;
}
.area-reply .item-reply.rp_admin {
    margin-bottom: 10px;
    padding: 0;
    border-bottom: none;
    display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		flex-direction: row-reverse;
		text-align: right;
}

.area-reply .list-reply-comment .item-reply:last-child {
    margin-bottom: 0;
}

/*관리자 댓글*/
.area-reply .rp_admin .text {
    margin: 0 0px 3px 0;
    position: relative;
    border-radius: 20px 20px 20px 20px;
    background-color: #b0c4de;
		margin-left: 45px;
}
.area-reply .rp_admin .text:after {
content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 0.625em solid transparent;
    border-left-color: #e6e6e6;
    border-right: 0;
    border-top: 0;
    margin-top: -0.312em;
    margin-right: -0.625em;
    margin-left: 0;
    left: auto;
}

.area-reply .list-reply-comment .box-modify {
    top: -4px;
    right: 15px;
}

.area-reply .list-reply-other {
    margin-bottom: 20px;
}

/* ----- media query - mobile ----- */
@media screen and (max-width: 1060px) {
    .area-reply {
        margin-bottom: 30px;
    }

    .area-reply .item-reply {
        padding: 25px 0 19px 0;
    }

    .area-reply .thumbnail {
        width: 38px;
        height: 38px;
        margin-right: 10px;
    }

    .area-reply .box-content {
        margin-top: -3px;
    }

    .area-reply .box-content .box-meta {
        line-height: 1.59;
    }

    .area-reply .box-content .box-meta strong a {
        font-size: 12px;
    }

    .area-reply .box-content .box-meta .date {
        padding-left: 0;
        font-size: 12px;
    }

    .area-reply .box-content .box-meta .date:before {
        background: none;;
    }

    .area-reply .box-content .text {
        width: 100%;
        margin-bottom: 8px;
        font-size: 12px;
    }

    .area-reply .box-content .list-modify {
        background: #fff;
    }

    .area-reply .list-reply-comment {
        width: 100vw;
        margin: 20px -20px -20px -20px;
        padding: 20px 20px 13px 68px;
    }

    .area-reply .list-reply-comment .box-modify {
        right: -9px;
    }

    .area-reply .list-reply-comment .box-meta {
        margin-top: 6px;
    }
}

.comments {
    max-width: 100%;
	  margin-top: 10px;
    border-top: 1px solid #e6e6e6;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.comments h2 {
	margin-top: 25px;
	font-size: 1.2em;
	color: #b0d197;
	margin-bottom: 10px;
	
}
.comments h2 .count {
	color: #7a583a;
}
.comments .comment-list {
	font-size:16px;
	margin-bottom: 6px;
	overflow:hidden;
}
.comments .comment-list ul li {
	padding: 30px 0 25px;
	border-top: 1px solid #e6e6e6;
	position: relative;
	min-height: 48px;
}
.comments .comment-list ul li:first-child {
	border: none;
}
.comments .comment-list ul li ul li {
	padding: 26px 0 0 60px;
	border-top: 0;
	border-bottom: 0;
}
.comments .comment-list ul li .author-meta {
	position: absolute;
	overflow: hidden;
	top:30px; height:48px;
	left:0; right:0;
	padding: 4px 0 0 60px;
}
.comments .comment-list ul li ul li .author-meta {
	top:26px;
	left:60px;
}
.comments .comment-list ul li .author-meta .avatar {
	position: absolute;
	left:0; top:0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.comments .comment-list ul li .author-meta span {
	display:inline-block;
}

.comments .comment-list ul li .author-meta a {
	text-decoration:none;
	color: #000;
}
.comments .comment-list ul li .author-meta .nickname {
	float:left;
	font-size: 0.875em;
	line-height: 20px;
}
.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
	margin-bottom: 3px;
	margin-right: 0;
	vertical-align: bottom;
}

.comments .comment-list ul li .author-meta .date {
	float:left;
	margin-left: 10px;
	font-size: 0.75em;
	color: #999;
	line-height:20px;
}
.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 9px;
	margin-right: 10px;
	background-color: #b2b2b2;
}
.comments .comment-list ul li .author-meta .date a {
	margin-left: 10px;
}
.comments .comment-list ul li .control {
	position: absolute;
	top: 33px;
	right:0;
}
.comments .comment-list ul li ul li .control {
	top: 29px;
}
.comments .comment-list ul li .control a {
	margin:0 2px;
	text-decoration: none;
	font-size: 12px;
	color: #999;
}
.comments .comment-list ul li p {
	position:relative;
	margin: 29px 0 0 60px;
	font-size: 0.875em;
	line-height: 1.5714;
	color: #666;
}
.comments .comment-form .field {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 10px;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
	border: 1px solid #e6e6e6;
	font-size: 0.875em;
	line-height: 1.25;
	color: #666;
}
.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
	width: 120px;
	height: 40px;
	padding: 10px;
	box-sizing: border-box;
}
.textarea {
	display: block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    resize: none;
    box-sizing: border-box;
    border-radius: 20px 20px 20px 20px;
    background-color: #f5f5f5;
}
.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {color: #d6d6d6;}
.comments .comment-form textarea {
	display: block;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    resize: none;
    box-sizing: border-box;
		background-color: #f5f5f5;
    border: none;
}
.comments .comment-form .field .secret {
	float: right;
}
.comments .comment-form .field .secret input {
	display: none;
}
.comments .comment-form .field .secret label {
	font-size: 0.875em;
	line-height: 40px;
	color: #666;
	outline: none;
	cursor: pointer;
}
.comments .comment-form .field .secret label:before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	border: 1px solid #e1e1e1;
	vertical-align: middle;
	background-color: #fff;
}
.comments .comment-form .field .secret input[type=checkbox]:checked+label:before {
	background-image: url(./images/ico_package.png);
	background-repeat: no-repeat;
	background-position: -97px -295px;
}
.comments .comment-form .submit {
	margin-bottom: 10px;
	text-align: right;
}
/*댓글 작성 버튼*/
.comment-form .btn{
  display: inline-block;
    position: relative;
    width: 80px;
    padding: 0 10px;
    border: 1px solid #00008b;
    text-decoration: none;
    text-align: left;
    background-color: #00008b;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    border-radius: 20px 20px 20px 20px;
    -webkit-transition: color .2s, background-color .2s;
    transition: color .2s, background-color .2s;
}

.comment-form .btn:hover {
	background-color: #00008b;
	border-color: #00008b;
	color: #ffffff;
	font-weight: bold;
}

/* // area-reply - 상세페이지 댓글*/

더보기를 누르시면 CSS창이 나옵니다.

[스킨편집-HTML-CSS]에서 .comment를 검색하신 다음 해당 부분부터 .pagination 바로 앞까지를 위 내용으로 변경해 주시면 됩니다. Whatever스킨 같은 경우는 관리자와 방문자 댓글이 따로 구분이 되어 있지 않아서 CSS값으로 내가 쓴 댓글이 오른쪽에 배치될 수 있도록 해주었습니다. 말풍선 색상도 변경 같은 경우는 /*방문자 댓글*/과 /*관리자댓글*/ 부분을 내용을 취향껏 변경하시면 됩니다.

 

 

whatever스킨 댓글창 꾸미기
댓글창 꾸미기

Whatever스킨에는 댓글 작성 버튼 옆에 화살표가 표시가 되는데. 불필요하다 판단해서 .btn:after에서 background부분을 주석 처리(/**/)해서 없앴습니다. 댓글창 변경한 지 두 달이 다 되어가서 저도 뭘 어떻게 했는지 긴가민가하면서 작성한 게 있네요. 궁금하신 점은 댓글로 알려주세요. 감사합니다.

 

 

 

저작자표시 비영리 변경금지

'일상다반사 > 블로그' 카테고리의 다른 글

Whatever스킨 - 제목만 넣어도 자동으로 목차가 생성 된다고?  (2) 2023.02.27
Whatever스킨 - 포스팅 썸네일 비율 알맞게 변경하는 법  (0) 2022.12.19
본문 텍스트 밑줄에 Highlighter 효과 적용하기  (2) 2022.10.06
Whatever스킨 상단 헤더에 포스팅 타이틀 구현하기  (5) 2022.09.20
무료 고퀄리티 블로그 로고 만들기 (Feat. WIX LOGO MAKER)  (0) 2022.09.15
top

티스토리툴바