| MozTW 討論區 https://forum.moztw.org/ |
|
| [分享]用 Stylish 來自訂網頁樣式 https://forum.moztw.org/viewtopic.php?f=8&t=13247 |
第 1 頁 (共 8 頁) |
| 發表人: | wini [ 2006-03-17, 20:29 ] |
| 文章主題 : | [分享]用 Stylish 來自訂網頁樣式 |
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} } |
|
| 發表人: | coolcd [ 2006-03-18, 10:32 ] |
| 文章主題 : | |
國語字典改得不錯唷～ wini 版看起來比原來好多了 不過進入字詞後 標題處好像會有點超出格子 ex. 包在我身上 （國語字典真是無所不包啊～） 所以我又給他加一條 代碼: td[colspan] h1{margin-top: 0.4em;margin-bottom: 0.4em}
另外... 像這麼棒的分享文章 擺在這裡太委屈了吧～ 應該放到 Extension 討論區比較好呀！ |
|
| 發表人: | bulin23 [ 2006-03-18, 11:28 ] |
| 文章主題 : | |
加上樓上的那條，為了配合我的主題，我改成： 引言回覆: @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} } |
|
| 發表人: | wini [ 2006-03-19, 22:36 ] |
| 文章主題 : | |
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} } |
|
| 發表人: | bulin23 [ 2006-03-25, 15:38 ] |
| 文章主題 : | |
wini 寫: bulin23 寫: ##a:focus, a:hover {background:#fff} 這行有誤，前面的兩個 ## 是多出來的樣子。 話說我對顏色其實沒啥概念，不然其實用黑白灰階的可能比較好， 我的版本用色有點花，而且字體為了配合我這大近視而調很大。 wini大：寫寫指正。 我想請教您，要下什麼指令才能把國語辭典中的form變窄呢？ |
|
| 發表人: | wini [ 2006-03-26, 00:59 ] |
| 文章主題 : | |
bulin23 寫: wini 寫: bulin23 寫: ##a:focus, a:hover {background:#fff} 這行有誤，前面的兩個 ## 是多出來的樣子。 話說我對顏色其實沒啥概念，不然其實用黑白灰階的可能比較好， 我的版本用色有點花，而且字體為了配合我這大近視而調很大。 wini大：寫寫指正。 我想請教您，要下什麼指令才能把國語辭典中的form變窄呢？ 我需要先知道你想要讓哪一個 form 變窄， 要用哪種變窄法，才能給你明確的意見。 不過你可以先試試 width 這屬性。 引言回覆: form {width:50%}
input[type="text"] {width:10%} |
|
| 發表人: | bulin23 [ 2006-03-26, 08:05 ] |
| 文章主題 : | |
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是我亂寫的。 
|
|
| 發表人: | xacid [ 2006-03-26, 09:33 ] |
| 文章主題 : | |
bulin23 寫: 我上次其實是想請教您，該怎麼修改寬度。
我是想把咕狗的搜尋結果頁面改一改。 咕狗的結果頁面會自動折行，我希望不要折，可是找不到方法讓每一行可以一直持續到右邊去。 td.j{width: 100%;} 這樣用？ |
|
| 發表人: | coolcd [ 2006-03-26, 13:10 ] |
| 文章主題 : | |
bulin23 寫: wini大：
我上次其實是想請教您，該怎麼修改寬度。 我是想把咕狗的搜尋結果頁面改一改。 咕狗的結果頁面會自動折行，我希望不要折，可是找不到方法讓每一行可以一直持續到右邊去。 你是要搜尋結果的描述不要自動折行嗎? 如果是的話: 代碼: @-moz-document domain("google.com.tw") { dd {white-space: nowrap} } 還是你是要修改輸入搜尋字串欄位的寬度? 代碼: @-moz-document domain("google.com.tw") {
input[type="text"] {width: 400px;} } 這是以 400px 為例，寬度可以依你自己的偏好調整。 |
|
| 發表人: | bulin23 [ 2006-03-26, 15:03 ] |
| 文章主題 : | |
感謝以上回答的幾位大大。 成功了。 我要的就是這樣： 代碼: @-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%;} } |
|
| 發表人: | goldie [ 2006-03-26, 20:26 ] |
| 文章主題 : | |
首先，先謝謝你的分享 我是最近看到這篇討論串，開始引發出興趣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 選頁圖示會散開  引言回覆: @-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%} } 另外我覺得兩旁空太開，所以也微調了一下
|
|
| 發表人: | bulin23 [ 2006-03-26, 21:09 ] |
| 文章主題 : | |
我再修改一次： 代碼: @-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這類的屬性。 我想把一些東西對中。 |
|
| 發表人: | bulin23 [ 2006-03-27, 09:00 ] |
| 文章主題 : | |
再修改一次，新增兩行，解決出現相關新聞時位置： 代碼: p.e{margin-left:20%;margin-right:20%;}
center{margin-left:10%;margin-right:10%;} 我下center是為了解決首頁的圖示和第一行文字，沒成功，只好忍耐。呵呵。 |
|
| 發表人: | coolcd [ 2006-03-27, 10:00 ] |
| 文章主題 : | |
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%;} |
|
| 發表人: | bulin23 [ 2006-03-27, 10:41 ] |
| 文章主題 : | |
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。呵呵。 希望有高人指點一下，讓首頁正常對中，全部漂漂亮亮。 
|
|
| 第 1 頁 (共 8 頁) | 所有顯示的時間為 UTC + 8 小時 |
| Powered by phpBB® Forum Software © phpBB Group https://www.phpbb.com/ |
|