Help Center

카페24 소식

공지사항업데이트스토어소식

[게시판관리] [리뷰톡톡] 적립금 지급 업그레이드 안내 - HTML/CSS

2017-06-07

안녕하세요, 카페24 운영도우미 입니다.


아래 내용 참고하셔서 디자인을 수정하시기 바랍니다.



■ PC 디자인 수정하기


1) 위치 :  

- 디자인관리 > 게시판(board) > 리뷰톡톡(smartreview)  > 데이터제공(provider) > 리뷰 쓰기 공통 폼(write_form.html)

- 디자인관리 > 게시판(board) > 리뷰톡톡(smartreview)  > 리뷰 수정 폼 ( modify.html)


▼ 한국어 쇼핑몰은 아래와 같이 파란색 소스를 추가합니다.


## 상단 생략 ##


<div class="contentWarp">

    {$*csrf} <!-- 보안필수 -->

    <div class="contentBox"></div>

    <textarea rows="4" cols="77" class="contentWrite" placeholder="내용을 입력하세요."></textarea>

</div>


<p class="wordCount"><strong class="blind">글자수</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>


<div async_module="smartreview_dispWriteHashTag" async_type="template" class="{$*display_hash_tag}">

    <!-- 비동기로 처리전 노출되는 섹션 -->


## 하단 생략 ##



▼ 영어, 중국어 간체, 대만어 번체, 일본어 쇼핑몰은 아래와 같이 파란색 소스를 추가합니다.


## 영어 - 상단생략 ##

<p class="wordCount"><strong class="blind">Number of Letter</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##


## 중국어 간체 - 상단생략 ##

<p class="wordCount"><strong class="blind">字数</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##


## 대만어 번체 - 상단생략 ##

<p class="wordCount"><strong class="blind">字數</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##


## 일본어 - 상단생략 ##

<p class="wordCount"><strong class="blind">文字数</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##





2) 위치 :  

-  디자인 관리 > 디자인 수정하기 > 게시판(board) > 리뷰톡톡(smartreview)  > css > review.css


▼ 아래와 같이 빨간색 소스를 삭제,  파란색 소스를 추가합니다.


## 상단 생략 ##


  .reviewArea .reviewLayer .btnHash { color:#106aff; }

  .reviewArea .reviewLayer .recommend { position:relative; overflow:hidden; padding:0 0 0 83px; *zoom:1; }

.reviewArea .reviewLayer .recommend { position:relative; overflow:hidden; padding:0 0 0 83px; border-top:1px solid #e0e0e0; *zoom:1; }


  .reviewArea .reviewLayer .recommend h3 { position:absolute; top:6px; left:0; padding:0 15px; font-size:12px; color:#434343; }

.reviewArea .reviewLayer .recommend h3 { position:absolute; top:15px; left:0; padding:0 15px; font-size:12px; color:#434343; }


  .reviewArea .reviewLayer .recommend h3:after { position:absolute; top:50%; right:0; display:block; content:""; width:1px; height:10px; margin:-6px 0 0; background:#cfcfcf; }


  .reviewArea .reviewLayer .recommend .tags { display:inline-block; padding:6px 0; width:auto; white-space:nowrap; *display:inline; *zoom:1; }

.reviewArea .reviewLayer .recommend .tags { display:inline-block; padding:6px 0; margin:9px 0; width:100%; white-space:nowrap; *display:inline; *zoom:1; }



  .reviewArea .reviewLayer .recommend .tags.move { cursor:move; }

  .reviewArea .reviewLayer .recommend .btnHash { margin:0 0 0 12px; }


  .reviewArea .reviewLayer .postSns { margin:9px 0 15px; line-height:21px; }

.reviewArea .reviewLayer .postSns { margin:0 0 15px; line-height:21px; }



  .reviewArea .reviewLayer .postSns h3 { position:relative; display:inline-block; padding:0 15px; margin:0 15px 0 0; font-size:12px; color:#434343; }

  .reviewArea .reviewLayer .postSns h3:after { position:absolute; top:50%; right:0; display:block; content:""; width:1px; height:10px; margin:-6px 0 0; background:#cfcfcf; }


.reviewArea .reviewLayer .displaynone + .postSns { border-top:1px solid #e0e0e0; padding:15px 0 0; }

.reviewArea .reviewLayer .wordCount { margin:10px 5px; text-align:right; color:#858484; }

.reviewArea .reviewLayer .wordCount .blind { overflow:hidden; position:absolute; left:-120%; text-indent:120%; white-space:nowrap; font-size:0; line-height:0; }



  .reviewArea .reviewLayer .close { position:absolute; top:-32px; right:0; color:#2e2e2e; font-size:13px; }

  .reviewArea .reviewLayer .close .btnClose { width:22px; height:22px; vertical-align:middle; outline:0; font-size:0; line-height:0; background:url('http://img.echosting.cafe24.com/skin/base/board/review/btn_close_white.png') no-repeat 0 0; }

  .reviewArea .reviewLayer .close .today { margin:0 10px 0 0; }

  .reviewArea .reviewLayer .close .today input { margin:-2px 3px 0 0; }


## 하단 생략 ##




■ 모바일 디자인 수정하기


1) 위치 :

- 모바일 쇼핑몰 > 디자인 수정하기 > 게시판(board) > 리뷰톡톡(smartreview)  > 데이터제공(provider) > 리뷰 쓰기 공통 폼(write_form.html)

- 모바일 쇼핑몰 > 디자인 수정하기 > 게시판(board) > 리뷰톡톡(smartreview)  > 리뷰 수정 폼 ( modify.html)


▼ 한국어 쇼핑몰에 아래와 같이 파란색 소스를 추가합니다.


## 상단 생략 ##


     <div class="contentWarp">

                            {$*csrf}<!-- 보안필수 -->

                            <div class="contentBox"></div>

                            <textarea class="contentWrite" placeholder="내용을 입력하세요.">{$*contents}</textarea>

                        </div>


<p class="wordCount"><strong class="blind">글자수</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>



                        <div async_module="smartreview_dispModifyHashTag" async_type="template" class="{$*display_hash_tag}">

                            <!-- 비동기로 처리전 노출되는 섹션 -->


## 하단 생략 ##



▼ 영어, 중국어 간체, 대만어 번체, 일본어 쇼핑몰은 아래와 같이 파란색 소스를 추가합니다.


## 영어 - 상단생략 ##

<p class="wordCount"><strong class="blind">Number of Letter</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##


## 중국어 간체 - 상단생략 ##

<p class="wordCount"><strong class="blind">字数</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##


## 대만어 번체 - 상단생략 ##

<p class="wordCount"><strong class="blind">字數</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##


## 일본어 - 상단생략 ##

<p class="wordCount"><strong class="blind">文字数</strong> <span class="currentTextCount"></span><span class="currentTextTail"></span></p>

## 하단 생략 ##





2) 위치 :

- 모바일 쇼핑몰 > 디자인 수정하기 > 게시판(board) > 리뷰톡톡(smartreview)  > css > review.css


▼ 아래와 같이 파란색 소스를 추가합니다.


## 상단 생략 ##


  .reviewArea .reviewLayer.typeWrite .recommend .btnHash { margin:0 0 0 10px; }


  .reviewArea .reviewLayer.typeWrite .postSns { margin:9px 0 15px; line-height:20px; color:#353535; }

  .reviewArea .reviewLayer.typeWrite .postSns h3 { position:relative; display:inline-block; padding:0 10px 0 0; margin:0 8px 0 0; font-size:13px; font-weight:normal; }

  .reviewArea .reviewLayer.typeWrite .postSns h3:after { position:absolute; top:50%; right:0; display:block; content:""; width:1px; height:10px; margin:-5px 0 0; background:#cfcfcf; }


.reviewArea .reviewLayer.typeWrite .displaynone + .postSns { border-top:1px solid #ececec; padding:14px 0 0; }

.reviewArea .reviewLayer.typeWrite .wordCount { margin:10px 9px; text-align:right; color:#757575; }

.reviewArea .reviewLayer.typeWrite .wordCount .blind { overflow:hidden; position:absolute; left:-120%; text-indent:120%; white-space:nowrap; font-size:0; line-height:0; }


  .reviewArea .reviewLayer.typeWrite .close { position:absolute; top:13px; right:9px; color:#2e2e2e; }



## 하단 생략 ##



이전글

[게시판관리] [리뷰톡톡] 리뷰글 개수 쇼핑몰 화면에 표시하기

2016-11-29

다음글

[프로모션] 무통장 입금, 적립금 결제를 사용하지 않는 해외쇼핑몰에 대해 '쿠폰 만들기' 가능하도록 기능 개선

2017-06-14