[ plurk css 基本 ] 換噗版背景、顏色及隱藏物件 @ 金羽銀華

版權所有＋保留所有權利＿＋＿＋＿

© 2010-2013 Powered by Be Myself Inc. 如我協力創意工作室
**版權說明**
-- 我們提供與設計的噗版CSS內容僅供個人自用，請勿改製再分享或用於商業用途 --
((請勿將全部或部份內容直接取用當作自己的設計))
-- 除了個人噗版自用外(修改請註明原CSS碼出處)，其它使用方式均未授權，還請務必注意，勿侵權喔～--

Feb 13 Sun 2011 20:40
[ plurk css 基本 ] 換噗版背景、顏色及隱藏物件

雖然之前已經發文說明過相關內容，但因為還是陸續有詢問，所以這次用更簡單的方式列出語法，方便大家取用與學習。

以「White ColorS」噗版為例：

原本的噗版：

安裝網址： www.plurk.com/installDesign/5807705-2f204e3954

1. 換背景（背景桌布圖源：san-x）

改背景.png

方式：

將想要使用的背景圖，上傳到像是 imgur.com 等圖片分享網站，然後將直接連結(Direct link)的網址貼入uri( )括弧中：

body, html
{
background:url(這邊放圖片網址) left top no-repeat;
}

然後再把時間軸的背景拿掉：

#timeline_holder
{
background:none !important;
border:0 !important;
}

按「儲存並更新」就可以了。

2. 換顏色

換顏色.png

將語法中想要替換的顏色代碼（如：#666 灰色）找出來，然後用想取代的顏色代碼（例：#936158 棕色）一一置換就可以了。

更便利的方式，就是將自訂語法欄位中所有內容複製貼上至文件檔案，然後用「尋找-取代」的功能一次替換。

色碼查詢網站：http://www.colorschemer.com/online.html

3. 隱藏物件

(1) 隱藏時間軸：將橫條的時間軸與日期時間隱沒～

/*隱藏時間軸線顯示*/
#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;
}

若要留下日期，只隱藏時間，加上下段語法：

.day_start .bottom_start, .day_start .div_start /*日*/
{
color:#333 !important;
font-size:12px !important;
width:auto;
height:auto;
filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

(2) 隱藏主控台：將所有資訊隱藏起來，包括加入好友粉絲與發私噗按鈕

/*完全隱藏主控台全區*/
div#plurk-dashboard
{
filter:alpha(opacity=0) !important; -moz-opacity:0 !important; opacity:0 !important;
height:0 !important; width:0 !important;
padding:0 !important; margin:0 !important;
font-size:0px !important; text-indent:-9999px;
overflow:hidden; zoom:1;
}

隱藏頁尾與自介、統計、朋友、粉絲各區，滑鼠移過去後再分別顯現：

div.dash-segment, /*各區*/
#footer /*頁尾*/
{filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}

div.dash-segment:hover,
#footer:hover
{filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}

(3) 隱藏往前往後的圖示：設透明度0隱藏起來，滑鼠移過去再出現

/*隱藏往前往後圖示*/
.cmp_arrow_right, /*往右*/
.cmp_back_to_today /*移至最前*/
{
filter: alpha(opacity=0); opacity: 0; zoom:1;
}

/*滑鼠移至效果*/
div.cmp_arrow_right:hover,
div.cmp_back_to_today:hover
{
filter: alpha(opacity=100); opacity:1; zoom:1;
}

(4) 隱藏發噗區：將發噗區先隱藏起來，要輸入的時候再出現

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

/*plurk-搜尋標籤透明度變化*/
#toggle_tab li
{filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}
#toggle_tab li:hover
{filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;}

(5) 隱藏所有訊息標籤列：所有訊息、我發表的訊息、私人訊息、回應過的訊息跟喜歡的訊息標籤

/*所有訊息標籤透明度變化*/
#filter_tab
{filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}
#filter_tab:hover
{filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;}

以上語法可以一一嘗試看看，調整你需要的效果，搭配使用。

White ColorS示範.png

Posted by M6 at 痞客邦 PIXNET 留言(130) 引用(0) 人氣()

Forward by E-mail Forward to Guestbook

全站分類：Digital Life
Personal Category:噗浪Plurk
Previous post in this category: [ plurk css ] 加入朋友粉絲、傳送私人訊息與黑名單按鈕
Next post in this category: [plurk new] 噗浪開始有廣告了...用CSS隱藏單則訊息廣告欄位
上一篇： [ plurk css ] 加入朋友粉絲、傳送私人訊息與黑名單按鈕
下一篇： [plurk new] 噗浪開始有廣告了...用CSS隱藏單則訊息廣告欄位

▲top

Trackbacks (0)

留言列表 (130)

Post Comment

#1 kiki on 2011/02/14 15:31
請問是不是有個語法，可以把發噗的訊息框加大呢??(不是回應訊息裡的哦)，謝謝 ^^
是指這個嗎？
/*噗文輸入區加高*/
textarea#input_big.content {
height:100px;
}

M6 replied in 2011/02/14 19:50

#2 kiki on 2011/02/14 23:01
對的對的，我找好久找不到，謝謝分享^^

#3 kiki on 2011/02/14 23:45
不好意思，我想再請教一下，打開噗後，回應內容輸入框的下方，會有一個訊息網址的欄位，那個欄位的顏色要從那邊改呢？
項目是：
.info_box a {color:# !important;}
M6 replied in 2011/02/15 11:16

#4 kiki on 2011/02/15 02:08
另外，我也想像這個上面的版面把大部份的資料都隱藏起來，看起來很乾淨的樣子，我幾乎都試成功了，但是有幾個地方，不知道怎麼隱藏，試了很久，試不出來，想請教一下，就是發噗區上面的PLURK和搜尋，我隱藏不起來，還有所有訊息也隱藏不起來，但旁邊的我發表的訊息、私人訊息這些卻可以成功隱藏起來耶
/*所有訊息標籤透明度變化*/
#filter_tab
{filter:alpha(opacity=0) !important;opacity:0 !important; zoom:1;}
#filter_tab:hover
{filter:alpha(opacity=100) !important;opacity:1 !important; zoom:1;}
M6 replied in 2011/02/15 11:11

#5 kiki on 2011/02/15 04:56
還有我發現我隱藏了時間軸，原本如果滑鼠移到那則噗，會顯示出發噗的時間，但我發現，我的時間不會出現了耶，是不是我哪裡設錯了呢？麻煩您了，不好意思

#6 kiki on 2011/02/15 05:20
對不起，我問了那麼多，有的我找到錯誤的語法解決了，我只剩下發噗區上面的PLURK和搜尋，我隱藏不起來，再麻煩您告訴我該使用什麼語法，謝謝^^"
/*-------------------------------------------------------選項標籤透明度變化*/

#toggle_tab li
{filter:alpha(opacity=0) !important;opacity:0 !important;zoom:1;}

#toggle_tab li:hover
{filter:alpha(opacity=100) !important;opacity:1 !important;zoom:1;}
M6 replied in 2011/02/15 11:02

#7 merry on 2011/02/19 17:38
您好，我很喜歡你們的作品
發現最新的作品在滑動河道上的噗時會有跳躍的感覺
不曉得想要加在你們過去其中作品CSS裡，要添加何種語法呢？
因為我很喜歡那種跳動的感覺，好像河道上增添了新的生命呢~
謝謝解答！
在這篇文章中有分享：
http://m66660000.pixnet.net/blog/post/33857201

/*淡入*/ 效果這段就是。語法：

/*浪上的噗動態效果*/

#timeline_holder div.plurk /*淡入*/
{
-webkit-transition:top 0.5s ease, -webkit-transform 0.5s ease;
-webkit-transform-origin:0 0;
-moz-transition:top 0.5s ease, -moz-transform 0.5s ease;
-moz-transform-origin:0 0;
}
M6 replied in 2011/02/19 18:34

#8 貓 on 2011/02/20 00:48
不好意思想問一下如何把我發表的訊息，變成跟背景一樣圖案?
不太瞭解你的意思，是指浪上的噗的背景嗎？
M6 replied in 2011/02/20 11:25

#9 貓 on 2011/02/20 14:42
@@阿不用了謝謝你我用好了 >"<!
嗯，用好就好 ^ ^
M6 replied in 2011/02/20 18:19

#10 Aki Tanaka on 2011/02/21 18:13
你好~先謝謝你們的語法教學~讓我受益良多~感謝!!
但是我幫朋友換噗浪背景的時候發現一個問題..
請問如果背景圖跟河道圖是不同張的話~
我使用隱藏語法河道圖是不是會被蓋掉??
因為我朋友想把河道換成一張圖~背景換成另一張~但是她想要全部隱藏起來~
請問有這樣的語法嗎??
全部隱藏起來？是說先將背景圖跟河道圖隱藏，滑鼠移到才顯示嗎？
M6 replied in 2011/02/21 21:39

#11 蓁 on 2011/02/22 20:49
我想問你喔!!!
我想把主控台隱藏可是滑鼠移過去的時候會顯示
可是我設定好後卡馬跟邀請朋友的都沒有隱藏
還有我想把主控台的顏色變透明
要怎麼用啊!?
/*----------主控台透明度變化----------*/
div#plurk-dashboard /*透明度設0隱藏起來*/
{filter:alpha(opacity=0) !important;opacity:0 !important;zoom:1;}
div#plurk-dashboard:hover /*滑鼠移至後透明度*/
{filter:alpha(opacity=70) !important;opacity:0.7 !important;zoom:1;}
M6 replied in 2011/02/23 20:31

#12 Aki Tanaka on 2011/02/23 03:57
嗯嗯~對!
就是..比如河道圖是A圖~背景圖用B圖~但是上下都用隱藏~滑鼠移過去才
會顯現出來~謝謝~~
背景圖好像不能這樣用... 河道圖可以
語法：

/*-------------------------------畫面佈景-------------------------------*/

body
{
background:url(B圖的網址) center top no-repeat;
background-color:#fff !important; /*背景顏色*/
}

/*------------------------------時間軸主題------------------------------*/

#timeline_holder
{
background:url(A圖的網址) center top no-repeat;
background-color:#FFF;
border:0 !important; /*框線設0隱藏起來*/
}

/*河道圖跟浪上的噗滑鼠移至再顯現*/
#timeline_holder {filter:alpha(opacity=0) !important;opacity:0 !important;zoom:1;}
#timeline_holder:hover {filter:alpha(opacity=100) !important;opacity:1 !important;zoom:1;}

請試試看

M6 replied in 2011/02/23 20:29

#13 語 on 2011/02/26 20:00
我想問怎麼把回應噗浪訊息的框給加大?還有發噗區能淡化嗎?(不是隱藏喔)
謝謝
/*發噗輸入區*/
textarea#input_big,
textarea#input_permalink,
textarea#input_big.content
{
min-height:60px; /*加高*/
filter:alpha(opacity=70); opacity:0.7; zoom:1; /*透明度*/
}

/*浪上的噗回應輸入區*/
td.td_cnt textarea,
textarea#input_small
{
min-height:80px; /*回應框加高*/
line-height:18px; /*行距加高*/
}
M6 replied in 2011/02/26 20:08

#14 語 on 2011/02/27 12:18
你好，又來向你請教了XDD
我想問左下角噗浪的檢視能自己改顏色嗎?如果可以我還想淡化
河道裡有幾人回應也能改嗎?
/*更新通知*/
#updater
{
filter:alpha(opacity=70); opacity:0.7; zoom:1; /*透明度*/
}

#updater .text {color:# !important;} /*則數*/
#updater a, #music_player a /*更新檢視*/
{
color:# !important;
}
#updater a:hover, #music_player a:hover /*滑鼠移至效果*/
{
color:# !important;
}

放入想要使用的色碼就可以了。

/*浪上的噗回應數*/
.response_count
{
background:# !important;
color:# !important;
}
.new .response_count /*新回應*/
{
background:# !important;
color:# !important;
}

M6 replied in 2011/02/27 12:42

#15 草野輝 on 2011/02/27 17:03
你提供的語法真的很棒~
先謝一下XD"
想問問~怎麼把發噗區的背景也調成透明的?
下面資料的地方已經成功了，但發噗區那邊怎麼試都失敗QAQ
拜託了Q___Q
還有一個小小小小的問題..應該是我太笨吧..
圖片大小要怎麼調=口= !?
右邊跟下面都有空白處說..
謝謝Q口Q ((磕頭
背景圖的問題可以參看這篇文章：http://m66660000.pixnet.net/blog/post/33484372

發噗區的語法可以參看 http://m66660000.pixnet.net/blog/post/33949873 的第四點 (4) 隱藏發噗區
背景透明的方式，是指拿掉背景： background:none !important;
或是放上透明的背景圖？： background: url(透明背景圖網址) !important;
試試看哪種是你要的效果囉～ ^w^

M6 replied in 2011/02/27 19:12

#16 語 on 2011/02/27 18:46
那個我遇到瓶頸了QAQQ
1.噗浪人氣指數那邊我不曉得他的語法
是否可以提供一下，這樣我好更改顏色
2.河道上噗浪外圍的框框我也想改顏色
然後噗下面的回應區要怎麼換顏色
對不起，今天兩次跑來問問題
還是感謝你的回答
1. 人氣指數？是指“所有訊息”那一列嗎？語法項目是：
#filter_tab a.off_tab {} /*未選*/
#filter_tab a.filter_selected {} /*正選*/
2. 浪上的噗項目是 .plurk_cnt {border-color:# !important;} /*框線顏色*/

相關項目的查詢可以參看這篇：http://m66660000.pixnet.net/blog/post/30684480
M6 replied in 2011/02/27 19:19

#17 草野輝 on 2011/02/27 20:01
真是太感謝你了@0@ !!
這是最後一個問題了~~
拿掉背景圖那個指令要貼在哪=口=??
直接貼在讓"發噗區透明"的指令裡面沒效果XDD"

那個貼上透明圖不懂，我的理解只到白色的，還沒進化到透明的=___=
放棄0口0"
.plurkaction,
#toggle_tab li.tt_selected
{
background:none !important; /*去背景*/
border:0 !important; /*去框線*/
}

使用.png或是.gif透明的圖片當作背景圖，就會呈現有背景透明的效果，拿掉背景就是「無背景」，沒有底色也沒有圖片。
M6 replied in 2011/02/27 21:29

#18 語 on 2011/02/28 11:33
不是所有訊息那邊，是卡馬下方的統計
對不起，我表達方式錯誤
我看到有些噗浪樣式的噗字體也會有顏色
請問在哪裡做修改?
謝謝~~~
/*統計項目*/
#dash-stats table th
{
color:# !important;
}
/*數值*/
#dash-stats table td
{
color:# !important;
}

/*噗文字內容*/
.td_cnt .text_holder
{
color:# !important;
}
M6 replied in 2011/02/28 18:10

#19 草野輝 on 2011/02/28 11:34
謝謝^皿^
^ W ^
M6 replied in 2011/02/28 18:11

#20 Aki Tanaka on 2011/03/02 07:47
非常謝謝你喔= w =
^ W ^
M6 replied in 2011/03/02 09:55

#21 貓貓 on 2011/03/04 22:03
不好意思,想請問一下..
回河道上的噗的時候粗然發現沒有分享圖片那一排耶
那個要怎麼弄出來呢??
把語法中 /*分享功能列*/ 那一段刪除就可以了
M6 replied in 2011/03/05 10:23

#22 貓貓 on 2011/03/05 23:46
謝謝你^^

#23 曾小玉 on 2011/03/13 03:00
想請問一下

為什麼我把加入好友按鈕隱藏起來了別人還是可以加我囧
還是可以透過噗浪的「朋友推薦」加好友，在「尋找/邀請朋友」功能中，噗浪會顯示推薦加入好友的名單
M6 replied in 2011/03/13 12:22

Private Comment

Private Comment

#26 lovechul710 on 2011/03/28 11:29
謝謝你^^ 我成功了~~~:D

#27 訪客 on 2011/04/08 23:28
不好意思想請問如何把河道上的噗設成半透明的謝謝
.plurk_cnt
{
filter:alpha(opacity=80) !important; opacity:0.8 !important; zoom:1;
}

80 0.8透明度數值可以自行調整
M6 replied in 2011/04/09 15:18

#28 s on 2011/04/10 11:15
請問河道上都有一條一條的垂直線 (不是換日線
那個要怎麼隱藏呢?

感恩!!

#29 S on 2011/04/10 11:18
啊 ~ 我找到了不好意思 :)

#30 訪客 on 2011/04/12 21:43
請問背景圖較小張，要如何把他放大填滿於視窗呢?
可以參考 http://m66660000.pixnet.net/blog/post/33484372 這篇
M6 replied in 2011/04/13 11:28

#31 LUO PEI YUN on 2011/04/14 18:56
如何隱藏噗寶 ..
就是那個很醜在右上角的東西
#dynamic_logo, #logo img, img#creature
{filter:alpha(opacity=0); opacity:0; zoom:1;}
M6 replied in 2011/04/14 19:49

#32 小可 on 2011/04/26 01:13
你好我照您的解說都隱藏的差不多了
剩下
1."發噗的輸入文字區域上方的"PLURK"(搜尋隱藏了)
2.最下方切換語言
3.最下方copyright 那兩行
這三個地方隱藏不了
請問版主這幾個的語法怎麼打呢?
語法項目是：
/*頁籤*/
#toggle_tab li.tt_selected {}

/*頁尾與語言選單*/
#footer {}

將透明度語法使用在 {} 中即可
M6 replied in 2011/04/26 11:37

#33 長城桃子 on 2011/05/08 14:22
#timeline_holder
請問這個就是拿掉時間軸的意思嗎
還是要把這條拿掉?

我是新手:P
如果要拿掉時間軸（河道）的背景，將
#timeline_holder
{
background:none !important;
border:0 !important;
}
這整段貼入「自訂佈景風格」欄位中，
然後按下方「儲存與更新」按鈕就可以了。

M6 replied in 2011/05/08 18:36

#34 JAN on 2011/06/17 08:58
不好意思,

請問我設頂了隱藏時間軸的語法,

但我的時間軸來是呈現白色的

http://www.plurk.com/chan4403

還有,請問可以將河道的圖設定成不重複嗎(能置頂,置中或靠右之類的)?

還是只能找夠大的圖片?
河道背景圖的語法：

#timeline_holder
{
background:url(這邊放圖片網址) left top no-repeat;
}

left top 就是靠左置頂對齊
no-repeat 就是不重複

如果語法沒生效，可能是css內容中其他部分有重複或影響到，請檢查一下
M6 replied in 2011/06/17 11:42

#35 愛" on 2011/07/15 00:18
你好~~感謝你分享這麼簡單易懂的語法 ^^
可是我主控台的背景一直都去不掉耶~~
困擾我了
謝謝你~~

#36 愛" on 2011/07/15 00:30
不好意思~~
我找到可以把主控台透明化的語法了
謝謝你~~

#37 yokomi~ on 2011/07/25 11:39
您好~
想向您請教一些語法......

*如何把朋友&粉絲蓋起來(不是隱藏!)滑鼠移過去才會出現
(EX:文章裡的第一個圖的朋友&粉絲)就是就去碰圖片才會依依出現那個人的
介紹的語法 ?
/*-----朋友粉絲圖像-----*/

.user_link img /*透明度變化*/
{
filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}
.user_link img:hover
{
filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}
M6 replied in 2011/07/25 18:45

#38 雪里 on 2011/07/27 17:46
你好w
我套用了上面的CSS,
並添加了這個語法改背景↓
body, html
{
background:url(http://i.imgur.com/hTeQj.jpg) left top no-repeat;
}
但圖片並沒有出來囧
(仍是一片慘白的噗浪→http://www.plurk.com/_yolk)
請問是哪裡出了問題呢OAO
麻煩你了!! 謝謝!!
因為在後面的語法中有重複使用到這段：
/*-------------------------------畫面佈景-------------------------------*/

body, html
{
background:url() left top no-repeat;
background-color:#FFF;
font:300 12px/18px Arial,Tahoma,sans-serif;
}

所以請把要使用的背景圖網址直接貼至這裡的()中即可
M6 replied in 2011/07/27 17:57

#39 ciao on 2011/07/27 18:35
你好我想請教個問題
為什麼有時候改完CSS按下儲存會沒有反應然後出現一大篇英文字
之後噗浪就變成一整片英文字 @@?
而且要過幾分鐘才可以恢復這是甚麼情況??
應該是因為噗浪主機回應出現問題，所以無法成功儲存，建議自訂佈景時要使用"在新視窗開啟"這個功能(在自訂欄位右上角)，這樣就不會影響到原來噗的使用囉～
M6 replied in 2011/07/27 19:19

#40 喵喵 on 2011/07/29 12:12
不好意思~那個!我是新手
可不可以請大大將以上這些教學整理成一篇語法?
因為我還是搞不太清楚什麼東西在哪裡~= =|||(新手一枚
圖我有放上去了
一切都很好
但是唯一的缺點是~
發噗區還有大家放噗(不知道那要叫什麼)的地方都隱藏不了~QAQ
文章中有提到發噗區的語法囉～
複製貼上即可。

大家放噗的地方，是指河道（浪）上的噗嗎？
可以參考一下這篇文章中的語法：
http://m66660000.pixnet.net/blog/post/30919028

多多嘗試，很快就會熟悉每個語法項目代表的部份的～ ^ ^
M6 replied in 2011/07/29 14:30

#41 害臊君SHY on 2011/08/01 11:25
超喜歡您噗浪的設計!! 感謝你的教程,
我也照著您的實習了一下,
只是對於淡入效果方面, 我想問一下,
使用了「淡入語化」以後，能不能再加上隱藏語法?
即是滑鼠未移至前就會隱藏, 移到了,就會回復「淡入效果」,
而不是一般實色一下子就變「實白」的效果 (透明度100%)

如果有這種語法, 我想應用於全個噗浪面版
會很複雜嗎( TT_TT)???
抱歉為你添麻煩了OIZ

能夠提供一下語法嗎?>< 感激不盡
有的，CSS3有淡入效果語法：

body /*全頁面淡入過場*/
{
-moz-animation-name:fadeIn;
-moz-animation-iteration-count:1;
-moz-animation-duration:1.5s;
-webkit-animation-name:fadeIn;
-webkit-animation-iteration-count:1;
-webkit-animation-duration:1.5s;
}
@-webkit-keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}
M6 replied in 2011/08/01 12:07

#42 害臊君SHY on 2011/08/01 12:22
抱歉, 又來請教您
－－－－－－－－－－－－－－－－－－

感謝你剛剛提供的語法!!
使用了!~ 有點像電視機剛打開的Feel 呵呵!

剛剛提及到能否將「隱藏語法」及「淡入效果」同時使用呢？
我想要在－＞整個「/*浪上的噗區/*」及「發噗區」都能以這個方式顯示的話
語法又是怎麼樣的呢><?
整個浪上的項目是 #timeline_cnt
發噗區的項目是 div#plurk_form
要使用相同語法效果，上則回應的css內容不變，再加上這兩個項目即可。
如：
#timeline_cnt,
div#plurk_form,
body /*全頁面淡入過場*/
{
.........
}
M6 replied in 2011/08/01 15:48

#43 WS on 2011/08/07 00:41
您好，這篇的教學非常實用呢！
學到了很多東西～

有一點想要詢問一下，當按了檢視X則新回應後，
左下方的顯示會變成"M 全部標為已讀 V 顯示所有訊息"
如圖：
http://images.plurk.com/044307558c8e0d3b91901b040682ff24.jpg
請問這部份的連結顏色該如何更改呢？
#updater a
{
color:#ccc !important;
}

#ccc是淺灰色，可改其他顏色色碼
M6 replied in 2011/08/07 12:00

#44 cindy930526 on 2011/08/11 19:27
想請問一下怎麼讓我發出去的噗上的連結網址是其他顏色而不是一樣是黑色只是加底線而已謝謝~
指的是暱稱部份的連結嗎？語法：

.list .highlight_owner .td_qual a /*暱稱*/
{
color:#999 !important; /*文字顏色*/
text-decoration:none; /*去除底線*/
}

#999 是淺灰色的顏色代碼，可選其他顏色置換
M6 replied in 2011/08/11 21:13

#45 cindy930526 on 2011/08/28 20:16
不是暱稱..
是這個 http://images.plurk.com/17975bb21914e7b9223257aa005fa829.jpg
是想讓他變成其他顏色~
改 /*-----噗上的連結-----*/ 那段的
color:#363437 !important;
改成其他顏色的色碼即可。
顏色代碼可參考這網站：
http://www.colorschemer.com/online.html

M6 replied in 2011/08/28 20:29

#46 海衣 on 2011/08/30 10:08
不好意思我想請問一下
http://www.plurk.com/HyukMii
http://www.plurk.com/tina90029_Pei
這兩個背景圖都是一樣大小
為什麼上面那個下面會有白白的
下面那個沒有
因為有使用背景圖固定的語法，
可以參考這篇文章來修改：
http://m66660000.pixnet.net/blog/post/33484372

M6 replied in 2011/08/30 12:35

#47 海衣 on 2011/08/30 19:37
真的很感謝你^^
我已經用好了:)
^ x ^
M6 replied in 2011/08/30 22:57

#48 小環 on 2011/09/20 22:38
謝謝你喔還有樓上發問的大大:)

我試過上面的語法(在滑鼠未移至前隱藏的那個)..但是''朋友''框下面的
''邀請或尋找更多朋友''的框..依然還在..。
請問可以把它弄掉嗎?
可以參考這一篇：
http://m66660000.pixnet.net/blog/post/33556393

M6 replied in 2011/09/20 23:07

#49 小環 on 2011/09/22 22:29
謝謝你:)
OK了呢~

#50 樂小天 on 2011/09/23 13:51
你好!!因為你讓我略懂CSS的語法，想請教您我不知道改到什麼!!表情符號的框框變的好大!!如何讓他變正常呢??!!
回覆在你的私噗囉～ ^^
M6 replied in 2011/09/23 16:48

#51 訪客 on 2011/09/27 19:55
你好~
不好意思想請問一下> <"
撲浪回覆前
每個人發的撲最右邊那個顯示有幾人回覆的底色能改嗎?QAQ
可以啊，
.new .response_count
{
background:#fff !important;
}

填入你想使用的色碼即可，#fff是白色。色碼數字參考網址：http://www.colorschemer.com/online.html

M6 replied in 2011/09/28 15:47

#52 煉 on 2011/10/02 16:43
您好，先謝謝您Blog詳盡的教學^^
想請問幾個問題，就是我的噗浪表情圖示那邊打開之後會偏掉，我該如何修回來？
然後語助詞的部分我想把它改成圓角框框的樣式，但我複製了之前有圓角框的版型語助詞部分的CSS好像沒有作用OTL另，有可能將回復別人時的人名連結也改成圓角框樣式嗎？
謝謝您@@"
前兩個問題之前有發文說明過相關項目，可以參考看看：
1. 表情選單：
http://m66660000.pixnet.net/blog/post/35420732
2. 語助詞：
http://m66660000.pixnet.net/blog/post/33483588

回覆時的暱稱連結圓角樣式，語法：
/*回應中的暱稱*/
.text_holder a.ex_link[href*="www.plurk.com"]
{
color:# !important;
background:# !important;
margin: 2px !important;
padding: 1px 3px !important;
border-radius: 4px;
text-decoration:none !important;
border:0 !important;
}
.text_holder a.ex_link[href*="www.plurk.com"]:hover
{
color:# !important;
background:# !important;
text-decoration:none !important;
border:0 !important;
}

填入要使用的色碼即可
M6 replied in 2011/10/02 16:53

#53 氷 on 2011/10/11 15:57
白色的版型拿走了~感恩~
: )
M6 replied in 2011/10/11 16:38

#54 MOI on 2011/10/14 19:28
先感謝你這麼仔細的解說:)
那個，我以白色版型來做修改
背景我弄了好久都顯示不出來，我不知道是不是哪裡出了問題。

body, html
{
background:url(http://i.imgur.com/RY1mz.jpg) left top no-repeat;
}

然後時間軸的背景我也有拿掉。
希望妳能替我解答，謝謝:)
這句語法本身沒問題，
沒辦法顯示的原因可能是其他語法的影響，要檢查看看整體語法內容有無錯誤了...
可以發私噗給我，我幫你檢查看看：http://www.plurk.com/66660000

M6 replied in 2011/10/14 22:33

#55 MOI on 2011/10/15 18:01
不好意思我弄很久我才知道是要修改而不是整個拿掉時間軸的語法。
這個沒問題了:) 不好意思還麻煩你

那個，背景圖片怎麼弄到河道中間呢？
body, html
{
background:url(http://i.imgur.com/RY1mz.jpg) left top no-repeat;
background-color:#000;
font:300 12px/18px Arial,Tahoma,sans-serif;
}

是要修改哪個部份嗎
把 left 改成 center 即可
M6 replied in 2011/10/15 20:19

#56 Shin on 2011/10/20 22:16
我想請問：
1.如何把上次登入的時間完全隱藏?
2.怎麼把plurk buddy從好友中刪除?

謝謝^^
那就需要把統計資料表欄位整個隱藏起來了，語法：
#dash-stats table
{
display : none ;
height:0 !important;
width:0 !important;
overflow:hidden;_overflow:none;
position:fixed;
top:-9000px;
filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}

plurk buddy 是噗浪預設出現的『小幫手』
似乎無法刪除喔
M6 replied in 2011/10/21 10:47

#57 Shin on 2011/10/21 20:45
謝謝你的回答，設定成功囉^^
: )
M6 replied in 2011/10/21 20:55

#58 Spica on 2011/10/25 20:18
不好意思，請問我該放哪呢？
我想讓主控台（朋友、粉絲、介紹）那邊透明化，指到時再顯示
請問我該怎麼用？
感謝:))
在頁首"編輯" > 個人檔案設定的"自訂佈景"裡面，將語法內容放入「自訂佈景風格」欄位，然後按儲存並更新即可。

語法：
/*透明度變化*/
div.dash-segment
{
filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}
div.dash-segment:hover
{
filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

M6 replied in 2011/10/26 18:57

#59 Spica on 2011/10/26 18:06
那個，我放進去了，但沒有差別...
上則回覆裡少了一個 " { " ，修正後的語法：
語法：
/*透明度變化*/
div.dash-segment
{
filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;
}
div.dash-segment:hover
{
filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;
}

M6 replied in 2011/10/26 18:58

#60 Spica on 2011/10/26 19:47
放上去後還是沒有變化
這是我現在的噗浪http://www.plurk.com/spicaHK
沒有變>"<
抱歉又打擾X(
咦你現在用的噗版已經有透明度變化了ㄛ
還是說你使用的瀏覽器無法解讀並呈現？

M6 replied in 2011/10/26 21:31

#61 Spica on 2011/10/27 17:27
現在OK囉（是因為我換上你的樣版了）
那請問我要怎麼換背景圖+顯示出來（主控版）的顏色呢？
背景圖的位置是在 html { } 裡
主控台是 div#plurk-dashboard { }
而各資料區則是在 .dash-segment .segment-content { }

改其中的 background: ; 語法就可以囉

M6 replied in 2011/10/28 23:15

Private Comment

#63 syohann on 2011/10/31 21:03
請問一下要如何換噗浪背景,
因為昰用你們已經設定好的背景,
可是我想變更成自己喜愛的背景,
不知道可不可以換?
如有冒犯到請告知,謝謝!!!!
自己使用的話修改css是沒問題的喔，
換背景修改語法的方式這篇文已經有說明了，
請試試看。
M6 replied in 2011/10/31 22:00

#64 真是搭 on 2011/11/07 19:29
http://www.plurk.com/s3746770

這是我的噗浪
我河道上的噗前面有我的照片
要怎樣才可以把那個弄掉呢
把大頭貼隱藏起來嗎？
語法：
/*浪上的頭貼*/
.p_img { filter:alpha(opacity=0); opacity:0; zoom:1;}
M6 replied in 2011/11/07 22:16

#65 冷凍葡萄 on 2011/11/24 20:03
請問有沒有甚麼辦法
可以讓河道隱藏起來的同時
噗浪消音的時候的效果不會消失？

因為我河道原本消音之後會比沒消音的更透明
但是當我把河道隱藏的語法貼上去之後
那個效果卻不見了
請問有讓他們兩個效果並存的發法嗎？
兩個語法應該不會互相抵觸，或許調整透明度試試看？可能是消音效果設定的透明度比隱藏時的透明度更顯著，例如消音設20%，但隱藏設10%，這樣看起來就會等於沒有效果囉～
若還是不行，請發私噗給我，我幫你看看你的語法內容。
我的噗浪：http://www.plurk.com/66660000

M6 replied in 2011/11/24 20:17

#66 冷凍葡萄 on 2011/11/24 20:42
噢真的可以了！
感謝你！！！！！
:D
M6 replied in 2011/11/24 21:03

#67 訪客 on 2011/12/08 23:45
請問要怎麼改變對話時暱稱的顏色?
可以參考這篇： http://m66660000.pixnet.net/blog/post/35438651

M6 replied in 2011/12/09 19:05

Private Comment

#69 iko on 2011/12/21 17:34
您好：
謝謝您分享的語法~
我幾乎成功改出所有我想要的了(感動
唯一不行的是....我想把河道上的所有訊息都隱藏(或是變很淡)
滑鼠過去才會全部顯示~
(像這樣)http://www.plurk.com/chainleast
請教該如何修改呢？
非常感謝您m(_ _)m
可以參考這篇：http://m66660000.pixnet.net/blog/post/30919028
M6 replied in 2011/12/21 23:07

#70 iko on 2011/12/22 12:21
我終於成功了!!!
真的非常感謝您的幫忙~
CSS語法博大精深啊>"<
:D
M6 replied in 2011/12/22 14:24

#71 はせがわこばと on 2011/12/26 19:22
我時間條怎麼隱藏，就是有一條黑線卡在那.....一直切割我的背景圖QQ
像這樣: http://www.plurk.com/linrojane
請問該怎麼修正才好...?
時間軸框線要設 0 喔，語法：
#timeline_holder {border:0 !important;}

M6 replied in 2011/12/26 20:12

#72 A M on 2011/12/27 04:37
您好，不好意思打擾您了>< 有些噗浪CSS的問題想請教您

因為很習慣將版面的統計資料跟朋友粉絲都隱藏起來，只留下頭像和自介。
目前是用您的作品二月二的樣式，我很想將自介的敘述文字出現在頭像右邊（有點像是您的作品SPOT LIGHT那樣子）
試了很久，但統計那大格雖然隱藏起來還是有框架固定檔在那裡O Q

另外還想問能不能夠將加好友的按鈕移動到傳送私人訊息按紐的位置下面呢?
最後一項是想問這個樣式的所在地不知道為什麼無法隱藏起來…><

不好意思我的問題真的非常多，希望我的敘述能讓您理解orz...謝謝!!!
SPOT LIGHT 是用固定位置（position:fixed !important;）的方式指定版面的排列，指定了 #dash-profile (頭貼跟姓名區) p#about_me (關於我) #karma_holder (卡馬區) 還有各按鈕的位置，加好友的css項目名稱是 .friend_man.add_friend，建議你可先套用 SPOT LIGHT 參考各區位置設定後，再試著改改看現用的版面喔～原本修改的版本記得先備份～
^ ^

所在地的項目名稱是 #location，設隱藏語法{ display : none; } 即可。

嘗試後還有問題的話，可以發私噗給我，我到你的版面再幫你看看。我的噗浪： http://www.plurk.com/66660000

M6 replied in 2011/12/27 19:27

#73 月島薰 on 2012/01/02 21:17
對不起我想問一下如何把河道上的按鈕變成透明的呢?
河道上的按鈕是指？
M6 replied in 2012/01/02 21:58

#74 月島薰 on 2012/01/03 05:13
http://images.plurk.com/54815ab6d2c7e2f903bb2e7b62863b23.jpg就是這個按鈕我的只有一邊隱藏到另一邊沒有請問將這個按鈕變透明的語法是甚麼謝謝
/*往前往後*/
.browse_button {filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}

M6 replied in 2012/01/03 09:05

#75 王馨宜 on 2012/01/07 01:12
不好意思請問一下，
為什麼我把背景網址貼上，然後把時間軸背景換掉，按儲存並更新之後，畫面卻還是白了呢@@?
要檢查語法內容才知道可能的問題，你可以發私噗給我，我再到你的噗看看，我的噗浪：http://www.plurk.com/66660000
M6 replied in 2012/01/07 11:53

#76 我愛羅 on 2012/01/18 09:25
您好!!!
想請問一下~
我把主控台隱藏後為什麼有些東西還是留著呢
http://www.plurk.com/garra713 我噗浪
像是卡馬值.外框線.尋友欄.
還有下面的切換語言和copyright那邊>"<
這裡的主控台隱藏語法是整體隱藏，滑鼠移至後再出現，
:hover 就是滑鼠移至的意思，
如果不希望留有資訊，就不用放 :hover 那行喔。

切換語言和copyright屬於頁尾的部份，並不是主控台的項目，
建議先確認好想隱藏的項目的css名稱後，再套用語法比較適當。

M6 replied in 2012/01/18 12:50

#77 我愛羅 on 2012/01/18 09:30
還有一個問題~
要怎樣才能把河道上的噗框加大呢??
之前有套您這個語法
/*浪上的噗回應輸入區*/
td.td_cnt textarea,
textarea#input_small
{
min-height:80px; /*回應框加高*/
line-height:18px; /*行距加高*/
}

但好像還是沒變@@
還是是我套錯了囧rz
這一段是指打開浪上的噗後最下方的輸入回應的欄位，你要加大浪上的噗框，
項目名稱是 .plurk_cnt ，可以用 padding:4px 加大間距的語法試試看。
M6 replied in 2012/01/18 12:57

#78 helix chen on 2012/01/19 11:19
不好意思，我一個小問題想要請教...
我有套用你的「蘇摩訶＿」這個版型，
我想在自介的地方加上連結，
但不知道是不是版型的問題，
讓自介那邊沒有產生連結...
不知道是不是語法上衝到了....
我套用後是正常顯示的。語法應該不會影響到功能連結的設定ㄛ
建議可以詢問一下噗浪官方來找出解決方式。
M6 replied in 2012/01/19 20:37

#79 朴小雪 on 2012/01/27 18:11
你好! 我想請教一下
主控台的字要怎麼靠右/左/置中?
河道的左右兩邊的箭頭怎麼改到下面和換形狀
我看到有人是用圓形的
文字對齊的語法是
text-align:right; /*靠右*/
text-align:left; /*靠左*/
text-align:center; /*置中*/
放到欲使用的段落項目中即可
主控台整體是 #plurk-dashboard

/*往前往後箭頭*/
.cmp_arrow_right
{
background:url(放要使用的圖片網址) no-repeat;
width:px; height:px; /*圖片寬高*/
margin:2px;
}
.cmp_arrow_left
{
background:url(放要使用的圖片網址) no-repeat;
width:px; height:px; /*圖片寬高*/
margin:2px;
}
.cmp_back_to_today
{
background:url(放要使用的圖片網址) no-repeat;
width:x; height:px; /*圖片寬高*/
margin:2px;
}

M6 replied in 2012/01/28 21:18

Private Comment

#81 HongYuen Polly on 2012/02/16 08:11
你好~~ 我有東西想請教~~
當我換了河道的背景圖後, 因為圖比原先大.. 所以河道變寛了
河道上的"今天", "昨天", "2天前"... 我都成功改到新的位置 (因為河道寛了現在的位置比之前低)
而滑鼠指著噗的時候顯示的發噗時間也可正確在新位置顯示
但是本身在河道裡的時間卻還是在舊的位置 (在換了更大的圖後那些時間變了在河道的中間)
請問要如何更改呢?
謝謝~~
/*調整時間軸高度*/
#timeline_holder, #timeline_cnt, #timeline_bg, #timeline_fg {height: px !important;}

M6 replied in 2012/02/16 13:32

#82 HongYuen Polly on 2012/02/16 13:43
本來已經有這個了.. 還是不行耶..
那這個呢？
day_bg .div_inner,.div_inner {height: px !important;}
M6 replied in 2012/02/16 15:32

#83 HongYuen Polly on 2012/02/16 15:49
也有啊... 還是不行 T^T
哈.. 我還是把整個時間弄走好了
anyway.. 謝謝你呢 ^^
^ ^
M6 replied in 2012/02/16 18:41

#84 戀雨天 on 2012/02/17 12:23
請問一下...是否有
隱藏所有訊息標籤列但滑鼠移過去又出現的語法?
#filter_tab {filter:alpha(opacity=0) !important; opacity:0 !important; zoom:1;}
#filter_tab:hover {filter:alpha(opacity=100) !important; opacity:1 !important; zoom:1;}
M6 replied in 2012/02/17 13:37

#85 墨月清 on 2012/02/19 16:51
不好意思請問有把大頭貼下的文字換顏色的語法嗎？
謝謝^ ^
#dash-profile
{
color:# !important;
}

填入要使用的顏色代碼即可。
M6 replied in 2012/02/19 20:22

#86 fu6hl3 on 2012/02/20 17:55
請問關於背景圖
若要靠"右上"對齊該怎麼辦？
（只找到靠右或靠上的T^T）
右上就是 right top
寫法是 background:url(這邊放圖片網址) right top no-repeat;
M6 replied in 2012/02/20 22:07

#87 墨月清 on 2012/02/20 21:34
啊啊不好意思，還有自介和感情婚姻狀態那邊也想改顏色。
麻煩你了，謝謝^ ^
顏色語法一樣，查詢css項目名稱的話可以參考這篇：
http://m66660000.pixnet.net/blog/post/34881317

M6 replied in 2012/02/20 22:06

#88 蒼旭 on 2012/04/08 01:34
不好意思.我試著照上面有的想要試著用用看滑鼠移過去才會顯現的好友欄語法了.不過她沒有任何變化欸....(YAY)
哪一段語法呢？要檢查語法內容才知道是否有錯誤ㄛ
M6 replied in 2012/04/08 11:05

#89 利亞 on 2012/04/25 21:46
請問要做成背景圖的圖片一定要放到圖片分享網站上嗎？
如果有自己的ftp空間，或其他可上傳圖片、產生直接連結網址的空間，都可使用
M6 replied in 2012/04/26 08:13

#90 小批 on 2012/04/28 23:27
不好意思請問這種的噗版要怎麼換背景圖?
http://www.flickr.com/photos/m66660000/6286493200/in/pool-1124670@N20/
因為我沒看到原本背景圖的網址
此版面的背景圖是放在時間軸項目裡，
/*---------------時間軸*/

#timeline_holder
{
background:#000 url(圖片網址) left top no-repeat;
}

改這段的網址即可。
M6 replied in 2012/04/29 08:30

Private Comment

#92 Lan on 2012/05/06 19:02
謝謝您^_^

Private Comment

Private Comment

#95 忘。 on 2012/05/08 17:36
呵呵~
謝謝你們!!
都解決了XD~

還有喔~
你們的樣式真的好看!!
請繼續加油 :)~
:D
M6 replied in 2012/05/08 19:13

#96 暮陽 on 2012/05/08 23:05
請問主控台區，可以保留個人資料與頭像，其他則設隱藏嗎？
試了一下，目前似乎只能全部隱藏？^^"
語法：
#dash-stats, #dash-friends, #dash-fans { display : none !important; }
M6 replied in 2012/05/09 16:22

#97 暮陽 on 2012/05/09 01:11
您好，抱歉再請問一下，請問
「所有訊息(2) 我發表的訊息私人訊息回應過的訊息說讚 & 轉噗訊息」
那個數字2可以改顏色嗎？2底下的底色又怎麼改呢？
我已經改好了旁邊中文字的顏色，但始終搞不定那個數字^^"
語法：
.unread_generic,
#filter_tab a.filter_selected .unread_generic
{
background: # !important; /*底色*/
color: # !important; /*文字顏色*/
}
M6 replied in 2012/05/09 16:26

#98 日爰 on 2012/05/20 10:33
您好，請問如何隱藏個人檔案標題？
把該欄位留空白不填寫就可以了。
在編輯>自訂佈景的個人檔案標題刪除其中內容即可。
M6 replied in 2012/05/20 21:14

#99 Yunsyuan Tai on 2012/05/22 04:45
不好意思~
http://i.imgur.com/gAtiq.jpg
請問一下,如附圖,可以保留下面粉色的時間,可是隱藏掉上面褐色的"今天"跟日期嗎??謝謝><!!
直接使用隱藏語法在日期項目即可。
語法：
.day_start .bottom_start {filter:alpha(opacity=0); opacity:0; zoom:1;}
M6 replied in 2012/05/22 11:13

Private Comment

1 2 »

搜文其文

Free+

111111_
bemyselfinc
masaxline
m66660000
m6.posterous

心文心路

類別別類

存在之書 (3)

真實ㄓ境 (6)

這是一個 Flickr 徽章，顯示來自 MASATLFOV 6.0 的公開相片和視訊。在此處製作你自己的徽章。

金羽銀華

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

版權所有＋保留所有權利＿＋＿＋＿