티스토리의 게시글 내의 신고 버튼을 꾸미는 방법을 찾아 보았다.

인터넷에 아무리 검색해 보아도 제대로 설명되어 있는 블로그나 글은 거의 없다.

티스토리에서 기본으로 제공되는 신고하기 버튼은 이미지 형태로 되어 있다. 그래서인지 CSS로만 수정하기는 어렵다. 여기서는 글자로 바꾸는 방법과 아이콘 폰트를 추가하는 방법을 간단히 소개하려고 한다.

(근데 현재 나의 블로그의 스킨과는 충돌이 생기는지 적용이 되지 않는다. ㅠ.ㅠ 다른 스킨에 적용하면 바로 되던데;;)

1 신고 버튼 꾸미기 1

먼저 간단히 신고 버튼의 이미지를 아래와 같이 '## 신고할꺼야' 로 바꾸어 보았다.

아래의 문구를 스킨의 HTML 에 작성한다.

그럼 신고 버튼의 이미지는 변경한 글자로 변경되어 있을것이다.

<script type="text/javascript">
$(function(){
	$(".tt_article_useless_p_margin>div:last-child").addClass("singo");
	$(".singo div a").html("## 신고할꺼야");
	$(".singo div").removeAttr("style");
});
</script>

신고 버튼 변경 결과 1

2 신고 버튼 꾸미기 2

그리고 변경된 글자의 꾸미기는 위의 스크립트에서 생성한 유닛?인 .singo 를 스킨의 CSS 에서 사용하면 된다.

예를 들면 아래와 같이 오른쪽에 정렬하고 색상도 변경해 보았다.

.singo {
    position: absolute;
    right: 20px; /* 오른쪽 정렬 */
    width: inherit !important;
    margin-top: 0px !important;
    height: auto !important;
}

.singo a {color: #07a; }  /* 글자 색상  */

신고 버튼 변경 결과 2

3 신고 버튼 꾸미기 3

이제 아이콘 폰트를 글자 앞에 추가하는 방법이다. 물론 스킨에 아이콘 폰트가 설치되어 있거나 폰트어썸 같은 웹상의 아이콘 폰트를 사용하면 된다.

신고하기 버튼에 아이콘 폰트를 추가하는 것은 CSS를 통해 입력하면 된다.

두번째 과정에서와 같이 CSS에 아래를 참고하여 문구를 추가하면 된다.

.singo a:before {
    content: "\e845"; font-family:'cczicon'; color: #e0557d;
}

신고 버튼 변경 결과 3 - 아이콘 폰트 추가

4 신고 버튼 꾸미기 4

신고 버튼을 버튼식으로 변경해보았다.


.singo {
      position: absolute;
      right: 20px; /* 오른쪽 정렬 */
      width: inherit !important;
      margin-top: -30px !important; /* 위치 정렬 */
      padding: 0 5px 5px;
      background-color: #e0557d; /* 배경 색상 - 핑크색  */
      border-radius: 5px; /* 모서리 둥글게  */
}

.singo a {color: #fff; }  /* 글자 색상 - 하얀색  */


티스토리 신고 기능 버튼을 꾸미는 방법에 대해 간단히 소개해 보았다. 이보다 더 쉽게 설명할 수는 없을듯;;;

다른 스킨에서 테스트 해보면 잘 적용되는데 정작 내 스킨에서는 적용이 안된다. 켁 -.-;

댓글
  • 프로필사진 Normal One ㅋㅋㅋㅋ 그래도 깔끔하니 예쁜데요!! 전 오히려 막 숨길거같은데... 2016.09.01 01:26 신고
  • 프로필사진 SONYLOVE 저도 숨기고야 싶긴 하지만 정부 정책이라고 하니 없앨수도 없고 좀 더 낫게 하고 싶었는데... 스킨 어딘가가 꼬인듯 해요. CCZ-CROSS 를 포함한 여러 스킨에서 하면 되는데 현재의 스킨에서는 안되네요;; 2016.09.01 16:07 신고
  • 프로필사진 Normal One 아아, 숨긴다는 게.. 신고 버튼을 티 안나게 구석에 박아놓는다는 의미였어요 ㅋㅋㅋㅋ 요거슨 신고버튼도 아름답(...)ㅋㅋㅋㅋ 2016.09.01 20:59 신고
  • 프로필사진 Dear Memory html에

    <script type="text/javascript">
    $(function(){
    $(".tt_article_useless_p_margin>div:last-child").addClass("singo");
    $(".singo div a").html("## 신고할꺼야");
    $(".singo div").removeAttr("style");
    });
    </script>

    넣었는데 변화가 없어요 ㅠㅜ
    2016.09.17 00:04 신고
  • 프로필사진 SONYLOVE 이게 스킨에 설치된 다른 제이쿼리와 충돌나면 적용이 않되더라고요. 다른 스킨에서도 되고 제 스킨도 초기 상태에서는 잘 되는데 현재의 스킨에는 어딘가 충돌이 나는지 안되더라고요. ㅜ.ㅜ 2016.09.17 00:09 신고
  • 프로필사진 IT세레스 정말 깔끔하고 너무 예쁩니다.^^ 2016.10.31 04:26 신고
  • 프로필사진 SONYLOVE 저도 바꾸고 싶은데 실상 저 자신은 안되서 적용을 못하고 있어요. ㅠ.ㅠ
    다른 스킨에서 해보면 잘 되는데 별짓을 다 해봐도 왜 여기만 안되는지 저도 답답할 노릇입니다.
    2016.10.31 09:06 신고
  • 프로필사진 비밀댓글입니다 2017.04.03 12:35
  • 프로필사진 SONYLOVE 네 도움이 되셨다니 다행이네요.
    글쓰시는데 재료가 된다니 제가 영광이네요. ㅎㅎ
    2017.04.03 13:23 신고
  • 프로필사진 Feggy 저 SONYLOVE님 티톨에서 왜 신고 버튼 디자인 변경이 안되는지 알았어요!! 이게 카테고리 글 더보기를 적용하면 안되는 거 같아요ㅠㅠㅠ 2017.04.11 09:47 신고
  • 프로필사진 SONYLOVE 오호!!
    아무리 해도 원인을 못 찾겠더니..
    다행이네요. 지금이라도 원인을 찾았으니..
    지금은 카테고리 글 더보기도 사용하지 않는데 다시 한번 시도해 봐야겠어요.
    감사합니다. ^_^;;
    2017.04.11 10:39 신고