게시물을 쓴 날이 표시되는 달력 모듈이 좋다. 출첵하는 느낌도 들고, 보람을 느낄 수 있기 때문에! 직접 추가해봤다.
내가 적용한 결과와 코드
skin.html
<s_sidebar_element>
<!-- 달력 -->
<div class="sidebar-item recent">
<h3>달력</h3>
<div class="media">
<div class="media-body">
« 2024/05 » 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
</div>
</div>
</div>
</s_sidebar_element>
style.css
/* calendar */
.cal_day a {display:inline-block; padding:3px 7px; background:#2E4DA7; color:#fff;}
나는 게시물 쓴날만 표시하고 싶어서 간단하게 cal_day a 만 수정했다.
따라한 포스트를 따라하니 잘 안되어서 직접 페이지소스를 보며 수정했는데, 스킨마다 적용하는 방법이 조금씩 차이가 나는 것 같다.
참고한 게시물
skin.html 수정하기
skin.html에 들어가서 sidebar를 검색해보면 사이드바 관련된 것들이 추가된 부분인 <s_sidebar> ~ </s_sidebar> 있을 것이다. 이 사이 아무데나 넣으면 된다.
<s_sidebar_element>
<!-- 달력 -->
<div>
<h1>CALENDAR</h1>
« 2024/05 » 일 월 화 수 목 금 토 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
</div>
</s_sidebar_element>
핵심은 <s_sidebar_element> ~ </s_sidebar_element> 사이에 <div> 안에
를 넣는 것이다!
일
월
화
수
목
금
토
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
당신이 사용하는 스킨에 따라서 div, h1 부분이 다를 수 있으니 본인 스킨에 맞춰 잘 맞춰서 쓰면 된다.
이렇게만 적용하면 위와 같이 기본 달력이 뜬다! 오잉 생각보다 괜찮은데?ㅋㅋㅋㅋㅋ
style.css 수정하기
당신이 원하는 스타일로 변경하려면 style.css를 수정하면 된다.
/* calendar */
.calendar {}
.calendar .tt-calendar {}
.calendar .tt-calendar caption {font-size:1em}
.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.875em; font-weight:normal}
.calendar .tt-calendar td {font-size:0.75em; color:#bbb}
.calendar .tt-calendar .cal_current_week {background:#f5f5f5}
.calendar .tt-calendar .cal_week2, .calendar .tt-calendar .cal_day_sunday {color:red}
.calendar .tt-calendar td a {display:inline-block; padding:2px 8px; background:#2E4DA7; color:#fff; border-radius:30px;}
.calendar .tt-calendar .cal_day4 {background:#333; color:#fff}
.cal_day4 a {background:#333}
나의 경우 이대로 하려니 적용이 제대로 안되어서 페이지소스를 직접 보며 바꿨다.
참고한 게시물을 보면 알 수 있듯이 달력의 소스코드를 보면 table 안에 caption > a, thead > tr > th, tbody > tr > td 이런식으로 들어가게 되는데 style.css를 수정할 때 관심있게 봐야하는 것은 class 이름이다!
클래스 이름을 활용하여 css를 꾸며줘야 한다.
기본 달력에서 일부분만 바꿀거면 나처럼 해당 요소만 찾아 붙여주면 된다.
'블로그 꾸미기' 카테고리의 다른 글
| WNSKIN, 블로그 스킨 추천 (0) | 2017.11.23 |
|---|