'스크립트'에 해당되는 글 2건

  1. 2007.11.07 google.co.kr 배경색 파란색으로 변경하는 stylish 스크립트 (2)
  2. 2007.11.06 Greasemonkey와 Greased Lightbox (2)
2007.11.07 08:47

Greasemonkey가 스크립트를 사용자가 맘껏 변경해 주는 확장 기능이라면, CSS를 사용자가 맘껏 변경해 주는 확장으로는 stylish라는 확장 기능이 있습니다. Firefox, Flock, Thunderbird에서 작동합니다.

Javascript가 주로 기능적인 부분을 제어하기 때문에 특정 사이트에 기능을 내 맘데로 변경 해 웹서핑 할 수 있다면, stylish라는 확장 기능은 CSS를 제어하기 때문에 디자인적인 요소를 변경해 웹서핑을 할 수 있습니다.

Greasemonkey도 아직 국내에서는 그렇게 많이 보급이 안 되어, 국내 웹사이트에 적용 할 수 있는 스크립트가 많지 않은 것처럼, 마찬가지로 stylish도 국내 웹사이트 관련 스크립트가 별로 없습니다.

다만, 해외에 구글과 야후 관련 스크립트가 많기 때문에 이것들을 수정 해 google.co.kr과 yahoo.co.kr 를 접속 할 때 사용 할 수 있습니다.

아래는, 제가 Valacar님이 만든 것을 약간 수정해 google.co.kr에서 사용 할 수 있게 한 stylish 스크립트입니다.

stylish를 설치 후, 아래 스크립트를 복사 해 넣으시면 됩니다.

설치 후 모습은 다음과 같습니다.

사용자 삽입 이미지

먼저, https://addons.mozilla.org/ko/firefox/addon/2108 에 접속해 stylish를 설치 후 아래 스크립트를 추가 하시면 됩니다.

/*
 * Google Web Search - dark blue redesign
 *
 * Author      : Valacar
 * Updated     : October 18th, 2007
 * Website     : http://www.valacar.com/userstyles/
 * Description : Modifies the colors, logos, and a few other images on Google Web Search (http://www.google.co.kr/)
 * Usage       : Use with Stylish Firefox extension (http://userstyles.org/) or copy to your Firefox userContent.css file
 * Thanks to   : pile0nades, mobius, and gzusphish for helping find/fix bugs
 */

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

/* Common rules
--------------- */

@-moz-document url(http://www.google.co.kr/), url-prefix(http://www.google.co.kr/webhp), url-prefix(http://www.google.co.kr/search?), url-prefix(http://www.google.co.kr/advanced_search), url-prefix(http://www.google.co.kr/preferences), url-prefix(http://www.google.co.kr/language_tools), url-prefix(http://images.google.co.kr/webhp), url(http://www.google.co.kr/intl/en/) {

body {
 background: #253960 url("http://cfile5.uf.tistory.com/image/2774CD3956E63D98085893") top left repeat-x !important;
 color: #FFF !important;
 font-family: Tahoma, Arial, Helvetica, sans-serif !important;
}

/* defaults for all links */
a:link { color: #82BDFF !important; }
a:visited { color: #72ADDF !important; }
a:active { color: #92CDFF !important; }

/* change color of lots of text */
font, div, td { color: #fff !important; }

/* fix for google suggest colors */
.aAutoComplete .cAutoComplete, .google-ac-a .google-ac-c { color: #000 !important; }
.aAutoComplete .dAutoComplete, .google-ac-a .google-ac-d { color: green !important; }
.google-ac-e td { color: blue !important; }


/* make sure web forms (and google suggest) don't get their colors changed */
input *, textarea *, .aAutoComplete { background-color: -moz-Field !important; color: -moz-fieldtext !important; }


/* Box that pops up when you click the "more >>" link */
span#more, #gbar .gbard, #gbar [class^="gb"] { background: #08274f !important; border: none !important; }
#gbar .gbard a:hover, #gbar [class^="gb"] a:hover { background: #385690 !important; }
#gbi { border: none !important; background: transparent !important; }


/* superscripted "New!" text */
sup font[color="red"] { color: #0F0 !important; }

/* hide gbar border */
[id^="gbar"], #gbh { border: none !important; }

}


/* Front page
------------- */

@-moz-document url(http://www.google.co.kr/), url-prefix(http://www.google.co.kr/webhp), url-prefix(http://images.google.co.kr/webhp), url(http://www.google.co.kr/intl/en/) {

/* Replace main logo image */
img[src*="/logos/"], img[src$="logo.gif"], div[style*="logo_plain.png"], img[src$="logo_google_suggest.gif"] {
 margin-top: 5em !important;
 width: 0 !important;
 height: 103px !important;
 padding-left: 281px !important;
 background-image: url("http://cfile28.uf.tistory.com/image/2338C14C56E63D9913CF33") !important;
}

/* country name overlaying main logo */
div[style="color: rgb(111, 111, 111); font-size: 16px; font-weight: bold; left: 208px; position: relative; top: 78px;"] {
 display: none !important;  /* if you want your country name to show, remove this line */
 color: #33537f !important;
 left: 0 !important;
}

/* delete some crap after input box and buttons */
form + br + table { display: none !important; }

/* move buttons down a bit */
input[type="submit"] { margin-top: .5em !important; }

}


/* Shared Images and Selectors
------------------------------ */

@-moz-document url-prefix(http://www.google.co.kr/search?), url-prefix(http://www.google.co.kr/advanced_search), url-prefix(http://www.google.co.kr/preferences), url-prefix(http://www.google.co.kr/language_tools) {

/* Replace small upper left logo images */
#logo span, img[src*="/logos/"][width="150"], img[src$="logo_sm.gif"][width="150"], img[src$="logo_google_suggest_sm.gif"] {
 background: url("http://cfile23.uf.tistory.com/image/2461104D56E63D991C6F58") top left no-repeat !important;
}
img[src*="/logos/"][width="150"], img[src*="logo_sm.gif"][width="150"], img[src$="logo_google_suggest_sm.gif"] {
 width: 0 !important;
 height: 51px !important;
 padding-left: 135px !important;
}

/* Hide logo text link */
a#logo { font-size: 0 !important; }

/* top bar on search results, adv.search, prefs, lang.tools page */
table.t.bt, td[bgcolor="#E5ECF9"] { background: #405882 url("http://cfile26.uf.tistory.com/original/2208714656E644CA161B1D") top left repeat-x !important; }
.t { padding: 2px !important; }

/* change color of links in top bars */
td[bgcolor="#e5ecf9"] a, .t.bt a.q { color: #fff !important; }

/* hide top border on top bar */
td[bgcolor="#3366cc"] { display: none !important; }

}


/* Search results
----------------- */

@-moz-document url-prefix(http://www.google.co.kr/search?) {

.g { margin-left: .5em !important; }

/* title of search result */
.g .l { font-size: 1.1em !important; }
.g a:hover { color: #98c9ff !important; }
.g a:visited { color: #6282a5 !important; }

/* description of search result */
.g .j font {
 line-height: 1.4 !important;
}

/* text URL that usually appears in dark green below the link description */
.g font[color="green"], .g font[color="#008000"], .e font[color="green"], .a { color: #DACA7D !important; }

/* "Cached", "Similar pages", "More results", and "View as HTML" links */
.g .fl, .j font a, .f { color: #AAA !important; }
.g .fl:hover, .j font a:hover { color: #CCC !important; }

/* File type (ex: [PDF]) next to link */
.g .w b { color: #FF6 !important; }

/* make each search result a bit wider (34em is default) */
.j {
 width: 50em !important;
 color: #fff !important;
}

/*%[ Bars ]%*/

/* bottom bars */
table.t.bt.bb,
table.t.bt.n,
td[bgcolor="#e5ecf9"]
{
 background: #3d557f !important;
}

/* remove border on top and bottom bar */
.bt, .bt { border: none !important; }

/* copyright + google links at bottom of page */
.ft.t.n, table.ft.t.bb.bt { background: transparent !important; border: none !important; }

.t.n.bt { background: transparent !important; }


/*%[ Navbar ]%*/

/* Hide the "Gooooooooooogle" image in the Result Page block...text is good enough */
#navbar img { visibility: hidden !important; }
#navbar * { background-image: none !important; }

/* Current page number that comes after "Result Page:" */
#navbar .i {
 color: #FFF !important;
 font-weight: bold !important;
 font-size: 1.5em !important;
}

/* page number links that come after "Result Page:" */
#navbar a {
 font-size: 1em !important;
}

/* modify the navbar links a bit */
#navbar a:hover { color: #98c9ff !important; }
#navbar a:visited { color: #6282a5 !important; }
/* spreads out navbar numbers and aligns to baseline */
#navbar br { display: none !important; }

/*%[ Notifications ]%*/

/* "Did you mean" text */
p > font.p { color: #0f0 !important; }

/* note at end about omitted results */
.g + p i, blockquote.g + p i { color: #fff !important; }

/* Refine results for ... */
#po td { color: #fff !important; }

/* See results for: */
p.g { color: #fff !important; }

/*%[ Advertisements ]%*/

/* hide right column of ads */
table[width="25%"][align="right"] { display: none !important; }

/* hide google toolbar image ad at bottom...text is still there */
img[src$="firefox_toolbar.gif"] { display: none !important; }

/* sponsored links above search results (sometimes they're useful) */
.ch, div[id^="tpa"] {
 background: #2c4573 !important;
 padding: 0.3em 0.5em !important;
}

.mbl1, img.ch { background: transparent !important; }

.g img { border: none !important; }

/* hide block after navbar advertising google products */
#res + center table[cellpadding="10"], #res + center br:first-child { display: none !important; }

/* hide all siblings after copyright at bottom */
div.ft ~ * { display: none !important; }

/*%[ Wikipedia info ]%*/

#pfe {
 background: #2c4573 !important;
 color: #fff !important;
 -moz-border-radius: 7px !important;
 border: 1px solid #3e547c !important;
 padding: 0.3em 0.5em !important;
}

#pfrl { background: #2c4573 !important; }
#pfe div { color: #fff !important; }

img[src="/images/newspaper.gif"] {
 width: 0 !important;
 height: 30px !important;
 padding-left: 40px !important;
 background: url("http://cfile2.uf.tistory.com/image/224B673956E63D992F5E00") no-repeat !important;
}

img[src="/images/shopbag.gif"] {
 width: 0 !important;
 height: 30px !important;
 padding-left: 40px !important;
 background: url("http://cfile23.uf.tistory.com/image/23211A4956E63D990316EC") no-repeat !important;
}

/* film reel */
img[src="/images/showtimes-onebox.gif"] {
 width: 0 !important;
 height: 30px !important;
 padding-left: 40px !important;
 background: url("http://cfile23.uf.tistory.com/image/2747E53956E63D9A32AB06") no-repeat !important;
}

/* Shopping cart "image" */
.tfb td.c, .tb td.c{background:#999 !important;}
.tfb td.b, .tb td.b{background:#ccc !important;}
.tfb td.a, .tb td.a{background:#fff !important;}


/* movie rating stars */
img[src="/images/showtimes-star-on.gif"], img[src="/images/showtimes-star-off.gif"], img[src="/images/showtimes-star-half.gif"] {
 width: 0 !important;
 height: 10px !important;
 padding-left: 10px !important;
 background: url("http://cfile23.uf.tistory.com/image/2610283C56E63D9A33C59D") no-repeat !important;
}

/* half star */
img[src="/images/showtimes-star-half.gif"] {
 background-position: -10px 0 !important;
}

/* no star */
img[src="/images/showtimes-star-off.gif"] {
 background-position: -20px 0 !important;
}


}


/* Google Advanced Search page
------------------------------ */

@-moz-document url-prefix(http://www.google.co.kr/advanced_search) {

/* table colors/borders */
tr[bgcolor="#cbdced"] { background: #50668d !important; }
tr[bgcolor="#ffffff"] { background: #405882 !important; }

}


/* Google Search preferences page
--------------------------------- */

@-moz-document url-prefix(http://www.google.co.kr/preferences) {

/* Change color of top and bottom bars */
tr[bgcolor="#E5ECF9"] { background: #415983 !important; }

/* form tables */
form p table[width="100%"][cellspacing="0"][cellpadding="0"][border="0"] {
 background: #415983 !important;
 border: 3px solid #50668d !important;
 margin: 3px !important;
}

/* left columns of the form tables */
form p table[width="100%"][cellspacing="0"][cellpadding="0"][border="0"] td[width="175"] {
 background: #50668d !important;
 border-right: 1em solid #415983 !important;
}

/* hide form table borders */
form p table td[bgcolor="#cbdced"] { display: none !important; }

}


/* Language Tools page
---------------------- */

@-moz-document url-prefix(http://www.google.co.kr/language_tools) {

/* table colors/borders */
table[bgcolor="#ffffff"] { background: #415983 !important; } /* flag table */
tr[bgcolor="#ffffff"] { background: #415983 !important; }   /* most all tables and table headers */
tr[bgcolor="#cbdced"] { background: #50668d !important; }  /* table borders */

/* table headers of all tables */
p > table > tbody > tr:first-child { background: #50668d !important; }

}

-----------------------
여기까지 복사해 붙여 넣으세요

<관련글>
2007/11/06 - [Firefox] - Greasemonkey와 Greased Lightbox

신고
Posted by 도이모이
2007.11.06 14:46
이번년도 초만해도 국내 Firefox 사용자들 사이에서 Greasemonkey에 대한 이야기가 많았죠. 심지어, 웹에 혁명이다라고까지 이야기 하시는 분들도 있었습니다. 저는 이 말을 국내 사용자들이 Greasemonkey를 설명하기 위해 지어낸 이야기인줄 알았더니 혁명이라는 이야기는 외국에서 먼저나왔더군요. 외국 사이트 돌아다니다 보면 Greasemonkey에 대해 찬양하면서 혁명이라는 단어를 많이 사용하더군요.

저도, 이 주장에 대해서 어느 정도는 동의하는데, 이유는 Greasemonkey 등장 이전에는 사용자가 웹페이지에 기능과  UI를 바꾸는 것이 불가능했죠. 일부 사이트에서 설정 기능을 제공해 주긴했지만 이것도 결국 기획자에 치밀한 계산에 따른 또 다른 UI에 불과했죠.

하지만, Greasemonkey 등장으로 드디어 사용자가 기획자에 의도를 벗어나 자신만에 화면과 기능을 만들어 가며 웹서핑을 할 수 있게 되었습니다.

좀 더 감을 빨리 잡을 수 있게 국내 1 위 포탈인 네이버를 사용 해 예를 들자면, 네이버 메인페이지에 잡다한 기능을 모두 빼 버리고 구글처럼 검색바 하나만 달랑 위치하게 구성해 사용 할 수 있수도 있다는 뜻입니다. (과거 search.naver.com을 통해 이런 UI를 제공한거 같은데 요즘 제공 안 하는거 같네요. 제공 안 하면 Greasemonkey로 만들어서 사용해야죠. 자세한 것을 이곳 참고)

이렇게 기존에는 기획자가 가지고 있던 UI와 기능에 대한 선택권에 일부분을 사용자가 빼았아 올 수 있다는 점이Greasemonkey에 큰 장점이며, 이것이 혁명이라는 단어를 사용하게 만드는 요인이겠죠.

근데, 이상하게 요즘 이런 획기적인 Firefox에 확장 기능인 Greasemonkey에 대한 논의가 지지부진하며, 국내에서 관련 스크립트가 많이 나오지 않을 것을 가슴 깊이 애석하게 생각합니다. 앞으로 국내에 Greasemonkey  script 가 풍부해 지길 기대하며 Greased Lightbox라는 것을 소개해 드릴까합니다. 

Greased Lightbox는 google 이미지 검색, 야후 Flickr, Wikipedia, Facebook, Myspace, deviantart 를 지원해 주는데 특히, google 이미지 검색 이용 시 좋습니다. 이미지 검색 후 이미지를 클릭하면 새창이 실행되는 UI가 기본이죠. 하지만, 이미지 클릭 때마다 새창 혹은 새탭이 실행 되니 이거 참으로 귀찮고 난감합니다. 하지만, Greased Lightbox를 이용하면, 클릭 할때마다 새창이 실행 되는 것이 아니라, 페이지 이동 없이 전체 이미지가 바로 레이어로 실행 되어 매우 편리합니다.


여기서 하나 더! 레이어로 떠 있는 상태에서 키보드에 좌측 키, 혹은 우측 키를 눌러 주면, 검색 결과에 이전 이미지와 다음 이미지가 자유롭게 이동 할 수 있는 생각지도 못 한 막강한 기능을 제공 하고 있습니다.





사용자 삽입 이미지

<1. 구글에서 이미지를 클릭합니다 >

사용자 삽입 이미지

<2. 이미지를 클릭하면 새창으로 실행 되는 것이 아니라 화면과 같이 레이어로 실행 됩니다 >

Greased Lightbox 설치하기: http://userscripts.org/scripts/show/3400


추신: 김하늘로 검색했는데, 중간에 김태희 사진이 보이더군요. 아무래도 겉보기 등급이 좀 더 좋은 거 같아.2번째 참고 화면은 김태희로 캡쳐 했습니다 :)
신고
Posted by 도이모이