태터데스크 스타일 수정 - CSS

처음에 태터데스크를 적용 하고 한참동안 몰랐던 부분인데 웹폰트를 사용하는 블로그나 본문에 다른 글을 사용하는 경우 폰트 크기가 달라 첫화면의 폰트들이 크게 보이거나 색깔이 맞지 않아서 애를 먹었었다.
결국 스킨을 수정 하듯 태터데스크의 스타일 시트를 하나하나 건들여 보고 나서야 글씨가 바뀐다는 사실을 알았는데 의외로 이부분을 모르는 사람들이 많은것 같다.

오른쪽 상단의 태터데스크 에서 디자인편집을 선택 하면 태터데스크 스타일수정 - CSS 영역이 보인다.
그부분의 스타일 시트를 수정해야만 원하는 폰트를 첫화면에 나타낼수 있다.

태터데스크 스타일수정 - CSS

#TD_content p{ padding:0; margin:0; }

.TD_headline a{ font-size:1.2em; color:#333; font-weight:bold; } <-- 제목영역이다.

웹폰트를 사용하고 있기 때문에 폰트 싸이즈가 영향을 미친다. 그래서 밑에 처럼 수정을 했다.

.TD_headline a{ font:9pt 모리스9; color:#737373; font-weight:bold; }

TD_subtitle{ font-size:9pt; font-weight:bold; color:#737373;}

.TD_summary{ color:#4B4B4B;  font:9pt/ 모리스9, verdana; }<--이부분은 요약글 영역이다.
스타일시트에 없기 때문에 이부분의 치환자를 보면 item_summary<--요약글이라고 나온다.
그래서 이부분을 추가 해준다.

.TD_date { color:#999; font:0.9em verdana;} <-- 제목옆의 날짜 나오는 부분이다.

.TD_date { color:#999; font:9pt 정체9, verdana; }  이부분도 수정을해줬다.

.TD_category { margin-left:2px; }

.TD_category a{ color:#999; }
.TD_name { font-weight:nomal; }
.TD_tagbox{ padding:5px 0; }
.TD_tagbox .TD_tagtitle{
 background:url(../image/ico_tag.gif) no-repeat;
 width:30px; height:14px; float:left; }
.TD_tagbox .TD_tagtitle span{ display:none; }
.TD_thumbnail{ border : 1px solid #fff; }

/* 헤드라인형 모듈 */
.TD_toparticle {
    margin: 5px;
    position:relative;
    overflow:hidden;
    padding-bottom:10px;
    border-bottom:1px solid #ccc;
}
.TD_toparticle .TD_titleinfo {
 padding-bottom:5px;
}
.TD_toparticle .TD_tblist {
 margin-top:5px;
 clear:both;
}
.TD_toparticle .TD_tblist ul{
 list-style:none;
 padding:0 10px 0 10px;
 margin:0;
}
.TD_toparticle .TD_tblist li {
 background:url(../image/bull_relate.gif) no-repeat;
 padding: 0 0 0 14px;
 margin:0; 
}

/* 섬네일 목록형 모듈 */
.TD_thumblist{
    margin: 5px;
    position:relative;
    overflow:hidden;
    margin-bottom:10px;
}

/* 목록형 모듈 */
.TD_list{
    margin:5px;
}
.TD_list .TD_date {
 margin-left:5px;
 font-weight:normal;
}

/* 앨범형 모듈 */
.TD_album{
    margin:5px;
}
.TD_album img {
    margin-right:10px;
}
.TD_album .TD_headline {
    padding-top:5px;
}

/* 최신글의 더보기 */
.TD_more{  <-- 이부분 밑에 아래문구를 추가해준다.
    text-align:right;
    padding:5px 5px 7px 5px;
    margin:10px 5px;
    color:#737373;
    background-color:#eee; }

.TD_more_title a{ font-weight:bold; float:left; margin:-2px; font-size:9pt; color:#4B4B4B; }

* html .TD_more{height:20px;}

.TD_more_btn a{font:0.9em dotum; padding-top:5px;  } <----이부분에 컬러를 추가 한다.

.TD_more_btn a{ font:0.9em dotum; padding-top:5px; color:#8DC63F; }

.TD_recent{
}
.TD_recent .TD_list .TD_headline a{
    color:#4B4B4B;
    font-weight:normal !important;
    padding:0;
    font-size:1em;
}
/* 최신글 텍스트 목록형 */
.TD_recent .TD_list{
    margin:5px;
    background:url(../image/bull_rect.gif) 6px 8px no-repeat;
    padding:3px 0 0 14px;
}

/* 최신글 섬네일 목록형 */
.TD_recent .TD_thumblist{
    margin:5px;
    overflow:hidden;
    padding:0px;
}
.TD_recent .TD_thumblist .TD_headline{
    font-size:0.9em;
}

/* 최신글 앨범형 */
.TD_recent .TD_album {
    margin:5px;
    text-align:center;
    overflow:hidden;
}

.TD_recent .TD_album .TD_headline {
    font-size:0.9em;
    height:20px;
    overflow:hidden;    
    padding-top:4px;
}

/* 슬라이드형 모듈 */
.TD_slide{
    margin:2px;
    padding:0;
 float:left;
}

.TD_slide .TD_thumbnail{
 margin:0;
    padding:0;              
    border:3px solid  #ddd; 
}
.TD_slide  img{
 margin:0;
    padding:0;              
}

다른영역도 치환자를 보면서 본인에게 필요한 부분을 추가하거나 수정 해주면 박스 형태나 색상 등도 바꿀수 있다.