CSS 편집으로 네임카드 숨기기

 

블로그 활성화를 위해 스킨을 다듬는 중이다.

 

다크모드로 써보자고 이것저것 다듬는 중인데, 현재 스킨의 바탕이 되는 Book Club은 라이트모드가 기본이라 CSS 코드 덧씌우기만 어설프게 해서는 군데군데에서 눈뽕(?)을 당하게 된다.

 

오늘은 오전 내내 매달린 것이 하나 있었는데, 바로 네임카드 편집.

 

문제는 크게 두 가지였다.

 

1. 블로그 제목과 소개글이 링크된 글의 색상과 동일하게 처리되어 연보라색으로 출력되는 문제.

2. 구독하기 버튼의 내부 글자와 배경 색상을 변경할 수 없는 문제.

 

개발자 모드에서 한참 소스를 살펴보고 관련 키워드를 CSS에서 검색해보았지만 건들 수 없었다.

important 값을 넣어서 색상에 대한 우선 처리를 강제해도 꿈쩍도 하지 않는 색상들.

 

알고보니 티스토리에서 기본값으로 고정해둔 요소들은 함부로 고칠 수 없다고 한다.

그것도 모르고 오전 내내 네임카드 하나 고쳐보겠다고 얼마나 많은 시간을 낭비하였던가...

 

하얀 부분은 블로그 오류가 아니라, 색상을 맞추지 않아서 이상하게 출력되고 있는 네임카드 공간이다.

 

여하튼 다른 블로그들을 찾다보니 그냥 이 부분이 거추장스러워서 숨김처리를 하신 분들도 더러 있다는 것을 알 수 있었다.

GPT를 당장 키고 네임카드를 숨기는 코드를 짜달라고 했다.

 

   /* ===================================================================
     3. 네임카드 숨기기
  =================================================================== */
  div[data-tistory-react-app="Namecard"] {
  display: none; /* 보이지 않기 */
  }

 

복붙해서 넣어보니 제대로 작동한다.