JosephPhoto 的網路日誌我的網誌 - Firefox：Stylish 重設網頁的 HTML 和 CSS 樣式碼

September 27, 2006

Firefox：Stylish 重設網頁的 HTML 和 CSS 樣式碼

還記得前幾天，還在討論「Google 還我查詢結果的繁體字型來！」，正所謂「危機就是轉機」，一直希望能找到更好的處理方式。

以 Firefox 靈活的使用方式，和各式各樣的擴充套件，應該可以尋找到更好的解決方法！終於讓我尋找到了：Stylish。簡單說，Stylish 可以為您瀏覽的網站或網頁，重新訂定 HTML 程式碼或 CSS 樣式碼，修改網頁中文字的字型、大小、顏色等屬性。

以上是我目前使用的 Google 搜尋網頁。

而這是目前 Google 設計的搜尋網頁。比較一下，如果您也喜歡，可以依以下方式，新增 Stylish 擴充套件，再針對 google.com.tw 撰寫新的樣式：

前往「Firefox Add-ons - Stylish 」安裝 Stylish 擴充套件。
於 Firefox 下方的工具列，以滑鼠右鍵點按 Stylish 的圖示，選擇「管理樣式」。
點按「新增」按鈕。
於上方欄位填入您容易辨識的名稱。
於下方欄位輸入 HTML 或 CSS 的樣式碼。
點按「套用」按鈕，即完成設定。

而隨時，您都可以在 Stylish 的管理樣式視窗中，重新啟用或停用某一個樣式設定。

分享，目前我使用關於 Google.com.tw 的 Stylish 樣式碼，主要以修正 Simsun 簡體中文字型為主，另外修改了搜尋輸入字串部份的顏色和按鈕樣式，以利辨視。

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

@-moz-document domain("www.google.com.tw")
{
body,div,td,p,a {
font-family:微軟正黑體,新細明體 !important;
}
body {
color:red !important;
}
input {
border:solid 1px #909090 !important;
font-family:微軟正黑體,新細明體 !important;
color:#CC0033 !important;
}
input[type=submit] {
width:202px !important;
text-align:center !important;
background:#202020 !important;
color:#a0a0a0 !important;
}
}

當然，上頭是以 www.google.com.tw 這個網域為套用原則「domain("www.google.com.tw") 」，如果搜尋網站是 www.google.com，則不會套用；如果您希望是所有的 www.google 都會套用這個樣式時，可以改為「prefix(http://www.google.)」。即，上頭的第二行字改為：（紅色字為不同的修改處）

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

@-moz-document url-prefix(http://www.google.)
{
body,div,td,p,a {
font-family:微軟正黑體,新細明體 !important;
}
body {
color:red !important;
}
input {
border:solid 1px #909090 !important;
font-family:微軟正黑體,新細明體 !important;
color:#CC0033 !important;
}
input[type=submit] {
width:202px !important;
text-align:center !important;
background:#202020 !important;
color:#a0a0a0 !important;
}
}

以上樣式碼，我是參考 Darkoogle 修改而成的，userstyles.org - Darkoogle ，這算重度改裝 Google 樣式了。

另外，推薦此一簡單的 Gmail 樣式碼，主要僅是將 Gmail 的 Sign-out 增加一個按鍵的外框樣式，以利辨別。

userstyles.org - Gmail: Sign-out with button

userstyles.org - Toolbar Show/Hide，將 Firefox 所有的工具列（包括瀏覽和書籤工具列），改為自動顯示/隱藏。

userstyles.org - Tabs Like Opera，將 Firefox 的 Tab 標籤頁功能，改成類似 Opera 的樣式，也滿賞心悅目。

更多的使用說明，請參考「Stylish quick guide」，而更多的使用者自訂風格，請參考「userstyles.org」。

【參考資料】
Mozilla 討論區 - google.com.tw 前天起對Firefox輸出簡宋體字形
 Jason 的網路日記 - Google 字體跑掉

愈玩愈好玩，今天又繼續把我的 Google 做改裝，主要是把搜尋結果的標題連結，改以更明顯的加框按鈕型式呈現。

此為 Windows 藍色型式的按鈕：

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

@-moz-document domain("www.google.com.tw")
{
a[class=l] {
padding: 1px 15px 1px 15px;
color: rgb(17,37,55) !important;
text-decoration:none !important;
background-color:rgb(195,217,255) !important;
border: 1px solid rgb(51,102,153);
border-left-color:rgb(232,238,247);
border-top-color:rgb(232,238,247);
}
a[class=l]:hover {
border: 1px solid rgb(232,238,247);
border-left-color:rgb(51,102,153);
border-top-color:rgb(51,102,153);
}
a[class=l]:active {
padding: 2px 14px 0 16px;
}
}

此為黑色搭配棕色超級有質感型式的按鈕：

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

@-moz-document domain("www.google.com.tw")
{
a[class=l] {
padding: 1px 15px 1px 15px;
color: #CCB797 !important;
text-decoration:none !important;
background-color:#000000 !important;
border: 1px solid #666666;
border-left-color:#CCCCCC;
border-top-color:#CCCCCC;
}
a[class=l]:hover {
border: 1px solid #CCCCCC;
border-left-color:#CCCCCC;
border-top-color:#CCCCCC;
}
a[class=l]:active {
padding: 2px 14px 0 16px;
}
}

目前自己使用的 Google 字型設定，除了原先分享的修改之外，主要是將繁體中文的選項，以不同顏色標示：

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

@-moz-document domain("www.google.com.tw")
{
body,div,td,p,a {
font-family:微軟正黑體,新細明體 !important;
}
body {
color:red !important;
}
input {
border:solid 1px #909090 !important;
font-family:微軟正黑體,新細明體 !important;
color:#CC0033 !important;
}
input[type=radio],label {
color:gray !important;
width:auto !important;
}
input[type=submit] {
width:202px !important;
text-align:center !important;
background:#202020 !important;
color:#a0a0a0 !important;
}
input[id=lgr],label[for=lgr] {
color:#006699 !important;
}
}

老人家了，「意慾蔓延」的網站很有質感，但字太小了！不適合老人家我閱讀，再次順手改一改，主要是將字型設定在 14~15 之間，顏色改以深色為主：

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

@-moz-document domain("www.dreamreload.com")
{
a,body, a.mediumlink, .mediumtext {
font-family: 微軟正黑體,Verdana,新細明體 !important;
font-size: 12px !important;
}
.largetext {
font-family: 微軟正黑體,Verdana,新細明體 !important;
font-size: 15px !important;
}
a.bforumlink {
color:#353F48 !important;
font-family: 微軟正黑體,Verdana,新細明體 !important;
font-size: 15px !important;
}
a.bforumlink:active, a.bforumlink:hover {
color: #998566 !important;
}
a.topiclink {
color: #2A3239 !important;
font-family: 微軟正黑體,Verdana,新細明體 !important;
font-size: 15px !important;
}
a.topiclink:visited {
color: #A8B4BF !important;
}
a.topiclink:active, a.topiclink:hover {
color: #999966 !important;
}
font.smalltext {
font-family: 微軟正黑體,Verdana,新細明體 !important;
font-size: 13px !important;
}
}

放假在家，把腦筋動到「辛蒂摩兒」的網站了！由於太多不適合大家觀賞的地下資訊了，所以改以黑色系來表示；這回的修改比較容易，因為其網站是以 CSS 樣式表的方式，單獨獨立的，容易修改多了！

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

@-moz-document domain("www.cyndi.idv.tw")
{
a {
color: #DDDDDD !important;
}
.gensmall, .nav {
color: #FFFFCC !important;
font-size: 11px !important;
}
.forumline,.bodyline {
background-color: #000000 !important;
border: 2px #D6D6D6 solid !important;
}
.forumlink {
font-size: 14px !important;
}
td.row1, td.row3, td.row3Right {
background-color: #2C2C2C !important;
}
td.row2 {
background-color: #222222 !important;
}
.topictitle {
font-weight: normal !important;
font-size: 12px !important;
color: #60CAFF !important;
}
a.topictitle:link {
color: #EBEBEB !important;
}
a.topictitle:hover {
color: #FFE460 !important;
}
a.topictitle:visited {
color: #6E6E6E !important;
}
.postdetails {
color: #FFE9CC !important;
}
.postbody {
color: #E8E8E8 !important;
}
.postlink {
color: red !important;
}
.genmed {
color: #454545 !important;
}
.genmed:link {
color: red !important;
font-size: 14px !important;
}
textarea[name=message] {
background-color : #B9DFB9 !important;
}
.quote {
color: #D6D6D6 !important;
background-color: #525252 !important;
}
td.catHead,td.catBottom {
background-image: none !important;
background-color: #525252 !important;
border: 0px !important;
}
th {
background-image: none !important;
background-color: #A8A8A8 !important;
border: 0px !important;
color: black !important;
}
}

每天都要上「蘋果日報」的網站了！但每每對於他的字型設定與文字大小感覺到不舒服，今天順手也修改了一下，分給各位朋友！

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

@-moz-document domain("1-apple.com.tw") {
.arttext {
font-family: 微軟正黑體,Verdana,新細明體 !important;
font-size: 15px !important;
}
td[bgcolor="EFEFEF"],td.s-depict,td.news_picinfo1,td.descript {
font-family: 微軟正黑體,Verdana,新細明體 !important;
font-size: 14px !important;
color: gray !important;
}
}

最後更新：08/03/07 08:45

0推薦此文章推收

Today's Visitors: 0 Total Visitors: 1212

You can leave comment to this collection