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

目前分類:噗浪Plurk (98)

瀏覽方式: 標題列表 簡短摘要

從換背景圖、調整版面佈置,到文字的偏好設定,距離打造專屬的噗浪佈景,又更進一步了。

今天,第三步,我們要來改變「浪上的噗」的外觀與易讀性,

請先套用「範例一」的完成語法,內容在 這篇文章

在改變浪上噗的外觀前,範例一的佈景長這樣:

6設分區圓角與透明度.png

加上浪上噗的語法設定後,它將會長這樣:

範例一的浪上噗.png

整個版面有沒有更協調呢?看起來更舒服、合搭了。

請在範例一的自訂CSS欄位最後面,加上 [ 浪上的噗 ] 語法內容:

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

這幾日噗浪動作頻頻,改了通知背景、改了分享功能、還變過通知音效(後來又改回來),

然後所有的噗標籤也多了未讀紅背景...... 這些改變,是要帶給大家「新鮮感」嗎?XD

 

今天,又出現了新改變,在更新通知那裡,多了「快捷鍵」的提示功能:

U更新.png

英文數字就是快捷鍵,U=更新 V=檢視

M大絕V檢視.png

M=放大絕

 

實際使用上,真的會快速許多,噗浪衝浪變飆浪了~XD

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

在上篇 版面基礎的演練 過後,熟悉了基本佈景項目,我們可以試著進一步調整文字的字型與顏色,

讓每天閱讀的噗浪更耐看些

為了能夠熟悉背景的應用,這次,讓我們換一張背景圖,放在時間軸,從版面的佈局,再練習一遍~

- - 範例二 - -

範例二.png

 

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

本來,噗浪預設紅背景的情況,只有出現在 「每則噗未讀回應數」那邊

每則噗未讀回應數

這陣子,噗浪的「紅背景」,這奇怪的偏好或說習慣,竟然,先是出現在頁首「通知」

通知紅背景.png

現在,連「所有的Plurk/我的Plurk/私人的/回應過的/喜歡的」標籤那邊,都有了......

所有的噗未讀數目的紅底

哎~這是什麼樣的設計偏好啊~XD

 

幸好,還有「自訂CSS」功能,讓我們可以選擇,讓太過明顯張揚的「紅背景」消失~

先就今天出現的「所有的Plurk」標籤的未讀數字 開始~

.unread_generic  /*未讀噗數目*/
{
background:none !important; /*拿掉紅背景吧*/
color:#333 !important; /*預設是白色,淺底色背景請加這行換成深灰色*/
}

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

剛開始接觸噗浪版型,將入門的時候,何處下手比較好呢?要能發展出自己的噗版風格與編寫方式,
首先,簡單的基礎結構,一些些的變化,就能擁有一個獨特的自訂外觀

6設分區圓角與透明度

選好自己想要放的背景圖後,瞭解噗浪的基本結構,就能在基礎的變化當中,找到自己的型和樂趣~

以下列出基本的預設項目,只要掌握這幾處,同一個背景圖就可以變化出各式組合樣貌喔~

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

繼五月份發出的 [ 噗版大變身 ] 建立好用的資源庫與工具=變身基礎功 常練勤更新 這篇文章後,

終於,再次整理過一遍自己常用的CSS。

每隔一段時日根據自己的需要,整理一遍、更新一遍,這樣使用上將更為順手、便利~

SAMPLE GOOD

是我最新版的「基本款」噗版基礎,將這段時日許多新的嘗試、設計風格,放在裡面,

這篇就將常用的CSS項目,新整理過的,放上來,有需要的朋友請參考囉~ ^ ^ +

 

/*常用CSS清單*/
/*Organize by Be Myself Inc. M6*/


各項目以「;」 區隔
加強優先:在項目最後加上"重要"「!important;」

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

在最近幾個版型中,嘗試了一些新的CSS項目,像是表單欄位以及小圖示的變化,
在整體噗版的樣式設計上,使用與色系風格相合搭的選單配色和圖示,將能讓噗版
呈現出更協調的設計感,語言選單、搜尋選項,還有發噗區及回覆區的小圖示,讓我們一一來試著應用看看吧 ^^

 

[ 語言選單 ]

有出現語言選單的地方,一個在頁尾,一個在私密語系選項中,CSS項目分別如下:

1. 頁尾

#languge_selector /*語言選單*/

#languge_selector form select /*尚未展開時的下拉表格欄位*/

#languge_selector form select option /*展開後的表格*/

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

叮叮噹~叮叮噹~鈴聲多響亮~ XD 最近都會不自覺哼起耶誕節相關的歌曲,白色耶誕的氣氛,是越來越濃了啊~

一連作了三個耶誕相關的噗版出來,分享給大家~

 

「懶熊版」

XMAS XMASD

/*------------------------------------------------------------------------
*噗浪版型 Plurk CSS: XMAS XMASD
*設計出處 Design by: Be Myself Inc. M6
*背景圖源 Background image from: (san-x)
*安裝網址 Install: www.plurk.com/installDesign/5807705-fed2ca0a25
*copyright: 版權所有 保留一切權利 All Rights Reserved
------------------------------------------------------------------------*/

 

「明日蛙版」

Merry Xmas JOJO /*------------------------------------------------------------------------
*噗浪版型 Plurk CSS: Merry Xmas JOJO
*設計出處 Design by: Be Myself Inc. M6
*背景圖源 Background image from: (san-x)
*安裝網址 Install: www.plurk.com/installDesign/5807705-d36bd2e7a5
*copyright: 版權所有 保留一切權利 All Rights Reserved
------------------------------------------------------------------------*/

 

「雪人版」

SAHALANDE /*------------------------------------------------------------------------
*噗浪版型 Plurk CSS: SAHALANDE
*設計出處 Design by: Be Myself Inc. M6
*背景圖源 Background image from: (vladstudio)
*安裝網址 Install: www.plurk.com/installDesign/5807705-96910a83ac
*copyright: 版權所有 保留一切權利 All Rights Reserved
------------------------------------------------------------------------*/

/*-------------------------------版權說明-------------------------------

此系列噗版由「如我協力創意工作室 Be Myself Inc.」 設計提供,版權所有。
僅開放個人套用,歡迎個人噗友學習改成最適合自己的樣式(請註明原CSS出處),
商業性質及其他利用方式請勿套用、改製或引用,謝謝。
---『我們並未授權創作者擅自使用我們的CSS修改後再分享,請尊重原創,謝謝~』
------------------------------如我協力創意工作室 Be Myself Inc. M6***

------------------------------------------------------------------------*/

 

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

實在是... 噗浪接著「紅底色」新通知背景之後,推出的新改變,是「嚇死人」咻~碰通知音效 . . .

才覺得分享小圖示改版改的不錯說. . .

 

如果實在是聽不習慣這個新的驚喜,請記得,還有個「關掉它」的按鈕可以用...

關閉音效通知.png

在我設計的部份版型,它可能是長上面這樣。而噗浪預設的,是藍色圓形喇叭按鈕,如下:

關閉音效通知-1.png

 

無論長怎樣,點下去,就可以關掉有新回應或新噗時,噗浪的預設音效了~

關閉音效通知-2.png

 

好吧 . . . 我還是把咻~碰關掉好了 , , ,

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

可愛的噗浪,又有新鮮的小玩意了~

小功能列.png

 

把原先在語助詞「分享」裡面的上傳照片與影音等功能,拉出來,放在發噗區下方。

小功能列3.png

在單則噗下方的回應區也有。

 

這樣,使用上更加直覺方便了,也讓語助詞「分享」,回歸它原本單純「語助詞」的身分XD

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

 

噗浪今天把「每日照片」這個功能標籤,從發噗區的地方拿掉了~

 

拿掉每日照片.png

 

所以,以後要上傳照片或是拍視訊,要從「語助詞」裡面的「分享」功能去做處理囉~

 

還有,噗浪新增了「新通知背景」的紅底色 . . .

通知紅背景.png

如果覺得跟佈景不搭的話,

可以用這段語法將背景移除:

.unread #alert_beacon

{

background:none !important;  /*拿掉背景色*/

color:#bbbb99 !important;  /*設定字的顏色*/

}

 

每天都有新發現,噗浪的CSS項目還真是種類繁多啊~XD

 

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

 

呼~終於彙整了這段時間以來所有的噗浪CSS應用項目,一一列出,在 SAMPLE GOOD 這個版型中

 

這意謂者,在這個版型中,已經將所有設計應用的項目,羅列棋布,

以SAMPLE GOOD為基礎,

可以變化出目前為止,我所設計的各式版型風貌。

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

因為有網友留言詢問,能不能修改噗浪在部落格的外掛,

希望能不要顯示上方的照片與個人資訊等項目,只簡單顯示出訊息和時間就好,

所以花了點時間上網搜尋相關資訊和文章,

發現,由於現在的噗浪部落格外掛是用 iframe 去做處理的,

因此,單靠CSS是無法做更動的,除了官方提供的改外掛顏色與長寬等簡單變動外,

如果希望能多點自訂的空間,可以試著用以下幾種方式來作替代方案:

 

(1) 使用RSS訂閱功能,在製作widget的網站上做一個自己的噗浪外掛

Plurk life

使用網站:http://www.widgetbox.com/widgets/make?code=feed

在 "Enter your blog or feed address (URL)." 的欄位,填入自己的噗浪訊息訂閱網址,

像我的網址是:http://www.plurk.com/66660000.xml

就是噗浪帳號後面,加上 .xml ,就是自己的訂閱網址了。

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

今天看到噗浪創辦人 alvin 分享了這位 紅眼兔 所繪製的桌布,超喜歡的! 所以趁著下午有空,就把它作成了噗版XD

Plurk your life

/*------------------------------------------------------------------------
*噗浪版型 Plurk CSS:Plurk your life
*設計出處 Design by Be Myself Inc. M6
*背景圖源 Background image from:http://www.plurk.com/BlackLight (紅眼兔)
*安裝網址 install:http://www.plurk.com/installDesign/3997864-4199b73f4d
*更多佈景 More Themes: http://www.flickr.com/groups/plurkcss
------------------------------------------------------------------------*/
/***僅開放個人套用做為噗版,商業性質及其他利用方式請勿使用,謝謝****/

 

活生生的噗浪世界,就這樣呈現到眼前來囉~

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

十月初,噗浪有改過了發噗欄位的對齊方式,變成一律靠上,造成部份噗版的表情符號無法使用, 

所以我有發了兩則噗。請見   噗一  噗二  

最近又有噗友在詢問相關問題,故一併整理一些最近新發現的語法,分享給噗友 ^^

 

Q1. 噗浪表情符號不見了?


噗浪似乎更改了一些預設的CSS,所以部份噗版的表情符號無法使用,
請將語法中/*更換 微笑表情選圖***/ 一段刪除就可以使用囉~

 

Q2. 如何讓發噗區置中對齊?


不習慣噗浪將發噗區對齊靠上的噗友,可以加上這行語法讓它恢復置中喔:

.plurkForm td {vertical-align:middle !important;}

 

Q3. 如何更換噗浪的表情符號?

語法如下:

/*更換 微笑表情選圖***/
.smily_holder img  /*隱藏笑臉符號*/
{
filter:alpha(opacity=0) !important;
-moz-opacity:0 !important;
opacity:0 !important;
zoom:1;
}
.smily_holder  /*放上替代圖片*/
{
background:url(http://圖片網址放在這) center center no-repeat;
padding-right:24px;
padding-left:0 !important;
margin:0 !important;
width:24px !important;
}

寬度和間距尺寸要隨圖片大小做適當調整喔!

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

昨天 (10/25 15:00左右) 城市通的林小姐打電話來,說他們明天(指10/26,今日)會公告,

然後說,除了公告,還有哪邊我們希望他們做的?

因為他們公司很注重自己的形象,公告後,我們部落格有關文章可否做修改或移除?

接電話的SABATLFOV大大回答他們,如果明天你們公告,我們會在文章內更新,說什麼時候有做了處理這樣。

 

我們針對噗版盜用的事件,持續追蹤、公佈、處理,所希望盜用者做的,就是一直有清楚表達的這件事:



你好,請盡快更正盜用我們噗版設計的版型,並公告請已套用的噗友移除勿再使用,請尊重原創,勿再盜用他人的版型CSS設計,謝謝。

 

誠實的面對錯誤並確實改正,即時的公告處理,請已套用的噗友移除,為自己的行為負起責任。

 

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

經過追蹤、公佈以及持續的處理,目前部份冒用我們噗版設計者都已移除頁面,

但卻沒有確實的將事由公告清楚,請已經套用了這些版型的噗友能移除勿再使用,

故將陸續更新整理這些不當使用的版面,在這篇文章裡面列出。

 

如果不確定是否使用了盜用的版型,可以參考 前一篇文章 的檢查方式,或發私噗通知我們。

謝謝~

 

-------------『我們並未授權創作者擅自使用我們的CSS修改後再分享,請尊重原創,謝謝~』

如我協力創意工作室 Be Myself Inc. M6
http://www.plurk.com/66660000

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

*10/25更新訊息:

又有創作者直接冒用我們設計的CSS,是使用新的小圖連結,故在此補充註明:

如果噗版CSS中有出現連至以下相簿,卻未標明出自 Be Myself Inc. M6 的話,

也是冒用設計者喔!

http://i614.photobucket.com/albums/tt230/m66660000

 

-------------『我們並未授權創作者擅自使用我們的CSS修改後再分享,請尊重原創,謝謝~』

如我協力創意工作室 Be Myself Inc. M6

 

請大家注意!
如果噗版自訂CSS中有出現連至我們 bemyselfinc.com 的連結,
且表頭沒有 design by Be Myself Inc. M6 相關字樣的話,
可能是盜用設計者,請發私噗通知我們。


還在使用舊噗版的朋友們,
我們的小圖連結已經全面更新囉!~

請至 http://www.flickr.com/groups/plurkcss 重新下載~ 謝謝~

 

請注意

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

自從發現 7- 11 推出拉拉熊的集點活動,為了要湊滿八點,

一直拉SABATLFOV大大跟我一起喝「下午茶」的成果,終於~

集到啦~~~~

 

正面的盒上有可愛的拉拉準備喝茶嚕~

 

盒蓋上也有,旁邊還放了糖罐。

 

喝茶怎能少了好朋友呢?盒子側面是小白跟小黃。

 

背面有這次推出的六種款式。

 

猜猜看,抽到什麼拉拉了呢?

我猜「甜甜圈拉拉」,SABATLFOV大大則猜是「草莓小雞」,

結果,

謎底揭曉 . . . . .

 

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

玩噗樂透?

噗浪在昨日推出了一個叫做「玩plurk樂透」 的自動配對聊天室功能,在噗浪創辦人 alvin 的 http://www.plurk.com/p/7gr5p8  看見的。

實在是用不著這功能的我,幸好有噗友在回 alvin 該噗時分享了用CSS隱藏這按鈕的功能,

我再補了一些加強的CSS,貼上來分享給一樣用不著玩樂透的大家 XD

[更新:9/16 發現按鈕中文翻譯更名為"找個噗友聊天吧"] XD

[更新:12/11 噗浪官方已經關閉此功能]

/*隱藏 找噗友聊天 按鈕*/
#chat_button {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
z-index: -1;
height:0 !important;
width:0 !important;
overflow:hidden;
}

 

在編輯>自訂外觀的CSS欄位中將上面的語法貼上按儲存就可以了~

右下角多出的按鈕不見了~

恢復清爽的界面~ 真好,不是嗎?  ^ E ^

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