因應網友"冉"的留言,將自己所知的單一噗浪頁面的語法列出來讓大家參考~**911更新版**
/*單一Plurk頁面--------------------------------------*/
/*************本則訊息區*************/
/*使用者名稱*/
.bigplurk .user-nick { }
.bigplurk .user-nick:hover { }
/*內容區*/
div.bigplurk h1.content {
background-color:#;
border-right:1px solid #;
}
/*時間區*/
div.bigplurk div.time {
font-size:;
text-align:right;
background-color:#;
color:#;
border-right:;
border-bottom: ;
margin:0 70px 0 0;
padding:0 4px 4px 0;
}
/*使用者區*/
div.bigplurk div.user {
padding-left:390px;
margin:-12px auto 0;
}
/*使用者圖片*/
div.bigplurk div.user img {
border: ;
padding: ;
background-color:#;
}
/*************回應列表區*************/
/*暱稱區*/
#dashboard_holder .message a.user {font-weight:700;}
#dashboard_holder .message a.user {color:#;}
#dashboard_holder .message a.user:hover {color:#;}
/*使用者名稱標示*/
.highlight_owner a {color:# !important;text-decoration:underline!important;}
.highlight_owner a:hover {color:# !important;}
/*回應區*/
#plurk_responses {color:# ;}
#plurk_responses a {color:# ;}
#plurk_responses a:hover {color:# ;}
#plurk_responses ul.responses {margin:0 10px;}
#plurk_responses ul.responses li {min-height:49px;margin:20px 0;}
/*回應內容*/
#plurk_responses ul.responses .message {
background:# ;
color:# ;
border-right: ;
border-bottom: ;
margin:-45px 0 0 54px;padding:6px;
}
#plurk_responses ul.responses .message a:hover {color:# !important;}
#plurk_responses ul.responses .message a.ex_link {color:# !important;}
#plurk_responses ul.responses .message a.ex_link:hover {color:# !important;}
/*回應區使用者圖片*/
#plurk_responses ul.responses li .avatar { }
#plurk_responses ul.responses li img.avatar{ }
/*回應時間標示*/
span.time {color:# ; }
/*影音圖片*/
.youtube img,.pictureservices img {border:none;}
/*************發噗面板區*************/
/*回應框背景*/
#reply {margin-top:40px;}
#reply h2 {margin-bottom:8px;padding:8px;}
#reply .char_updater {color:# ;}
#reply #reply_box,#reply h2 {background:# ;}
#reply #reply_box {padding:8px;}
#reply .dd_img {margin-bottom:-4px;}
/*噗輸入區*/
textarea#input_big, textarea#input_permalink {
background:# ;
border: 1px solid # ;
border-right: ;
border-bottom: ;
color:# !important;
}
textarea#input_big.content { height:100px; } /*加高*/
/*分享連結*/
#plurk_responses div.feed-link {
margin:4px 10px 0 0;
font-size: ;
color:# !important;
}
/*上一則下一則*/
#next_plurk {width:50%;font-size: ;color:# !important;}
#prev_plurk {width:50%;text-align:right;font-size: ;color:# !important;}
__________________________________________________________________
還有頁首"我的資料、我的朋友、通知"前方的小圖~
/*頁首小圖*/
#top_bar .content {
background: url(http://) no-repeat transparent; /*放要替換的圖檔網址*/
background:none; /*讓小圖消失*/
}
設計噗佈景很有趣,會發現很多會讓人開心的安排方式,多嘗試、多練習、多看、多分享,就能開心玩噗~ ^ ^

謝謝版主!! 想再繼續請教……如圖→ http://i478.photobucket.com/albums/rr148/zendic/PlurkOne-06.png 試了一下……可是發現單一頁面裡,使用者名稱『.user-nick』(A區)跟本則訊息內容『h1』(B區)的超連結設定似乎會相互干擾? 明明設使用者名稱游標移上去(.user-nick a:hover)應該是文字本身變成紅色(.user-nick a:hover{ color:#6a0000 !important; background:#fff; text-decoration:none;}),可是它卻跟本則訊息內容的超連結(h1 a:hover)一樣變成文字背景變紅色了……請問是為什麼?還是哪裡設錯了呢? 另,Plurk單一頁面回應區裡的『ul.responses li』、『ul.responses .message 』這兩個語法,似乎也會衝突? 試著想將單一頁面回應區裡『使用者回應名稱(F區)』、『訪客名稱(E區)』與『回應文字裡的超連結(G區)』這3個區域的設定風格徹底分開不干擾,請問該如何設定? 最後可以請問關於單一頁面裡將本則訊息框住的對話框(D區)以及頭像(C區),要如何改變底色或框線顏色?因為河道裡使用的背景圖是白色的,像那樣對話框同樣整個白底,區分性似乎有些不佳……… 不好意思問題那麼多bb 再次麻煩您了。非常的謝謝你 ////b
目前找到有解的方式如下: /*使用者名稱*/ .bigplurk .user-nick { } .bigplurk .user-nick:hover { } /*本則訊息內容*/ .bigplurk .plurk_content { } .bigplurk .plurk_content a:hover { } /*頭像和訊息背景*/ .bigplurk .user img { } .bigplurk h1.content { background-color:# ; } /*標示使用者回應名稱*/ .highlight_owner a {color:# ; } 中間回應區的語法還在嘗試中... 有解決方式會再回覆 ^ ^ __________________________________________________________ 回覆來囉~ 謝謝你的發問,讓我整個將單一噗頁面的CSS翻開來研究了一遍,所以,目前文章內容已經更新囉!更為完整了! 關於 『使用者回應名稱(F區)』、『訪客名稱(E區)』與『回應文字裡的超連結(G區)』 語法放在 /*************回應列表區*************/ 請參考上方內文 ^ ^
哪裡,才應該謝謝版主的大力幫忙!更改後好詳盡XD"! 對不起又提問第三發(圖→ http://i478.photobucket.com/albums/rr148/zendic/All-03.png)……剩下的還是一些不知道因何相衝的小問題。(自己真是找不出來……麻煩您了b) 1. 像〈圖一〉中單則Plurk頁面對話框已經差不多框住了,可是「a區」的尖角還是淺灰色的。那裡似乎是圖片,請問語法要如何以顏色吻合的自製小圖替換掉原圖? 2. 該如何找出〈圖二〉中的「b區」整區的名稱加以控制?自從改了單一Plurk頁面的暱稱超連結風格,就發現也影響到了Plurk本頁中展開留言裡的超連結風格。像「c區」的連結文字原本應該是紅色的……卻一起變成深灰色了b 僅管試過使用『.plurk_box .plurk_cnt』、『.plurk_box .list』、『.list』這些名稱控制,卻都會連帶將前面的暱稱(不論使用者或訪客)一起改變到。請問究竟該如何解決才好? 3. 想把〈圖三〉中展開留言後「d區」的上方及左右以『border: 1px solid #000000;』框住,該怎麼命名?雖然試過以『.plurk_box .plurk_cnt{ border: 1px solid #000000; }』加以控制,但結果卻會變成〈圖四〉裡「e區」的狀況,每一則留言的三邊全多出框線……要怎樣才能將訊息展開後首塊區域加上框線呢? 4. 隱藏/替換首頁左上方的小圖語法仍試不出來,請問該怎麼做? 非常謝謝你的再次幫忙及解答!> <;;
1. 對話框的小圖語法: div.bigplurk img.bubble_edge {opacity:.0;} /*隱藏*/ 目前只有試著讓他消失,還沒能成功替換圖 2. 回應列表整區的名稱連結: .list .plurk_cnt .td_cnt .text_holder a.ex_link {color:#666 !important;} .list .plurk_cnt .td_cnt .text_holder a.ex_link:hover {color:#000 !important;} 3. 展開留言後上方的噗: 可以用 ".plurk_cnt "或是 ".plurk_cnt, .inner" 應該都可以有框線 4. 隱藏/替換首頁左上方小圖: /*隱藏*/ #top_bar .content img { filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0; } /*替換*/ #top_bar .content { background: url(http://) no-repeat transparent; } 請參考囉~ ^ ^
謝謝板主再次提供///// 只是『.plurk_cnt』名稱已經用過了,似乎它只能框住未展開的訊息……點開訊息之後框線還是無法呈現。『.plurk_cnt, .inner』也試過了……一樣沒有線條跑出來bb(反會造成未點開的訊息框線風格也被控制了) 可以再請問一次方法嗎////bb 因為原本是Twitter跳槽來Plurk的使用者,對於Plurk有許多浮動效果總有點不習慣……雖然明白多半是Plurk內建好的設定,仍想試問一下是否有語法能取消時間河中常被尾端刪節號「…」收納起來的較長訊息?(也就是不用游標移過去訊息本來就全部是都展開的……除非要點開留言) 對不起真是任性的提問||||bb 非常感謝你的大力幫忙!
那就試著用雙重CSS設定吧! ^ ^ .plurk_cnt {border:1px solid blue;} /*設定框線*/ .list .plurk_cnt {border:0 !important;} /*列表中的訊息不顯示框線*/ 關於plurk不收納的方式我還沒試出來,不過,可以調整訊息的長寬,語法是: /*浪上噗的長寬高*/ .plurk .truncated {width:160px;height:16px;overflow:hidden;} 可以調整160px,16px等數值以符合字體大小需要 請試試看囉~ : )
生效OK了!謝謝版主人幫忙XD////!
請問單一頁面,如何改成圓角版呢?
回應在前一則囉 ^ ^
那、那個……請問…… 有辦法把單一頁面的噗浪生物,改成其他圖嗎?
可以。語法: .permalink #logo img {filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1; } .permalink #logo { background: url(這邊放圖片網址) no-repeat; width :px !important; height: px !important; /*指定圖片顯示寬與高*/ }
謝謝版主大人!!(合掌
不客氣 ^W^
請問可以把單一噗浪頁面最上方的廣告隱藏起來嗎? 還有幾個人點讚的框框可以換底色+改成透明,滑鼠靠近時滑入嗎? 謝謝:)
/*隱藏表頭廣告區*/ #top_header { display : none !important; } /*分享區透明度變化*/ section#shareUser { background:#fff !important; /*背景底色*/ filter:alpha(opacity=20) !important; opacity:0.2 !important; zoom:1; -moz-transition:opacity 0.3s ease-out; -webkit-transition:opacity 0.3s ease-out; -o-transition:opacity 0.3s ease-out; } section#shareUser:hover { filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1; -moz-transition:opacity 0.3s ease-in; -webkit-transition:opacity 0.3s ease-in; -o-transition:opacity 0.3s ease-in; } 底色顏色代碼可自行更改。