Pixnet 的新功能,版主回覆可以加在原本留言處的下方了!

這個功能已經上線好幾天了,要不是在Rolla家發現我還後知後覺,這個功能很重要,過去每次回覆留言必須一直上上下下拉捲軸,拉的我眼花撩亂,訪客在回來看回覆也得上上下下尋找版主回覆的那一段,說實話這樣很麻煩,但這個功能上線之後,算是給大家一個操作上的便利,不過我還有一個建議,建議非會員也可以針對每個留言回覆在版主或是別人留言的下方,也就是說把回覆功能進一步開放給所有訪客,這樣相關的留言就會串在一起,閱讀起來就更有系統了!

不過新功能的新格式大家都一樣,我想做一些有個人風味的留言版面,該怎麼做呢?就讓懶骨頭再來班門弄斧一下,跟大家分享更改CSS的方法:

 

【圖一】系統提供的原始格式,有點單調;新的回覆連結在垃圾桶旁邊

在原始提供的格式中,有幾點讓我想要做改變

1. 回覆的邊框與訪客留言擠在一起,閱讀上顯的擁擠。
2. 底色還是原本的底色,分不清哪些是版主回覆的。
3. 文字的粗細、大小、顏色都與訪客留言相同,在整個視野上無法一目瞭然。

不喜歡怎麼辦呢?就改吧!

 

【圖二】懶骨頭更改後的第一版,經過客製化改變後,回覆區塊變的顯眼而清楚!

懶骨頭把字體加粗,底色更換之後,與訪可留言有了區隔,閱讀上可以明顯區分,這樣是不是明顯多了?


 

【圖三】紅圈部份是本次分享的可更改部份


那,要怎麼改呢?請看以下步驟:



【步驟一】叫出網頁程式碼:

在網誌任何地方按下滑鼠右鍵,再出現的選單中選擇 " View Source ",這是為了觀看網頁的 HTML 程式碼,找到格式名稱 (Class name),才能繼續下一步驟喔! 


 

【步驟二】找到標示版主回覆區塊的格式名稱:

系統會打開一個筆記本程式並把網誌程式碼顯示出來,這時利用筆記本提供的搜尋功能,尋找關鍵字 " Reply ", 如上圖顯示,我們可以發現在程式碼中有一段叫做 <div class = " replyBox ">,這個就是我們要的 class name!


 

【步驟三】進入後台,找到編輯 CSS

CSS 是管理網頁字型、表格等等的檔案,每個網頁都可以設定參考的 CSS 檔案,每一家 BSP 也都有提供讓會員編輯 CSS 的權限,我們手上已經有了 class name ,接下來就是找到註明的地方,加上自己的設定。

 部落格管理 >> 版面管理 >> 編輯CSS


 

【步驟四】尋找對應的 class name 程式碼

接下來再利用瀏覽器(IE, 火狐狸等)提供的搜尋工具,找到 " replyBox " 的位置以進行更改.........

找的到的人直接到下一步驟,找不到的人請繼續看這一段

咦?為什麼我的找不到這個 class 的對應程式碼呢?

這是因為,程式套用相同的模式,雖然針對每個內文表格、段落、邊欄選單、連結等設定固定的名子,但不同設計版面的 CSS 卻不盡相同,因此,才會找不到這一個對應程式碼。那找不到怎麼辦呢?

沒 關 係 , 我 們 可 以 自 己 加


 
 


【步驟五】改喜歡的樣式

為了方便比較,我把圖片以及程式碼擺在一起對照,讓大家更容易找到對應的地方

Margin 指的是外框與回應區上下左右的間距:
Margin-top, Margin-left, Margin-bottom, Margin-right 分別代表 邊界的 上 左 下 右,可以分別獨立成行,
也可以將四個設定簡化成一行,如:Margin: 10px 10px 15px 32px (代表上 左 下 右)

同樣的,作為外框與框內文字距離設定的 Padding 也同理可證。

顏色的設定,點這裡,可以看到顏色與對應的色碼表,背景顏色設為 BACKGROUND: #124569
文字的顏色則可以設為 FONT-COLOR: #123456 
常用的文字樣式還有 FONT-WEGHT: bold (粗體) 或是 normal (一般) 等等。

以上每一行設定的結尾請加上";" 作為每一行的結束



另外,除了replyBox 之外,各位還可以在程式碼中發現如下的段落:

<div class="replyContent">每次買紀念品我都挑很久...我是真的想把他們擺出來觀賞的</div>

"replyContent" 的範圍縮小到版主回應的文字內容,算是比較小的範圍,只對回應的內文有作用

<div class="replyInfo">lazyboneuk@27/04/2007 23:33:55</div>

"replyInfo" 的範圍僅止於回應人的名稱及時間

以上兩個算是子集合," replyBox " 是母集合,顯示網頁時若是在CSS的檔案中找不到 "replyContent" 、 "replyInfo" 的對應程式碼,則系統會套用" replyBox " 的設定;若是連" replyBox " 都沒有,那就會在套用更大的集合 class 的設定(找阿媽的設定,再找不到就再往外找阿祖的設定),簡單來說就是一層包住一層,在 CSS 檔案中找到對應的class name設定就套用,找不到就往外找更大範圍的設定,這樣說明各位可以了解嗎?

相同的道理,網誌中每個細節都可以應用相同的模式去更改,大到Banner,小到連結設定都可以改成有個人風格的樣式,雖然聽起來有點複雜,如果花點時間研究一下,會發現其實一點都不難,還很容易改上癮喔!

如果玩 CSS 玩出興趣了,可以參考這裡,有更多的屬性名稱,不過最重要的一點,更改之前,先把原始的CSS copy 備分,免得到時候改壞了又不知壞在哪裡改不回來,這一點對初次嘗試更改設定的人格外重要喔!


無名、天空部落等等當然也提供更改CSS的權限,不論哪一家都可以嘗試!

英倫懶骨 發表在 痞客邦 PIXNET 留言(16) 人氣()


留言列表 (16)

發表留言
  • bonniechi
  • 懶骨頭,
    你一點都不懶,
    我也覺得回覆和留言沒有區分一下, 看起來差不多.
    現在我就照你教的改看看, 希望能成功(我有點盾!)
  • angellayla
  • 才想要問你怎麼用顏色區分
    今天你就寫出一篇教學了
    下午空空來試試~~~謝啦~
  • pandachan
  • 電腦白痴

    我是個電腦白痴啦~
    看不太懂。。
    我想把我的家弄得美一點我也不會
  • 五色鳥
  • 懶骨頭,
    你真是太強了!我就是因為版主回覆的格式很難看,所以不想用。現在可以來試試看了。謝謝了!
  • celestechien
  • 我也喜歡這個功能
    可是...我好怕CSS.... >.<
  • vivianwhy
  • 我也是看了有點小頭暈啦,呵呵~
  • bravetoto
  • 謝謝分享嘍!有空好好來試試^^
    感謝!
  • rolla
  • 讚哦!

    還是懶骨頭大大厲害..:)

    我昨天改到頭暈了@@
    因為單篇回應會讓最近迴響出現多篇版主回的訊息,
    很容易洗掉沒看到的回應
    於是也把最近迴響加個捲軸,
    把顯示回應數再加二十篇也沒問題,
    提供大家做參考囉!
  • 肉拉~~你在哪邊加的~~CSS可以做到這樣?
    不行吧?? 請解惑~~^^

    英倫懶骨 於 2007/05/01 18:59 回覆

  • lazybone@TPE
  • 版主直接在留言的下方回覆這個好。但是xuite何時才有阿?
  • CafedeRiver
  • 雖然看的有點頭昏眼花,
    但懶骨頭實在太強了,
    Fantastic!!
  • minami
  • 不知道無名何時會有此功能呢
    能在該回應則內回覆
    真的是方便閱讀和書寫啊
  • 菲爾斯基
  • 哇..懶骨頭 大大..實在太強了...
    有點看不太懂..
    我沒有replybox..要自己新增...
    是加在哪裡都可以嗎?謝謝....
  • 是的,加在任何地方都可以~~只要是新的段落就好!!

    歡迎你的光臨~~

    英倫懶骨 於 2007/05/01 18:30 回覆

  • Yuhi
  • TT很討厭..CSS改了之後整個版面很容易跑掉
    久了我就懶的去改
    加上最近流量又被灌爆
    一整個不想再碰BLOG了~XD
  • 又灌爆了!
    就當作...你的blog非常受歡迎~~
    希望不是之前的原因@_@

    英倫懶骨 於 2007/04/30 16:43 回覆

  • Sunny
  • 給你拍拍手...好清楚的說明吶~
    唔~~整個就是例子來著*_*

    另,地震有影響到嗎?希望小兔和你都沒事柳!
  • 地震! 完全沒感覺,倫敦比較遠,不過,如果英國發生七級以上大地震,那就糟糕了,大概有三分之二的建築物會倒...

    小兔在台灣,更是沒感覺,哈哈!

    英倫懶骨 於 2007/04/30 16:41 回覆

  • duncan
  • 頭暈了啦~老師~看沒~
  • 魚
  • 這篇文章很受用,等我回台灣當無業遊民又有書桌時我一定要來打敗CSS~