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

目前分類:噗浪Plurk (91)

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

好久沒玩噗浪了,這個月初噗浪改版,經過噗友留言告知,回到了噗浪來看看,發現這次改版有許多革新的地方,比如說,終於出現了可以讓使用者直接上傳背景圖應用在自己版面的功能,這對於不懂css語法,只是想換張自己喜歡圖片當噗版背景的噗友方便多了。

從開始玩噗版以來,噗浪預設的版型經歷了許許多多次大大小小的變動,也因此,我們在不同時期製作出的噗版,有許多地方已經失效,或是跑位了,看著不同期間裡寫的噗版css,彷彿紀錄了那期間裡自己玩浪的喜好與心情,每個版型都值得玩味。

使用噗版的噗友,也很珍視自己所選用的喜好噗版,所以有許多噗友留言或傳訊息給我,希望能更新或修正長年愛用的版型,我會將這些訊息都記錄下來,趁有空的時候一一來做更新,還請噗友們稍候喔~

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

這篇會持續置頂並更新方便大家查找與使用相關文章 

 

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

 

今年,真是忙碌的一年。尤其是近半年來,許多周遭的變化,接踵而至。無論是家裡還是工作上,都有改變,也有進展。

最重要的是,我們 Be Myself Inc. 如我協力創意工作室,有了新據點,在歷經了兩個多月的設計與執行後,誕生了~

 

Be Myself Inc.辦公室

八歲了,是向未來邁進的另一個日子,10/8,生日快樂。

,

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

整理好2016新版噗浪的基本款後,接下來,就是因應新的噗版預設項目的調整,嘗試河道與主控台排版的不同類型。

收合顯版置左-白.png

將主控台固定顯示於網頁左上方,收合部分資訊。

2016噗版基本款 為基礎,加上 /*----主控台調整位置置左--基本款--收合顯版*/ 這段語法,調整主控台的位置。

可以因應自己喜歡的顏色,調整背景色系。例如:

收合顯版置左-黑.png

黑色底,讓字的顏色跳出來。

黑色的基本款語法 請參見 /*2016噗版CSS基本款-主控台置左-black*/

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

這兩天玩了一下噗浪最新的預設版型,整體的設計相較於之前有很大的進步,除了可讓使用者自行上傳背景圖外,許多功能小視窗都變好看了。

雖然頁首以及單則訊息頁等處仍舊無法自訂,但現在的新版噗浪直接使用預設版對一般使用者很OK,進階的想要自己做噗版,符合自己喜好的噗友,才需要學習如何用css打造版型。

這是我原本選用的預設版:

m101111.png

 

這是經過自訂css調整後的樣貌:

2016basic.png

,

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

原本的分享與表情圖示區,多出了「每日一照」的功能選項後,需要做修正的地方如下:

每日一照  

多出的選項導致原本的表情選單跑位,需要調整 .icons_holder 段落中的數值,將原本的 18px 改成 48px。

改位置  

改好位置後,表情選單就能正常顯示。

如果你用不到「每日一照」這個功能,也可以直接把它隱藏起來。語法:

/*隱藏每日一照*/
.cmp_webcamp_off, .cmp_webcamp_on { display : none !important; }
 
這樣原本的表情選單就會恢復原樣。如下:
隱藏每日一照  
 
或是可以換成一致的圖示,讓選單列呈現一致:
更改每日一照  
 
使用語法:
.cmp_webcamp_off, .cmp_webcamp_on
{
background: url(這邊放圖片網址) no-repeat scroll top left;
width: 16px; height: 16px;
}
然後改 .icons_holder 段落中的數值,將原本的 18px 改成 40px。
 
相關的高度與寬度數值,需要依據所使用的圖片大小作調整。
 
,

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

因應噗友剛才的詢問,表示希望將浪上噗的內容跟展開後的回應列表一樣換行,然後將頭貼放到裡面,所以嘗試了一下換行的方式,也分享給同樣有此需要的噗友。

浪上噗:

浪上噗  

換行後:

浪上噗換行  

,

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

前幾天噗浪將預設版面做了大幅度的更改,頁首增加了一條bar,單則訊息網址頁的排版也大幅更動了。一開始的更動造成大部份版型背景圖無法顯示,並有跑位的情況,後來噗浪有再修改過這點,背景圖無法顯示的問題有些已經解決,但頁首的bar,多出的外框,讓版型整體會有跑位的情況,則仍舊無法解決。

目前用自訂佈景的方式,能夠做的變動其實並不多,因為寫入自訂佈景區塊的css內容,噗浪會在前面強制加上一個項目標籤,所以寫入的內容雖然項目一樣、語法正確,但卻無法顯示。原本浪上的噗回應區的格式也因為如此而無法自訂,後來似乎是有許多噗友反應,這樣會嚴重影響到噗的閱讀性,才開放並恢復了這部分的自訂功能。

頁首的bar更改方式,目前在自訂佈景該項目是無法更動的。而噗浪新的這版頁首,其實可以容納更多選單項目,視覺上也更活潑,較之原本的連結點選方式,有其方便之處,但可惜的是無法自訂樣式,造成背景圖上方多出突兀的一條,而下方捲軸往下拉也會出現底色,讓原先自訂的背景圖無法完全覆蓋住,整個版面看起來是走樣的。

整體外框跑位的情形,雖然無法從自訂佈景改善,但上方橫條bar的底色,我們嘗試過後,可以用時間軸背景語法的方式來暫時蓋過,讓佈景整體趨於一致。

以「不動煌真」這個版型來舉例,

原先跑版情況:

不動煌真

 

調整後:

不動煌真0614+  

,

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

噗浪終於推出了快速回覆功能,加在原本影音圖片顯示視窗點開後的底部,這樣對瀏覽多圖或多個影片來說十分方便哪~ 

如果你希望修改成早期噗浪單純的呈顯方式(沒有右方留言框),或是原本版型中已有修改語法,因多了快速回覆欄位導致版面跑位,可以參考 這篇文章 做修正。

對於新增改版後的留言顯示方式,想要美化它更符合自己的使用習慣與風格,我們可以用自訂css來設計:

(影音圖片視窗---白色)

影音圖片視窗---白色 

(影音圖片視窗---黑色)

影音圖片視窗---黑色

 範例語法如下:

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

因應今日噗浪的改版,之前發過的 圖片顯示修正方式 需要再次修正項目內容,就新發了此文。

這次的變動主要是預設的 css 項目名稱更動了,然後,噗浪將點選影片後出現的播放視窗也改成跟圖片一樣,變成回應列表在右的形式。

未修正前的圖片及影片顯示範例:

未修正前-圖

未修正前-影 

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

前陣子噗浪改了原本點圖呈現的方式,將原本圖片直接置中展開的框架,改成類似G+或FB的點圖同時出現留言的形式。由於目前尚未能有留言回覆的功能(據說下一版會推出),且留言數過多的話會影響整體瀏覽流暢感與反應速度,讓習慣簡潔看圖的噗友,感到界面過於複雜與不便,所以反應不是很好。而優點則是同時有多張圖的噗可在同個框架中點選閱覽不用跳出。

如同噗浪其他版面區塊,點圖的視窗,我們也可以用自訂css語法來自己彈性打造合適使用的界面。

原本改版後,點圖會出現的方式:

原本未修正前 

會有一黑底遮住原本噗浪的網頁,然後左邊是圖,右邊則是留言。

可以使用自訂語法,修正成近似原先單純顯示圖片的樣式:

原本顯圖  

語法:

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

隔了一段時間,終於有空整理一下噗浪單則訊息頁面的問題。

噗浪將單則訊息頁面改版已經有好一陣子了,在上方增加了一個橫幅放廣告,原本置中的回應區放到左側,讓右側多出空間來放其他資訊與廣告欄位。

因為我用火狐,並有安裝 Adblock 外掛,所以預設看到的頁面會是這樣:

火狐(Adblock) 

會自動擋掉有廣告的部份。

如使用Chrome並且沒有安裝擋廣告的外掛,則會呈現這樣:

Chrome 

上方的橫幅與右側的廣告,可能會干擾到訊息本身的閱讀,如果有自訂的噗版樣式,多出來的區塊則會突兀的橫在那邊,導致版面不協調。  

我們可以使用自訂語法將原本的噗浪單則訊息頁面調回來,修正成原來的樣子。

用火狐看:

修正

用Chrome看:

C2-拿掉生物跟置中  

語法:

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

新年新年過新年 2012 is coming

2012十

起床看曙光 元旦一月一

如我協力十十

(點圖片即可連結到有安裝網址的相簿頁面喔~ :D)

 

,

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

前陣子,噗浪有在官方部落格中公告即將把廣告放到時間軸上,今天,終於看到它出現了.......

時間軸廣告欄.png

如果你不希望廣告出現在個人的時間軸上,可以用這一行語法把它蓋起來~

/*一行隱藏*/ #plurk_ads {max-height:0px !important;max-width:0px !important;}

然後就會恢復像原本這樣乾淨的噗面~

隱藏時間軸廣告欄.png 

商業化的路徑,廣告是許多網站選擇開始獲利的最便捷方式,如今噗浪也選擇了同樣的道路。

雖然如此,但還是有許多網站,選擇另一種道路,以「創新」服務來支持網站營運下去的條件。

,

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

在發噗區下方的圖示改變了,功能也有調整,原本在發噗按鈕旁的表情符號也移到了這:

分享與表情新按鈕.png

從左至右分別是:分享資訊(圖片、連結、影片、視訊),選擇表情符號,同步更新(fb、twitter、新浪微博),私人訊息及隱私選項。

 

浪上的噗打開回應列表下方的發噗區,則只會有分享資訊與選擇表情等兩個選項:

分享與表情新按鈕-mini.png

 

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

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

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

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

圖片外框.png  

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

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

部落格分享.png

貼音樂有連結文字.png  

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

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

自訂表情列.png

點新增會跳出自訂視窗:

新增表情視窗.png  

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

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

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

之前曇花一現短暫出現幾個小時的轉噗(分享)功能,今日又重出江湖囉~

轉噗圖示.png  

按下你的推文旁邊的 轉噗 連結,就會出現如上的圖示。

妙的是目前噗浪所推出的轉噗功能,是不會再發一個新的噗在自己河道上的,所以按下去後也沒有出現轉噗的內容在發噗區供你再確認與修正,而是直接發出去了~

以原本該則噗的樣態,發到你所有的好友及粉絲的河道上,所以,你的河道上不會再有一則新的噗,只會在原本被轉噗(分享)出去的噗的原噗下方顯示誰分享了此則訊息:

分享列改變前.png  

這一整條就這樣突兀的出現在噗上,跟套用的噗版樣式可能會不大搭配,所以需要再次修正自訂css的內容~

分享列改變後.png  

將~ 是不是合適多了呢 XD

相關的語法如下:

 

/*-----轉噗欄位-----*/

.td_info, .tr_info
{
    background:none !important;  /*拿掉背景*/
    border:0 !important;  /*去除框線*/
    color:#fff !important; /*文字顏色*/
}
.td_info a, .td_cnt a
{
    color:#7ac !important; /*連結顏色*/
}

請根據你所使用的噗版樣式適當更改顏色的設定喔 ^ ^

 

 

,

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

這兩天,噗浪開發了一個可以自行選擇暱稱顏色的功能:

暱稱顏色.png  

有 紅、綠、藍 三色可選,預設值則為 黑 色。

這裡的顏色選擇,不僅僅會出現在自己的噗浪河道上,其他噗友看見的暱稱顏色也會跟著一起變,不同於自訂CSS語法的功能。

 

因為不習慣河道上充滿花花綠綠的各種色彩,所以我一直沒使用該功能,而我設計的噗版CSS中也多半有強制指定暱稱顏色的設定。

如果你需要統一一下自己河道上的暱稱顏色,看起來不那麼繽紛,可以使用下列語法:

/*-----噗上的人名-----*/

.td_qual span a,
.td_qual span a:hover
{
    color:#111 !important;  /*統一為黑色*/
}

也可以指定其他顏色,可以參考色碼查詢網站: http://www.colorschemer.com/online.html

而如果原本套用的噗版已經有指定顏色,但你希望能夠顯現出噗友各自的選擇,就請刪除上面那段囉~ ^ ^

, , ,

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

今天噗浪多了一些新功能,CSS的部份,原本的表情選單項目已經不適用,現在改成這樣囉~

新的表情符號選單  

比原本的噗浪預設樣式更為清爽簡潔,但,如果我們想更自訂它的風格,或是修正原先套用版型時這部份的CSS,就需要瞭解新的自訂div項目了。

,

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

主控台版型的排列練習與嘗試,請試著按照段落一一貼上,來觀察其中的排版變化跟影響的區塊,熟悉後,就可以自己試著寫寫看合用的版本囉~

[ 資訊置左 ]

WHITEHOUSE.png

/*------------------------------------------------------------------------
    噗浪版型 Plurk CSS: WHITEHOUSE
    設計出處 Design by: Be Myself Inc. M6
    背景圖源 Background image from: (simpledesktops.com)
    安裝網址 Install: http://www.plurk.com/installDesign/5143441-61f70a67af
    更多佈景 More Themes: http://www.flickr.com/groups/plurkcss
    -- 此噗版CSS僅供個人自用,請勿改製再分享或用於商業用途 --
    -- Copyright: 版權所有 保留一切權利  All Rights Reserved --
------------------------------------------------------------------------*/

, , ,

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

1 2345