昨天晚上瞧著瞧著，忽地覺得側邊條已經成長到太長無法控制的地步了，所以決定換成三欄式的 template...在 pixnet 提供的 3 column template 裡面找了一番，發現顏色素一點比較好看的好像只有這一個，KCTONY 投稿的 [極簡] ...於是就選了。
不過就跟幾乎全部其他的 wretch pixnet 樣式投稿投稿一樣，這個樣式不能馬上拿來用...首先原作者的螢幕大小跟你的可能不一樣；他設想的樣子也跟你想的可能不一樣；他喜歡的寬度跟你需要的可能不一樣；更重要的是，他用的 browser 版本跟你現在及未來會用的可能不一樣...所以對龜毛的人來說，每個 template 套用之後都需要大量修改才能 work fine...當然有一種例外，就是那種很明顯是用 IE 做出來，然後只有用 IE 的人會選的那種 template...不幸（還是說萬幸？）的是，這種 template 大概佔了全部投稿 template 的九成...
so, 這是前話。
我最先遇到的問題是欄寬、字體大小、邊界這些常見的問題。由於大腦實在是太久沒有以 structured logical mode 運作了，所以剛開始的時候看那 CSS file 實在是看得很痛苦...請教 CSS 達人 k40 女士之後，發現這種太 detail 的東西無法詢問 XD 於是就在 k40 女士給我的 w3c CSS 2.1 specification 裡面找啊翻啊，耐著性子看文中敘述，然後 trail-and-error 試試到底每一項是幹嘛的...
配合著 firefox 的名 plug-in, web developer, 摸了半天好不容易把大致上的字型啊、寬度啊、行距啊什麼的搞定了...只是這時赫然發現，「靠杯，登入的按鈕怎麼不見了...還有頭像跟頭像下面切換 blog, album, guestbook 的按鈕...」看了半天原始檔，明明就有在裡面，完全搞不清楚到底是哪裡出問題，花了一整晚的時間得到的只是個混亂而已 = =a 實在是太久沒用大腦了。所以最後把這問題貼到 pixnet 客服的 CSS 討論區去，就滾去睡了...希望明天早上起來會有強者解答。
結果是沒有 orz
所以只好睡一覺起來，繼續自己看！突然就豁然開朗是怎樣...大概經過一晚的重組，大腦現在又重新進入 structured logic mode 了...所以變得可以理解 CSS 的語法是什麼玩意兒，腦中也可以有個階層化的結構概念圖。
從原始檔裡面，存在卻看不到的項目前面的 class 得知這幾項在 CSS 裡頭大概叫啥名，然後去 CSS file 裡面撈...結果發現原作者雖然沒有下 display:none 的隱藏指令，但是他把這些消失的項都設定成 width=0, height=0 .......這樣當然看不到。取消長寬設定之後自然就出現了。原作者還很怪的設定了個 position:absolute, 指定絕對位置...不懂，也順便取消了。
之後就把整個 CSS file 從頭到尾 walk thorough 一次，逐項檢查，沒必要的設定項目就刪掉，和系統預設重複的也刪掉，與 global 設定的相同的 local 設定也刪掉，加上註解，最後花了大概五個小時終於搞定了...
結果發現，我選的這個 template 算是很簡單的 template, 裡面對一些基本的樣式如 p, div, em, blockquote, ul, li 都沒有重新定義，就直接用系統預設的...所以跟我之前的 grey2 模版 redbird2 有很大的差別，後者長多了又充滿許多意味不明的縮寫 html tag ...orz 改成現在這個之後，也一併擺脫了 redbird2 裡面有些被重新定義到很怪的基本 html 樣式，算是個附加的好處。
anyway, 現在有三欄啦。雖然 IE6 的右邊條會莫名其妙跑到下面去，一樣造成頁面過長...不過懶得修了，IE 又沒 web developer 可以觀察項目邊界咩... =p
不過就跟幾乎全部其他的 wretch pixnet 樣式投稿投稿一樣，這個樣式不能馬上拿來用...首先原作者的螢幕大小跟你的可能不一樣；他設想的樣子也跟你想的可能不一樣；他喜歡的寬度跟你需要的可能不一樣；更重要的是，他用的 browser 版本跟你現在及未來會用的可能不一樣...所以對龜毛的人來說，每個 template 套用之後都需要大量修改才能 work fine...當然有一種例外，就是那種很明顯是用 IE 做出來，然後只有用 IE 的人會選的那種 template...不幸（還是說萬幸？）的是，這種 template 大概佔了全部投稿 template 的九成...
so, 這是前話。
我最先遇到的問題是欄寬、字體大小、邊界這些常見的問題。由於大腦實在是太久沒有以 structured logical mode 運作了，所以剛開始的時候看那 CSS file 實在是看得很痛苦...請教 CSS 達人 k40 女士之後，發現這種太 detail 的東西無法詢問 XD 於是就在 k40 女士給我的 w3c CSS 2.1 specification 裡面找啊翻啊，耐著性子看文中敘述，然後 trail-and-error 試試到底每一項是幹嘛的...
配合著 firefox 的名 plug-in, web developer, 摸了半天好不容易把大致上的字型啊、寬度啊、行距啊什麼的搞定了...只是這時赫然發現，「靠杯，登入的按鈕怎麼不見了...還有頭像跟頭像下面切換 blog, album, guestbook 的按鈕...」看了半天原始檔，明明就有在裡面，完全搞不清楚到底是哪裡出問題，花了一整晚的時間得到的只是個混亂而已 = =a 實在是太久沒用大腦了。所以最後把這問題貼到 pixnet 客服的 CSS 討論區去，就滾去睡了...希望明天早上起來會有強者解答。
結果是沒有 orz
所以只好睡一覺起來，繼續自己看！突然就豁然開朗是怎樣...大概經過一晚的重組，大腦現在又重新進入 structured logic mode 了...所以變得可以理解 CSS 的語法是什麼玩意兒，腦中也可以有個階層化的結構概念圖。
從原始檔裡面，存在卻看不到的項目前面的 class 得知這幾項在 CSS 裡頭大概叫啥名，然後去 CSS file 裡面撈...結果發現原作者雖然沒有下 display:none 的隱藏指令，但是他把這些消失的項都設定成 width=0, height=0 .......這樣當然看不到。取消長寬設定之後自然就出現了。原作者還很怪的設定了個 position:absolute, 指定絕對位置...不懂，也順便取消了。
之後就把整個 CSS file 從頭到尾 walk thorough 一次，逐項檢查，沒必要的設定項目就刪掉，和系統預設重複的也刪掉，與 global 設定的相同的 local 設定也刪掉，加上註解，最後花了大概五個小時終於搞定了...
結果發現，我選的這個 template 算是很簡單的 template, 裡面對一些基本的樣式如 p, div, em, blockquote, ul, li 都沒有重新定義，就直接用系統預設的...所以跟我之前的 grey2 模版 redbird2 有很大的差別，後者長多了又充滿許多意味不明的縮寫 html tag ...orz 改成現在這個之後，也一併擺脫了 redbird2 裡面有些被重新定義到很怪的基本 html 樣式，算是個附加的好處。
anyway, 現在有三欄啦。雖然 IE6 的右邊條會莫名其妙跑到下面去，一樣造成頁面過長...不過懶得修了，IE 又沒 web developer 可以觀察項目邊界咩... =p
全站熱搜
留言列表
