SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2024/04   »
  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        

Monochrome Skin [Ver2.0] 1st A/S

상태 불량한 스킨에 지나친 관심 감사드리며.. 일일히 답하는것 보다, 한꺼번에 적는 것이 편할 것 같아 몇 자 적어 보렵니다. "두서" 가 없어도, "논리" 가 "정연" 이를 만나지 못해도 이것을 알아보면 당신이 챰피욘~!


스킨을 깔았는데 글 제목의 폰트가 너무 크게나와서 2줄로 되는군요.

1. 본문글 제목의 글자 크기는 style.css 에서 변경하실수 있습니다.


style.css 574라인 부근에... (에디터에서 post title 을 찾으시면 금방 찾으실수 있습니다.)
#content h2 a{    /* post title Link*/
    font: 29px Trebuchet MS, Verdana, Arial, 맑은 고딕, 굴림, gulim, sans-serif;
    color: #555;
    font-weight: 400;
    letter-spacing:-3px;
    text-decoration:none;
    padding: 15px 15px 3px 10px;
    border-bottom: 2px solid #f4f4f4;
}
29px 를 적당히 줄여주시면 OK~

그에 더해서 조금 더 아래 보시면.. (589라인..)
#content h3 {    /* tag, search, location, guestbook title */
    background: url(images/title2.gif) no-repeat top left;
    padding: 15px 15px 3px 50px; 
    font: 29px Trebuchet MS, Verdana, 맑은 고딕, 굴림, gulim, sans-serif;
    color: #555;
    font-weight: 500;
    letter-spacing:-3px;
    text-decoration:none;
    margin:10px 0;
    border-bottom:1px solid #ddd;   
}
이것은 주석에서 알수 있듯이 태그, 방명록 등등의 제목 글의 크기입니다. 본문 제목의 크기와 동일하게 맞춰 주시면 보기 좋을것 같네요. 물론 수정 하시지 않아도 OK~




맨위의 Home Desktop....Guestbook 처럼 메뉴를 추가하고 활성화 시키려면 어떻게 해야 하는지요.

2. 상단 메뉴바에 다른 링크를 넣으시는 건 아래와 같은 방법으로...


일단 넣으시려는 링크는 어떤 링크라도 상관이 없으나, 현재 페이지에서 활성화(?).. 에 그러니까 현재 페이지를 표시할 수 있는 경우는 태터툴즈의 카테고리 링크만 가능합니다. (태터툴즈의 카테고리만이 각기 다른 Body ID를 가질 수 있을 테니까요.)
우선 태터툴즈 관리자 페이지 - 글 - 분류 관리 에서 상단 메뉴바에 넣으실 카테고리의 Body-ID 를 변경해 줍니다. 형식은 아무래도 상관 없으나 tt-body-dtopshot, tt-body-diary 이런 형식으로 넣으시는게 좋겠어요.
그 다음, skin.html을 에디터로 열고.. 37라인 부근에서 아래와 같은 부분을 찾습니다.
    <div id="menu1">
        <div id="tabsB">
            <!-- CSS Tabs 상단 탭에 추가하실수 있습니다-->
            <ul>
                <li class="tab_hm"><a href="[##_blog_link_##]" title="처음으로~"><span>Home</span></a></li>
                <li class="tab_lc"><a href="[##_localog_link_##]" title="위치로그"><span>Location</span></a></li>
                <li class="tab_tag"><a href="[##_taglog_link_##]" title="태그"><span>Tag</span></a></li>
                <li class="tab_key"><a href="[##_keylog_link_##]" title="키워드"><span>Keyword</span></a></li>
                <li class="tab_guest"><a href="[##_guestbook_link_##]" title="방명록"><span>GuestBook</span></a></li>
            </ul>
        </div>
    </div>

<ul> 안에다 넣고 싶은 링크를 넣습니다. href 안에 치환자 형식이 아닌 일반 링크를 넣으시면 되요. :)
예를 들면..
 
<li class="AAAAA"><a href="http://hi8ar.net/category/이후 주소" title="팝업창에 뜨게할 문구"><span>메뉴이름</span></a></li>
이렇게 말이에요. ;; 다만 li class 를 넣어 주셔야 하는데.. (설명의 편의를 위해 AAAAA 로 하겠습니다.) 나중에 기억하실수만 있다면, 아무렇게나 적으셔도 됩니다. ^^
이런식으로 skin.html 에 모두 추가하셨다면,

style.css 를 열어.. 거의 마지막 부분..(1109라인..) /*bodyID TAB Navigation SET 를 찾습니다.
/*bodyID TAB Navigation SET  ===============================================
body#tt-body-page #tabsB .tab_hm a,
body#tt-body-location .tab_lc a,
body#tt-body-tag #tabsB .tab_tag a,
body#tt-body-keylog #tabsB .tab_key a,
body#tt-body-guestbook #tabsB .tab_guest a,
body#tt-body-dtopshot(관리자페이지 분류에서 설정했던 Body id) #tabsB .AAAAA a {
    background:url("images/tableftB2.gif") no-repeat left top;
}
body#tt-body-page #tabsB .tab_hm a span,
body#tt-body-location .tab_lc a span,
body#tt-body-tag #tabsB .tab_tag a span,
body#tt-body-keylog #tabsB .tab_key a span,
body#tt-body-guestbook #tabsB .tab_guest a span,
body#tt-body-dtopshot #tabsB .AAAAA a span {
    background:url("images/tabrightB2.gif") no-repeat right top;
    color:#993333;
}
body#tt-body-page #tabsB .tab_hm a:hover span,
body#tt-body-location .tab_lc a:hover span,
body#tt-body-tag #tabsB .tab_tag a:hover span,
body#tt-body-keylog #tabsB .tab_key a:hover span,
body#tt-body-guestbook #tabsB .tab_guest a:hover span,
body#tt-body-dtopshot #tabsB .AAAAA a:hover span {
    color:#000;
}
결론 부터 말씀드리면, ID #tabsB 아래 앞서 class AAAAA로 설정했던 li 를 각각 다른 body ID 에서만 반응할 수 있도록 하는 것입니다..(에.. 이게 뭔 말인지...ㅡ,.ㅡ;) 그러니까, body-ID 하나와 li class 는 각기 한쌍씩이 되어...ㅡ,.ㅡ' 설명이 불필요하게 복잡하지만, 빨강색으로 적힌 부분을 찬찬히 보시고, 위와 같은 형식으로 추가해 주시면 OK~

아래는 현재 제 블로그의 소스입니다. ;;

	<div id="menu1">
<div id="tabsB">
<!-- CSS Tabs 상단 탭에 추가하실수 있습니다-->
<ul>
<!-- CSS Tabs -->
<li class="tab_hm"><a href="http://hi8ar.net/" title="처음으로~"><span>Home</span></a></li>
<li class="tab_ds"><a href="http://hi8ar.net/category/Dtop%20Shot" title="데스크탑 스냅샷"><span>Desktop</span></a></li>
<li class="tab_wp"><a href="http://hi8ar.net/category/Wallpaper" title="월페이퍼"><span>Wallpaper</span></a></li>
<li class="tab_ms"><a href="http://hi8ar.net/category/Misc" title="잡동사니"><span>Misc</span></a></li>
<li class="tab_cn"><a href="http://hi8ar.net/category/C.note" title="커스토마이징 노트"><span>C.note</span></a></li>
<li class="tab_dr"><a href="http://hi8ar.net/category/Diary" title="다이어리"><span>Diary</span></a></li>
<li class="tab_mu"><a href="http://hi8ar.net/tag/Music" title="음악이 필요해?"><span>Music</span></a></li>
<li><a href="http://hi8ar.net/19" title="이것저것 링크~"><span>Link</span></a></li>
<li class="tab_tag"><a href="http://hi8ar.net[##_taglog_link_##]" title="태그"><span>Tag</span></a></li>
<li class="tab_key"><a href="http://hi8ar.net[##_keylog_link_##]" title="키워드"><span>Key</span></a></li>
<li class="tab_guest"><a href="http://hi8ar.net[##_guestbook_link_##]" title="방명록"><span>GuestBook[##_today_guest_##]</span></a></li>
</ul>
</div>
</div>

/*bodyID TAB Navigation SET  =============================================================*/
body#tt-body-page #tabsB .tab_hm a,
body#tt-body-dtopshot #tabsB .tab_ds a,
body#tt-body-wallpaper #tabsB .tab_wp a,
body#tt-body-misc #tabsB .tab_ms a,
body#tt-body-cnote #tabsB .tab_cn a,
body#tt-body-diary #tabsB .tab_dr a,
body#tt-body-tag #tabsB .tab_tag a,
body#tt-body-keylog #tabsB .tab_key a,
body#tt-body-guestbook #tabsB .tab_guest a {
background:url("images/tableftB2.gif") no-repeat left top;
}
body#tt-body-page #tabsB .tab_hm a span,
body#tt-body-dtopshot #tabsB .tab_ds a span,
body#tt-body-wallpaper #tabsB .tab_wp a span,
body#tt-body-misc #tabsB .tab_ms a span,
body#tt-body-cnote #tabsB .tab_cn a span,
body#tt-body-diary #tabsB .tab_dr a span,
body#tt-body-tag #tabsB .tab_tag a span,
body#tt-body-keylog #tabsB .tab_key a span,
body#tt-body-guestbook #tabsB .tab_guest a span {
background:url("images/tabrightB2.gif") no-repeat right top;
color:#993333;
}
body#tt-body-page #tabsB .tab_hm a:hover span,
body#tt-body-dtopshot #tabsB .tab_ds a:hover span,
body#tt-body-wallpaper #tabsB .tab_wp a:hover span,
body#tt-body-misc #tabsB .tab_ms a:hover span,
body#tt-body-cnote #tabsB .tab_cn a:hover span,
body#tt-body-diary #tabsB .tab_dr a:hover span,
body#tt-body-tag #tabsB .tab_tag a:hover span,
body#tt-body-keylog #tabsB .tab_key a:hover span,
body#tt-body-guestbook #tabsB .tab_guest a:hover span {
color:#000;
}



맨위에 플립형 시계 플러그인은 어떻게 달수 있나요?

3. 플립형 시계는 ClockLink 에서 제공하는 템플릿? 위젯?..
뭐 그런겁니다.. ㅡ,.ㅡ'

http://www.clocklink.com/ENG/gallery_digital.htm
페이지 제일 하단쯤에 있습니다. :)

우연찮게 모노크롬 스킨과 딱 어울리는 녀석을 발견해서 달아 봤습죠.. 냐냐냐~

아무튼, View Html Tag 를 누르시면.. 아래와 같은 창에서 (색상과 Timezone을 선택하신후) 시계를 넣으실수 있는 태그를 얻으실수 있습니다.
User inserted image

태터툴즈는 당연히 script 를 넣을수 있으니 Embed 가 아닌 Script 태그를 복사하신후..

skin.html 제일 마지막 부분 쯤에 적당히 쑤셔 넣습니다. :)
</div> <!-- Container END-------------------------

<div id="clock">

  <script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj = new Object;obj.clockfile = "5012-gray.swf";obj.TimeZone = "JST";obj.width = 91;obj.height = 30;obj.wmode = "transparent";showClock(obj);</script>
</div>

</body>
position을 absolute로 잡을것이기 때문에 소스의 위치는 <body> 의 안에만 위치하면 괜찮겠습니다. 냠냠~ ㅡ,.ㅡ' 다만, 아무래도 페이지 로딩시 clocklink 사이트에 다녀 와야 할테니, 다른 콘텐츠를 모두 띄우고, 시계가 로드 될 수 있도록 마지막 쯤에 적어 주시는게 좋겠어요.

style.css 를 열어.. 아래와 같이 추가 합니다.
#clock {
position: absolute;
right:10px;
top:10px;
}
이렇게만 해 주시면 That's it~!

예쁘긴 하지만, 사이트 로딩 속도를 더디게 할 테니, 썩 추천하고 싶은 시계는 아닙죠. :)



메인 상단 이미지는 어떻게 넣어야 되는 건가요?

4. 메인 상단의 이미지는 이런식으로...

User inserted image
스킨의 images 폴더에 보시면, top.gif 파일이 있습니다.
<- 요로코롬 생긴 녀석.. 가로 242 x 세로 156 크기의 그림이 반복되는 형태입니다.









style.css 239라인
#timg {
    text-align: left;
    padding: 85px 15px 0px;
    background: #000 url('images/top.gif') repeat;
    height: 50px;
}
기본적으로 검정색(#000)을 배경으로 하고, 그 위에 top.gif 파일을 반복해서 출력하는 형태... 실제 상단 메인 이미지가 갖는 세로 크기는 135px 쯤 되겠으니 그림의 아래 부분이 살짝 짤리는 형태입니다.

아무튼 저의 경우는 가로크기 1280px 짜리 이미지를 넣었습니다.
User inserted image
이따만한것을 통째로... ㅡ,.ㅡ'' 따라서 모니터의 해상도가 1280px 이 넘지 않는 이상 한개의 그림만 보인다 이것입죠. 냐냐냐~ 따라서 모니터 해상도 가로크기 1280px 이신 분의 모니터에선 우측에 위 이미지가 하나 더.... 아무튼 썩 훌륭하지 않은 편법입니다. :)

앞서 position: absolute 를 모기발의 피 만큼 설명했으니, 적당한 이미지를 가운데쯤 하나 딱 띄우실 수도 있겠네요.


웹표준?? 그런건 이런것으로 밥 벌어 드시는 분들께 맡기도록 하고...


다행이 내일은 온 세상 밝히시러 부처님이 오신날이라.. 푹 잘수....ㅡ,.ㅡ'
위 내용은 뭐라 적었는지 본인도 알아 볼수가 없으므로, 죄송 또 죄송하며...
불량 A/S 끝...

아! 보증 기한이 이제 지났으니, 앞으로는 유상 A/S 만 가능하겠습니다. ;P

 

Monochrome Skin 가로크기 800px 만들기.

원하시는 분이 계셔서 css 만 수정해서 되는지 안 되는지 해 봤습니다. container의 배경만 남기고 나머지는 날려버리니 되긴 되는군요. 그러니까 content와 footer의 배경이미지는 쓸데없는 짓이었어요. 낄낄낄..

아무튼.. 몇 군데 크기만 수정하면 되는데.. 일일이 적기 힘드니(굳이 원하시는 분이 계시면 일일이 적어 보겠습니다.), 테스트했던 style.css 와 index.xml을 올려둡니다. 다운 받으신 Monochrome Ver2.0에서 이 두 파일만 교체해서 적용하시면 됩니다. (index.xml 의 내용은 반드시 스킨을 새로 적용하셔야만 반영됩니다.)



800px로 적용하시면 이런 모습입니다. 1280x960 해상도에서, 테스트 블로그를 찍었어요. :)
User inserted image
후아~ 넓고 좋구나~ :) 나도 바꿔버릴까나?

 

남의 사이트도 내 맘대로 보자! - Stylish.

Sage에 넣어둔 불여우 한글 포럼의 한 질문 글타래를 보다가 새로운 확장을 하나 알았습니다. 바로 Stylish. 이름 만큼이나 Stylish하군요...=_=' userContent.css 를 이용해서 사이트의 css 를 변경해 볼수 있는 것은 알고 있었지만, 이를 더 쉽게 만들어 줍니다. :D

Stylish 확장 페이지. css계의 그리스 몽키래요. :P

User inserted image

설치하고 나면 '상태 표시줄' 오른쪽에 백지위에 붓이 놓인듯한 아이콘이 생깁니다. (아이콘이 그렇게 예쁘진 않군요..=_=') 처음부터 남의 사이트를 맘대로 휘젓기는 미안하니, hi8ar.net 가지고 연습하겠습니다...=_='' 검정 배경이라 글 읽기가 좋지 못한 hi8ar.net의 배경을 흰색으로 바꿔 봅시다. 낄낄... hi8ar.net에 접속한후, 그림과 같이 Write Styles, For hi8ar.net 을 선택합니다.

아래와 같은 창이 뜹니다.
Stylish 설정창

아래의 코드를 복사해서 넣어보세요.


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("hi8ar.net") {
body {background-color:#fff !important;color:#333 !important; }
div.main a {color: #993333 !important;}
div.main a:hover {color: #DFB8B5 !important;}
div.main {background:none #fff !important;border-left: solid 1px #f5f5f5 !important;}
span.title a {color: #333 !important;}
.rp_general {background:none !important;}
.comment li {background:none !important;}
}


Preview 를 눌러 봅니다. 본문이 하얗게 변했나요? 정상적으로 변했다면, Description에 적당한 이름을 정하고 Save하세요. 하얗게 변한 hi8ar.net 이 썩 보기 좋진 않지만, "검정 바탕에선 글읽고 싶지 않아" 라는 분들에겐 도움이 될지도..... ;) 물론, css 를 완전히 다 헤집어서 주절주절 다 적어 놓으면 완벽하게 바꿔놀수도 있겠지만, 흰바탕에서 글자 보기 정도만... 해제는 아까 그 아이콘을 마우스 클릭해서 리스트에서 체크를 해제 하시고, 브라우저 새로고침하시면 됩니다. Manage Script를 선택하시면 만들어둔 스타일들을 편집하실수 있습니다.

그렇습니다. 만날 들어가야 하는 사이트가 있는데, 글자가 너무 작거나, 적용한 폰트가 마음에 들지 않거나, 사이트의 색상이 마음에 들지 않아서, 사이트 이용이 불편할때 사용하면 좋겠어요! 가장 간단히 응용할수 있는 것은 아마도 폰트를 바꾸는 정도? 마땅한 마루타가 없으니, 만만한... 아니 마음씨 좋기로 유명한, 나비씨의 nabilove.net의 글꼴을 바꿔볼까요? (나비씨 미안...;;) nabilove.net은 맑은 고딕이 기본 폰트입니다. 맑은 고딕은 물론 매우 좋아하는 폰트지만, 웹상에서 만나면 나의 눈을 조금은 괴롭히기에 좀 혼나야 합니다...???? 아무튼 나비씨는 맑은 고딕이 없을 경우에는 Lucida Grande 폰트로 출력되게끔 되어 작성해두셨더군요. 그러니 영문은 Lucida Grande로 하겠습니다. 한글은 굴림. :) 시력 안 좋은 날 위해, 12px의 크기도 13px로 키우고..

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("nabilove.net") {
body {font: 13px Lucida Grande, 굴림 !important;}
#sidebar {font: 13px Lucida Grande, 굴림 !important;}
}


쵸간단! "굴림" 자리에 원하시는 한글 폰트를 적으시면 원하시는 폰트로 나옵니다. 남 보여주기 위한 코드가 아닌 내가 볼 코드이니, 내 컴퓨터에만 있는 글꼴이라도 상관없겠습니다. 한겨레결체 따위의 가독성이 좋은(?) 글꼴도 좋겠어요. :)

물론 이 확장을 원활히 사용하시려면, 어느정도 CSS에 대한 지식이 있으셔야 됩니다만...=_=''

얼마전부터 사용하던 mar.gar.in 사이트도 좀 해봤습니다. id나 class 지정이 아닌, html 에서 직접 색상을 지정한 부분등이 있어서, 원하는데로 안 나왔지만.. (아무래도, 마가린 페이지 색상은 왠지 딜리셔스보다 링크들이 한눈에 보이질 않습니다.. =_='' 아 물론 지극히 개인적인 생각...) 못 생긴 돋움 대신 굴림을 쓰는 것으로 만족을..

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("mar.gar.in") {
body {font-family: arial !important;}
#header-menul {font-size:20px !important;}
#header-menul a {color:#000 !important;}
.contentItem{line-height:60% !important;}
.cid {color:#00f !important;font-weight: 400 !important; font-size: 1.2em !important; line-height: 1.2 !important;}
.contentItem-note {font-size:1.0em !important;color:#000 !important;line-height: 1.2 !important;}
.contentItem-tag {font-size:0.95em !important; line-height: 1.2 !important; color: #999;}
.contentItem-tag a {color: #9999FF !important;}
#editNdelete a {color: #9999FF !important;}
}

(개인 북마크 페이지에서만 정상 동작합니다.)


참고...
stylish 유저들이 만든 스타일을 모아 둔 페이지
 

"hi8ar.net Search" 검색창에 추가하기.

FF_Seachbar

FF 2.0 Seachbar

보통의 Firefox 2.0 검색창입니다.

FF_Seachbar_2

퍼릇퍼릇. ;_;

이글을 보고 있는 지금!! 파비콘 부분의 색상이 위와 같이 퍼릇퍼릇 해 지졌나요?

Add_search

쓸데 없는 검색엔진이 많구나~ ;_;


파비콘을 눌러 "hi8ar.net Search"를 추가합니다. :)


FF 2.0 과 IE 7.0 에서만 동작한다고 합니다. 사실 IE 7.0은 사용하지 않아서 테스트 하지 못했어요. 안되면 말구.. ;_; 물론 검색창에 추가해 가면서 까지 여기서 찾아볼 만한 것은 없습니다..=_=

 

불여우 2.0.

불여우 2.0

드디어 불여우 두마리로 업데이트~! 꺄울~



기다리기를 좋아하는 성격 탓인지, 귀차니즘 때문인지, 잘 모르겠지만, 드디어 Firefox 2.0 으로 업데이트 했습니다. 사용하던 1.5의 프로필 위에 바로 설치하면 프로필이 꼬인다는 말이 있어 조금 걱정했습니다만, 별 무리 없이 잘 된 것 같습니다. 사용하던 설정 그대로 적용된 상태에서 양호하게 2.0을 사용할 수 있네요. 1.5에서 사용하던 확장기능들과 테마들이 문제일 거라 생각했지만, 예상과 달리 대부분 2.0에서 사용가능한 확장들로 순조롭게 업데이트 되었습니다. (그 동안 많이들 사용하시는 확장기능들은 거의 다 업데이트 된듯합니다.) 물론 테마는 제외... :)

늦장 업데이트라 별로 도움이 될 만한 내용은 없습니다만, 눈에 띄게 좋아지거나, 달라진 점들에 대해 간략히 적어보면 다음과 같습니다.
  1. 최초 구동 시간이 굉장히 단축되었습니다. - 1.5에서 기다리던 시간에 비하면 눈에 띄게 좋아졌습니다.
  2. 페이지 로드 시간이 빨라졌습니다. - 사실 그리 크게 체감하진 못하겠지만, 남들이 다 그러길레.. :D 스크립트 처리 시간등이 눈에 띄게 빨라졌다고 그러더군요.
  3. 기본 테마만 사용해도 될만큼, 테마가 예뻐졌습니다.
  4. RSS 구독기능이 좋아졌군요!!
  5. 검색 사이트 관리가 편리해 졌습니다.
다음은 새로 익숙해져야 하거나, 안 좋은 점들..
  1. 단축키가 조금 변경 되었나 봅니다. - Sage 의 단축키인 Alt+S 가 Alt+Z로 바꼈네요. 이 글타래 참고.
  2. 1.5에서 사용하던 테마들을 쉽게 사용할수가 없습니다. - 하지만 아예 안되는건 아니에요.. :)
  3. 흠.. 또 없나?.... 없군요... =_=''


커스토 마이징에 관련한 확장중에 자동으로 업데이트 되지 않은 확장들이 몇가지 있었습니다.

- Compact Menu 확장은 Compact Menu Blue 확장으로 대체하였습니다.
- Titlebar Tweak 확장은 Titlebar Tweak 확장페이지의 아래 댓글을 보시면, 러시아 포럼의 비공식 버젼을 다운 받아 설치하실수 있습니다.
- Zoomy 확장의 경우, 1.5용 확장을 다운받아, install.rdf 파일의 maxVersion부분을 수정함으로써, 설치/사용 가능했습니다. 간단한 수정이지만, 공사가 다망하신분들을 위해 올려둡니다. :)

이어서 테마 이야기....

모든 1.5용 테마들이 그렇지는 않겠지만, 그 뿌리가 Safire 테마인 Safari형 테마들의 경우, install.rdf 파일의 maxVersion을 수정하여 사용할수 있는듯 합니다. 다만, 2.0에서 새로 생긴 부분들이 온전히 나오지 않습니다.
FF_Cerebro theme.

군데 군데 아이콘이 없습니다.. (=_=;)

위 그림은 1.5용 Cerebro 테마를 사용한 모습입니다. 서치바쪽은 하나도 적용이 되질 않는군요. :) 예전 같았으면 신나게 뜯어보고, 고쳐보고, 넣어보고 했겠지만, 지금은 그럴 열정이 없습니다.. =_='

FF_fantastic

fantastic902씨와 까막눈씨의 1.5용 Fantastic 테마도 설치!!

덕분에 한 페이지가 넘어가던 수많은 테마들을 싹 정리했습니다. 이제 기본테마로 사용할겁니다. :)


참고 :: Install.rdf 파일 수정하기...



아무튼.. 1.5.0.8 에서 2.0으로 업데이트 하고 나니,
그 때처럼, 막 웹서핑이 하고 싶어졌습니다!! :D

 

Monochrome 스킨 오류수정

조금은 중요한 오류의 수정이기에 새로운 포스팅으로 알립니다.
죄송해요...;;;;

1. 사파리에서 본문의 스타일이 지정되지 않는 오류를 수정했습니다.

style.css 파일 327라인.
#sidebar .notice {
padding:5px 10px;
margin:5px 0;
-moz-border-radius: 6px;*/
}

위 보시다 싶이 -moz-border-radius: 6px;*/ 부분입니다. 어처구니 없게도 주석 끝만 있고 주석 시작이 빠져있습니다. 필요없는 부분이므로 -moz-border-radius: 6px;*/ 만 삭제해 주세요. 급하게 공개하다 보니, 이런 실수를....-_ㅡ;

다른 브라우저에서는 문제가 없었지만,(이 점이 신기합니다. ^^;;;; IE, FF, Opera 모두 정상출력이 됐었는데....) 이것 때문에 사파리(Safari)에서는 이 이후의 스타일 지정이 적용이 안 된것 같습니다. 죄송합니다. 제 블로그만 사파리 테스트 사이트에서 확인해서 미처 이를 몰랐습니다. 이 문제를 알려주신 JeK님 감사드립니다. 여러 파일을 열어두고, 뒤죽박죽 작업하다 보니, 수정된 곳도 있고 수정 되지 않은 곳도 있고..
저 혼자 쓸때는 생기지 않았던 문제들에... 골치가 아프네요..-_ㅡ;;;;;


2. 사이드바 글 리스트에서 정확히 사이드바 크기에서 글 자르기.

#sidebar ul{
margin:0;
padding:10px;
list-style:none;
overflow: hidden;
}

265 라인에 overflow: hidden; 을 추가 하시면 제 블로그 처럼 Recent Comment와 Recent Trackback등등의 사이드바 리스트에서, 150px 를 글자가 넘지 않게 됩니다. (왼쪽의 그림처럼..)

배포한 스킨은 일부러 조금 넘어가게 해 봤었는데, 넘어가는게 썩 보기 좋지만은 않은것 같아서...


이상의 내용은 수정하여 태터툴즈 스킨 배포 페이지에 새로 올려 두겠습니다.
스킨에 별다른 수정을 하지 않으신 분들은 CSS 파일만 덮어 씌워 주시면 되겠습니다.
CSS 를 수정해서 사용하시는 분들은 위 내용을 직접 수정해 주세요..


많은 분들이 이 스킨을 사용하시는 것 같지는 않지만, 이 스킨을 사용하시는 모든 분들이 이 글을 보셨으면 좋겠습니다.. 쩝... 아무튼.. 앞으로는 스킨 공개하기가 두려울것 같습니다..-_ㅡ;;;
 

Tag in Flash 플러그인 한글 고치다.



무하하하.. 한글이 ??? 가 아니고, 제대로 나온다. :)

아침부터 J.Parker님의 이올린 태그 검색 플러그인을 고치다가, 같은 방법으로 Tag in Flash 플러그인까지 함께 고쳐졌다. 소 뒷걸음 치다 쥐 잡은격... 근데.. 막상 한글이 제대로 나오니,, 한글 태그가 별로 없네..-_ㅡ''
아무튼, 나 혼자 멋지게 고친줄 알고.. "쥐뿔도 모르는게 응용도 할 줄 아는구나~!" 라며 스스로 잘난척하던 중이었는데... 이미 해결책이 태터툴즈 플러그인 페이지에 댓글로 올라와 있더라~ 쩝.. 9월 1일날 달린 댓글이니 한달이나 됐네....;;; 이제서야 알게 되다니..
 

LightboxJS 2.0 TEST. :)




LightboxJS 2.0 테스트.
(태터툴즈 1.0용 플러그인 Lightbox TT MX 2.0)
TAG ,
 

태터툴즈에서 즐기는 Gravatar!!

워드프레스가 부러웠던 이유가 하나 줄었습니다.. :)

J.Parker 님이 정말 멋진 플러그인을.. -_ㅠ;;;
(소문 듣고 어제부터 손가락 꼽아가며 기다렸습니다.)

일단 설명대로 찬찬히 하라는데로만 했더니 덜컥 적용되었습니다. 태터툴즈의 기본스킨 비스므리한것을 사용하니 좋은점이 많군요. ;) 몇가지 테스트 결과 뭔가 조금 불안정한것 같기도 하지만, 그럭저럭 잘 적용되는것 같습니다!! 만세~!! 일단 몇가지 궁금한 것들에 대해선 Parker님께 묻기로 하고..
(현재 EAS와 함께 적용중인데 별다른 충돌은 없는것 같습니다..!)


그라바타 없으신 분들은 여기 가셔서 간단하게 가입하시고(그라바타로 사용할 이메일과 이미지 하나만 있으면 됩니다~!!) 승인될때까지 기다리시면 됩니다. 길게는 3일까지 걸린다고 하는군요. 뭐 운 좋으면 금방도 되겠죠. ^^; 아바타 이미지의 크기는 80x80 이며 100kb이하인 JPG/GIF/PNG 라면 오케이 라는군요!

뭘 망설이삼? 언능들 테스트 한번씩들 하삼..-_ㅡ;;; 그라바타만 있다면 누구라도 좋습니다~!! (없어도 좋습니다~!)


06.06.23 덧붙입니다.
2차 수정본에서는 e-mail이 null 값일 경우, 특정 이미지가 표시되는 기능이 추가 되었다는군요.
3분만에 만들어 버린 default.gif 와 no_email.gif 입니다.

넘쳐 흐르는 아이콘들 중에서, 마땅히 쓸만한것 찾기가...-_ㅡ;;;
원하신 다면 자유롭게 이용하실수 있습니다.^^;
 

이런.. 망할 IE..-_ㅡ;;

오페라 가지고 놀다가 알았다~!

Firefox에서 본 PNG 이미지(정상 색상)



IE에서 본 PNG 이미지(이유없이 진하게 나옴..-_ㅡ;)


이런.. 완전 호러물이 됐잖아~! -_ㅡ^


멍청한 IE.. PNG 알파채널만 안되는줄 알았는데.. 이제 보니 PNG 로 올려놓은 이미지들의 경우 원래의 색상보다 진하게 나온다..-_ㅡ;; 그 동안에는 미세한 차이라서 크게 느끼지 못했나 본데.. 바로 이전 스샷에서 확연하게 보인다. 파하하하핫~! (덕분에 하나하나 비교해 봤다. PNG는 다 찐하다~!! 데스크 슈터스 링크에서 눈치챘어야 했는데...)

(IE만 사용하시는 분들은 스크린샷 이미지를 저장해서 확인해 보시면 차이를 느끼실수 있습니다.)

서...설마 우리집 IE만 그런건 아니겠지?
IE 점점 더 싫어져만 가는구나..-_ㅡ;; 그럼 이제 이미지는 GIF인가? 쩝...