SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

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

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

표지 style.css for whiteBoard

스킨 공개한지 2주 정도 지났습니다. 부족하고, 보잘껏 없는 스킨에 많은 분들의 관심과 칭찬(?)에 몸둘바를 모르겠습니다. 이 바닥에서는 이름만 말해도 알만한 유명 블로그에 걸리기도 하고.. 스킨이 저보다 더 출세했습니다. :) 사실 공개할때만 해도, 제 취향에나 맞지, 다른 분들 보시기엔 별 볼일 없을 거라 생각했었습니다. 그런데, 세상엔 제 취향과 비슷하신 분들도 알게 모르게 많은가 봅니다! (__)

아무튼, 텍스트큐브의 플러그인 중 하나인 커버페이지 혹은 표지(MT_Meta_RecentPS_Default) 플러그인 에서 사용하는 스타일시트를 간단히 만들어 봤습니다. (예정 업데이트에 적어 두었던 걸 하게 될 줄은 며느리도 몰랐는데~)

모든 블로그의 최근글 보기 플러그인

텍스트큐브 플러그인계의 대부 J.Parker 님의 '모든 블로그의 최근 글 보기' 플러그인 입니다. (아~ 이름이 참 길군요. 앞으로는 그냥 '표지' 라고 하지요.) 암튼, 텍스트큐브 확장패키지를 설치하신 분이라면, 기본으로 포함되어 있는 플러그인 입니다. 표지 플러그인을 활성화 하시고, 환경설정하고, 꾸미기 - 위젯 - 표지 위젯 에서 표지에 나타낼 것들을 설정합니다.

표지를 첫 페이지로 설정 체크

표지로의 접근은 http://블로그 주소/cover 입니다. 따로 접근할 링크를 만들어 두시거나, 표지 위젯 설정에서 표지를 블로그의 첫 화면으로 설정합니다 에 체크하면 블로그의 첫 페이지가 표지가 됩니다.

표지에서 사용할 수 있는 위젯을 제공하는 플러그인들은 텍스트큐브 표지 플러그인 페이지에서.. :)

whiteBoard coverPage style.css

표지 플러그인에서 다른 건 하나도 수정하지 않았습니다. 아마 하라고 해도 못할 겁니다. :)

포함된 파일은 두개세개로..

  • style.css 는 텍스트 큐브가 설치된 폴더/plugins/MT_Meta_RecentPS_Default 에 덮어 씌우시고.
  • tag.gif 이미지는 위 플러그인 이미지 폴더에 넣어 주시면 옥헤이~
  • 누락되었던 bg_coverPost.gif를 추가해서 다시 올려둡니다. tag.gif 와 함께 플러그인 이미지 폴더에 넣어주시면 됩니다.

약간 특별한 기능

CSS만을 이용해서 부린 약간의 기교(?)입니다. :) 이미 읽었던(방문했던) 기록이 있는 글은 회색 제목+visited 표시, 아직 읽은 적이 없는 글은 검정색 제목 + 노란 NEW 표시로 나타냅니다.

visited 와 new 예시 그림

visited 와 new 예시 그림

그저 a:link 와 a:visited 의 스타일을 다르게 적용한 것 뿐입니다. 때문에 사용하시는 브라우저의 캐시 정보에 따라 new 가 될 수도 visited 가 될 수도 있습니다. 브라우저 캐쉬를 모두 삭제하면 모두 new 가 되버리는 거죠.. :)

.coverpost h2 a:after {
    font-size: 10px;
    letter-spacing: 0;
    color: #fc0;
    content: " - NEW."; /* IE의 경우 IE8부터 이해 가능 */
}
.coverpost h2 a:visited:after {
    font-size: 10px;
    letter-spacing: 0;
    color: #888;
    content: " - Visited."; /* IE의 경우 IE8부터 이해 가능 */
}

물론 이것은 :after 라는 유사 클래스pseudo-classescontent: 라는 프로퍼티를 이해하지 못하는 못난이 브라우저(IE6 ~ IE7) 에서는 지원되지 않습니다. :(

기타

  • IE6 에서는... 모양은 똑같습니다. :)
  • 커버페이지에 넣을 수 있는 것들 중 오직 본문 글에 관한 디자인만 되어 있습니다. 다른 것들에 대한 디자인은 차차 생각해 보겠습니다만, 전 표지 페이지를 별로 좋아하지 않습니다.. :)

예제 페이지는 여기서 보실수 있습니다.

해마다 찾아오는 감기님이 또 찾아 오시려나 봅니다. "안녕~ 감기야~ 왔구나, 안 오는줄 알고 서운했잖아~" :)

 

Firefox 3.0 의 부가기능

뭐 어짜피 몇일 지나면 3.0에 호환되는 부가기능들이 하나씩 부가기능 페이지에 올라오겠지만.. 나처럼 당장 급하면 어쩔수 없다. 무엇보다도 급한것 2개. Tab Mix Plus 와 All-in-one-gestures 가 안되면 불여우를 쓰기 너무 불편해...

Tab-mix-plus
여기에 개발자 버젼이 있다. http://tmp.garyr.net/tab_mix_plus-dev-build.xpi

All-in-one-gestures
http://pagesperso-orange.fr/marc.boullet/ext/extensions-en.html
0.19 버젼을 설치.. :)
아니면 아예 다른 마우스 제스쳐 관련 확장을..
https://addons.mozilla.org/en-US/firefox/addon/6366

Compact Menu

Compact Menu

자신이 사용하던 부가기능 설치 페이지의 Review 란을 뒤적거리다 보면 3.0에서도 사용가능한 링크 따위를 발견 할 수도 있다. Titlebar Tweak 같은 쵸간단 확장이라면 xpi 파일을 다운받아, 압축툴로 풀어 install.rdf 파일의 <em:maxVersion> 부분을 3.0.0 이상으로 적어주면 대개는 무리 없이 설치되고 동작하더라. Compact Menu 역시 3.0베타5까지 지원했기 때문인지 rdf 수정하고 설치하면 동작함! 뭐 어쨌든.. 뒤적 거리기도 귀찮고.. 완전해지려면 참고 기다리는 수 밖에... :)

에잉.. 잠도 못자고 이게 뭐람... :p


 

크론플로우?

아마도 bubble coverflow가 너무 일찍(?) 등장함에 따라, 자신도 뭔가를 하고 있긴 하고 있다는걸 증명해보이려는듯...;;
일단은 독특한 모양.. 마우스 휠을 잽싸게 위로 굴리면 승천하는 꽈배기,, 아래로 굴리면 곤두박질치는 스크류바가 생각난다. (삐이~삐이~꼬였네~들쭉날쭉해~사과맛~딸기맛~..;;;) 설정창이 있긴 하지만 뭘 설정하는 건지 잘 모르겠고, 플레이리스트별로 커버가 나오는게 아니라, 데이터 베이스에서 통째로 가져오는 것 같다.
제작자의 다음 단계 를 봤다면 눈치챘겠지만.. 딸랑 커버만 출력해 준다. 아직 아무런 기능이 없다. 마우스 휠 조낸 굴려봐야, 플레이리스트를 변경해 주기는 커녕, 커버 위에서 마우스 클릭하는것 마저도 무의미.. 결국 아무런 동작도 하지 않는다. =_=''
한글 폴더도 지원해주고, 커버 리플렉션(반사) 이미지까지 출력하게끔 업데이트 된 bubble coverflow에 비해.. 갈길이 너무 멀다.


chronflow

이게 뭐니, 이게? =_=''


난, 이 꽈배기 모양 반델세..

 

남의 사이트도 내 맘대로 보자! - 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 유저들이 만든 스타일을 모아 둔 페이지
 

NGmap TEST.

와.. 세상 참 좋아진다.. 근데 지도 찾기가 조금 힘든데? +_+''



사실.. 지금 이게 제대로 동작하고 있는건지.. 잘 모르겠긴 해.. =_=''
더 중요한건.. 뭐에 딱히 쓸데도 없다는거...
온라인상에 우리집이라고 지도에 표시해서 과감하게 노출해서 좋을일도 없잖아.. 누가 와서 테러 할라...
(너무하는 구글씨.. 같은 서울인데도 우리집 근처는 왜 위성사진 상태가 안 좋은거야?)


 

Tag Flash!!



TAGF .beta by clowleed
너무 예뻐서 그냥 캡쳐 한번...
사실은.. 음.. 그러니까.. 워드프레스 분들 뽐뿌 좀 받으시라고.. 케케케케.. ;)
한글??...-_ㅡ;; 괜찮아 뭐 영어로만 쓰지 뭐.. 서버 다시 원래대로 해달랠까? 바보..

고수님들하~! 한글 ???, 좀 제발 좀 고쳐주센~! ;ㅁ;
 

계속되는 삽질..;;

역시.. 제대로된 블로그질 할 생각은 하지 않고...;;;

또 겉모양만 꾸며 대기 시작합니다..ㅋ
(일종의 병이에요..-_ㅡ;;;)
맘 같아선 스킨부터 싸그리 갈아버리고 싶네요..;;
태터 1.0.4 나왔다길레 대충 덮어써 줬습니다.. 별 다른 이상은 없는것 같고...
아.. 태그클라우드에 랜덤으로 해 두면 중복되어 표기 되던것이 고쳐졌어요~!.. ^^;

이것 저것 플러긴 마구 달아 보고 있습니다.. 제대로 되고 있는지 아닌지도 모르는체... 하하..;;
겁나서 설치 못하고.. 구경만 해오던 Recent/Random photo plugin 도 용기를 내어 설치해 봤습니다..;;

아무래도 얼음집에서 싸온 짐들이라...