wEb

크롬브라우저 스타일 커스터마이징

dd2i 2012. 9. 21. 11:44
반응형

chrome browser font setting

크롬브라우저에서 폰트를 커스터마이징하려면 

우선 extension(크롬확장기능)에서 userscriptCSS 를 찾아서 다운로드~@!


| browser >tools>extension


설치 후 옵션으로 들어간뒤 url blank와 스타일시트 blank에 원하는 스타일의 CSS를 작성.



| userscriptCSS mov Tutorial


how to use

1. Enter your regexp for the URL.

2. Type/paste your stylesheet and or javascript code.

3. Click the save button to save the currently displayed settings.


You can have up to 10 URL expressions each with its own stylesheet and script. If the 'halt if matched' checkbox is checked then subsequent URL expressions will not be checked if a match is found.


Changes from the original:

1. User supplied javascript.

2. Configurable regexp for URLs.

3. The listener takes an object as its message instead of a string.

(e.g. chrome.extension.sendRequest({'req': 'exturl', 'param': 'img/spabanner.png'} ...)

4. Includes JQuery 1.3.2.



예시. Configuration used in the demonstration:


---------- URL ----------


^http://192\.168\.2\.55/


---------- CSS ----------


body { background-color: rgb(80,0,0) !important;}

/* shrink banner */

img[src="/spabanner.jpg"] {

height: 80px;

width: 600px;

postion: 0 0;

/*display: none;*/

opacity: 0;

}

div.navbar h2 a {

color: white !important;

text-decoration: none !important;

}

div.navbar h2 a:hover { color: red !important; }

/* tabs background */

div.navbar { background-color: rgb(32,32,32) !important; }

/* body of the page (below the tabs) */

div.tab-page {

border-color: rgb(120,120,120) !important;

background-color: rgb(48,48,48) !important;

}

---------- JavaScript ----------


chrome.extension.sendRequest({'req': 'exturl', 'param': 'img/spabanner.png'}, function(response) {

$("img").eq(0).attr({src: response, width: 600, height: 80});

$("img").eq(0).css("opacity","0.0");

$("img").eq(0).animate({opacity: 1}, 500 );

});

$("input[name='31407']").eq(0).attr({size: 96});




반응형