夏日透氣棉麻風 Free Plurk Theme in Summber Japan Crafty Style

瀏覽數:

因為很喜歡像日本手作衣服那樣棉麻的手作感,所以又弄了一個,這也是參考日本部落格的,有把Plurk的按鈕大改了,本來想要用白色蕾絲,可是會看起來超Sissy,就不弄了,跟M6小姐學到不少CSS技巧呢! 大感恩!!

下載的網址 http://www.plurk.com/installDesign/3940895-f335ea2fa3

loading的圖改成小燈泡,希望加亮你的噗浪人生喲!

噗浪CSS語法分享1. 這次把時間軸用的按鈕改得比較細膩一些,叫做.cmp_arrow_right,.cmp_arrow_left 還有.cmp_back_to_today喲~

1
2
3
4
5
6
7
8
9
10
11
/*時間軸上往右捲動的圖*/
.cmp_arrow_right {
background:#ffffff url(http://blog.grannys-drawer.com/template/cmsp/16/c_0/pagenavi_r.gif) center no-repeat;
filter: alpha(opacity=40);opacity: 0.4;-moz-opacity: 0.4;
width: 60px;height: 40px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
}
1
2
3
4
.cmp_arrow_right:hover{
filter: alpha(opacity=80);opacity: 0.8;-moz-opacity: 0.8;
}
}
1
2
3
4
5
6
7
8
9
10
11
/*時間軸上往左捲動的圖*/
.cmp_arrow_left {
background: #ffffff url(?z?) center no-repeat;
filter: alpha(opacity=40);opacity: 0.4;-moz-opacity: 0.4;
width: 60px;height: 40px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
}
1
2
3
4
.cmp_arrow_left:hover{
filter: alpha(opacity=80);opacity: 0.8;-moz-opacity: 0.8;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
/*時間軸上跳回首頁的圖*/
.cmp_back_to_today {
background: url(http://farm2.static.flickr.com/1199/4724009387_c25a04b6cd_t.jpg) center no-repeat;
filter: alpha(opacity=30);opacity: 0.3;-moz-opacity: 0.3;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
width:60px;
height:21px;
}
}
1
2
3
.cmp_back_to_today:hover{
filter: alpha(opacity=80);opacity: 0.8;-moz-opacity: 0.8;
}

噗浪CSS語法分享2. 之前找無的每日相片和噗浪熱門搜尋的語法, 原來叫做pane_daily_photo和pane_search呀~

1
2
3
/*每日照片文字*/
#pane_daily_photo a {font-size: 15px!important;color:#444 !important;}
#pane_daily_photo a:hover {color:#999 !important;}
1
2
3
4
/*搜尋區文字*/
#pane_search {color:#555 !important;}
#pane_search a{color:#555 !important;}
#pane_search a:hover {color:#888 !important;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*搜尋面板按鈕*/
input.orange-but {
background:#C2B39E !important;
border:0px solid #C2B39E !important;
color:#FFF !important;
text-shadow:0px 0px 0px #ccc!important;
-moz-box-shadow:0 0px 0 #000;
-webkit-box-shadow:0 0px 0 #000;
box-shadow:0 0px 0 #000;
cursor:pointer;
font-size:13px;
padding:2px 4px;
vertical-align:middle;
width:auto;
}
分享到你的社群
  •  
  •  
  •  
  •  
  •  

26 Comments

  1. 你好
    我很喜歡這個樣板
    可以請問一下
    為什麼有時候有些噗點開來名稱或內容的地方會顯示不出來,變成空白的嗎???

    阿滴
  2. 🙂
    我好喜歡這面版喔!
    不過,要怎麼改,才能讓回應者名稱嘿回應內容同行,
    我的螢幕小,分2行不易閱讀,
    可以麻煩幫我解惑嗎?
    感謝!

    阿花
    1. hi, 阿花:你先到噗浪裡的編輯,找「自訂外觀」之後,會看到css程式碼。在裡面找一個中文叫做「讓噗列表換行」然後下面還有一個中文是「原噗者的回應」,把夾在中間的程式碼刪掉,就好了喔!

      _阿福站長
  3. 你好,試著套用了非常喜歡這個面版!
    不過河道右下的未讀紅底提示就顯得太破壞畫面
    所以我自己加了些語法將他消掉了。
    有些顏色太鮮豔的面版看久了眼睛真的不太舒服(尤其都長時間使用)
    不過你作的面版整體看起來真的很舒服,
    之前用的面版還有下方回噗會明明字數很少確強迫換行的問題
    不知如何解決
    用了這個面版之後就沒問題了,
    謝謝你

    Mayumi
    1. 補充:滑鼠移到最底下噗,只要超過標時間那條線也會被吃掉~~
      然後噗字太長太多展開有時也會被吃掉。

      Nichan
    2. 我也是用這個版型,但是我的狀況是如果是有分享圖片的噗才會有這樣的狀況
      真的很喜歡這個版型,希望能知道怎麼樣可以修改正常!!

  4. Pingback: Free Plurk Layout : Crafty Style 手作風的噗浪版面 | MFA Study

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *