MozTW 討論區 • 檢視主題 - [分享]用 Stylish 來自訂網頁樣式

檢視沒有回覆的主題 | 檢視最近討論的主題

MozTW » 討論區首頁 » 其它 » 其他中的其他

所有顯示的時間為 UTC + 8 小時

[分享]用 Stylish 來自訂網頁樣式

第 1 頁 (共 8 頁)

[ 117 篇文章 ]

前往頁數 1，2，3，4，5 ... 8 下一頁

列印模式	上一個主題 \| 下一個主題

發表人

內容

wini

文章主題 : [分享]用 Stylish 來自訂網頁樣式

發表於 : 2006-03-17, 20:29

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

Stylish 是 Mozilla Firefox 上，可以為任何網頁自訂 CSS 樣式的擴充套件。

我改寫的是教育部國語辭典，
主要是該站對我來說有一點點難閱讀，
然後雜七雜八的東西又有點多這樣，
所以就把它修改地更簡潔更好閱讀，
當然這是我個人的感覺啦。

（註：不清楚 Stylish 跟下面這段是在幹嘛的，可以不管這篇，因為我還沒有打算很認真寫，所以不想說明。）

引言回覆:

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

@-moz-document url-prefix("http://140.111.34.46/dict/"),
url-prefix("http://140.111.34.46/cgi-bin/dict/") {
body, table, input {font-size:20px; letter-spacing:.1em; line-height:120%; background:#dfd!important}
body, table {background:#ffc!important; font-family:sans-serif}
body {padding:1em 2em 6em 2em}
a {padding:.2em}
a:link {text-decoration:none; color:#33f}
a:visited {text-decoration:none; color:#aaf}
a:focus, a:hover {background:#fff}
center, table, font, hr, br
{display:none}
body form {background:#fdd; padding:1em}
body form br {display:inline}
body form font {display:none}
input[type="text"] {border:0; padding:.4em}
input[type="text"]:focus {background:#efe!important}
li {margin-left:30%; padding:.2em}
table[border="1"] {display:block}
table, th, td
{border:1px solid black!important; padding:0.2em}
table[border="1"] font {display:inline; color:red!important}
}

另外還有一個是 infoseek 多語言辭典的，
主要是拿掉上面跟右邊那兩處多除的東西，（個人觀點）
不過並沒有拿掉廣告就是。還有調整了字體大小。

引言回覆:

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

@-moz-document domain("dictionary.www.infoseek.co.jp") {
table * {font-size:20px}
#ms * {font-size:14px!important}
#wrap form[target], #ms img, .box, .box2 {display:none}
}

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

coolcd

文章主題 :

發表於 : 2006-03-18, 10:32

註冊時間: 2003-11-18, 10:59
文章: 3473

國語字典改得不錯唷～
wini 版看起來比原來好多了
不過進入字詞後標題處好像會有點超出格子
ex. 包在我身上（國語字典真是無所不包啊～）
所以我又給他加一條

代碼:

td[colspan] h1{margin-top: 0.4em;margin-bottom: 0.4em}

另外... 像這麼棒的分享文章
擺在這裡太委屈了吧～
應該放到 Extension 討論區比較好呀！

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

bulin23

文章主題 :

發表於 : 2006-03-18, 11:28

註冊時間: 2006-03-10, 09:47
文章: 287

加上樓上的那條，為了配合我的主題，我改成：

引言回覆:

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

@-moz-document url-prefix("http://140.111.34.46/dict/"),
url-prefix("http://140.111.34.46/cgi-bin/dict/"),
url-prefix("http://dict.moe.gov.tw/cgi-bin/dict/"){
body, table, input {font-size:16px; letter-spacing:.1em; line-height:120%; background:#CCC!important}
body, table {background:#CCC!important; font-family:Tahoma}
body {padding:1em 2em 6em 2em}
a {padding:.2em}
a:link {text-decoration:none; color:#000}
a:visited {text-decoration:none; color:maroon}
##a:focus, a:hover {background:#fff}
center, table, font, hr, br{display:none}
body form {background:#CCC; padding:1em}
body form br {display:inline}
body form font {display:none}
input[type="text"] {border:0; padding:.1em;background:#FFF!important}
input[type="text"]:focus {background:#FFF!important}
li {margin-left:10%; padding:.2em}
table[border="1"] {display:block}
table, th, td
{border:1px solid #000!important; padding:0.2em}
table[border="1"] font {display:inline; color:#000!important}
td[colspan] h1{margin-top: 0.4em;margin-bottom: 0.4em}
}

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

wini

文章主題 :

發表於 : 2006-03-19, 22:36

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

coolcd 寫:

另外... 像這麼棒的分享文章
擺在這裡太委屈了吧～
應該放到 Extension 討論區比較好呀！

說的也是，所以我剛把它跟Top 15 票選活動的 Stylish 討論串做了連結。 :)
另外你提供的那行 h1 的，我發現因為我設定 line-height 方式不良，
所以可能需要調整一下才不會在換行時重曡。（總之是小事）
感謝你提供的意見，其實我本來是打算眼不見為淨的啦。 XD

引言回覆:

td[colspan] h1 {margin:.4em 0; line-height:100%}

bulin23 寫:

##a:focus, a:hover {background:#fff}

這行有誤，前面的兩個 ## 是多出來的樣子。
話說我對顏色其實沒啥概念，不然其實用黑白灰階的可能比較好，
我的版本用色有點花，而且字體為了配合我這大近視而調很大。

我修改給 Stylish 用的「教育部國語辭典」的最新樣式如下，
這次加註了一些小註解，方便各位修改編輯，
還順便修掉了一些不必要的東西。
基本上要處理這種常常只有起始標籤的網頁，（有時連標籤都找不到）
想偷懶點都不行，反正這花幾小時研究一下，
就知道要怎樣弄才不會讓人一下就看出問題了。 :)
（事實上我為了消掉 br 跟 hr ，所以有處地方的位置會有點小奇怪，不過不必在意！）

引言回覆:

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

@-moz-document url-prefix("http://140.111.34.46/dict/"),
url-prefix("http://140.111.34.46/cgi-bin/dict/") {

/* 不想顯示的元素 */
center, table, font, hr, br
{display:none}

/* 網頁內容的顏色跟文字設定和頁面內距 */
body, table, input
{font-size:20px; letter-spacing:.1em; line-height:120%; color:#222; background:#dfd!important}
body, table
{background:#ffc!important; font-family:sans-serif}
body {padding:1em 2em 6em 2em}

/* 超連結文字的各種效果設定 */
a {padding:.2em}
a:link {text-decoration:none; color:#33f}
a:visited {text-decoration:none; color:#aaf}
a:focus, a:hover {background:#fff}

/* 輸入欲搜尋的關鍵字的表單樣式 */
form {background:#fdd; padding:1em}
form br {display:inline}
input[type="text"] {border:0; padding:.4em}
input[type="text"]:focus {background:#efe!important}

/* 搜尋結果列表 */
li {margin-left:30%; padding:.2em}

/* 字辭解釋頁面的表格 */
table[border="1"] {display:block}
td[colspan] h1 {margin:.4em 0; line-height:100%}
table, th, td
{border:1px solid black!important; padding:0.2em}
table[border="1"] font {display:inline; color:red!important}

}

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

bulin23

文章主題 :

發表於 : 2006-03-25, 15:38

註冊時間: 2006-03-10, 09:47
文章: 287

wini 寫:

bulin23 寫:

##a:focus, a:hover {background:#fff}

這行有誤，前面的兩個 ## 是多出來的樣子。
話說我對顏色其實沒啥概念，不然其實用黑白灰階的可能比較好，
我的版本用色有點花，而且字體為了配合我這大近視而調很大。

wini大：寫寫指正。

我想請教您，要下什麼指令才能把國語辭典中的form變窄呢？

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060207 Firefox/1.5.0.1 (pigfoot)

wini

文章主題 :

發表於 : 2006-03-26, 00:59

[網站管理員]

註冊時間: 2005-01-02, 05:49
文章: 3220

bulin23 寫:

wini 寫:

bulin23 寫:

##a:focus, a:hover {background:#fff}

wini大：寫寫指正。

我想請教您，要下什麼指令才能把國語辭典中的form變窄呢？

我需要先知道你想要讓哪一個 form 變窄，
要用哪種變窄法，才能給你明確的意見。

不過你可以先試試 width 這屬性。

引言回覆:

form {width:50%}
input[type="text"] {width:10%}

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

bulin23

文章主題 :

發表於 : 2006-03-26, 08:05

註冊時間: 2006-03-10, 09:47
文章: 287

wini大：

我上次其實是想請教您，該怎麼修改寬度。
我是想把咕狗的搜尋結果頁面改一改。

咕狗的結果頁面會自動折行，我希望不要折，可是找不到方法讓每一行可以一直持續到右邊去。

現在我的設定如下：

代碼:

@-moz-document url-prefix("http://www.google.com.tw/"),
url-prefix("http://www.google.co.jp/"){
div{margin-left:20%;border-width:4px;}
content{width: 100%;}
}

其中的content是我亂寫的。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060207 Firefox/1.5.0.1 (pigfoot)

xacid

文章主題 :

發表於 : 2006-03-26, 09:33

註冊時間: 2004-07-03, 22:04
文章: 444

bulin23 寫:

我上次其實是想請教您，該怎麼修改寬度。
我是想把咕狗的搜尋結果頁面改一改。

咕狗的結果頁面會自動折行，我希望不要折，可是找不到方法讓每一行可以一直持續到右邊去。

td.j{width: 100%;}
這樣用？

回頂端

Mozilla/5.0 (X11; U; Linux i686; zh-TW; rv:1.7.11) Gecko/20050729

coolcd

文章主題 :

發表於 : 2006-03-26, 13:10

註冊時間: 2003-11-18, 10:59
文章: 3473

bulin23 寫:

wini大：

我上次其實是想請教您，該怎麼修改寬度。
我是想把咕狗的搜尋結果頁面改一改。

咕狗的結果頁面會自動折行，我希望不要折，可是找不到方法讓每一行可以一直持續到右邊去。

你是要搜尋結果的描述不要自動折行嗎? 如果是的話:

代碼:

@-moz-document domain("google.com.tw") {
dd {white-space: nowrap}
}

還是你是要修改輸入搜尋字串欄位的寬度?

代碼:

@-moz-document domain("google.com.tw") {
input[type="text"] {width: 400px;}
}

這是以 400px 為例，寬度可以依你自己的偏好調整。

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI

回頂端

Mozilla/5.0 (Windows NT 5.1; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

bulin23

文章主題 :

發表於 : 2006-03-26, 15:03

註冊時間: 2006-03-10, 09:47
文章: 287

感謝以上回答的幾位大大。

成功了。
我要的就是這樣：

代碼:

@-moz-document url-prefix("http://www.google.com.tw/"),
url-prefix("http://www.google.co.jp/"){
div{margin-left:10%;margin-right:10%;}
table{width: 100%;}
}

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060207 Firefox/1.5.0.1 (pigfoot)

goldie

文章主題 :

發表於 : 2006-03-26, 20:26

註冊時間: 2004-09-29, 04:27
文章: 419

首先，先謝謝你的分享
我是最近看到這篇討論串，開始引發出興趣XD

bulin23 寫:

我要的就是這樣：

代碼:

@-moz-document url-prefix("http://www.google.com.tw/"),
url-prefix("http://www.google.co.jp/"){
div{margin-left:10%;margin-right:10%;}
table{width: 100%;}
}

幫你在 table 後面追加一行
不然最下面的『頁數檢索:』之 Google 選頁圖示會散開 :wink:

引言回覆:

@-moz-document domain(www.google.com), domain(www.google.com.jp), domain(www.google.com.tw), url-prefix("http://www.google.com"), url-prefix("http://www.google.com.tw/"),
url-prefix("http://www.google.co.jp/") {
dd {white-space: nowrap}
input[name="q"] {width: 90%}
div {margin-left:1em; margin-right:1em;}
table {width: 100%}
table[width="1%"] {width: 1%}
}

另外我覺得兩旁空太開，所以也微調了一下

_________________
個人 Firefox 擴充套件收藏集

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060207 Firefox/1.5.0.1 (pigfoot)

bulin23

文章主題 :

發表於 : 2006-03-26, 21:09

註冊時間: 2006-03-10, 09:47
文章: 287

我再修改一次：

代碼:

@-moz-document url-prefix("http://www.google.com"), url-prefix("http://www.google.com.tw/"),
url-prefix("http://www.google.co.jp/") {
input[type="text"] {width:90%;}
div{margin-left:9%;margin-right:9%;}
table{width:100%;}
}

但首頁還是有問題。
不知道CSS有沒有align: center這類的屬性。
我想把一些東西對中。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060207 Firefox/1.5.0.1 (pigfoot)

bulin23

文章主題 :

發表於 : 2006-03-27, 09:00

註冊時間: 2006-03-10, 09:47
文章: 287

再修改一次，新增兩行，解決出現相關新聞時位置：

代碼:

p.e{margin-left:20%;margin-right:20%;}
center{margin-left:10%;margin-right:10%;}

我下center是為了解決首頁的圖示和第一行文字，沒成功，只好忍耐。呵呵。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060207 Firefox/1.5.0.1 (pigfoot)

coolcd

文章主題 :

發表於 : 2006-03-27, 10:00

註冊時間: 2003-11-18, 10:59
文章: 3473

bulin23 寫:

再修改一次，新增兩行，解決出現相關新聞時位置：

代碼:

p.e{margin-left:20%;margin-right:20%;}
center{margin-left:10%;margin-right:10%;}

我下center是為了解決首頁的圖示和第一行文字，沒成功，只好忍耐。呵呵。

so... 你是希望整個頁面置中嗎?

代碼:

body {margin: 0 20%;}
table {width: 100%;}

_________________
:::: 簽名檔分隔線 ::::
免費好用又自由的輸入法 gcin Windows | 勸大家以後不要再買 ATI

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

bulin23

文章主題 :

發表於 : 2006-03-27, 10:41

註冊時間: 2006-03-10, 09:47
文章: 287

coolcd 寫:

你是希望整個頁面置中嗎?

不，我要的是……有點一言難盡，又懶得貼圖，呵呵。

我要的是，使用這段code看咕狗，您不妨試試，進入咕狗後輸入「新聞」。

代碼:

@-moz-document domain(www.google.com), domain(www.google.com.jp), domain(www.google.com.tw), url-prefix("http://www.google.com"), url-prefix("http://www.google.com.tw/"),
url-prefix("http://www.google.co.jp/") {
input[type="text"] {width:90%;}
div{margin-left:7%;margin-right:7%;}
table{width:100%;}
p.e{margin-left:20%;margin-right:20%;}
center{margin-left:10%;margin-right:10%;}
}

有個前提，我有安裝Customizegoogle套件，刪除了右側可能出現的廣告，而且給每一個搜尋結果加上了編號。

我這樣的設定，已經得到我的目標，BUT，咕狗首頁卻歪斜了，很BABU。呵呵。

希望有高人指點一下，讓首頁正常對中，全部漂漂亮亮。

最後由 bulin23 於 2006-03-27, 14:06 編輯，總共編輯了 1 次。

回頂端

Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.0.1) Gecko/20060207 Firefox/1.5.0.1 (pigfoot)

第 1 頁 (共 8 頁)

[ 117 篇文章 ]

前往頁數 1，2，3，4，5 ... 8 下一頁

MozTW » 討論區首頁 » 其它 » 其他中的其他

所有顯示的時間為 UTC + 8 小時

誰在線上

正在瀏覽這個版面的使用者：沒有註冊會員和 17 位訪客

您不能在這個版面發表主題
您不能在這個版面回覆主題
您不能在這個版面編輯您的文章
您不能在這個版面刪除您的文章
您不能在這個版面上傳附加檔案

前往 :