從換背景圖、調整版面佈置,到文字的偏好設定,距離打造專屬的噗浪佈景,又更進一步了。

今天,第三步,我們要來改變「浪上的噗」的外觀與易讀性,

請先套用「範例一」的完成語法,內容在 這篇文章

在改變浪上噗的外觀前,範例一的佈景長這樣:

6設分區圓角與透明度.png

加上浪上噗的語法設定後,它將會長這樣:

範例一的浪上噗.png

整個版面有沒有更協調呢?看起來更舒服、合搭了。

請在範例一的自訂CSS欄位最後面,加上 [ 浪上的噗 ] 語法內容:

/*
    浪上的噗 範例一
*/

.plurk_cnt  
{
    font-size:12px;      /*字大小*/
    line-height:160%;      /*行距*/
    letter-spacing:0.06em;     /*字距*/
    padding:4px;     /*表格間距*/

    filter:alpha(opacity=80) !important;opacity:0.8 !important; zoom:1; /*透明度*/
    -moz-border-radius: 10px;    /*圓角*/
    -khtml-border-radius: 10;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;

    border-top: 1px solid #fff;      /*框線*/
    border-left: 1px solid #fff;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;

}

可以分幾個部份來貼上、一一檢視變化,或是更改其中的值,就可以瞭解各CSS項目的作用。

範例一單噗的樣子:

浪上的噗一.png

 

再來,我們來調整「範例二」試試。範例二的語法內容在 這篇文

調整前,範例二的模樣:

 

調整後:

範例二的浪上噗.png

這邊我們多加了一些語法內容:

/*
    浪上的噗 範例二
*/

.plurk_cnt  
{
    font-size:12px;      /*字大小*/
    line-height:160%;      /*行距*/
    letter-spacing:0.06em;     /*字距*/
    padding:4px;     /*表格間距*/

    border-top: 1px solid #333;      /*框線*/
    border-left: 1px solid #444;
    border-right: 1px solid #111;
    border-bottom: 1px solid #222;

}


#timeline_holder .plurk_cnt,   /*噗整體底色*/
.plurk_cnt,
.plurk_box .list,
.list .plurk_cnt,
.list .plurk_cnt tr,
.plurk_box .mini_form,
td.td_cnt texture,
textarea#input_small
{
    background:#f0f0f0 !important;   /*換底色*/
}

.td_cnt .text_holder,   /*噗文字設定*/
#timeline_holder table td,
#timeline_holder .plurk_cnt
{
    color:#888 !important;  /*換字顏色*/
}

.plurk a.ex_link, .text_holder a.ex_link,    /*噗上的連結*/
.plurk a.ex_link:visited,
.plurk a.ex_link:active
{
    color:#991111 !important;
    text-decoration:none;
}
.plurk a.ex_link:hover, .text_holder a.ex_link:hover  /*滑鼠移至效果*/
{
    color:#111111 !important;
    text-decoration:underline !important;
}

.youtube:hover img,      /*影音圖片框線*/
.pictureservices:hover img
.video:hover img,
.pictureservices:hover img
{
    border:0px solid #ccc;    /*去除框線*/
}


白底黑字,在較暗環境中閱讀起來蠻吃力的,用近似書籍紙張的白(#f0f0f0),來緩和一下。

文字則換成灰色。

將浪上的噗的連結文字設為暗紅色,跟其它的連結區分開來。並去掉影音圖片的連結框。

 

這些都是浪上的噗可以嘗試調整的基本項目。

 

經過調整後,範例二的單噗長這樣:

浪上的噗二.png

 

「回應列表」中,有一些進階的方式,可以增進它的閱讀性,請按照需求來使用看看:

[ 1 ]  回應區加底線 

1加底線.png

語法:.list .plurk_cnt  {border-bottom:1px solid #ccc !important;}

 

[ 2 ]  回應區加底色

2加底色.png

語法:.list .plurk_cnt tr {background:#ccc !important;}

 

[ 3 ]  區別原噗者的回應

3原噗者文字顏色.png

語法:

.list .highlight_owner .plurk_cnt tr  /*底色*/
{
    background:#CCFFFF !important;
}
.list .highlight_owner .td_cnt .text_holder    /*文字顏色*/
{
    color:#000 !important;
}

[ 4 ]  回應區換行 (因應暱稱太長而導致回應內容太短的狀況)

4換行.png

.list .plurk_cnt .td_qual  /*暱稱區*/
{  
    overflow:visible;
    position:absolute;
    width:auto;
}
.list .plurk_cnt .td_cnt .text_holder   /*內容區*/
{
    margin-left:1em;
    margin-top:2em;
    margin-bottom:1em;
    padding:0.5em;
    width:auto !important;
}

 

[ 5 ]  回應區加高(一次能夠閱讀多點回應噗、看清楚打字的內容)

5列表加高.png

/*
    回應區加高
*/

.plurk_box .list
{
    min-height:318px !important;   /*最小高度*/
}

 

5輸入欄位加高.png

/*
    輸入區加高
*/

td.td_cnt textarea,
textarea#input_small
{
    height:80px;
}

 

[ 6 ]  加大字體(字太小很吃力?在噗文字設定中加上一行語法即可)

.td_cnt .text_holder,   /*噗文字設定*/
#timeline_holder table td,
#timeline_holder .plurk_cnt
{
    color:#888 !important;
    font-size:15px !important;     /*加大字體*/
}

效果:

6加大字體.png

 

經過設計一二三、練習一二三的步驟,在版面佈置、文字設定和閱讀性上,我們已經有個最適合自己的噗樣式,

這是自己親手打造的樣子。

接下來,進一步研究CSS、產生符合自己使用習慣的噗版基本結構,做細節的調整吧~

可以參考我的常用CSS清單,持續研究並玩出噗版的樂子喔~

 

arrow
arrow
    全站熱搜

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