미투데이 스킨 왼쪽에 카테고리 등 넣기.. Thoth


2009.11.23 13:08 club213 Edit

깔끔한 미투데이 스킨

thoth 블로그의 미투데이 스킨은.. 굉장히 깔끔합니다. 그래서 너무 깔끔하다 보니까 블로그라면.. 꼭 보이는 카테고리, 최근 포스트, 댓글, 트랙백 태그등이 보이지가 않습니다. 이 때문에 선택하시는 분들도 있고.. 아니신 분들도 있습니다. 저도 처음에 이 스킨을 선택했다가 한참을 저것들을 찾으려고 닥치는 대로 클릭했던 기억이 있습니다. 끝내 없다는 것을 알고서는 포기했었지요.

그럼 정말 미투데이 스킨에는 저러한 것들을 넣을 수 없는지 궁금해졌습니다. 그렇습니다. 오늘도 심심한겁니다.

그래서 HTML소스를 한번 열어봤습니다. (관리자 화면에서 볼 수 있어요.)

앗.. 그런데 이렇게 숨어 있더군요...

<!--   
                    <div class="section">
                        <h2>{$lang->newest_document}</h2>
                        <img class="zbxe_widget_output" widget="content" markup_type="list" list_count="10" skin="default" content_type="document" option_view="title" show_comment_count="Y" show_trackback_count="Y" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" page_count="1" subject_cut_size="30" module_srls="{$textyle->module_srl}" />
                    </div>
   
                    <div class="section">
                        <h2>{$lang->newest_comment}</h2>
                        <img class="zbxe_widget_output" widget="content" markup_type="list" list_count="10" skin="default" content_type="comment" option_view="title" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" page_count="1" subject_cut_size="30" module_srls="{$textyle->module_srl}"/>
                    </div>
   
                    <div class="section">
                        <h2>{$lang->newest_trackback}</h2>
                        <img class="zbxe_widget_output" widget="content" markup_type="list" list_count="5" skin="default" content_type="trackback" option_view="title" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" page_count="1" subject_cut_size="30" module_srls="{$textyle->module_srl}"/>
                    </div>
   
                    <div class="section">
                        <h2>{$lang->tag}</h2>
                        <img class="zbxe_widget_output" widget="tag_list" list_count="20" skin="default" module_srls="{$textyle->module_srl}" />
                    </div>
-->

HTML소스에서 위 부분을 찾아서 빨간색 글씨인 '<!--' '-->'를 지워 주세요.

와. 나타났어요~~

위의 그림처럼 그 부분만 삭제했는데. 최근글, 댓글, 트랙백, 태그가 나타난 것을 볼수 있을거에요. 위에서 지워준 태그는 쉽게 말해 보통 HTML에서 주석을 달때 많이 사용하고요, 위와 같이 한부분의 소스를 안보이게 처리하고 싶을때 사용을 합니다.

근데 카테고리는 보이지가 않네요? 저도 왜 그런지는 모르겠는데 카테고리는 저 부분에 쌓여있지 않았는데도 화면에 노출되지가 않더라고요.. 그래서 한번 다른 스킨에서 사용하는 소스를 가져와 아래와 같이 바꿔 보았습니다.

                    <div class="section">
                        <!--<h2>{$lang->category}</h2>-->
                        <img class="zbxe_widget_output" widget="category" skin="egg" total_title="{$lang->view_all}"  srl="{$textyle->module_srl}" />
                    </div>

먼저 카테고리 타이틀이 나올 수 있겠금 '<!--' '-->' 을 먼저 지워줍니다. 그 다음에 파란색으로 되어진 부분을 아래와 같이 고쳐줍니다.

                    <div class="section">
                        <h2>{$lang->category}</h2>
                        <img class="zbxe_widget_output" widget="category" skin="default" total_title="{$lang->view_all}"  srl="{$textyle->module_srl}" />
                    </div>

위와 아래의 차이점은 skin="default" 요 부분인데요. 아마도 카테고리 스킨 출력이 잘 안되는것 같아 보입니다.

우와~(요즘 우리 딸아이가.. 젤루 잘하는 표현이에요~) 카테고리 까지 출력이 되었습니다.

근데, 위가 너무 딱 달라 붙어있네요. 이것은 간단하게..

<br>
                    <div class="section">
                        <h2>{$lang->category}</h2>
                        <img class="zbxe_widget_output" widget="category" skin="default" total_title="{$lang->view_all}"  srl="{$textyle->module_srl}" />
                    </div>

위와 같이 아까 수정해주신 카테고리 부분 소스에 <br>을 추가해 주시면 됩니다. 말 그대로 한칸을 떨궈주는 거죠~

어때요.. 참~ 쉽죠잉~~

근데 출력되어지는 글자의 수가 너무 길다보니까 줄바꿈이 되어버려 보기가 않좋을 수도 있겠네요. 그럼 이제 글자수를 줄여보도록 하겠습니다.

                    <div class="section">
                        <h2>{$lang->newest_document}</h2>
                        <img class="zbxe_widget_output" widget="content" markup_type="list" list_count="10" skin="default" content_type="document" option_view="title" show_comment_count="Y" show_trackback_count="Y" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" page_count="1" subject_cut_size="30" module_srls="{$textyle->module_srl}" />
                    </div>
   
                    <div class="section">
                        <h2>{$lang->newest_comment}</h2>
                        <img class="zbxe_widget_output" widget="content" markup_type="list" list_count="10" skin="default" content_type="comment" option_view="title" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" page_count="1" subject_cut_size="30" module_srls="{$textyle->module_srl}"/>
                    </div>
   
                    <div class="section">
                        <h2>{$lang->newest_trackback}</h2>
                        <img class="zbxe_widget_output" widget="content" markup_type="list" list_count="5" skin="default" content_type="trackback" option_view="title" show_comment_count="N" show_trackback_count="N" show_category="N" show_icon="N" order_target="list_order" order_type="desc" thumbnail_type="crop" page_count="1" subject_cut_size="30" module_srls="{$textyle->module_srl}"/>
                    </div>
   
                    <div class="section">
                        <h2>{$lang->tag}</h2>
                        <img class="zbxe_widget_output" widget="tag_list" list_count="20" skin="default" module_srls="{$textyle->module_srl}" />
                    </div>

위에서 부터 순서대로 최근 포스트, 댓글, 트랙백, 태그 순입니다. 포스트, 댓글, 트랙백 부터 보면 list_count="숫자" 이렇게 되어 있는데 숫자 부분이 보여지는 글의 수입니다. 그리고 subject_cut_size="숫자" 에서 숫자 부분은 글자의 수입니다. 제가 해본 결과 16일때 가장 적절한것 같더라고요~ 확인해가면서 부분 부분 수정해주시면 될것 같아요~

태그 부분의 list_count="숫자"에서의 숫자는 출력되어지는 태그의 숫자입니다.

어때요.. 깔끔하게 보이나요..?

이번엔 해도그만 안해도 그만인 분류, 최근글 등을 영어로 바꿔보겠습니다.

<h2>{$lang->category}</h2>
<h2>{$lang->newest_document}</h2>
<h2>{$lang->newest_comment}</h2>
<h2>{$lang->newest_trackback}</h2>
<h2>{$lang->tag}</h2>

HTML 소스에서 각각의 부분을 찾아서 붉은 글씨 부분을 수정해 주면 됩니다. 무슨 복잡한 코드 같아 보이는데요~ 그냥 어려워 마시고.. 지워 버리고 아래와 같이 수정하시면 됩니다.

<h2>Category</h2>
<h2>Post</h2>
<h2>Comment</h2>
<h2>Trackback</h2>
<h2>Tag</h2>

물론 영어도 되고 일어도 되고 스페인어도 되고 다른 어떤 말로 사용하셔도 상관은 없습니다. 위에것은 단지 예시일 뿐입니다.

이렇게 바뀝니다.

이제 HTML부분에서 할건 거의다 했습니다. 이제 CSS파일을 건드려서 약간의 디자인을 수정해 보도록 하겠습니다. 먼저 카테고리등 타이틀 부분을 수정할건데요. CSS 파일에서 아래와 소스부분을 찾습니다.  H2 로 검색하면 금방 찾을 수 있습니다.

/* Body */
#body .extension{margin-top:-2px;}
#body .extension a{ text-decoration:none;}
#body .extension a:hover,
#body .extension a:active,
#body .extension a:focus{ text-decoration:underline;}
#body .extension .section{ color:#666; margin-bottom:40px;}
#body .extension .section h2{ padding:6px 0 6px 5px; margin:0 0 15px 0; font-size:12px; border-top:1px dotted #bdbdbd; border-bottom:1px dotted #bdbdbd; color:#000;}
#body .extension .section a{ color:#666;}
#body .extension .section a:hover{ color:#66CC00;font-weight:bold;}

.eArea{margin:20px 0px;}

사실 HTM수정하는 것도 괜시리길 뿐이지한 부분에서 모두 수정했듯이 CSS도 이곳에서 모두 수정이 가능합니다. 이 소스에서 먼저 타이틀 크기의 수정은 font-size:12px; 에서 숫자 크기를 수정하면 됩니다. 만약에 폰트도 수정하고 싶다면 font:12px NanumGothic; 이렇게 수정해 주시면 됩니다. 나눔고딕으로 수정한건데 어떤 에디터에 따라서는 한글이 깨져서 보이는 경우가 있어서 영어로 써넣은 겁니다. 그냥 에디터에서 안하고 웹페이지 자체에서 하실 경우에는 나눔고딕이라고 넣어도 상관 없습니다.

그 다음은 글씩의 색을 바꾸는건데 color:#000; 이 부분을 수정해 주시면됩니다. #뒤에 000부분에 색상코드를 넣어주시면 됩니다. (코드표 보기)

위의 그림을 보시면 타이틀 위 아래로 줄이 그어진 부분이 있는데 이 부분의 수정은 border-top:1px dotted #bdbdbd; border-bottom:1px dotted #bdbdbd; 여기서 해주면 됩니다. border-top은 윗줄의 속성, border-bottom은 아랫줄의 속성입니다.  1px는 선의 굵기 dotted는 점선 #bdbdbd는 컬러입니다. 혹 죽을 지우고 싶으면 다 삭제 해버리면 되고 윗줄만 지우고 싶으면  border-top:1px dotted #bdbdbd;을 지워 버리면 됩니다.

#body .extension .section a{ color:#666;} .은 링크가 걸려진 텍스트의 속성입니다. color:# 뒤의 코드를 바꿔 주시면 역시 텍스트의 컬러가 바뀝니다.

#body .extension .section a:hover{ color:#66CC00;font-weight:bold;}은 링크가 걸린 텍스트 위에 마우스를 올렸을때 나타나는 이벤트 입니다. color:# 뒤의 코드는 역시 색상을, font-weight:bold; 은 글씨의 굵기를 나타냅니다.

저는 아래와 같이 수정을 했습니다.

/* Body */
#body .extension{margin-top:-2px;}
#body .extension a{ text-decoration:none;}
#body .extension a:hover,
#body .extension a:active,
#body .extension a:focus{ text-decoration:underline;}
#body .extension .section{ color:#666; margin-bottom:40px;}
#body .extension .section h2{ padding:6px 0 6px 5px; margin:0 0 15px 0; font:16px nanumgothic;  border-bottom:2px dotted #eeeeee; color:#4DAADB; font-weight:bold;}
#body .extension .section a{ color:#666;}
#body .extension .section a:hover{ color:#4DAADB;}

.eArea{margin:20px 0px;}

이뻐 보이나요..?

그런데 타이틀 부분의 폰트는 나눔고딕으로 변경이 되었는데 다른 부분은 그렇지가 않네요?
CSS에서 아래의 소스부분을 찾습니다.

body { font-family:AppleGothic, Tahoma; font-size:12px; margin:0; background-color:#fff; color:#000;}

아래와 같이 나눔고딕을 추가해 주세요.

body { font-family:NanumGothic, AppleGothic, Tahoma; font-size:12px; margin:0; background-color:#fff; color:#000;}

모든 부분이 나눔 고딕으로 변경되었습니다.

해보시면 아시겠지만.. 글만 장황하지 수정하는 부분은 그렇게 많이 없습니다. 해보시면 금방 하실 수 있는 것들이구요. 이거 해보시면 아마 다른 곳들도 수정하고 싶어서 몸이 근질근질 하실거에요. 아마도 CSS부분만 잘 찾아 보시면 되지 않을까 싶네요.

그리고, 카운터두 넣을려구 했는데 카운터가 오른쪽으로 딱 부터 있어서 어떻게좀 해볼라고 하는데 꼼짝하지 않아서 빼버렸습니다. 제 능력으로는 안되드라구요 ㅠ_ㅠ.
혹시나 카운터가 달고 싶으시면 

<div class="section counter">
<img class="zbxe_widget_output" widget="counter_status" skin="styx_flash" colorset="normal" />
</div>

위 소스를 위에서 수정한 HTML중 태그부분 밑에 넣어주시면 됩니다.

그럼 길고도 길지만 간단한 미투데이 스킨에 카테고리 등을 넣는 방법이었습니다.


- HTML, CSS파일 수정하고 난후에.. 스킨을 바꾸려면은... 꼭 메모장등 에디터 프로그램에 두 파일의 소스를 복사해놓구 저장해서 사용할것을 경고합니다.
-잘못하면.. 똑같은일 두번해야 할수도 있어요 ㅠ_ㅠ 

Share
2
이 글과 관련된 글
  1. [2012/02/08] 토트의 세계에 오신것을 환영합니다! by 한성민 (0)
  2. [2012/02/08] 토트의 세계에 오신것을 환영합니다! by 망각의선율 (0)
  3. [2012/02/07] 토트시작! by 메인포 (15)
  4. [2012/02/01] 토트의 세계에 오신것을 환영합니다! by 느낌표 (0)
  5. [2012/02/01] 토트의 세계에 오신것을 환영합니다! by anclion (0)
TAG
,  ,  ,  ,  ,  ,  , 

Leave Comments

Category

전체글 (97)

Recent Post

Recent Comment

Recent Trackback

Tag

T-NAVI