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

目前分類:噗浪Plurk (98)

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

每隔一段時間,噗浪都會有新的小進展,從開始接觸噗浪佈景的CSS以來,噗的成長看得見。

像是多出了「每日照片」、「搜尋」功能,以及「音樂播放器」,還有「喜歡」標注等等,

每個改變,也代表著CSS有新東西了,有新的項目需要學習 ^ ^

 

最近,浪上每則噗打開後,長度會自動隨著內容"縮放"了~

這真是很貼心的功能,

之前都要靠自訂語法才能加長噗列表來方便閱讀,

現在,彈性的設計更能符合需要,也就少一行需要放的語法囉XD

 

即便如此,自訂噗的樂趣還是與日俱增,每每都會發現新的嘗試帶來新的效果,

所以,又到了彙整「噗浪佈景CSS集成」新版的時間啦~XD

 

最新一版整理如下~請參考選用 ^ ^:

 

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

想要能常常「變身」,重要的是打好基本功底,建立屬於自己的「不二法門」,然後,常練勤更新,就能有屬於自己獨特的樣子。對於噗版而言,不可或缺的幾項資源與工具,有以下幾項:

1. 背景圖
2. 噗浪版型的CSS項目
3. 常用的CSS語法
4. 色碼查詢對照

在開始嘗試做出屬於自己風貌的噗版前,通常是因為一張好看的圖片或照片,誘發以此當作噗版背景的想法,然後一步步尋找適合參考套用的版型,試著換底圖,有了美圖後,又發現有許多地方想再修正,以符合這張美圖和自己的使用習慣,所以就一步步學習了噗浪版型中各個控制因素,如何用CSS語法自訂的功能,達成想要的噗景,讓自己每天看著噗就開心~ ^ ^

這個過程是持續的,發現美圖->應用噗版->修改CSS->完成新版型->每天用噗開心->發現美圖->++++++

接下來,就讓我與大家分享,1.2.3.4 每個步驟中我常用的資源庫與工具吧!

1. 建立背景圖來源書籤群組

San-X 俱樂部  http://www.san-x.co.jp/charapri/top.html

這是我想找新噗圖第一個會造訪的網址,因為~太可愛啦~XD

且會常常更新,每月還有新月曆推出~不只桌布可當噗版背景喔,讚!

Full HD Wallpapers  http://www.wallpapers-room.com/popular/

如果不走可愛路線,那麼,這個網站必是造訪找圖的最佳選擇,有各種尺寸、各種風格的桌布供下載,寬螢幕?沒問題!這邊有很多適合的大尺寸圖片喔~!

Customize.org  http://customize.org/

這是個多面向多種資源的網站,有很多有創意的桌布與版型作品。值得一提的是,它可以直接按照顏色下去找圖,每張圖片也都有附上該圖的色系,很好搭配喔~

Desktop wallpaper  http://www.socwall.com/

這個網站常常會出現特殊的照片、風格獨特的插圖,所以我的書籤寫著「超酷桌布網」,當然,是一定要加入我的圖片資源庫的~XD

Vladstudio.com  http://www.vladstudio.com/zh/home/

這是同一位作者大量產出的創意作品。他的風格我很喜歡,有一個大象的噗版就是使用他的圖做背景喔!還有深受歡迎的「圖書館」版型,背景圖也是出自他手!

Nyalan wallpaper  http://www.jalan.net/jalan/doc/nyalan/summer2007/wallpaper/index.html

可愛喵咪,是日本旅遊網中的代言貓!我常常使用他做為噗版中的主角~ 春夏秋冬都有好心情~

Sketchbook  http://sketchbook-moritake.com/main.html

手繪風的桌布,這個作者創作的圖畫都很舒服美觀,帶有女性輕柔優美的韻味~

bgpatterns  http://bgpatterns.com/

除了大張的背景圖外,你可以選擇像壁紙般簡單優雅的圖當作噗的背景~那就需要這個網站來幫助你囉~!製作平鋪式背景圖的好用網站!

 

可以將以上的網站加入書籤,組織成「噗版專用背景群組」,想換佈景時就去逛逛,一定會有引發你好點子的圖片出現~

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

在發完新噗版後,常常會有噗友回應,希望能有圓角版,以下列出將浪上的噗、以及將噗版中所有看得見的要素都變成圓角的語法,讓大家不管安裝哪一種噗版,都能有圓圓的好心情~ ^ ^

[原噗版]

our planet

our planet

安裝網址: http://www.plurk.com/installDesign/5143441-2eb61ef05d

 

[改浪上的噗為圓角] 

our planet(圓角版)

our planet (圓角版)

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

 

原噗版要改成圓角版,須變更的語法如下:

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

當安裝噗版後,發現想調整字型與顏色怎麼辦?以下一一解析噗浪各部份的字型與顏色語法,讓大家能一次調整到位~

[原噗版]

RainBow

 

RainBow

安裝網址: http://www.plurk.com/installDesign/5143441-29b3258d22

 

有噗友表示希望將選項顏色改成粉紅色系的,並且換其他字體,所以我將標題、頁首及頁尾等地方改為粉紅色,並調整了字型設定的語法。

 

[改頁首頁尾顏色字型]

RainBow(改新細明體與粉紅色系)

RainBow(改成新細明體與粉紅色系)

安裝網址: http://www.plurk.com/installDesign/5143441-33a8a9c9bd

 

更改的語法與步驟如下:

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

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

[原噗版]

shinning tail

shinning tail 

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

 

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

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

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;
}

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

打造一個自己專屬的噗版,從瞭解噗浪各部份的語法開始,然後動手修改嘗試,通常,安裝了喜歡的噗版樣式,還是會有局部想要修正、調整,以符合自己最適用的樣貌,這時候,換背景圖,加透明度設定,就是最常見的「變身」手法囉~

[純色系的噗版]

grass shower

grass shower

安裝網址: http://www.plurk.com/installDesign/5143441-2fed0b71d6

 

[更換背景圖、加上透明度設定後的噗版]

shinning tail

shinning tail 

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

 

使用到的語法和步驟說明如下:

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

summer luna

喔~我愛夏天~ 有亮亮的天空 白白地雲 藍藍花花

 

summer latte

來杯 summer latte  再噗吧~ XD

 

發覺噗的好滋味  讓網站也換上新裝  BeMyselfInc.TW

bemyselfinc_com

各種好滋味  Do Re Mi Fa So La Te

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

T

在噗浪預設的幾種搭配中,選出適合舒服的配色,再加上一點點自訂的CSS,
就能使用的順手應心。

經過上一篇「噗浪CSS集成」,後來噗浪有增加一些另外的項目,像是朋友區的搜尋、
奬勵徽章等,所以,又到了更新整理的時間XD

此篇將這段時間以來,經過噗友訂製的磨練功夫,逐一更正修正的標準項目,
列明。以提供大家參考,設計出合乎想像中自己噗浪的樣貌。

 

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

春天,

想出發去旅行,也合適打掃家裡,讓心情煥然一新,或許,讀點書、睡個午覺,

也是和春天好好相處的方式~

Travel Dream

 

批卡批卡

 

Cat Forest

 

True Dream

 

更多噗浪版型:http://www.flickr.com/groups/plurkcss

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

WISH 2010
WISH 2010

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

雪花繽紛  紅色與白色的耶誕季節 又將到來

設計了幾款噗浪的版型  提供給有玩噗浪的朋友下載

共享屬於這一段日子 特有的氛圍和暖意


Merry Christmas

 

 

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

因應網友"冉"的留言,將自己所知的單一噗浪頁面的語法列出來讓大家參考~**911更新版**


/*單一Plurk頁面--------------------------------------*/
/*************本則訊息區*************/

/*使用者名稱*/
.bigplurk .user-nick { }
.bigplurk .user-nick:hover { }

/*內容區*/
div.bigplurk h1.content {
background-color:#;
border-right:1px solid #;
}

/*時間區*/
div.bigplurk div.time {
font-size:;
text-align:right;
background-color:#;
color:#;
border-right:;
border-bottom: ;
margin:0 70px 0 0;
padding:0 4px 4px 0;
}

/*使用者區*/
div.bigplurk div.user {
padding-left:390px;
margin:-12px auto 0;
}

/*使用者圖片*/
div.bigplurk div.user img {
border: ;
padding: ;
background-color:#;
}

/*************回應列表區*************/

/*暱稱區*/
#dashboard_holder .message a.user {font-weight:700;}
#dashboard_holder .message a.user {color:#;}
#dashboard_holder .message a.user:hover  {color:#;}

/*使用者名稱標示*/
.highlight_owner a {color:#  !important;text-decoration:underline!important;}
.highlight_owner a:hover {color:#  !important;}

/*回應區*/
#plurk_responses {color:#  ;}
#plurk_responses a {color:#  ;}
#plurk_responses a:hover {color:#  ;}
#plurk_responses ul.responses {margin:0 10px;}
#plurk_responses ul.responses li {min-height:49px;margin:20px 0;}

/*回應內容*/
#plurk_responses ul.responses .message {
background:#  ;
color:#  ;
border-right:  ;
border-bottom:  ;
margin:-45px 0 0 54px;padding:6px;
}
#plurk_responses ul.responses .message a:hover  {color:#  !important;}
#plurk_responses ul.responses .message a.ex_link {color:#   !important;}
#plurk_responses ul.responses .message a.ex_link:hover {color:#  !important;}

/*回應區使用者圖片*/
#plurk_responses ul.responses li .avatar { }
#plurk_responses ul.responses li img.avatar{ }

/*回應時間標示*/
span.time {color:#   ; }

/*影音圖片*/
.youtube img,.pictureservices img {border:none;}

/*************發噗面板區*************/

/*回應框背景*/
#reply {margin-top:40px;}
#reply h2 {margin-bottom:8px;padding:8px;}
#reply .char_updater {color:#  ;}
#reply #reply_box,#reply h2 {background:#  ;}
#reply #reply_box {padding:8px;}
#reply .dd_img {margin-bottom:-4px;}

/*噗輸入區*/
textarea#input_big, textarea#input_permalink {
background:#  ;
border: 1px solid #  ;
border-right:   ;
border-bottom:   ;
color:#  !important;
}
textarea#input_big.content { height:100px; } /*加高*/

/*分享連結*/
#plurk_responses div.feed-link {
margin:4px 10px 0 0;
font-size:  ;
color:#  !important;
}

/*上一則下一則*/
#next_plurk {width:50%;font-size:  ;color:#  !important;}
#prev_plurk {width:50%;text-align:right;font-size:  ;color:#  !important;}

__________________________________________________________________

還有頁首"我的資料、我的朋友、通知"前方的小圖~

/*頁首小圖*/

#top_bar .content {
background: url(http://) no-repeat transparent;  /*放要替換的圖檔網址*/

background:none; /*讓小圖消失*/

}

設計噗佈景很有趣,會發現很多會讓人開心的安排方式,多嘗試、多練習、多看、多分享,就能開心玩噗~ ^ ^

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

在打開每則噗後的回應訊息旁邊,會出現該訊息的時間標示圖片,

如果你是訊息的發送人,還可以按 "X" 刪除它,

原本的時間標示像這樣:

我們可以自訂這個區塊。這裡的語法開頭是 .response_time .holder{}

可修改的語法如下:

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

 

今天噗浪新增了一項音樂播放器的功能(詳見 此噗

近兩天噗浪陸續推出許多新的好用功能,嘉惠噗友甚多,而今日的音樂播放器,更能讓大家邊噗邊聽音樂,實在不錯。

但新出現的音樂播放器,預設的CSS實在跟原本美美的噗浪背景不搭~

 

所以要修改新的CSS項目,新的噗浪音樂播放器CSS項目為:

#music_player { background: url( );
border:1px solid # ; position:absolute; top:360px; right:10px; z-index:605;
color:# ;padding:2px 5px;}
#music_player a{color:# ;}
#music_player a:hover{color:# ;}

就放上與你原本佈景一致的色彩或背景圖吧!然後可以像這樣~

 

看!好多了!

 

然後可以繼續享受聽覺與視覺一致的滿足感~~~~

 

 

 

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

 

如果,你希望噗浪生物消失,如果,你希望每次loading時吐泡泡的魚消失,

那麼,

請參考以下的語法,助你一臂之力~

 

/* 隱藏浪道上的噗浪生物 */
#dynamic_logo ,#logo img {filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0; }
img#creature{ filter:alpha(opacity=0) ; -moz-opacity:0; opacity: 0; }


/* 讓主頁面的loading圖消失 */
#div_loading .cnt {opacity:.0;}


/* 讓每一則噗打開後的loading圖消失 */
.loading {opacity:.0;}

 

有沒有發現,不再看到吐泡泡的魚,感覺順多了?

祝大家噗浪愉快~

 

 

 

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

 

在為了找到適合自己版型的過程中,開始了自己動手設計噗浪版型的日子~ 希望大家都能樂在浪中~

昨日因"黑兄"的提議  設計了一款黑色Flickr版出來  (詳見此

發現到:我其實可以接受噗友們的預訂版型呀!

既然我自己已經有了很合搭的版樣,會再做版型就是看突發奇想的靈光乍現~

如果有更多好點子妙提議會更有趣!也可以讓更多人多了快樂玩噗的好心情~

所以,如果你有想要什麼樣的噗版,歡迎留言給我(在部落格或在噗上都可)

有想要放的背景圖片,或是偏好的色系,甚至是想像中的畫面~都歡迎描述出來讓我知喔!

個人噗友或是非營利組織預訂版型免費~FREE~!

如果是公司行號、營利事業單位,會酌收300元,當做噗資本之用~ (累積起來不知道會產生什麼?拭目以待吧!)

 

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

我設計的噗浪版型網址(FREE):http://bemyselfinc.com/html/d_plurk.html   2010.11.7 後請連至 http://www.flickr.com/groups/plurkcss

 

黑Flickr 與  白Flickr

 

 

 

 

 

 

 

 

其他噗浪相關的文:

[PLURKCSS] 噗浪CSS集成

噗浪 連結你我的心生活 PLURK LIFE

 

訂做專屬版面:

For Cathy  (2009.7.18)

 

For 遊戲狂人  (2009.8.4)

 

For 手帳組老大專用版  (2009.8.19)

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

**版權說明**

我們提供與設計的噗版CSS內容僅供個人自用,
歡迎個人噗友學習改成最適合自己的樣式(請註明原CSS出處),
請勿改製再分享或使用於商業性質等其他用途,
請勿將全部或部份內容直接取用當作自己的設計,
除了個人噗版自用外,其它使用方式均未授權,
還請務必注意,勿侵權喔~

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

從開始接觸到噗浪 plurk.com 後 ,每天的生活都更加有趣了起來。

 

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