티스토리 스킨의 네임카드 CSS 코드 수정

로그아웃 했을 때의 네임카드 형태

 

로그인 했을 때의 네임카드 형태

 

 

수정이 필요한 서버 파일 comment.css의 네임카드 관련 코드

 

/* https://tistory1.daumcdn.net/ ... /style/comment.css */

.tt_box_namecard {
  display: flex;
  justify-content: space-between;
  position: relative;
  min-height: 206px;
  background-color: #F7F7F7;
  margin-top: 20px;
  margin-bottom: 20px;
}

.tt_box_namecard .tt_btn_subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  margin-top: 13px;
  margin-bottom: 32px;
  padding: 0 16px;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: 20px;
  font-size: 0;
  line-height: 0;
  border: 1px solid #555;
  box-sizing: border-box;
}

 

서버 아닌 사용자 계정 블로그의 style.css 파일 수정으로 대체

 

 

위에 예시한 이미지는 티스토리 블로그의 글 페이지 댓글 입력 칸 바로 위에 위치하는 네임카드입니다.

※ 이미 아래 설명하는 수정 코드를 반영한 캡처 이미지

※ 주황색 선은 정확한 테두리 범위를 보여 주기 위하여 색칠

 

티스토리 본사 서버의 comment.css 파일에 삽입한 코드를 그대로 사용하면 로그인 전과 후의 이미지 하단 여백이 지나치게 넓게 차지하여 보기에 좋지 않습니다.

 

현재 상태를 유지하려면 손댈 필요가 없고, 눈에 거슬리면 본사에서 해당 파일 comment.css 수정할 때까지 아래 코드를 임시로 적용해도 됩니다. 사용자 계정의 style.css 파일의 적당한 위치에 끼워 넣습니다.

 

본사에서 어떤 형태로 코드를 수정할지 모르지만, 올바르게 디자인이 정리되면 임의로 덧붙인 코드는 삭제해야 합니다.

 

PC와 모바일에 모두 적용해야 하니까, PC 관련 코드가 끝나는 부분에 넣으면 될 것입니다.

북클럽 스킨의 경우 "/* ETC */"나 "/* Overwrite */" 항목에 집어넣으면 적당합니다.

 

---

 

#tt-body-page .tt_box_namecard {
  min-height: 0;
  padding-bottom: 32px;
}

#tt-body-page .tt_box_namecard .tt_btn_subscribe {
  margin-bottom: 0;
}

 

---

※ CSS 코드 수정하기 전 네임카드 모습

- 카드의 높이가 내용과 무관하게 높습니다.

 

로그인

로그아웃