현재 사용 중인 스킨은 정상우님이 개발한 hELLO 스킨이다.
(참고로 스킨을 다운로드 받고 싶다면 포스팅 중간에 있는 링크를 클릭하여 받으면 된다. 제작자님께 감사를 표하는 마음으로 깃허브 링크 타고 들어가 별 누르고 와준다면 더 좋다b)
기존에 사용하던 티스토리 기본 스킨은 코드 블럭 사용 시에 Tab이 지나치게 넓은 간격으로 잡히는 것도 마음에 안 들었고, 코드 하이라이트도 실제 IDE와 다른 부분이 종종 있었다.
hELLO 스킨은 구글링하면서 다른 코드 블로그 보다가 발견한 스킨인데, 이 코드 블럭이 너무 예쁘고 마음에 들어서 나도 따라 적용하게 됐다.
(참고로22 이 예쁜 코드 블럭을 보려면 hELLO 스킨 적용 후 플러그인에서 >코드 문법 강조<를 해제해야 한다)
(다크/라이트 모드, 목차 생성, 접은 글 같은 것도 참 예쁘고 편하고 맘에 든다.)
그런데 한 가지 아쉬운 점이라면.. 바로 달력 모듈이 따로 없다는 것...
포스팅 꼬박꼬박 할 때면 작성 날짜가 달력에 표시되는 게 은근 뿌듯하고 마음에 들었는데, 이 스킨에는 그 모듈이 없었다. 대충 다른 코드 copy&paste 해봤는데, 아무래도 다크/라이트 모드가 있다보니 텍스트 색상도 맞지 않았고 너비도 자꾸 안 맞더라.
결국 돌아다니는 코드 하나 잡고 이 스킨에 맞게 조금 매만졌다.
혹시 다른 사람들은 (혹은 혹시라도 스킨 초기화하고 이걸 다시 찾을지도 모르는 미래의 나는) 찐으로 copy&paste만 하라고 기록해둔다.
참고로, hELLO 스킨에 적용하려고 수정했기 때문에 반대로 다른 스킨에 적용하려 한다면 또 수정이 필요할 수 있다.
1. html 코드에 달력 모듈 추가
```s_sidebar_element```를 검색하면 사이드바에 사용되는 모듈들이 검색된다. s_sidebar 태그 안에 아래 모듈을 추가해주면 된다.
<s_sidebar_element><!-- 달력 모듈-->
<div class="calendar">
[<!-- ##_calendar_## -->]
</div>
</s_sidebar_element>```##_calendar_##``` 좌우에 주석 마크해뒀는데, 그 부분은 주석마크만 지우면 된다.
이게 주석을 저렇게 해두지 않으면, 코드 블럭인데도 (심지어 포스트 본문에서도) 티스토리 치환자가 적용되어 달력이 생기더라..
그래서 스샷도 하나 찍어오자면 나는 이렇게 작성해뒀다.
2. CSS 코드 추가
/* --- Calendar Module --- */
.calendar {
width: var(--h-s);
padding-left: 1.25rem;
padding-right: 1.25rem;
--tw-text-opacity: 1;
color: rgb(30 31 33 / var(--tw-text-opacity))
}
.dark .calendar {
--tw-text-opacity: 1;
color: rgb(244 244 246 / var(--tw-text-opacity))
}
.calendar .tt-calendar {}
.calendar .tt-calendar caption {font-size: 0.855em;margin-bottom: 0.7em;}
.calendar .tt-calendar caption a:first-child, .calendar .tt-calendar caption a:last-child {color:#999; font-size:0.375em}
.calendar .tt-calendar caption a {vertical-align:middle}
.calendar .tt-calendar th, .calendar .tt-calendar td {padding:5px 0;text-align:center;}
.calendar .tt-calendar th {font-size: 0.700em;font-weight:250;color: rgb(138, 138, 138);}
.calendar .tt-calendar td {font-size:0.75em;color: #7e8ba3;}
.calendar .tt-calendar .cal_current_week {}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {color:rgb(230, 82, 82)}
.calendar .tt-calendar td a {
display:inline-block;
border-radius: 100%;
width: 22px;
height: 22px;
font-weight: 700;
line-height: 20px;
text-decoration : underline;
}
.calendar .tt-calendar .cal_day4 a {
background: #7e8ba3;color: #fff;
}사실 hELLO 스킨에 작성돼있는 CSS 코드를 보면 ```class="el" id="~"``` 형태로 되어있는데, 이건 그냥 간단하게 끼워넣기 하는 거라서 애써 통일하지는 않았다.
대신 el 클래스에서 width 지정하는 부분과 dark/light 모드에 따라 색상 변경하는 코드를 그대로 복사해서 추가했다.
그리고 나머지는 도움 받은 포스팅 링크에서 복사해 온 부분을 내 입맛에 맞게 조금씩 변경했다. (글 작성 날짜의 원 배경 대신 폰트 굵게+밑줄 추가 등등)
3. 관리 페이지 → 꾸미기 → 사이드바에서 달력 모듈 추가 잊지 말기
<도움 받은 링크들>