SECI 知識轉換

[Gmail] 恢復Gmail「未讀取」等按鈕選項

2010-08-21T13:54:00.004+08:00

在Gmail最近一次的改板中，把原本可選擇「已讀取」、「未讀取」等選項按鈕，全部移至上方選項中(如下圖)，雖說這項改變使Gmail的樣式變得較為美觀，但也使得要選取「未讀取」等按鈕時，變成需要點選兩次才能成功選取，感覺有點多餘且麻煩。

原本從網路上有找到可恢復原本格式的GM腳本(Gmail - Restore "Select" line including "Unread" link)，但最近不知為何原因失效了，因此又從網路上尋找到相同功能的Stylish樣式，以下為此樣式語法，請自行複製儲存：

/*Gmail: Select "links" restored*/ 

@-moz-document domain("mail.google.com") { 

/* move search results text down below Select links */      

.A1.D.E .yS { padding-top: 25px !important; } 

/* same height as before (more or less) */      

.A1.D.E .nH { height: 22px !important; } 

.A1.D.E > .nH > .nH.Cq > div > div > .J-M.AW:nth-child(7) {      

position: relative !important;       

top: -4px !important;       

left: 15px !important; /* line up with 'Search ...' */       

display: inline !important;       

height: 16px !important;       

}       

.A1.D.E > .nH > .nH.Cq > div > div > .J-M.AW:nth-child(7) > .SK:before {       

content: "Select: " ; font-family: Arial ; color:White;        

}       

.A1.D.E > .nH > .nH.Cq > div > div > .J-M.AW:nth-child(7) > .SK {       

-moz-box-shadow: none !important;       

-webkit-box-shadow: none !important;       

padding-top: 4px !important;       

padding-bottom: 2px !important;       

background-color: transparent !important;       

font-family: Verdana !important;       

color: White !important; 

}      

.A1.D.E > .nH > .nH.Cq > div > div > .J-M.AW:nth-child(7) > .SK.AX > .J-N {       

display: inline-block !important;       

padding-left: 8px !important;       

padding-right: 8px !important;       

-moz-border-radius: 3px !important;       

-webkit-border-radius: 3px !important; /* WebKit */       

cursor: pointer !important;       

}       

.A1.D.E > .nH > .nH.Cq > div > div > .J-M.AW:nth-child(7) > .SK.AX > .J-N:hover {       

background-color:#406480 !important;       

color:white !important;       

}       

/* optional bg: sort of a button look (dark/light bg with light/dark text) * /       

.A1.D.E > .nH > .nH.Cq > div > div > .J-M.AW:nth-child(7) > .SK.AX > .J-N:not(:hover) {       

background-color: #406480 !important;       

} /* dark blue [Planets bg] */ 

}

PS.標記為紅色字體的地方，請搭配自己Gmail頁面風格更改字體顏色(如White改為black)
套用後圖片

[Fx套件] 火狐必裝套件 ─ Greasemonkey

2010-07-23T14:22:00.000+08:00

Greasemonkey(以下簡稱GM)，中文俗稱油猴子，為火狐(Firefox)的一個擴充套件，可讓使用者安裝不同的腳本為需要的網站增加、修改其功能，達到方便瀏覽網站之目的，諸如Google搜尋的排列方式、一鍵下載YouTube影片及Flickr小圖放大功能等，都可利用腳本來達成，可說是火狐必定安裝的擴充套件之一。

套件資訊：

套件名稱：Greasemonkey

相容於：Firefox 1.5 - 3.6.*

官方網站：http://www.greasespot.net/

下載網站：https://addons.mozilla.org/zh-TW/firefox/addon/748/

GM的安裝步驟如同一般的火狐套件，在上述下載網站點選新增至Firefox(Add to Firefox)即可，安裝完畢後會在火狐狀態列顯示一個可愛的猴子圖示(如下圖)
在圖示上點選右鍵，會如上圖一般出現一個資訊方框，各代表者：

方框最上方是目前頁面所使用的腳本名稱，在之前的GM版本會在腳本名稱顯示一個打勾符號，代表腳本啟用與否，然而最新版本不知為何取消了這設計，抑或是我電腦本身的問題，原因並不瞭解。
正在使用中的腳本：某些腳本必須經過相關設定才能正常使用，此選項會顯示腳本的設定選項。
新增腳本：此選項應是編寫GM腳本用，我並沒有實際操縱過，故略過不提。
管理腳本：開啟管理腳本選項，為最常用的選項，也可以在GM圖示上用滑鼠中鍵開啟，下面篇幅會詳加介紹。
啟用：顧名思義，啟用GM的選項，亦可在GM圖示上使用滑鼠左鍵啟動

管理腳本選項是GM中最常使用的選項，在此選項下可以查看目前所有安裝的腳本
上圖即為管理腳本畫面，左側為所有安裝的腳本，灰色代表目前尚未啟用的腳本，如果懂得編寫修改GM腳本，可以點選下方編輯按鈕利用Notepad++等軟體撰寫修改。

畫面右側上方是腳本會套用到的網址，在此網址下腳本才會作用，然而有些腳本是全網址適用，但在某些網站會造成瀏覽上的問題，遇到此種情形時可以在下方例外網址新增要過濾的網址項目，使腳本無法在此網址下作用，避免造成瀏覽上的問題。

移除GM腳本也相當地容易，當確定未來都不會在使用此腳本時，可勾選旁邊的「同時清除腳本的相關設定」在點選「移除腳本」按鈕，反之則點選移除腳本按鈕即可。

GM套件讓使用者在網路上瀏覽更為便利，不過需要搭配適合的腳本，個人會推薦至Userscripts.org尋找需要的腳本，未來本網誌也會介紹方便實用的腳本給各位。

[Blogger] 設置文章總覽效果

2010-07-19T12:11:00.003+08:00

要在Blogger顯示自己過去所寫的文章，大部分都是會使用Blogger內建的小工具─網誌存檔(如：本網誌左側文章總覽欄位)，然而網誌存檔不管是下拉式選單或階層、條列式，都是採用日期排列，無法看出全部標籤的文章。

不過昨天在PTT Blog版上發現解決此一問題的最佳方法，可以自動讀取所有標籤文章的模組，個人安裝測試後，發現整個模組運作及外觀都令人都相當滿意，模組示範可以參考本站上方文章總覽頁面。

安裝方式也很簡單，只要在Blogger中新建立一篇網頁/文章，下圖使用新增網頁為範例

選擇修改HTML

插入以下程式碼，並把部落格網址替換成自己部落格網址即可

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>    

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>     

<script src="http://部落格網址/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>     

<script type="text/javascript"> var accToc=true; </script>     

<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

文章總覽模組來源：Table of contents and Accordion for Blogger
如果不喜歡此種模組樣式，想更換成表格樣式可以另外參考這篇：Table of Contents for Blogger new style，示範網頁

PS.從程式碼看來，似乎最多只顯示1000篇文章，但應該可以修改數字來顯示更多文章，不過我的文章目前尚無如此多地數量，所以只能煩請有超過1000篇文章的網友測試回報給我，看是否只能顯示1000篇文章。

[GC] 暫時解決無法安裝擴充功能問題

2010-03-21T10:51:00.020+08:00

2010.09.03補充
更新至Google Chrome 6.0.472.53 正式版可修正無法安裝擴充套件的問題

2010.04.28補充
最近發現有更快速的方法可解決此一問題，只要關閉GC的沙箱(Sandbox)功能即可。關閉方法如下：
在GC的捷徑後增加以下參數 --no-sandbox (如下圖)，參數前需加上空白

PS.建議安裝完需要的套件(主題)後，請恢復沙箱功能

昨天心血來潮想把Google Chrome(以下簡稱GC)更換佈景主題，然而在點選套用主題後，竟跳出「無法安裝擴充功能」的視窗，並顯示「could not create directory for unzipping 」，之後試著安裝任一擴充套件，也都是顯示相同訊息。

一開始以為重新安裝GC應該就可以解決，但重安裝後問題依舊存在，上網搜尋了一下，發現國外少數人也有此情形發生(Issue 35198)，在連接中有人提供瞭解決辦法，~~似乎是目前解決此問題的唯一方法~~，不過我並不是很喜歡修改系統參數這方法就是。

以下為解決無法安裝擴充功能問題的步驟：(XP適用)
1.進入控制台，點選系統圖示，選取進階，選擇下方的環境變數選項。

2.修改TEMP及TMP(點選編輯按鈕修改)，把原始的路徑更改為C:\Temp(請務必確定在此路徑下有此一資料夾，倘若無此資料夾請自行創立一個)。

PS.建議備份好TEMP及TMP的原始路徑，以為將來還原之用。

3.重新開機，之後GC應該就可以安裝任何佈景主題及擴充套件。

[Blogger] 在Blogger安裝LightBox特效

2010-01-04T20:46:00.011+08:00

Lightbox(光箱)，是一種讓小圖不需另開新頁，可點選圖片直接在同一頁面瀏覽大圖的酷炫特效，很適合用於美食、旅遊或教學等圖片較多的網站。Lightbox其效果如下：
單一圖片瀏覽

圖片群組瀏覽

第一次看到Lightbox效果是在良人的大秘寶上，第一眼就感覺非常特別，很想安裝在自己的Blog上，不過在良人的大秘寶LightBox語法是設置在他自己的空間，會有頻寬用完無法顯示的因素存在。

因此我依照Lightbox 2官網的說明，把檔案架設在Google空間，步驟雖多但相當地簡單，對此特效有興趣的朋友可以依下列方式自行安裝。

一、下載Lightbox檔案
1.至官網下載Lightbox v2.04版本並解壓縮
2.解壓縮後會有三個資料夾(css、images及js)和一個index網頁檔(網頁檔不需要可先刪除)。

二、修改部分檔案資料

註：此步驟會需要修改一些語法，建議先去下載Notepad++ 5.6.3 免安裝中文版會比較方便。

1.images資料夾中的closelabel、loading、nextlabel及prevlabel圖片上傳至Google Sites空間(如何上傳至Google Sites請自行搜尋，本篇不詳述)

2.使用Notepad++打開css資料夾中的lightbox.css，尋找到下列兩行語法

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

將上列藍色字體替換成剛剛上傳的nextlabel及prevlabel圖片網址。

3.依上一步驟打開js資料夾中的lightbox.js，一樣尋找下列兩行語法

    fileLoadingImage:        'images/loading.gif',     

fileBottomNavCloseImage: 'images/closelabel.gif',

將上列藍色字體替換成剛剛上傳的closelabel及loading圖片網址。

4.把以下檔案builder.js、effects.js、lightbox.js、prototype.js、scriptaculous.js及lightbox.css上傳至Google Site空間，注意六個檔案請放在同一個資料夾中。

三、套用Blogger
1.進入Blogger後台點選版面配置->修改 HTML，在</head>之前插入以下語法(請先備份範本)

<link rel="stylesheet" href="上傳空間網址/lightbox.css" type="text/css" media="screen" />

<script src="上傳空間網址/prototype.js" type="text/javascript">

</script>

<script src="上傳空間網址/scriptaculous.js?load=effects,builder" type="text/javascript">

</script>

<script src="上傳空間網址/lightbox.js" type="text/javascript">

</script>

2.編寫文章時，在圖片連接增加「rel="lightbox"」即可，如

<a href="http://image.jpg/" rel="lightbox"><img src="http://image.jpg" /></a><

/code>

若需要群組顯示，則是增加「rel="lightbox[自行添加字母]"」，如

<a href="images1.jpg" rel="lightbox[roadtrip]">image #1</a>

<a href="images2.jpg" rel="lightbox[roadtrip]">image #2</a>

<a href="images3.jpg" rel="lightbox[roadtrip]">image #3</a>

[Fx套件] Stylish-擁有與眾不同的網站版面

2010-01-03T14:31:00.025+08:00

套件資訊：

套件名稱：Stylish

相容於：Firefox: 3.0 – 3.7a1pre

官方網站：userstyles.org

下載網站：https://addons.mozilla.org/zh-TW/firefox/addon/2108

Stylish是一個讓使用者可以自訂網站與使用介面外觀的附加套件，是我相當推薦安裝的套件之一，使用方法可以參考底下相關閱讀連結，以下就個人推薦的樣式介紹給各位：(以下圖片可點選放大)

1.OS X Style for New Google Reader

適用於中英文版Google Reader，惟在中文版時，左上方的Google Reader標題會被裁切一小部份，但並不會影響到整體畫面，另外可在搭配New Spinner for Google Reader，以增加讀取時的美觀。

2.YouTube.com - dark gray redesign (vC)

把YouTube網站從原本的白色系改變成灰黑色系，增加瀏覽上的美觀及減少眼睛的負擔。

3.Gmail Cleaner and Tweaker
由台灣Nelson為Gmail所製作的樣式，其網誌有相當詳盡的說明，故不在截圖介紹。
[FX] 給 Gmail 用的 Stylish @ Nelson 國三生了沒

4.Website: cleaner - WRETCH - Album
看名稱即知，這是給無名相簿使用，同為Nelson所製作的樣式。
[FX] 給無名相簿用的 Stylish @ Nelson 國三生了沒

5. Auto-Hide BookMarks Toolbar - Firefox 3.0 *FIXED*
隱藏Firefox書籤列，增大瀏覽空間，當滑鼠移過去書籤列會自動顯示出來。

6.Yellow https location bar
之前Firefox 3.0版，在連到https：//加密網址時，網址列會顯示為黃色底色，以突顯與一般網址不同，然而到3.5版後，Firefox卻取消這功能，用鎖頭取代，此樣式可恢復原本黃色底色的功能，惟須注意，部分佈景主題與此樣式不相容，有溢位或失效的情形產生。

7.Combine Stop/Reload buttons
合併Firefox的停止及重新讀取按鈕。

注意：倘若遇到無法隱藏狀況，請先「自訂」工具列，把 Stop Button 移到 Reload Button 的左邊(安裝網址有圖示說明)。

以下為自行手動撰寫的樣式，煩請自行複製下列語法並儲存：
(PS.下列是之前從網路上看來並儲存在我的電腦中，但我已忘記各個來源連結，倘若有人知道，請告知我，以補上相關連結)

1.Google Reader 字體

@-moz-document url-prefix("https://www.google.com/reader") ,url-prefix("http://www.google.com/reader")

{

.entry .entry-body {max-width:100% !important; font-size:16px !important; line-height:150% !important;}

}

更改前：

更改後：

原本的Google Reader字體過小不易閱讀，經更改後，字體放大變得相當容易閱讀瀏覽。

2.網站大圖縮小(適用於朱學恆的阿宅萬事通事務所)

@-moz-document url-prefix("http://blogs.myoops.org/lucifer.php")

{

img {

max-width: 100% !important;

height: 100% !important;

}

}

以上語法是針對朱學恆的阿宅萬事通事務所所設定，如果要適用別的網站，請把第一行的網址更改為你要的網站網址並將標式紅色的語法刪去。

3.圖片失連圖示

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



@-moz-document url-prefix(http), url-prefix(file) {

img:-moz-broken{

-moz-force-broken-image-icon:1;

width:24px;

height:24px;

}

}

在使用IE時，當圖片失連會用一個紅色的X圖示(俗稱叉燒包XD)替代，但是在同樣的情況，Firefox卻是空白的一片，此語法就是此失連的圖片用替代圖示顯示出來。

相關閱讀：
Stylish：看著不爽？隨手換掉網站的閱讀版面與視覺效果 | 電腦玩物
17個讓Gmail更華麗、更好用的「Stylish佈景主題」（Firefox外掛）| 重灌狂人