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

原本單則噗訊息頁:

原本單則噗訊息頁.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

arrow
arrow
    全站熱搜

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