[分享]用Stylish調整PCDVD的版面 - NEW！！

SpeedRossi

Advance Member

加入日期: Dec 2001

文章: 485

關於寬度的說明

寬度限制是這次的新樣式的重點之一
就是限制住最大寬度，避免內容超出螢幕顯示範圍
首先我把已經把發言者欄的寬度定為220px
然後再把文章欄的寬度定在1410px
以確保不會內容超過寬度1680px的顯示範圍

通常什麼時候會超出顯示範圍勒？
我知道的兩種狀況是過大的圖片和過長的字串 (如果還有其他情況請跟我說)
就像下面那樣～

寬度1920px的圖

過長的字串
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

如果已經套用了新的樣式
情況應該就會像是這樣

圖片會被縮到寬度1410px的大小
而字串的話超出寬度的部份就捨棄
不會超出螢幕顯示範圍，不會出現橫向捲軸
這樣的作法目前我測試的情況是都OK
沒有發生什麼不好的後遺症

但是

還是有一個問題
那就是這個UserStyles只有在寬度1680px的螢幕才會有最佳效果
套用在解析度不足或超過的螢幕上都會有缺陷
好吧，那這樣就只好請網友自行修改吧

為了方便搜尋
先把整個UserStyles複製到筆記本
然後用"文章欄最大寬度調整"這個詞去搜尋
會發現下列代碼...

代碼:

/*文章欄最大寬度調整*/
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV {
	max-width: 1410px !important;
	overflow: hidden !important;
	white-space: normal !important;
}
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > img,
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > font > img {
	max-width: 1410px !important;
}

如果要用找的，那大概就是....

-------------------------------------------------------------------
/*=====全域================*/
.....
/*=====討論文章列表===========*/
.....
/*=====文章================*/
.....
/*-----主文章表格-----*/

/*文章欄最大寬度調整*/
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV {
max-width: 1410px !important;
overflow: hidden !important;
white-space: normal !important;
}
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > img,
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > font > img {
max-width: 1410px !important;
}
.....
....
...
..
.
-------------------------------------------------------------------

重點就是要修改那個max-width的值，兩個都要改
我想寬度1920px的螢幕應該是要修改成1650px左右吧
我沒有寬度1920px的螢幕，沒辦法實際測試
如果還有更好的值就跟我說一下吧
至於其他螢幕解析度的使用者就請自行試驗吧

想要看更多縮小圖片的效果可以看看這一串：『圖大且多低頻寬勿入』NBA 2K9(1920x1200x8FSAA貼圖）
裡面的圖片就像標題所說的

在欣賞2K9的漂亮畫面之餘順便拿來測試一下縮圖效果
印象中Firefox 3有用到顯示卡加速功能
可以讓圖片縮放後的效果更好
我這邊看起來是不錯啦

有關於寬度的說明就到此結束
PCDVD和Badongo的UserStyles又有小部份更新
請重新套用，這次修改的部份是針對過大的簽名檔圖片

代碼:

/*簽名檔的圖片*/
TD[style="border-bottom: 1px solid rgb(58, 110, 165);"] > DIV > img {
	max-height: 200px;
}

這次是限制圖片的最大高度，預設值暫定為200px
先這樣測試一段時間，有問題的朋友請反應給我，再看看要怎麼處理

__________________
　用Firefox+Stylish調整PCDVD版面 - 2008/12/29更新，

　用Stylish解決Firefox顯示過長網頁不完全的問題 - New!!!

　簡單化的Yahoo!奇摩字典 - 好用!!!

　UserStyles for Badongo！！ - 2008/12/06更新，吃便當輸入驗證圖不再吃力

　讓EvadeFilter變得不礙眼 - 2008/06/30更新，在FF3上正常了！

　以上皆適用於 Firefox 3 + Stylish 0.59

　Stylish 1.0以上的版本已經出了，但我用不習慣，所以以上的UserStyles皆只有在Stylish 0.59上測試。

2008-12-07, 12:54 AM #11

SpeedRossi

Advance Member

加入日期: Dec 2001

文章: 485

更新-2008-12-29

本次更新重點：
　1.把頁籤的格子加回去了
　2.恢復標題，把它放在右上角的地方
　3.排除當一頁只有一篇文章時格式不對齊的Bug
　4.解決表格中的圖片還沒出現時，替代文字把表格撐大的問題
　5.把大頭照放大到寬度120px

頁籤和標題

1＆2現在這樣改下去，就更只能適合大解析度了
解析度太小的話也不是不能用啦
就是會發生頁籤和標題重疊的問題
當然可以把頁籤縮短一點，改個值就好了
有需要但不會改的人問我吧，我告訴你改哪裡

目前作到這個地步我是覺得格式都差不多整齊了
但是可能也有我遇不到的問題
如果有網友發現的話歡迎不吝指正

__________________
　用Firefox+Stylish調整PCDVD版面 - 2008/12/29更新，

　用Stylish解決Firefox顯示過長網頁不完全的問題 - New!!!

　簡單化的Yahoo!奇摩字典 - 好用!!!

　UserStyles for Badongo！！ - 2008/12/06更新，吃便當輸入驗證圖不再吃力

　讓EvadeFilter變得不礙眼 - 2008/06/30更新，在FF3上正常了！

　以上皆適用於 Firefox 3 + Stylish 0.59

　Stylish 1.0以上的版本已經出了，但我用不習慣，所以以上的UserStyles皆只有在Stylish 0.59上測試。

2008-12-29, 07:51 PM #12

SpeedRossi

Advance Member

加入日期: Dec 2001

文章: 485

Yahoo奇摩字典

再附上Yahoo奇摩字典UserStyles
這是我學寫UserStyles的第一個對像
當初就是覺得它的一堆有的沒有的太煩了
所以才讓我想用Stylish把版面處理一下
最近把這些Code重新整理一下再放上來

當初的目的是要把Yahoo字典放在15吋副螢幕上
所以用1024x768最剛好，更大的也沒關係啦
還有，這個PCDVD的不一樣
能砍的我都砍了，就只保留最主要的部份