[ 噗版大變身 ] 透明度的進階使用隱藏版語法設定

5月 07 週五 201022:49
[ 噗版大變身 ] 透明度的進階使用隱藏版語法設定

喜歡浪上的噗帶有透明感，或是希望隱藏版面資訊，讓底圖完整呈現的進階使用語法，看過來～

[原噗版]

shinning tail

安裝網址： http://www.plurk.com/installDesign/5143441-97c5078c33

有噗友回應說，希望下方主控台的資訊可以隱藏起來，所以我修正了一段語法，更改後的樣貌如下：

shinning tail (主控台資訊隱藏版)

安裝網址： http://www.plurk.com/installDesign/5143441-02ff1cf130

改過的語法是：

/*資料面板: 透明度變化*/
div#plurk-dashboard {
filter:alpha(opacity=0) !important; (先將主控台資訊隱藏起來，透明度設"0")
-moz-opacity:0!important;
opacity: 0!important;
zoom:1;
}
div#plurk-dashboard:hover {
filter:alpha(opacity=80) !important; (滑鼠移過去，讓主控台資訊顯現出來，透明度設"80,0.8,0.8")
-moz-opacity:0.8!important;
opacity: 0.8!important;
zoom:1;
}

如果希望整個畫面像電腦桌布一樣，讓底圖完整呈現，則需要將浪上的噗也都隱藏起來，像這個噗版：

Maple

安裝網址： http://www.plurk.com/installDesign/5143441-d953fecefa

除了隱藏主控台的語法外，再加上下面這段：

/*隱藏與展開浪上的噗*/
#timeline_cnt {
filter:alpha(opacity=10);   (將浪上的噗隱藏起來，透明度設"10"，讓它若隱若現)
-moz-opacity:0.1;
opacity:0.1;
zoom:1;
}
#timeline_cnt:hover{
filter:alpha(opacity=100);   (滑鼠移過去，浪上的噗就會清楚顯現，設"100,1,1")
-moz-opacity:1;
opacity:1;
zoom:1;
}

那麼，希望浪上的噗本身，以及展開後，都能有透明感的呈現呢？加上一段語法就可以囉～

/*噗整體透明度*/
.plurk_cnt,
.plurk_box .caption,
.plurk_box .list,
.plurk_box .mini_form,
.info_box,
td.td_cnt texture,
textarea#input_small {
filter: alpha(opacity=90); opacity:0.9; -moz-opacity:0.9; zoom:1; (通常設"90,0.9,0.9"或"80,0.8,0.8"，太透明的話文字會看不清楚喔)
}

透明度的語法可以應用在很多地方，像是讓頁尾的語言和噗浪選單先藏起來，滑鼠移過去再顯現，或是將時間軸底線藏起來、主控台發噗鍵入文字區先隱藏起來滑鼠移過去再顯現等，都可以試試看喔～關於噗浪各個部份的語法可以參考噗浪CSS基本這篇

陸續我會將各個部份的語法解析和應用方式再發文跟大家分享 ^ _ ^

有任何問題，歡迎發私噗給我，或是在此部落格留言

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

金羽銀華

M6 發表在痞客邦留言(109) 人氣(43,645)

全站分類：
個人分類：噗浪Plurk

▲top

90 則留言

Vbb

*****

2010-05-09 16:58

*****

2010-05-09 19:08

淺蒼水月

大大地感謝=w=/，隱藏讓版面乾淨很多(拇指另外想請問一下，這個語法是整個主控台一起隱藏…但在其他地方有看過另一種也是主控台全隱藏，但在滑鼠移到時，可以分成三個區塊還是四個區塊顯示就是…滑鼠移到一統計部份只顯示統計部分區塊而已~ 不知能伸手這種的語法嗎XD/

2010-06-25 22:08

/*資料面板: 透明度變化*/ div.dash-segment { filter:alpha(opacity=0) !important; -moz-opacity:0 !important; opacity:0 !important; } div.dash-segment:hover { filter:alpha(opacity=100) !important; -moz-opacity:1 !important; opacity:1 !important; } 請收下XD

2010-06-25 23:47

淺蒼水月

(合掌收下XD) 另外其實一直還有個問題，辜狗爬很多文..但看大家好像都沒什麼討論到.. 就是...背景圖片的大小究竟要設定多少才不會發生重複呢Orz，測試了很多種尺寸但都一定會有問題看大家似乎主控台的部份，整體看來就是比較小?，我的頁面要滾輪要捲三次才到底(汗)，看他人的捲兩次就到底了，感覺要調整的並非是圖片而是這部份… 主控台大小調整希望(拇指

2010-06-26 00:32

通常背景圖片的大小，全背景的話至少要1024x768以上，還要視不同的螢幕解析度而定，寬螢幕的話有時需要用到2056x1600，就像桌布一樣，才能涵蓋整個畫面。全頁面背景不重複的語法是在底圖設定後加上 "no-repeat"： body, html { background:#底色色碼 url(底圖網址) no-repeat; } 不過這樣如果內容長度過長則會顯示出背景底色。而由於自己的噗版會出現 "發噗區" 的空間，所以原本就會比看別人噗版的頁面高度來的更高些，如果希望主控台的內容無論多寡，都能有一定高度，讓背景圖能有適合顯現，可以試試以下的語法： /* 主控台*/ #plurk-dashboard { height: 326px; /*設定固定高度*/ overflow: auto; /*溢出高度的內容自動顯示捲軸*/ } 保持主控台的一定高度，也能避免背景圖高度不夠而出現的問題。這樣多出來的主控台內容，會以出現垂直捲軸的方式來呈現。試試看囉 ^ ^

2010-06-26 23:01

淺蒼水月

成功＼(^o^)／＼(^o^)／＼(^o^)／＼(^o^)／多了卷軸以後只要注意圖不要過小張就好 3qq XD/

2010-06-27 16:50

＼(^o^)／＼(^o^)／＼(^o^)／＼(^o^)／＼(^o^)／

2010-06-27 18:24

淺蒼水月

啊…看完您漂亮的噗浪(炸又有問題了XD// 就是時間軸(河道)的部份，下方會顯示一整排PM,AM,如何把那些都弄掉(隱藏)掉呢? 變的只顯示天數,這樣背景才不會有點被破壞掉整體美感的感覺還有點噗的時候會出現時間顯示,沒改過他會有個白色框框框住要怎麼把那個白框框去掉,變的只剩下字的時間顯示(〞▽〝*)~

2010-06-29 13:22

把時間軸的顯示時間隱藏： .bottom_start , .bottom_end {font-size:0px;} 去除每則噗時間顯示的外框： .evening,.night,.day,.morning {background: none!important;border: none; } 試試看囉～ ^ ^

2010-06-29 18:22

AnKai

你好我想請問一下有辦法將輸入噗浪的地方也透明化嗎？想只留個時間軸就好感恩

2010-07-23 17:47

/*噗輸入區透明度變化*/ div#plurk_form {filter:alpha(opacity=0) !important;opacity:0 !important;} div#plurk_form:hover {filter:alpha(opacity=100) !important;opacity:1 !important;}

2010-07-23 19:57

MOKU

謝謝大大的分享，超級實用的～（感動）學了非常多的語法好開心！！！現在是個新手慢慢摸XDDD

2010-09-15 23:16

^W^

2010-09-16 08:41

孟肥

不好意思可以借你的css修改嗎謝謝分享︿︿

2010-09-20 13:14

個人使用修改無妨，商業性質則不歡迎 ^ ^

2010-09-20 18:41

sheet

很謝謝你分享的隱藏語法!!! 不過我試過之後還是沒辦法隱藏(哭是要把那一段語法複製起來貼進CSS裡嗎(應該不是吧還是要直接在CSS裡面改?? 我想要改但是找不到語法可以改也許是因為作者不是你所以語法寫得不一樣我很想把噗浪下半部隱藏起來然後滑鼠移過去才顯示.... 請問可以幫我看看嗎謝謝!!!!

2010-10-11 20:14

把這段語法貼進CSS後儲存應該就可以了。 /*資料面板: 透明度變化*/ div#plurk-dashboard { filter:alpha(opacity=0) !important; -moz-opacity:0!important; opacity: 0!important; } div#plurk-dashboard:hover { filter:alpha(opacity=80) !important; -moz-opacity:0.8!important; opacity: 0.8!important; }

2010-10-11 21:47

DaFang

版主你好想請問我貼上以下這段語法之後我覺得我的個人圖像的顏色變得跟原來的不太一樣請問，要怎麼改才能將個人圖像的顏色變得和原始檔案一樣？謝謝。 /*資料面板: 透明度變化*/ div#plurk-dashboard { filter:alpha(opacity=0) !important; (先將主控台資訊隱藏起來，透明度設"0") -moz-opacity:0!important; opacity: 0!important; } div#plurk-dashboard:hover { filter:alpha(opacity=80) !important; (滑鼠移過去，讓主控台資訊顯現出來，透明度設"80,0.8,0.8") -moz-opacity:0.8!important; opacity: 0.8!important; }

2010-11-22 13:12

個人圖像也會跟著有透明度，應該是因為這樣所以顏色看起來較淡的關係，只要將80 0.8 0.8 數值，改成 100 1 1 就可以正常顯示了。

2010-11-22 14:00

DaFang

原來是這樣謝謝版主^^

2010-11-22 16:59

小K

版主好厲害謝謝你教大家

2010-12-14 23:55

hou

謝謝版主分享!

2010-12-19 21:39

大豪

不好意思請問一下～我想要把我的＂消音＂噗變的和您的＜金羽銀華CMT#d＞版型一樣就是讓消音的噗變成透明的！找不大到應該要改在ｃｓｓ的哪裡可以請版主指點迷津！！！感恩～

2010-12-30 20:52

要加上這段語法： .muted /*隱藏已經消音的噗*/ { filter:alpha(opacity=20);opacity:0.2; zoom:1; } 複製貼上就可以了

2010-12-31 18:14

千

你好,想請問一下,如果要把數值,朋友,粉絲這三個區塊全部的東西(包刮搜尋分享那些)變成不見,但是滑鼠移過去就會出現是要加什麼語法呢? 還有要打新噗的那個鍵入區,也是變成不見但是滑鼠移過去就會出現要加什麼語法呢謝謝!

2011-01-26 00:15

/*---------------------------------------------------------隱藏*/ #dash-stats, /*統計*/ #dash-friends, /*朋友*/ #dash-fans, /*粉絲*/ div#plurk_form /*發噗區*/ {filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;} /*---------------------------------------------------------滑鼠移過去出現*/ #dash-stats:hover , /*統計*/ #dash-friends:hover , /*朋友*/ #dash-fans:hover , /*粉絲*/ div#plurk_form:hover /*發噗區*/ {filter:alpha(opacity=100) !important;opacity:100 !important; zoom:1;} 請試試看～

2011-01-26 00:25

魚

請問圖片可以用像電腦桌布一樣並排嗎? 要怎麼知道圖片位址?就是http://hiphotos.baidu.com/thejoyworld/pic/item/aa7a851ed6a63a32314e1511.jpg類似這個的東西? 有人說把上傳到PLURK就知道，但他會自動縮小阿QQ 一直弄不好... ....我很想試試看最後一種，就是讓底圖完全看到，浪上的噗也都隱藏，可是對不起，我真的看不懂...

2011-02-06 19:30

圖片網址沒錯，可以安裝套用範例佈景後，再換背景圖網址： body, html { background:url(這邊放圖片網址) left top no-repeat; }

2011-02-06 20:01

魚

謝謝你請問有方法知道每張圖的網址嗎? 而且如果圖太小，可以把他像電腦桌布一樣並排嗎?

2011-02-07 13:07

直接網址？要看是在哪個網站下載，桌布網站一般點連結都會另開視窗，網址列就是直接網址了。同一張圖片並排？在語法中設定 repeat 就可以了，如： body, html { background:url(圖片網址) left top repeat; /*圖片靠左上重複排列*/ }

2011-02-07 18:55

夜

請問如果背景的圖太小，有方法把他拉大填滿背景嗎?

2011-02-08 22:41

請參考這篇文章： http://m66660000.pixnet.net/blog/post/33484372

2011-02-09 00:21

魚

謝謝你請問可以換顏色嗎? 因為我是直接套用樣式的請問顏色該怎麼修改?

2011-02-10 22:59

找出想替換的顏色的色碼(如:#666 灰)，然後換成想要呈現顏色的色碼(如:#FFF 白)就可以了。

2011-02-11 15:43

Moo.

請問要怎麼樣才能隱藏掉時間軸呢？（就橫的那一條）

2011-02-10 23:17

/*隱藏時間軸線顯示*/ #timeline_bg .day_bg .div_inner, /*底*/ #bottom_line { background:none !important; border:0 !important; } .bottom_start, .bottom_end /*時*/ { font-size:0px; height:0; width:0; overflow:hidden; filter:alpha(opacity=0); opacity:0; zoom:1; }

2012-05-31 14:41

joan

http://www.plurk.com/amy788643 可以請問一下我想用全景顯示剩下那些我該怎麼隱藏才好!? 謝謝~

2011-02-24 20:49

/*-------------------隱藏頁首登入、註冊列、頁尾以及河道往前往後按鈕*/ #top_login, #footer, .browse_button {filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;} #top_login:hover, #footer:hover, .browse_button:hover {filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}

2011-02-25 11:08

飄

請問要怎時間軸平常讓他消失 (已經整個全景了唯獨中間橫條時間軸和右邊所有訊息那列很突兀) 但游標移到河道上時需自動顯示不然整條時間軸消失要找噗不太方便~"~ 大大的教學文太讚了受益良多>///< 感謝

2011-03-08 00:02

可以參見第#20回應，隱藏起來，但移過去顯示的方式沒試過，如果試成功，再分享上來

2011-03-09 22:39

Mih Hwang

您好請問在最下方那欄因我套用的佈景給我透明化了我不曉得從哪改,可以幫幫我嗎? 噗浪_http://www.plurk.com/mihhwang 謝謝您:)

2011-04-14 01:06

是指頁尾的噗浪選單嗎？還是主控台的個人資訊、統計、朋友粉絲背景？頁尾的話，加上這段： #footer, #footer a /*頁尾文字*/ { color:#7e7e7e !important; } 主控台透明度的設定，刪除語法中的 div#plurk-dashboard {filter:alpha(opacity=80) !important;opacity:0.80 !important;} 就會恢復正常了

2011-04-14 11:04

Miya

謝謝你~你的文章讓我受益良多~ 不好意思想請教幾個問題 1.如果我想下面主控台全區全部隱藏起來.只留下卡馬.有辦法嗎? 2.下面那個中文繁體跟噗浪搜尋搜尋噗浪會員 API常見問答聯絡噗浪關於噗浪部落格噗浪徵才服務條款隱私權政策有辦法隱藏嗎? 3.左上角個人檔案.首頁.我的編輯那邊通知那邊我想改成透明化要用哪個語法? 不好意思麻煩你了~

2011-04-14 11:05

/*-----隱藏主控台及頁尾-----*/ div#plurk-dashboard, #footer { position:fixed; top:-9000px; } /*-----卡馬固定出現位置-----*/ #karma_holder { top:450px !important; left:13px !important; position:fixed !important; z-index:10000; } /*-----頁首左半邊透明度-----*/ #top_bar { filter:alpha(opacity=60); opacity:0.6; zoom:1; }

2011-04-14 11:21

Miya

謝謝您~不過我試了一下還是不行讓卡馬出現~所以我想請問那如果只把朋友跟粉絲隱藏起來可以嗎?

2011-04-14 12:27

可以參考這篇：http://m66660000.pixnet.net/blog/post/33556393 那換個語法方式： /*隱藏頁尾及主控台-僅保留卡馬*/ div#footer, p#about_me, #dash-profile, #dash-stats table th, #dash-stats table td, #dash-stats h2, a.link_arrow, a.link_arrow link_badges, .award_bar, #dash-friends , #dash-fans { filter:alpha(opacity=0) !important; -moz-opacity:0 !important; opacity: 0 !important; height:0 !important; width:0 !important; overflow:hidden; zoom:1; } div#plurk-dashboard { background:none !important; border:0 !important; height:100px !important; overflow:hidden; margin-top:0px !important; }

2011-04-14 14:45

Miya

謝謝你~畫面變的好乾淨~一整個好開心^^ 可不可以再麻煩你幫個忙我整剩1.發言框的說2.私人訊息、語系及選項 .3新訊息以及回應想把它弄成透明的.找了好久找不到耶~不好意思可以再麻煩你嗎我是套用您的畫面做更改的~真的好喜歡這張圖片~謝謝您 http://www.plurk.com/mia4408

2011-04-14 14:58

透明的是指透明度，還是去除背景色呢？項目名稱是： 1. .qualifier, .m_qualifier, .r_qualifier {} 2. #more_options_link, #more_options .on, #more_options_holder {} 3. #updater {} 將透明度的語法或去背景的語法放到 {} 中即可。透明度語法： filter:alpha(opacity=60); opacity:0.6; zoom:1; 數值可調整去背景：background:none !important;

2011-04-14 19:59

洛惟斯

不好意思想請教一下：噗浪下方的資訊面板套用版主您的語法之後，發言區、私密選項這兩個部分無法一起隱藏不知是否能幫忙指點一下ｍ(_ _)ｍ

2011-05-08 00:47

洛惟斯

版主抱歉，夜深了頭腦不清楚……上一則留言請無視他OTZZZ

2011-05-08 01:01

Carrot

板主您好~~ 貴站的語法教學好詳細,用得很高興^//^ 也大致上用到想要的感覺了..但還是有幾個問題想請教~~><" 1. 下面大框框的超連結(橘色的)..原色和移到它的色要怎麼調? 找不到語法.. 2. 指標移到大頭時右上出現的"點這換大頭"能不能讓它消失呢??出現位置有點靈異= =; 3. 中間主PU區的白槓槓和私人訊息選項也能隱藏,移到才出現嗎? 4. 河道上的垂直線我都弄不掉...(想要半透明) 5. 為何河道的回應會變成一格一格不透明呢..我想要全部半透明只有下面的分格線...==\ 都用不好.. 抱歉問了這麼多>< 可對照我的PLURK: http://www.plurk.com/kyarotosama 超感謝~~

2011-05-16 02:16

1. 自介部份的連結文字： #dash-additional-info a { color:# !important; } #dash-additional-info a:hover { color:# !important; } 3. 白槓槓？發噗欄位嗎？項目是 textarea#input_big /*發噗輸入*/ 私人訊息選項的項目是 #more_options_link 透明度語法一樣。 4. 垂直線是日期線，項目是：#timeline_bg .day_bg .div_inner 5. 回應列表中的內容嗎？要把列表中每則回應的底色拿掉： .list .plurk_cnt { background:none !important; }

2011-05-16 11:43

Carrot

板主您好again~><" 我是上面的.. 第2問我找到答案了~ 謝謝vv (其它的還在傷腦筋中)

2011-05-16 02:38

Carrot

板主您好~~v 感謝教學/// 差不多都ok了!! 請問我可以加好友or成為Fans嗎>//< 貴站真的很棒VVV

2011-05-18 23:50

可以啊～謝謝～ ^ ^

2011-05-19 09:53

Lumine

版主不好意思打擾了這篇的資源真的很豐富讓我受益良多我也試著改了一下不過有一個地方一直找不到要怎麼改就是河道上的噗如果太長會被自動縮小然後會在噗右邊顯示一個「...」的圖樣請問這個東西的語法是什麼呢我想讓它的透明度變高謝謝!!

2011-06-08 00:42

項目名稱是 .dots .inner {}

2011-06-08 11:57

Lumine

謝謝版主的指導! 小弟不才又來發問了這次想請問發噗區塊裡「搜尋」分頁裡面的兩個輸入區塊的項目名稱就是圖裡面這兩塊： http://api.ning.com/files/aVP*RKhRgnMu1c1OwBhYIgDb54Avmm6gqWPYU1aGs8B79rq*lN6B8fCdmg5X8zqmJ3wRCOXXxpCv3SMsBfV6CMMWmKaV2Voa/file.JPG 另外想請問版主要怎麼知道想要改的地方的項目名稱呢? 總是這樣提問還滿不好意思的XD

2011-06-08 20:40

項目名稱是 input#current_query /*搜尋輸入*/ 跟 input#share_link /*網址欄位*/ 可以參考這篇文：http://m66660000.pixnet.net/blog/post/34881317 或安裝瀏覽器的網頁設計外掛工具，如 web developer，來查詢CSS項目名稱及相關設定

2011-06-08 23:11

wuli7979

版主你好^^ 想請問一下消音的噗隱藏後(已經使用版主的語法了)，有沒有辦法在滑鼠移過去時又恢復原來的樣子呢？謝謝^^

2011-06-13 10:00

剛試了一下，用 :hover 好像沒效果，如果有找到能應用的方式再分享上來。

2011-06-13 12:06

lase

你好首頁.個人檔案.編輯.我的朋友.通知左邊的小圖要怎麼樣才能弄掉?

2011-06-16 22:47

加上這段語法： /*-----隱藏頁首小圖並縮短間距-----*/ #top_bar .item img { width:0 !important; margin:0 !important; filter:alpha(opacity=0); opacity:0; zoom:1; }

2011-06-16 23:10

blue

板主你好~^\\\\^" 不好意思..想請問如果只想顯示左邊大頭照部分然後右邊的統計朋友粉絲隱藏這樣要怎麼用呢? 謝謝你!!

2011-06-22 13:24

加上隱藏語法： #dash-stats, #dash-friends, #dash-fans { filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1; height:0 !important;width:0 !important; overflow:hidden;_overflow:none; position:fixed; top:-9000px; }

2011-06-22 17:07

訪客

您好,我使用您的下列語法但是想留下大頭照, 其他照樣隱藏,請問還要增加什麼,謝謝 div#plurk-dashboard, #footer { position:fixed; top:-9000px; }

2011-07-23 00:48

加上這段語法試試： #dash-profile { top:130px; left:28px !important; position:fixed !important; }

2011-07-24 08:52

闇羽

您好,請問要怎麼改發噗欄的透明度呢?謝謝:) /* http://plurkcss.koberry.com/ 　　　*/ /* 讓你與大家分享樣式、簡單的樣式製作器！*/ body, html { background-image: url(http://img804.imageshack.us/img804/1939/img0114cb.jpg); background-repeat: repeat; background-color: #FFFFFF; }#timeline_holder { background-image: url(http://img804.imageshack.us/img804/1939/img0114cb.jpg); background-repeat: repeat; background-color: #FFFFFF; }.day_bg .div_inner { background-image: url(); background-color:#B8DBFF; opacity:0.0width:1px; border:0px;}#timeline_holder #timeline_bg .bottom_start , .bottom_end {color:#050505} #timeline_holder #bottom_line { background-image: url(); background-color:#FFFFFF; border:0px; opacity:0.10}div#plurk-dashboard {filter:alpha(opacity=50) !important;opacity:0.50 !important;} #plurk-dashboard{ background-image: url(); background-repeat: repeat; background-color:#FFFFFF;} #dash-stats,#dash-friends,#dash-fans{ text-align: center;color:#454545;} #dash-stats a,#dash-friends a,#dash-fans a{ color:#3B0F52;} #dash-stats a:hover,#dash-friends a:hover,#dash-fans a:hover{ color:#43115C;} #dash-stats h2,#dash-friends h2,#dash-fans h2{ font-size:25px; color:#250A33;}#profile_pic {width: 180px;} #dash-profile #full_name{color:#8F0404} #dash-profile #location,#dash-profile #span_years , #m_or_f{color:#8F0404} #dash-additional-info #about_me{color:#FFFFFF;}#dash-stats table td {color: #0A7DC9;} #dash-stats #karma {color:#15065C} .karma_hover {color: #6B4B2F;}a:link,#footer,#footer a {color: #000000;} a:visited, a:active, #footer a:hover {color: #000000;} a:hover {color: #000000;}

2011-07-29 14:58

可以參考這一篇： http://m66660000.pixnet.net/blog/post/33949873 的 (4) 隱藏發噗區舉例： div#plurk_form {filter:alpha(opacity=70) !important; opacity:0.7 !important; zoom:1;} 透明度設 70 的語法

2011-07-29 16:45

訪客

您好!!! 想要請教您一下,如果我想要像這位噗友(http://www.plurk.com/amy8227)的主控台一樣, 在滑鼠沒靠近時透明顯示,然後滑鼠靠近後才緩緩顯現的語法是 > "

2011-08-16 21:24

語法： div#plurk-dashboard { filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1; } div#plurk-dashboard:hover { filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1; -moz-transition:opacity 0.5s ease-in; /*滑入效果*/ -webkit-transition:opacity 0.5s ease-in; -o-transition:opacity 0.5s ease-in; }

2011-08-16 22:32

ccjh 9820419

我可以請問一下嗎就是上面有可以隱藏主控面板的語法有人發問說可不可以將它區塊化我引用版主您的語法後發現它跟其他的有點不一樣就是它背景不會被區塊化請問背景能區塊化嗎？麻煩您，謝謝..:-P

2011-08-18 15:24

背景？背景區塊化要加上背景的語法，該則回應是分區塊隱藏、滑鼠移至再顯現的語法。要調整主控台背景，可以參考這篇文章： http://m66660000.pixnet.net/blog/post/33500205

2011-08-18 22:16

ccjh 9820419

謝謝您，我參考文章後是把背景區塊化了但是，我使用圓角的語法它顯示的卻還視方角這是？

2011-08-18 22:43

是使用哪一款瀏覽器呢？ ie 不支援圓角語法，火狐跟Google瀏覽器應該沒問題： -moz-border-radius:12px; -khtml-border-radius:12px; -webkit-border-radius:12px;

2011-08-19 07:42

ccjh 9820419

版主您好我的是ie瀏覽器沒錯用了您給的那的語法套上的語法是像這樣嗎？ div#plurk-dashboard { background:none; /*拿掉原本底色*/ border:0; /*拿掉框線*/ } div.dash-segment .segment-content /*各區*/ { background:#111; /*底色*/ padding:12px; /*內間距*/ margin:3px; /*外邊界*/ -moz-border-radius:22px; /*圓角*/ -khtml-border-radius:22px; -webkit-border-top-left-radius:22px; -webkit-border-top-right-radius:22px; -webkit-border-bottom-right-radius:22px; -webkit-border-bottom-left-radius:22px; } #dash-additional-info /*關於我自己描述*/ { background:#333; /*底色*/ padding:12px; /*內間距*/ margin:3px; /*外邊界*/ -moz-border-radius:22px; /*圓角*/ -khtml-border-radius:22px; -webkit-border-top-left-radius:22px; -webkit-border-top-right-radius:22px; -webkit-border-bottom-right-radius:22px; -webkit-border-bottom-left-radius:22px; } -moz-border-radius:12px; -khtml-border-radius:12px; -webkit-border-radius:12px; 如果是的話？我還是無法顯示圓角還是我搞錯了？:-O

2011-08-19 15:33

ie瀏覽器不支援圓角語法，所以就算放了，也不會顯現喔～另外， -moz-border-radius:12px; -khtml-border-radius:12px; -webkit-border-radius:12px; 只是圓角的另一種寫法，內容要放在項目的 { } 裡面 ^ ^

2011-08-19 17:52

ccjh 9820419

再請問版主有沒有可以像您一樣把自我介紹，統計那些等等全部靠邊站加上滑鼠移過去就能顯現的謝謝^//^

2011-08-20 20:02

你可以到我們的噗浪版型下載區去找找： http://www.flickr.com/groups/plurkcss/

2011-08-21 09:21

真

版主你好~我想請教幾個問題我是套用版主上面那個楓葉的版型只是輸入訊息時只要加入表情符號或是連結字就會變大(尚未發噗在輸入訊息時) 還有左上角那個"個人檔案"顏色可以改嗎? 不好意思麻煩版主了

2011-08-25 12:22

嗯，因為這個版型是較早期的作品，現在噗浪已經改了許多預設值了。請改用下方的語法試試看： /*頁首左邊文字*/ #top_bar, #top_bar a { color:#9d2a25 !important; } /*輸入訊息*/ textarea#input_big_private, /*發送私密噗視窗*/ textarea#input_big_private.content, textarea#input_big, /*發噗輸入*/ textarea#input_permalink, textarea#input_big.content { wrap: soft; color: #ffffff!important; background: NONE; border:0; border-bottom:1px solid #9d2a25 !important; HEIGHT:60PX; FONT-SIZE:19PX; -moz-border-radius: 10px; -webkit-border-radius:10px; -khtml-border-radius: 10px; }

2011-08-25 21:12

時雨

版主你好，想請問一下：我的主控台是在左側的，我想改成滑鼠還沒移過去前是只有大頭照(不透明)縮在左下角，滑鼠移過去後才將主控台全部展開的語法。麻煩您了！

2011-08-30 21:00

？這邊應該有類似你要的版型： http://www.flickr.com/groups/plurkcss/pool

2011-08-30 22:56

靜

大大你好~我想把浪上的訊息變成透明化，所以有使用了/*隱藏與展開浪上的噗*/ 但是它的方式是整體隱藏與整體展開，有辦法做到只展開滑鼠移到的那個噗，其他噗還是維持隱藏嗎?

2011-09-06 10:09

最近正好也有其他噗友問到這個問題，所以有研究出寫法來，請試試看： #timeline_holder .plurk_cnt, /*浪上的噗*/ #timeline_holder div.plurk .p_img img, /*浪上的頭貼*/ .td_response_count, /*回應數*/ .plurk_icon /*私訊圖示*/ { filter:alpha(opacity=10) !important; opacity:0.1 !important; zoom:1; } #timeline_holder div.link_extend .plurk_cnt, /*滑鼠移過去的噗*/ #timeline_holder .plurk_box .plurk_cnt, /*噗打開後*/ #timeline_holder div.link_extend .p_img img, #timeline_holder div.plurk_box .p_img img, div.link_extend .td_response_count, .plurk_box .td_response_count, div.link_extend .plurk_icon, .plurk_box .plurk_icon { filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1; } 透明度 10 0.1 可以自行調整數值。

2011-09-06 21:50

靜

另外想請問為什麼我的噗浪在看完影片後，整個視窗會直接變黑色，要重新整理才會正常呢!?

2011-09-06 10:40

噗浪似乎有更改播放影片的程式碼，這問題要反應給噗浪官方，不是css的範圍喔

2011-09-06 21:52

嘉嘉JIA

你好我是套用這裡所提供的語法但出現了一點問題 1.噗看過後要再看一次時都因為太透明而很難看清楚 2.因底色為黑色所以個人檔案的字都看不清楚TAT 可以幫我解決上面的兩樣問題嗎? 我的噗浪http://www.plurk.com/susansu3#

2011-09-20 20:36

1. 改一下透明度數值即可，通常80 0.8以上比較看得清楚 2. 把 html {background:#000 } 的000改成fff即可。#000是黑色 #fff是白色

2011-09-20 21:25

嘉嘉JIA

謝謝已經調整好了!!

2011-09-20 21:49

^ ^

2011-09-20 23:07

Road

您好，我使用了/*隱藏與展開浪上的噗*/這個語法，但這個語法在點開要回應時（此時游標在回應區）原噗就會又隱藏了，我想請問有沒有辦法修改/*隱藏與展開浪上的噗*/讓游標即使到了回應區還是有辦法讓整個河道的噗顯示出來呢？（或者僅顯示原噗也可以）

2011-10-16 23:24

那就要用另一種寫法，可以參考這個噗版的方式： http://www.flickr.com/photos/m66660000/6268856318/in/set-72157627538479609

2011-10-28 23:20

兔子

請問可以幫我做一張嗎? 我自己用都用不太起來我想要用的根楓葉一樣的 http://29zp47new.files.wordpress.com/2010/07/6a01347ee5e9ee860b0137a4c5aea1860c.jpg 網址如上^^ 希望版主大大可以幫我一下感激不盡

2011-10-22 11:43

請直接安裝套用該噗版後將 /*畫面佈景*/ body, html { } 中的圖片網址換成你想要使用的即可

2011-10-22 12:29

兔子

對不起我又來問了~~ 我照你說的安裝以後已經完成^^感激那請問一下... 有沒有辦法讓Karma欄那些後面也有背景呢?

2011-10-28 20:42

主控台各區的背景嗎？可以參考這篇： http://m66660000.pixnet.net/blog/post/33500205

2011-10-28 23:16

霧。

*****

2012-01-10 03:41

*****

2012-01-10 19:50

ika

*****

2012-01-10 23:04

*****

2012-01-11 19:06

霧。

不好意思可是我找不到卷軸語法耶我用的是這個 (用的是GOOGLE瀏覽器不知道有沒有差 /*噗整體透明度*/ .plurk_cnt, .plurk_box .caption, .plurk_box .list, .plurk_box .mini_form, .info_box, td.td_cnt texture, textarea#input_small { filter: alpha(opacity=90); opacity:0.9; -moz-opacity:0.9; zoom:1; (通常設"90,0.9,0.9"或"80,0.8,0.8"，太透明的話文字會看不清楚喔) }

2012-01-11 02:59

找找看有沒有 ::-webkit-scrollbar {} 項目的語法因為可以上下移動的那條就是捲軸ㄛ應該跟/*噗整體透明度*/這段無關

2012-01-11 16:28

翽

*****

2012-01-11 21:07

*****

2012-01-12 17:07

ika

非常感謝m(_ _)m

2012-01-11 21:17

^w^

2012-01-12 17:08

翽

*****

2012-01-12 20:46

*****

2012-01-13 18:13

Debris Chao

請問我想要隱藏主控區個人資料以外的部分但留下統計欄的資料(不包含卡馬和徽章) 那麼該輸入什麼語法呢?

2012-02-08 11:36

那就是隱藏卡馬欄、小徽章以及朋友區、粉絲區，項目名稱與語法如下： #dash-stats h3, .award_bar, #dash-friends, #dash-fans { display : none; }

2012-02-08 14:14

某敏

大大超感謝的！！但俺看到有人好友跟粉絲的頭像圖都是半透明的然後鼠標移過去圖就完整顯示出來了不知那是怎麼弄的…… 謝謝( ﾟДﾟ)

2012-02-18 16:17

.user_link img { filter:alpha(opacity=20) !important; opacity:0.2 !important; zoom:1; } .user_link img:hover { filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1; }

2012-02-18 20:06

某敏

無言感激！！(worship) 另外這個http://www.plurk.com/bmraven_elsword 主控台那邊用IE看可以看到噗跟主控台的底色也是半透明字也是分4欄顯示但我用火狐是看到主控台的底色是實色, 整塊都是黑的但浪上的噗有半透明…… 是不是語法不支援的問題？會不會有語法是通用的（抱歉我伸手了orz

2012-02-23 18:20

主控台那段的透明度語法加上 !important; 項目名稱前加上 div 試試看： div#plurk-dashboard {opacity:0.5 !important;}

2012-02-23 19:13

某敏

謝謝俺終於在IE跟火狐也看到效果了（噴淚對了一直想問透明語法裡 filter:alpha(opacity=10); -moz-opacity:0.1; opacity:0.1; zoom:1; 四行有甚麼分別嗎？如果四行都是不同數值的話會變成怎樣？再次麻煩了（鞠躬

2012-02-23 21:41

是使用於各瀏覽器的不同寫法 -moz- 開頭的是火狐通用的是 opacity: 通常新的瀏覽器版本都可以支援了。

2012-02-23 22:00

涼夏

大大不好意思您講解的真的很詳細只是我是個語法笨蛋完全搞不懂 (噴想請教說因為已經套用了別人製作的噗浪主題但是所有的噗通通都半透明化看不清楚要如何修改才能不要透明化了?

2012-02-28 22:40

找到浪上的噗項目（.plurk_cnt），把其中的透明語法那句刪掉即可。（filter:alpha(opacity=) !important; -moz-opacity: !important; opacity: !important;）

2012-02-29 08:48

Lovezaxcat

你好！可以請你幫我看一下我的噗浪河道上面一條條直直白色的線要怎麼消除嗎>< 圖片：http://i696.photobucket.com/albums/vv328/Lovezaxcat/_T-_oEIKOT1.jpg 不曉得是不是語法的問題>< 我試安裝幾個樣式再找幾個語法修改，再用回原本自己使用的樣式就多出了白白的線...><

2012-03-03 22:16

你可以換一下噗浪預設的那三個方塊中主控台部份的設定有時它會自己亂跳或是試試看下面的語法複製貼上到自訂欄位 /*---隱藏特定時間軸主題的時間直線---*/ .block_bg .div_one_line, .small_timeline .block_bg .div_one_line { filter:alpha(opacity=0) !important; -moz-opacity:0 !important; opacity:0 !important; height:0 !important; width:0 !important; overflow:hidden; zoom:1; }

2012-03-04 10:14

Fan Jahifer

您好針對您這篇文章提出的語法研究加上實際操作後終於了解為什麼要用上改變透明度的方式而不是用控制顯示/隱藏的visibility或display屬性(...) 目前遇到了些問題由於實在是束手無策希望能在這裡得到解答下方區塊欄位用png半透明圖檔做背景並加上Filter: Alpha語法在滑鼠移過去時顯示欄位但是發現在IE7和IE8底下背景會變成不透明經過檢查找出是Filter: Alpha語法和PNG格式會發生衝突不知道有沒有辦法或其他方案可以解決?

2012-03-07 01:37

可以將圖檔格式改成 .gif 或是使用 display方式在噗浪用 display 語法中要有間隔才能順利使用如 { display : none; }

2012-03-09 21:29

ts0169600

不好意思打擾了如果我不希望在時間軸的地方有這個淡(透明?)綠色希望他完全透明的話我要修改哪裡? http://img13.picoodle.com/i55u/ts01696000/0_f19_u9qvw.jpg <---圖

2012-05-31 09:50

/*隱藏時間軸線顯示*/ #bottom_line { background:none !important; border:0 !important; }

2012-05-31 14:41

zacks62

你好，我想請問下，我使用/*隱藏與展開浪上的噗*/把河道隱藏起來，但點擊某則噗後滑鼠一移開，上面的主噗就變透明了，有沒有辦法把主噗固定成點擊就變成不透明？謝謝你。

2012-08-22 22:47

這段語法是整體隱藏浪上的噗，所以滑鼠一移開還是會變透明，需要固定不透明，則需使用單則噗的隱藏與展開語法，無法通用喔。 /*單則噗的隱藏與展開*/ #timeline_holder .plurk_cnt { opacity: 0.1 !important; zoom: 1; } #timeline_holder .link_extend .plurk_cnt, #timeline_holder .plurk_box .plurk_cnt { opacity: 1 !important; zoom: 1; } 請試試看。

2012-08-23 10:35

zacks62

大致上應該算...可以了XDDD 謝謝你的教學！

2012-08-23 15:15

╭洛L☺TTE×露特╮

套用了喔，謝謝你

2012-08-28 22:22

2012-08-29 09:17

海星_HUA

*****

2012-09-19 15:24

*****

2012-09-19 16:53

海星_HUA

*****

2012-09-19 19:58

時影

不好意思想請問一下，我將您上面所分享的Maple噗版與您在Flicker分享過的一款噗版做了結合，主要是將噗版的主控台跟河道上的噗透明化，以達到噗浪本身像是桌布一樣的效果；另外，由於我個人偏好將主控台全部縮排至左邊，因此也另外修改了主控台位置的語法，但目前遇到了一個困擾：我無法按下噗浪標籤中的「所有訊息」一欄，「我發表的訊息」一欄也必須將游標擺放到非常特定的角度才能按到，試過許多CSS都沒有辦法解決，特來求教。因為我對CSS完全沒有概念，在套用版型時完全是以兩組版型相互對照加上每改動一次CSS就刷新噗浪查看效果的方式改造完成的，因此不了解問題出在哪哩，也沒有辦法對症下藥。另外如果可以，還請麻煩教我如何將噗浪標籤移到河道右下方、發噗區上方，以及若想將頁尾往左靠該如何修改CSS語法，非常謝謝。

2013-04-01 16:42

使用 #filter_tab { z-index:810; } 試試看。810可以調整成更大數值。噗浪標籤是指那處？頁尾置左的語法： div#footer p { text-align:left; margin:30px 0px 0px 0px; padding:20px 0px 30px 0px; } #languge_selector { margin:64px 0px 0px 6px; }

2013-04-07 10:37

時影

使用#filter_tab { z-index:810; }也沒有改善，不過經由調整發噗區的寬度及將發噗區往左移動之後就可以改善這個問題了，謝謝！

2013-04-09 10:29

2013-04-09 13:10

shine閃亮

版主你好，上面給的第一種語法是滑鼠一移動到河道上，所有隱藏的噗就會一起顯現出來。不知道有沒有個別顯現的語法？（就是一到某一個只有那一個會顯示出來）謝謝！

2013-04-20 17:24

/*單則噗的隱藏與展開*/ #timeline_holder .plurk_cnt { opacity: 0.1 !important; zoom: 1; } #timeline_holder .link_extend .plurk_cnt, #timeline_holder .plurk_box .plurk_cnt { opacity: 1 !important; zoom: 1; }

2013-04-20 18:27

shine閃亮

謝謝！不過有辦法讓噗的頭貼部分也一起變透明嗎？

2013-04-20 23:35

項目中的 .plurk_cnt 都換成 .plurk 試試看？

2013-04-21 12:45

shine閃亮

頭貼隱形了，不過整個首噗游標移過去也還是透明的。只有下面的部分可以看的見。不好意思感覺很麻煩你。

2013-04-21 15:47

Ruei

您好~ 請問如何將左邊的 1.首頁/個人檔案/編輯/我的朋友/通知 2.xx則新訊息 u 更新 / xxx則新回應 v檢視隱藏起來呢?(滑鼠戳過去時會顯現) 其他的語法真的非常好用謝謝版主的分享><

2013-06-11 18:26

那部分的css項目名稱是 .html5 #top_bar，加在隱藏語法內容前即可。

2013-06-11 19:25

Mai熊手作

版大你好想請問一下,火狐更新到12版以後我噗浪許多效果都自己失效,像是圓角及滑入效果,是為什麼呢? 謝謝

2013-06-17 22:39

瀏覽器版本不支援該處的css寫法所以無法正確讀取並顯示，我是使用火狐21，圓角可以顯示喔。

2013-06-18 09:37

mikina531

你好! 想跟你請教一個問題我已經將發噗區透明化(滑鼠移過去才會顯示) 惟獨在說後面的白色發言框框(打字的地方)無法一起透明化這該怎麼處理? 謝謝^^

2013-06-23 23:44

文章內文中有寫到，可以連到噗浪css基本這篇來找出想隱藏的項目名稱喔。你說的輸入文字的地方就在該篇文中的 /*輸入訊息*/ 這段就是。如果是浪上的噗回應列表下方的輸入區，則在 /*噗打開後下方輸入區*/ 這段。找出名稱後同樣套用隱藏語法內容即可。

2013-06-24 12:34

ba1003116

您好，想請問要怎麼將未展開的浪上的噗也向打開後一樣透明呢? plurk.com/jsx920 因為現在噗未打開以前是純白色的，想把它變得跟滑鼠一下上去之後會顯示的時間一樣只剩下框框，背景是透明，但是不管怎麼改都沒有辦法改成透明的>< 不好意思麻煩您了！

2013-06-27 02:36

改 /*-----噗外框設定(整體)-----*/ .block_cnt .plurk_cnt { background:rgba(255,255,255,0.8) !important; } .block_cnt .link_extend .plurk_cnt, /*滑鼠移過去延伸的噗*/ .block_cnt .plurk_box .plurk_cnt /*噗打開後*/ { background:rgba(255,255,255,0.98) !important; } 這兩行背景的最後一個數值，0.8是透明度80%， 0.98是98%，改成想要的透明度。你語法後面有重複到，拿掉 /*噗外框*/ 那一整段即可。

2013-06-27 08:20

漾

*****

2013-08-26 13:37

*****

2013-08-26 18:20

妮醬

您好，我是套用這款樣式"願十心十如我協力十 "(有稍微修改語法)~~然後想請問那版型我想讓河道上的滑鼠未移到的噗像：http://images.plurk.com/4Zfe1xDbpQU6HIjcIJMMhw.jpg 狀態，然後滑鼠移過去會慢慢變回原來樣子~請問要怎麼修改呢!!感謝

2014-05-24 14:34

是指整則噗的透明度變化嗎？可以試試看這個語法： /*浪上噗的透明度變化*/ .block_cnt .plurk_cnt, .plurk_cnt { filter: alpha(opacity=45); opacity: 0.45; zoom:1; -moz-transition: opacity 0.6s ease-out; -webkit-transition: opacity 0.6s ease-out; -khtml-transition: opacity 0.6s ease-out; -o-transition: opacity 0.6s ease-out; -ms-transition: opacity 0.6s ease-out; } #timeline_holder .bigplurk .content, .plurk_cnt:hover, .plurk_box .plurk_cnt { filter: alpha(opacity=100); opacity: 1; zoom:1; -moz-transition: opacity 0.6s ease-in; -webkit-transition: opacity 0.6s ease-in; -khtml-transition: opacity 0.6s ease-in; -o-transition: opacity 0.6s ease-in; -ms-transition: opacity 0.6s ease-in; }

2014-06-02 14:43

妮醬

http://www.plurk.com/p/jgebqg http://farm4.staticflickr.com/3717/11085872883_4659550856_o.png 補充一下是這的版型

2014-05-24 14:35

小海海苔

您好，想請問要如何讓噗裡的回應區塊也變成半透明呢？這是我的噗浪http://www.plurk.com/sfan3721 目前已經設成游標移過去前後透明度不相同，但是點開每則噗，底下的回應區塊還是沒有半透明，想請問如何設定>< 還有就是「最近回應」、「您的回應」和「回報濫用」那三槓的顏色＆「您的回應」底下那個區塊的顏色要如何改不好意思問題很多，非常感謝！

2014-06-12 00:06

小海海苔

應該是最近改版版型跑掉的關係，現在已經復原沒事了，不好意思打擾＆謝謝！

2014-06-12 22:01

嗯，噗浪還在修改預設值中。如果還有發現什麼噗版問題，歡迎再留言。 :)

2014-06-13 16:48

凌馥蝶

*****

2014-06-13 00:08

*****

2014-06-14 17:52

荻／絿冽★

打擾了！想問在頭貼上再放上一張圖片，滑鼠移到頭貼上時蓋在上面的圖就會消失的語法。曾看過有人用過，但都不知道製作者是誰><現在也找不到了

2015-05-30 23:16

可以試試看用 #dash-profile 區塊的背景圖與透明度語法，設定dash-profile 與 #dash-profile:hover 語法的呈現方式。

2015-07-19 20:20

Angel Liang

請問要怎麼用出像這種的控制台? http://www.plurk.com/qqwwyya 我翻了好多語法都沒有效

2015-07-06 18:08

可以參考這篇： http://m66660000.pixnet.net/blog/post/33500205 /*-------------------------------/ 6 / 各資料區塊加圓角 --------------------------*/ 這段。設定好背景後，再加上 #dash-profile:hover,#dash-additional-info:hover,#dash-stats:hover,#dash-friends :hover,#dash-fans :hover 各區塊的滑鼠移過去時的透明度變化

2015-07-19 20:30

愚絔

*****

2016-06-09 17:24

*****

2019-02-26 21:25

寒玥

你好/。不好意思我想請問一下，能讓回應列表沒有框線嗎？試過把整段回應列表框線刪掉但是並沒有用。謝謝。

2017-01-26 18:47

試試用以下這段語法，放在自訂佈景欄位裡按儲存套用。 /*回應列表無框線*/ .plurk_box, .mini_form, .info_box, .response_box { border: 0px !important; }

2019-02-26 21:06

搜文其文

Free+

心文心路

類別別類

噗浪CSS (2)

存在之書 (3)

真實ㄓ境 (6)

文章月別

FB粉專

windyty

66660000+

Flickr tour

噗浪版型研究社FB

ㄔㄔㄏㄌ

Pinterest.

參觀人氣

本日人氣：
累積人氣：

金羽銀華

分享真正值得分享的事物○以各種形式