瀏覽數:
因為很喜歡像日本手作衣服那樣棉麻的手作感,所以又弄了一個,這也是參考日本部落格的,有把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; } |
你好
我很喜歡這個樣板
可以請問一下
為什麼有時候有些噗點開來名稱或內容的地方會顯示不出來,變成空白的嗎???
Hi, 阿滴
今天噗浪好像都怪怪的,不是模板的問題喲!
我也有這個問題欸 😕
好喜歡!!!!
謝謝:-)
真的好喜歡這個版型,謝謝你的分享! 😳
好棒~
好喜歡你的作品~
期待新作~ 😛
🙂
我好喜歡這面版喔!
不過,要怎麼改,才能讓回應者名稱嘿回應內容同行,
我的螢幕小,分2行不易閱讀,
可以麻煩幫我解惑嗎?
感謝!
hi, 阿花:你先到噗浪裡的編輯,找「自訂外觀」之後,會看到css程式碼。在裡面找一個中文叫做「讓噗列表換行」然後下面還有一個中文是「原噗者的回應」,把夾在中間的程式碼刪掉,就好了喔!
好可愛!好喜歡
雖然已經入冬
謝謝喔:)
好可愛,謝謝分享;-)
很棒~
真的很謝謝你喔:))
您製作的撲浪面板都好特別!個人很喜歡~~~感謝分享^^
很喜歡這種風格 謝謝分享
感謝分享,非常喜歡這個作品!
你好,試著套用了非常喜歡這個面版!
不過河道右下的未讀紅底提示就顯得太破壞畫面
所以我自己加了些語法將他消掉了。
有些顏色太鮮豔的面版看久了眼睛真的不太舒服(尤其都長時間使用)
不過你作的面版整體看起來真的很舒服,
之前用的面版還有下方回噗會明明字數很少確強迫換行的問題
不知如何解決
用了這個面版之後就沒問題了,
謝謝你
請問這個有大字版的嗎? 我很喜歡這個樣版, 但是字太小, 看久了眼睛好辛苦啊~~~ 感激不盡 Orz
謝謝分享囉OWO
好喜歡你的作品
謝謝分享
好喜歡////非常感謝哇/////
您好~~我使用此款樣式時,刷噗時浮在最底下的噗展開來時都會被吃掉畫面,請問要如何修改樣式呢??真的非常喜歡這個樣式!!
http://i.imgur.com/cDFRQw2.png ←情況截圖
補充:滑鼠移到最底下噗,只要超過標時間那條線也會被吃掉~~
然後噗字太長太多展開有時也會被吃掉。
挖~抱歉喔~最近實在忙得不可開交,只好讓這邊長草。過年放假可能有空來修復的。
我也是用這個版型,但是我的狀況是如果是有分享圖片的噗才會有這樣的狀況
真的很喜歡這個版型,希望能知道怎麼樣可以修改正常!!
挖~抱歉喔~最近實在忙得不可開交,只好讓這邊長草。過年放假可能有空來修復的。
Pingback: Free Plurk Layout : Crafty Style 手作風的噗浪版面 | MFA Study