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

這陣子,噗浪真是一直在做一些小變動啊~

新增了「自訂表情」的功能,「換行」的功能,「刪除線」等的格式功能~

另外,還把分享影音圖文的預設樣式也變更了~

圖片外框.png  

圖片的框框加上圓角跟底色,顯得有些多餘且突兀...

部落格與影音分享的轉貼連結,也多了顯示圖片、文字連結、左列框線等的樣式設定~

部落格分享.png

貼音樂有連結文字.png  

而原本轉噗會出現的那列轉噗者名單,則好像已經拿掉了。要看自己轉噗的訊息,現在點時間軸右下方"說讚&轉噗訊息"就可以看到了。

當個人檔案填寫滿90%,就會出現自訂表情的功能列:

自訂表情列.png

點新增會跳出自訂視窗:

新增表情視窗.png  

這些許許多多的小更動,也都有相應的css可以自訂改變它呈現的樣式,上面的圖片有些是已經改好後的樣子,想看看噗浪原本預設的樣貌?先暫時清除掉自訂樣式內容就可以看見了~ ^ ^

接下來就列出相關的語法項目,請需要的朋友試著自己修改看看~

/*======================== 表情選單 ========================*/

#emoticon_selecter   /*選單背景*/
{
    border-color:#ccc !important;
}
#emoticon_selecter .upper_arrow  /*向上箭頭符號*/
{
    background-image:none !important;
}
#emoticon_selecter #emoticons_tabs ul  /*顯示所有選單*/
{
    overflow:visible !important;
}
#emoticons_show  /*圖片背景*/
{
    padding:4px;
    padding-top:10px!important;
    border-top:0 !important;
    width:422px !important;
}
#emoticon_selecter img, #emoticon_selecter a:hover img {border:0 !important;}
#emoticon_selecter #emoticons_tabs {padding:6px 0px 0 !important; }
#emoticon_selecter #emoticons_tabs   /*標籤列*/
{
    background:none !important;
    border-color:#fff !important;
}
#emoticon_selecter #emoticons_tabs li    /*標籤*/
{
    background:#eee !important;
/*555 url(http://statics.plurk.com/c4d8bf5acae8b6e882a1d0cb1c6734fc.png) repeat-x*/
    border:0 !important;  /*c1d0d7*/
    background:#eee !important;
    font-size:83% !important;
}
#emoticons_tabs ul li a   /*連結*/
{
    color:#888 !important;  /*8099ad*/
    font-weight:normal !important;
}
#emoticon_selecter #emoticons_tabs li.current   /*正選標籤底色*/
{
    background:#fbfbfb !important;
}
#emoticons_tabs ul li.current a  /*正選連結*/
{
    color:#222 !important;   /*133d5f*/
}
#emoticons_show .red_link  /*額外 連結*/
{
    background:none !important;
    font-weight:normal;
    font-size:11px;
    color:#ccc !important;
    text-decoration:none !important;
}
.emo-manager  /*自訂表情列*/
{
    background-image:none !important;
    background:#111 !important;
    padding: 0 !important;
    margin-top:-10px !important;
    border:0 !important;  
}
.emo-manager .emo-pool-paging
{
    padding-top: 8px !important;
}
.emo-manager .emo-public-pool .emo-wrapper,
.emo-manager .emo-public-pool .emo-wrapper:hover
{
    border:0 !important;  
}
#emoticons_show input.orange-but    /*自訂表情新增按鈕*/
{
    background:#333 !important;
    border-color:#111 !important;
    font-size:12px !important;
}
.emoticons_my .add-emoticon-panel div.popup   /*新增視窗*/
{
    background:#111 !important;
    border-color:#333 !important;
    font-size:11px !important;
    color:#fff !important;
    width:340px;
}
.emoticons_my .add-emoticon-panel input.col-right,
.emoticons_my .add-emoticon-panel input.col-right:focus
{
    background:#333 !important;
    border-color:#222 !important;
    font-size:11px !important;
    color:#fff !important;
    width:200px !important;
}
.emoticons_my .add-emoticon-panel .col-left
{
    width:auto !important;
    margin-left: 10px !important;
}
.emoticons_my .emo-manager-message,    /*自訂表情說明*/
.emoticons_my .emo-manager-message-small
{
    color: #777777;
    font-size:11px !important;
}


/*-----影音圖片移除外框與底色-----*/

.plurk a.pictureservices img,
.plurk a.pictureservices:hover img,
.youtube img, .youtube:hover img
.video img, .video:hover img,
.pictureservices img, .pictureservices:hover img
{
    margin-top: 0px !important;
    padding: 0px !important;
    background: none !important;
    border:0 !important;
    -moz-border-radius:0px !important;
    -khtml-border-radius:0px !important;
    -webkit-border-radius:0px !important;
}

 

/*-----影音圖文分享連結區塊-----*/

.plurk a.oembed, .plurk a.oembedmeta, a.ex_link div.blog, .plurk a.youtube.video
{
    background:none !important;
    border-color:#7be !important;
}

 

 

懷念以前貼上影片連結時,單純只出現縮圖,滑鼠移至才會出現說明視窗的樣子嗎?

使用下列語法可以隱藏多出的連結文字跟框線:


/*-----把影片連結字藏起來-----*/

.plurk a.youtube.video
{
    font-size:0px !important;
    text-decoration:none !important;
    border:none !important;
}


使用後像這樣:

滑鼠移至.png  

 

調整看看,瞭解各部份語法對應呈現的區塊與方式吧  

文章標籤
創作者介紹
M6

金羽銀華

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


留言列表 (13)

發表留言
  • 白白你狐說
  • 你好,
    我想請問為什麼我的按鈕都顯示不出來@@
    http://i.imgur.com/9WPCz.jpg
    像上面這張圖一樣
    看不到新增的按鈕...
  • 咦?
    是有添加了什麼自訂語法內容嗎? 所使用的瀏覽器是?

    M6 於 2011/08/26 21:02 回覆

  • 白白你狐說
  • 我不確定@@
    我把發撲區域的相關語法都刪除了還是這個樣子...

    我用的瀏覽器是google的

    http://www.plurk.com/installDesign/7944573-18efc4b42b <--這是我的佈景
  • 把 /*搜尋按鈕*/
    input.orange-but { filter:alpha(opacity=0); -moz-opacity:.0; opacity:.0; }
    這行語法刪掉就可以出現囉~
    因為噗浪按鈕語法沒有分開獨立寫,是共用的...會互相影響說~

    M6 於 2011/08/28 16:08 回覆

  • 白白你狐說
  • 他終於出現了XD
    謝謝你^__^
  • ^ W ^

    M6 於 2011/08/29 19:54 回覆

  • 桐
  • 您好 不好意思我想問一下
    要刪除或新增自訂表情時滑鼠移到上面會出現小視窗不是嗎
    但是我的都不會出來耶@@"
    結果就沒有辦法刪掉自訂的表情
    想請問有沒有語法可以讓它出來>"<
    我有看了一下別的語法 應該沒有調到它的透明度
    謝謝!
  • 嗯,最近自訂表情功能都怪怪的... 似乎後面新增的表情都不會自動出現刪除視窗了...
    而且明明沒改動個人資料,原本已經超過90%可使用自訂表情,一下又說不能使用了......
    應該是噗浪本身的功能設定問題ㄛ
    需要反應給官方,看看有沒有辦法解決 ^ ^" "

    M6 於 2011/12/04 14:23 回覆

  • 桐
  • 不好意思再加問一下><
    http://i1200.photobucket.com/albums/bb323/ts00758579/01.jpg
    圖裡的紅線和紅框部份
    時間軸那條藍線整個很不搭
    下面統計朋友粉絲的底色很明顯跟窗子不一樣 還有它是藍字~"~
    問一下更變的語法..
    麻煩你了>_<!!
  • 時間軸那邊的框線是
    #bottom_line
    {
    border-bottom:0 !important;
    }

    統計朋友粉絲的標題是
    #dash-stats h2, #dash-friends h2, #dash-fans h2
    {
    background:none !important; /*拿掉背景*/
    color:#000 !important; /*字顏色*/
    }

    M6 於 2011/12/04 14:27 回覆

  • 桐
  • 謝謝我了解了^++^
    但是時間軸那個直接加上去嗎?沒有用耶
    藍線還是在@@ 是不是有規定要放哪?
    統計朋友粉絲那裡 朋友粉絲都OK了 但是統計還是維持原樣的說XD?
  • 時間軸的底線或許是這個項目的?
    #timeline_holder
    {
    border-bottom:0 !important;
    }

    統計的話用
    #plurk-dashboard h2
    {
    background:none !important;
    color:#000 !important;
    }
    試試看?

    M6 於 2011/12/04 14:50 回覆

  • 桐
  • 這次終於可以了Q_Q
    謝謝大大>""<!!!
  • :D

    M6 於 2011/12/04 15:02 回覆

  • 桐
  • 不好意思我又來了><
    我的問題真的滿多的XD
    http://i1200.photobucket.com/albums/bb323/ts00758579/02.gif
    上面那排左邊的字我的都是粗體的...
    我想改一般的@@"
    然後上下各有一條灰線...
    我想要隱藏或是改顏色、透明度的..
    (大概是像您的版面那樣><)
    謝謝麻煩了O"O
  • 應該是因為 #top_login 這個項目的css有重複設定背景與框線的問題,要檢查看看,
    背景去除的語法是 background:none; 而去除框線則是 border:0 !important;
    然後粗體的問題用這個語法:
    #top_bar a { font-weight: 300 !important; }

    M6 於 2011/12/04 17:10 回覆

  • 桐
  • 粗體的OK了
    然後#top_login我有找到好多 每段都要放嗎XD?
    謝謝~~
  • 嘗試看看囉,應該是有重複語法的部份,不需要的段落可以刪除ㄛ

    M6 於 2011/12/05 01:40 回覆

  • 桐
  • 了解!謝謝^^"
    線我放棄了因為看起來不會太糟糕XD
  • 邱狄迪
  • 那個請問一下><"
    自訂表情圖的新增視窗跳不出來要怎樣解決呢?
    那是最近才開始跳不出來現象QQ
    謝謝麻煩妳了~
  • 這要反應給噗浪官方喔 最近噗浪怪怪的說......

    M6 於 2012/02/16 18:41 回覆

  • 卓依潔
  • 我想請問一下
    噗浪自訂表情那邊
    網友上傳的那一列不見了
    請問有甚麼辦法可以找回來嗎>_<?謝謝
  • 噗浪取消這個功能很久了喔,可以向噗浪官方反應看看你的希望 ^ ^

    M6 於 2012/11/17 15:52 回覆