版權所有+保留所有權利_+_+_
© 2010-2015 Created by 如我協力創意工作室 Be Myself Inc.
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用,請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處),其它使用方式均未授權,還請務必注意,勿侵權喔~--

因應網友"冉"的留言,將自己所知的單一噗浪頁面的語法列出來讓大家參考~**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; /*讓小圖消失*/

}

設計噗佈景很有趣,會發現很多會讓人開心的安排方式,多嘗試、多練習、多看、多分享,就能開心玩噗~ ^ ^

創作者介紹
M6

金羽銀華

M6 發表在 痞客邦 PIXNET 留言(8) 人氣()


留言列表 (8)

發表留言
  • 冉
  • 謝謝版主!!

    想再繼續請教……如圖→ 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區)』

    語法放在 /*************回應列表區*************/
    請參考上方內文 ^ ^

    M6 於 2009/09/11 11:24 回覆

  • 冉
  • 哪裡,才應該謝謝版主的大力幫忙!更改後好詳盡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;
    }

    請參考囉~ ^ ^


    M6 於 2009/09/13 16:14 回覆

  • 冉
  • 謝謝板主再次提供/////

    只是『.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等數值以符合字體大小需要

    請試試看囉~ : )


    M6 於 2009/09/14 10:50 回覆

  • 冉
  • 生效OK了!謝謝版主人幫忙XD////!
  • Judy
  • 請問單一頁面,如何改成圓角版呢?
  • 回應在前一則囉 ^ ^

    M6 於 2010/07/18 10:35 回覆

  • SHA
  • 那、那個……請問……
    有辦法把單一頁面的噗浪生物,改成其他圖嗎?
  • 可以。語法:
    .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; /*指定圖片顯示寬與高*/
    }

    M6 於 2011/09/15 13:17 回覆

  • SHA
  • 謝謝版主大人!!(合掌
  • 不客氣 ^W^

    M6 於 2011/09/15 20:53 回覆

  • music2217
  • 請問可以把單一噗浪頁面最上方的廣告隱藏起來嗎?
    還有幾個人點讚的框框可以換底色+改成透明,滑鼠靠近時滑入嗎?

    謝謝:)
  • /*隱藏表頭廣告區*/
    #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;
    }

    底色顏色代碼可自行更改。

    M6 於 2012/05/06 15:37 回覆

找更多相關文章與討論