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

噗浪最近改了單則訊息連結頁的預設樣式,導致許多噗版的單噗頁面會變得雜亂,簡易修改方式已列於上篇文章,這篇是將新的單則訊息頁面相關的樣式項目列出,請需要的朋友參考使用,動手改改看適合自己噗版的單頁模樣~

原本單則噗訊息頁:

原本單則噗訊息頁.png

經過CSS編排後的樣式:

經過CSS編排後的樣式.png

將項目列出如下~

/*-------------------------------單則訊息(噗)連結頁面------------------------------*/

.user-nick,    /*暱稱*/
.user-nick:hover
{
    color:# !important;
}

h1  /*文字*/
{
    font-size:;
    color:# !important;


div.contentwrapper h1.content    /*內容區*/
{
    -moz-border-radius:6px 6px 0px 0px;  /*圓角*/
    -khtml-border-radius:6px 6px 0px 0px;
    -webkit-border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:0px;
    -webkit-border-bottom-left-radius:0px;
}


div.time    /*時間區*/
{
    -moz-border-radius:0px 0px 6px 6px;   /*圓角*/
    -khtml-border-radius:0px 0px 6px 6px;
    -webkit-border-top-left-radius:0px;
    -webkit-border-top-right-radius:0px;
    -webkit-border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
}

/*噗主代表圖*/
img.bubble_edge  /*隱藏箭頭*/
{filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}

div.user img  /*圖片*/
{
    padding:0px;
    background:none !important;
    border:2px solid # !important;
}


/*-----------------------------------------------------------上一則/下一則*/

#prev_plurk, #next_plurk,
#prev_plurk:hover, #next_plurk:hover
{
    background:# !important;
    border:1px solid # !important;
    -moz-border-radius:6px;  /*圓角*/
    -khtml-border-radius:6px;
    -webkit-border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
}


/*--------------------------------------------------------------回應列表*/

#plurk_responses   /*整區最外框*/
{
    background:# !important;
    -moz-border-radius:6px;
    -khtml-border-radius:6px;
    -webkit-border-top-left-radius:6px;
    -webkit-border-top-right-radius:6px;
    -webkit-border-bottom-right-radius:6px;
    -webkit-border-bottom-left-radius:6px;
}
#plurk_responses h2 {color:# ;font-size: px;}  /*標題*/
div #plurk_responses h2 a  /*回應連結*/
{
    color:# !important;
    font-size: px;
    background:none !important;
}
div #plurk_responses h2 a:hover {color:# !important;}

#plurk_responses div.feed-link a /*分享連結*/
{
    background:none !important;
    color:# !important;
    font-size: px;
}

.cmp_fb {filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}  /*隱藏fb圖片*/

.share_facebook /*fb連結*/
{
    margin:0 !important;
    padding:0 !important;
}  
div.feed-link a.share_email /*Email連結*/
{
    margin:0 !important;
    margin-left:px !important;
    padding:0 !important;
}


/*回應內容區*/
#plurk_responses ul.responses li  /*每則回應*/
{
}

#plurk_responses ul.responses   /*回應區外框*/
{
    background:# !important;
}

ul.responses .message  /*文字設定*/
{
    color:# !important;
}

/*訊息內連結樣式*/
#plurk_responses ul.responses .message a  
{
    color:# !important;
}
#plurk_responses ul.responses .message a:hover   /*滑鼠移至效果*/
{
    color:# !important;
}

.user, .user:hover {}  /*噗友名稱*/
img.avatar {border:1px solid # !important;}  /*噗友代表圖*/

/*原噗者暱稱*/
.highlight_owner a {}

/*原噗者回應內容*/
.highlight_owner td,
.highlight_owner .plurk_content   
{
}


/*--------------------------------------------------------------回應時間*/

ul.responses li:hover span.time
{
}

ul.responses .highlight_owner .time  /*原噗者回應時間*/
{
}


/*------------------------------------------------------------下方回應區*/

#reply_box,
#reply_box_holder
{
    background:none !important;
    border:0 !important;
}

/*使用者名稱*/
#reply_box_holder .qual_holder {color:# !important;}

/*輸入內容*/
#reply_box #input_big {font-size: px; color:# !important;}

/*登入或註冊以回應*/
div #not_logged_in h2, div #not_logged_in h2 a   
{
    color:# !important;
    background:none !important;
    font-size:px;
}
div #not_logged_in h2 a:hover {color:# !important;}


找出適合自己的單噗頁面樣式,讓單則訊息頁也能美美的~ 推文連結到的時候看得也順心喔~

我們查詢CSS樣式項目所使用的網頁工具是 Web Developer,安裝外掛後,可以很方便的找尋需要的CSS項目名稱以及預設的樣式寫法喔~ 類似的工具很多,建議想進一步練習或自行編寫出CSS架構語法的朋友可以參考看看~

在改寫或創造自己單噗頁面的過程中,需要協助的話,歡迎留言詢問,或發私噗給我。

我的噗浪:http://www.plurk.com/66660000

創作者介紹
M6

金羽銀華

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


留言列表 (8)

發表留言
  • guess
  • 您好, 照著您的語法更改單則訊息連結板型
    回應區外框仍未有所改變, 方便請教ㄧ下可能原因嗎?><
    不好意思麻煩了>< 謝謝!!
  • 可能語法內容中原本已有設定相關CSS,所以有重複設定的問題,詳細原因要看語法內容才知道了~ 可以發私噗給我,我幫你看一下語法:
    http://www.plurk.com/66660000

    這篇文章是列出細部語法項目供噗友自行填入數值做修改,直接貼上使用的簡易修改方式請參見上篇文章喔~
    http://m66660000.pixnet.net/blog/post/33708047

    M6 於 2011/02/03 00:39 回覆

  • kiki
  • 請問一下哦,我按照上面的語法,大部份都更改成功了,但是原噗者和使用者名稱的顏色都一直改不掉耶,要從那邊修改呢?謝謝 ^^
  • 項目就如上所列:

    /*原噗者暱稱*/
    .highlight_owner a {color:# !important;}

    /*使用者名稱*/
    #reply_box_holder .qual_holder {color:# !important;}

    填入想要的顏色代碼就可以了。

    如果沒變化,可能是語法中有其他因素影響,就要檢查語法內容才知道了。

    M6 於 2011/02/17 05:29 回覆

  • HAHA
  • 請問:
    下方回應區如果想改成以別的圖片當底圖要怎麼改呢?
  • #reply_box,
    #reply_box_holder
    {
    background:url(放圖片網址) no-repeat !important;
    }

    M6 於 2011/08/28 20:45 回覆

  • HAHA
  • 想請問~~~
    上一則/下一則*/回應列表*/*內容區*/
    要怎麼移動位置呢?
    還有是不是回應列表太長了他的背景下面就會跑出原本的底色而不是背景?
    覺得這樣不太好看所以想問要怎麼改呢?
  • 1. 可以使用css邊界設定或是位置固定的方式,視你想要放置的位置而定,舉例:

    /*調整位置*/
    div.bigplurk /*單則噗文*/
    {
    width:960px;
    margin-left:0px;
    margin-right:auto;
    }
    #plurk_nav /*上一則下一則*/
    {
    position:absolute !important;
    top:30px;
    width:50%;
    }
    #plurk_responses /*回應列表*/
    {
    width:550px;
    margin-left:0px;
    margin-right:auto;
    }
    使用看看,調整各個數值,移動到你想要的位置。

    2. 不希望因為回應過多而顯出背景底色,可以固定回應列表高度,語法:

    /*回應列表高度固定*/
    #plurk_responses ul.responses
    {
    height:90px !important;
    overflow:auto !important;
    }

    試試看吧~ ^ ^

    M6 於 2011/09/11 10:23 回覆

  • HAHA
  • 那回應列表的位置怎麼改@@?
  • 方式是一樣的,用邊界或位置固定,
    回應列表的項目是 #plurk_responses,上則回覆中有寫到了,
    所以是希望調整到什麼位置呢?

    M6 於 2011/09/11 14:26 回覆

  • HAHA
  • 就是回應列表和上一則下一則中間的間距太寬了
    所以想把回應列表整個往上移

    對了! 我想問噗浪原本的預設字型是什麼?
  • 那就將回應列表的上邊界設 0 試試看,語法:
    #plurk_responses /*回應列表*/
    {
    margin-top:0px !important;
    }

    噗浪的預設字型會隨著自訂佈景上方的三個選項而不同,常見的幾個配置預設字型是 'Lucida Grande','Lucida Sans Unicode','Lucida Sans Regular',Tahoma,Verdana,sans-serif;

    M6 於 2011/09/12 00:32 回覆

  • Yin-yu Chou
  • 你好,我爬了很多大大的文章,
    也受益很多噗浪的CSS,很感激(拜)
    這個問題真的是很頭痛也摸不出頭緒了才想留言麻煩你一下
     
    請問在單一訊息連結這個版面下,
    要改已經回應好的內容區字色,
    (也就是內容區裡面的文字顏色,
     暱稱顏色和連結顏色都不用改)
    語法應該要怎麼打?我試了好多種都沒辦法改到字色,
    看到眼睛快壞了…跪求。
     
     
     
找更多相關文章與討論