[220317] 티스토리 캘린더 위젯 / 색상, 여백 세부 조정

의도

그간 기록한 결과를 달력별로 깔끔하게 모아보고 싶다.

 

 

---

 

과정

 

https://tistory.noo9ya.com/67

Section 23 - 티스토리 반응형 스킨 만들기 - [사이드바] 달력

 

포스팅한 기록을 날짜별로 볼 수 있는 달력형 위젯을 알게 되어서 적용했다.

내 티스토리 컨셉색에 맞게 색 변경이랑 여백을 세부 조절함.

 

 

html 코드에서 header 안에 작성할 코드

<s_sidebar_element>
    <!-- 달력 -->
    <div class="calendar">
        <h1 class="sr-only">CALENDAR</h1>
        

  
«   2024/09   »
  

    

      
일
      
월
      
화
      
수
      
목
      
금
      
토
    
  
  

    

      
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
      
 
      
 
      
 
      
 
      
 
    
  

    </div>
</s_sidebar_element>

 

css 코드 안에 작성할 코드와 세부조정건

* calendar */
//아래에 여백을 46px를 줌
.calendar {margin-bottom:46px;}

.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 .cal_month {margin-bottom:15px;}
.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}

//background 색상 변경
.calendar .tt-calendar td a {display:inline-block; padding:2px 8px; background:#04beb8; color:#fff; border-radius:30px;}

.calendar .tt-calendar .cal_day4 {background:#333; color:#fff}
.calendar .tt-calendar .cal_day4 a {background:#333}

 

 

기존은 주황색이었지만 나는 청색계열을 좋아하므로 메인컬러인 #04beb8;로 맞췄다.

메뉴에 끼워넣으니 여백 없이 딱 달라붙길래 아래에 46px정도 여백을 줌

.calendar {margin-bottom:46px;}
.calendar .tt-calendar td a {background:#04beb8;}

 

원하는 색상의 웹코드를 찾거나 저장하고 싶을때는 colorzilla 사이트에서 크롬에 적용할 수 있는 도구를 제공하니 사용하면 편하다.

https://www.colorzilla.com/

ColorZilla - Eyedropper, Color Picker, Gradient Generator and more

---

결과

보다 더 쾌적하고 깔끔한 홈을 얻었다.