目前分類:噗浪修改 (8)

瀏覽方式: 標題列表 簡短摘要
這一段主要是修改從噗浪格子到自我介紹、朋友、粉絲、KARMA三大格子




/*---------------主控台、粉絲、朋友區塊------------------*/

/*主控台上四區,自我介紹、粉絲、朋友的欄位整體設定*/
.segment-content {
color:yellow;/*主控台文字顏色 姓名、年紀、性別、居住地*/
margin: 0px;/*三個版塊的週邊寬度*/
background-color:red;/*主控台三塊的背景顏色*/
background: transparent !important;
/*把主控台整個消失可加上 width:0; height:0; 讓寬高都為0*/
}/*主控台上四區,自我介紹、粉絲、朋友的欄位整體設定*/

#plurk-dashboard {background: transparent; }/*主控台面板最底層*/
#plurk-dashboard a {color: green;text-decoration: none; }/*主控台連結文字*/
#plurk-dashboard a:hover {color: pink;text-decoration: none;;}/*主控台連結文字-滑鼠移過*/

/*噗浪文字格的主體框*/
#pane_plurk {
border: 2px solid red;
color: blue !important;
background-color:green;
font-size:10px;
}/*噗浪文字格的主體框*/

/*每日照片、搜尋,標籤 三個標籤,未使用時*/
#toggle_tab li {
/*background: url(http://s.plurklayouts.com/images/layouts/blacktransparent.png);*/
color: pink ;/*每日照片、搜尋,標籤文字顏色*/
font-size:10px;
border: 3px solid blue;
}/*每日照片、搜尋,標籤 三個標籤,未使用時*/

/*主面板邊框+每日照片、搜尋,標籤 三個標籤,使用狀況下*/
.plurkaction{clear:both;padding:50px;border:1 ;}/*輸入框的邊*/
.plurkaction,#toggle_tab li.tt_selected,#plurk-dashboard,#more_options_link{
border: 3px solid green;/*主面板邊框+每日照片、搜尋,標籤 三個標籤,未使用時*/
color:purple;
font-size:20px;
background-color:black;
/*background: transparent;*/
!background: url(http://s.plurklayouts.com/images/layouts/blacktransparent.png);
}/*主面板邊框+每日照片、搜尋,標籤 三個標籤,使用狀況下*/

/*顯示所有朋友 沒用*/
#show_all_friends{
/*background: transparent;*/
background-color:brown;
padding-top: 5px;
padding-bottom: 5px;
text-align:center;
color: red;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}/*顯示所有朋友 沒用*/

/*主控台,KARMA面板*/
/*Dashboard Stats area*/
#dash-stats{
/*background: url(http://s.plurklayouts.com/images/layouts/blacktransparent.png);*/
border:0;
padding-top: 5px;
padding-bottom: 38px;
text-align: center;
color:brown;
background-color:purple;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
}/*主控台,KARMA面板*/

/*主控台,朋友面板*/
/*Dashboard Friends area*/
#dash-friends {
/*background: url(http://s.plurklayouts.com/images/layouts/blacktransparent.png);*/
border:0;
background: blue;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
text-align: center;
color: brown;
}/*主控台朋友面板*/

/*主控台,粉絲面板*/
/*Dashboard Fans */
#dash-fans {
/*background: url(http://s.plurklayouts.com/images/layouts/blacktransparent.png);*/
border:0;
background-color:blue;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
color: white;
}/*主控台,粉絲面板*/

/*主面板四個框*/
#plurk_form , .dash-segment{
background-color:red;
border:1;
}/*主面板四個框*/

/*噗浪框主體,滑鼠移過的狀況下*/
#plurk_form:hover , .dash-segment:hover{
filter:alpha(opacity=100) ; -moz-opacity:0.8; opacity: 0.8;
}/*噗浪框主體,滑鼠移過的狀況下*/



/*噗浪框主體*/
#plurk_form {
margin-top: 100px;
/*background: transparent !important;*/
border:0;
padding: 10px;
color: gray;
background-color:green;
}/*噗浪框主體*/











.segment-content {} 主控台上四區,自我介紹、粉絲、朋友的欄位整體設定
#plurk-dashboard { } 主控台面板最底層
#plurk-dashboard a {}主控台連結文字
#plurk-dashboard a:hover {}主控台連結文字-滑鼠移過
#pane_plurk { }噗浪文字格的主體框
#toggle_tab li {}每日照片、搜尋,標籤 三個標籤,未使用時

主面板邊框+每日照片、搜尋,標籤 三個標籤,使用狀況下
.plurkaction{} 輸入框的邊
.plurkaction,#toggle_tab li.tt_selected,#plurk-dashboard,#more_options_link{}
主面板邊框+每日照片、搜尋,標籤 三個標籤,使用狀況下

#dash-stats{}主控台,KARMA面板
#dash-friends {}主控台朋友面板
#dash-fans {}主控台,粉絲面板
#plurk_form , .dash-segment{}主面板四個框
#plurk_form:hover , .dash-segment:hover{}噗浪框主體,滑鼠移過的狀況下
#plurk_form {}噗浪框主體

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







/*----------------------分享噗浪按鈕-----------------------------*/

/*「分享您的plurk頁面」整塊區塊*/
#sharePlurk div {
border-style: none none none none;
border-width: 0px 0px 0px 0px;
padding: 0px 0px;
background: transparent; /*背景透明*/
}/*「分享您的plurk頁面」整塊區塊*/

/* 分享您的噗浪頁面 Share Plurk Button*/
#sharePlurk {
background: transparent url(http://s.plurklayouts.com/images/layouts/shareplurk.png) no-repeat scroll top left;/*原始的背景圖片*/
border-style: none none none none;
border-width: 0px 0px 0px 0px;
height: 66px;
/*background: transparent */
filter: alpha(opacity=0); opacity: 0.0;/*把整塊「分享您的頁面」變透明*/
background: transparent; /*背景透明*/
}/*取消分享按鈕圖片*/

/*分享的小人圖*/
#sharePlurk span {
background: transparent none no-repeat scroll left bottom;
padding: 1px 0px 1px 9px;
}/*分享的小人圖*/

/*「分享您的 plurk 頁面」框的設定*/
#sharePlurk #invite_url {
margin-left: 0px !important;/*偏移多少*/
background: transparent;/*設定背景透明*/
}/*「分享您的 plurk 頁面」框的設定*/

/*「分享您的 plurk 頁面」文字框的設定*/
#sharePlurk p { margin: 4px 0px 0;}
/*「分享您的 plurk 頁面」文字框的設定*/

/*自己的連結框的位置*/
.cmp_wj { height: 100px;}
/*自己的連結框的位置*/

/*分享您的噗浪頁面結束*/



/*-------「邀請或尋找您在plurk上的朋友」按鈕--------------*/

a#widget-gfx {
background: transparent url(http://s.plurklayouts.com/images/layouts/widget.png) no-repeat scroll 0 0 !important;
height: 20px;
margin-left: auto;
margin-right: auto;
padding: 9px 1px 0px 40px;
overflow: hidden;
color: transparent !important;
}/*目前不明*/

a#mobile-gfx {
/*background: transparent url(http://s.plurklayouts.com/images/layouts/mobile.png) no-repeat scroll 0 0 !important;*/
height: 20px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
color: transparent !important;
}/*目前不明*/

/*邀請朋友的底圖*/
a#twitter-gfx {
/* background: transparent url(http://s.plurklayouts.com/images/layouts/twitter.png) no-repeat scroll 0 0 !important;*/
height: 45px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
color: transparent !important;
}/*邀請朋友的底圖*/

/*邀請朋友的圖,上層*/
a#dashboard-invite {
/* background: transparent url(http://s.plurklayouts.com/images/layouts/plurk_extras/invite-friends.png) no-repeat scroll 0 8px;*/
height: 0px;
overflow: hidden;
background: transparent none no-repeat scroll 0 0;
border: 0px none #000000;
filter: alpha(opacity=0); opacity: 0.0;
}/*邀請朋友的圖,上層*/

/*邀請朋友的圖,上層,滑鼠移過狀態*/
a#dashboard-invite:hover {
/* background: transparent url(http://s.plurklayouts.com/images/layouts/plurk_extras/invite-friends.png) no-repeat scroll 0 -58px;*/
height: 0px;
overflow: hidden;
color: none;
background: transparent none no-repeat scroll 0 0;
filter: alpha(opacity=0); opacity: 0.0;
}/*邀請朋友的圖,上層,滑鼠移過狀態*/

/*「邀請或尋找您在plurk上的朋友」旁邊小圖*/
.cmp_invite, .cmp_widget-gfx, .cmp_twitter-gfx, .cmp_mobile-gfx {
background: transparent none no-repeat scroll 0 0;
height: 0px;
width: 0px;
background: transparent;
}/*「邀請或尋找您在plurk上的朋友」旁邊小圖*/


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

這段主要是針對噗文輸入框(plurk、每日照片、搜尋整體大框)的整體設定





/*-----------------噗文輸入區----------------------------*/
textarea#input_big, textarea#input_permalink {
/*background: url(http://s.plurklayouts.com/images/layouts/blacktransparent.png); 背景*/
background: transparent;/*噗文「格子」的背景透明*/
border: 1px solid #000; /*噗文字輸入格子的邊框設定*/
font-family: 微軟正黑體;/*字體*/
font-size:10px;
}/*噗文輸入格子*/
textarea#input_big.content {height:30px;} /*輸入文字欄加高*/


/*plurk、每日照片、搜尋整體大框*/
/*Background colour for time and Plurking Textarea*/
#plurk_form {
margin-top: 40px;/*plurk、每日照片、搜尋三按鈕左右偏移多少*/
background: url(http://plurklayouts.com/images/layouts/wtgradient.png);
padding: 10px;/*距離時間軸多少*/
}/*plurk、每日照片、搜尋整體大框*/

/*私密plurk、語系及選項小按鈕外框*/
.plurkaction {clear:both;padding:5px;color:#000;}/*私密噗按鈕*/
.plurkaction,#toggle_tab li.tt_selected,#more_options_link{
border: 1px solid #000; /*整個輸入欄外框*/
background:transparent; /*背景透明*/
background-color:black;/*整體背景顏色*/
color:#000;/*字色,黑*/
text-decoration:none;
}/*私密plurk、語系及選項小按鈕外框*/


/*非本人時的封鎖使用者按鈕*/
.friend_man.block {
background: repeat scroll top left;
background: transparent;
color: #5a5a5a !important;
border-color: #ffffff #ffffff #ffffff #ffffff;
-moz-border-radius: 4px 4px 4px 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-width: 1px;
}/*非本人時的封鎖使用者按鈕*/


/*更換噗浪按鈕 */
img[src="http://static.plurk.com/button/plurk.png"] {
filter:alpha(opacity=0);
-moz-opacity:0.0;
opacity:0.0;
}
/*噗浪按鈕*/
.submit_img {
background: transparent url(圖片網址) no-repeat scroll top left;
height: 40px;
padding-left: 80px;
width: 0px;
overflow: hidden;
margin-top: 0px;
}/*更換噗浪按鈕 */


/* 私密噗、語言與選項Private Plurks Languages etc etc*/
#more_options .on, #more_options #more_options_holder {
background: transparent;
color: #000000;
}/* 私密噗、語言與選項*/
#more_options_link{
background: transparent url(/static/timeline/private-lock.png) no-repeat 4px 3px;
border:0;
color: #fff;/*私密噗選項框內顏色*/
outline:none;position:relative;
}
#more_options .on{
border:0
background: transparent url(/static/timeline/private-lock.png) no-repeat 4px 3px;
color: #fff;
}/*私密噗、語言與選項結束*/

/*文字輸入過多框*/
/*Number of Characters left to use*/
.char_updater {color:blue;/*文字顏色,無用*/
}

/*剩餘多少文字Number of characters left 31-0*/
.char_updater.highlight_light {color: red;background: #000 !important;}
/*剩餘多少文字End Number of characters left 31-0 */

/* 輸入框文字過多Too many characters in input form */
.char_highlight {
background: #fff !important;/*文字輸入過多框背景顏色*/
-moz-border-radius: 2px 2px 2px 2px;
-khtml-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding-left: 2px;
color: #fff !important;/*文字輸入過多框文字顏色*/
}
/*輸入框文字過多框 End Too many characters in input form*/



textarea#input_big, textarea#input_permalink {}


.submit_img {
background: transparent url(圖片網址) no-repeat scroll top left;}
#more_options_link{}


#more_options .on{}
#more_options .on, #more_options #more_options_holder {}


.friend_man.block {}




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


所有plurk , 我的plurk , 私密plurk 回應過的plurk 喜歡的plurk 四個按鈕




/*------所有plurk , 我的plurk , 私密plurk 回應過的plurk 喜歡的plurk 四個按鈕--------*/
#filter_tab {
/*background: url(http://s.plurklayouts.com/images/layouts/blacktransparent.png); 背景*/
border: 0 !important;/*邊框0*/
margin-top: 0px;
}/*總外框*/

#filter_tab a.off_tab {
color: #ffffff;/*字色白*/
border:0 !important;/*寬度0*/
!background-color:#ffffff;/*背景顏色,取消*/
text-decoration: none;/*文字底線,取消*/
background: transparent /*背景透明*/
}/*所有連結標籤外觀 */

#filter_tab a.off_tab:hover {
color: #000000;/*字色黑*/
border:0 !important;/*寬度0*/
!background-color:#ffffff;/*背景顏色,取消*/
background: transparent;
text-decoration: none;/*文字底線,取消*/
}/*滑鼠移過標籤*/

#filter_tab a.filter_selected {
border:0 !important;/*寬度0*/
color:#000000;/*字體顏色,黑*/
letter-spacing: 0px;/*文字間隔*/
background: transparent;
text-decoration: none;/*文字底線,取消*/
}/*選中的按鈕標籤*/
#filter_tab a.filter_selected:hover {}/*已經選中的標籤按鈕標籤,滑鼠劃過*/




#filter_tab {}/*總外框*/
#filter_tab a.off_tab {} /*所有連結標籤外觀 */
#filter_tab a.off_tab:hover {} /*滑鼠移過標籤*/
#filter_tab a.filter_selected {} /*選中的按鈕標籤*/
#filter_tab a.filter_selected:hover {} /*已經選中的標籤按鈕標籤,滑鼠劃過*/

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

噗浪的「河道」和「時間軸」,也都是可以修改的。
原始的設定噗浪背景往往都是把這幾樣分開來設定背景,
假如想要取消河道背景來使用整張的網頁背景,或者消除一些框框線,就看這段了~!
不懂的話其實也可以稍微用英文猜猜看功能。


/*------------------河道、時間河道底色圖案-------------------*/
#timeline_holder {
/*background-image: url(河道背景圖網); 河道背景語法。在這邊我註解、取消掉背景*/
/*background-color:#000;河道背景顏色 河道背景顏色,在這邊註解掉*/
background-repeat: no-repeat;/*河道背景不重複*/
background: transparent;/*河道背景透明*/
border:0; /* 噗浪河道上下邊的邊寬,這邊設定成0,就可以沒有框框了*/
}/*河道table*/


#timeline_holder #timeline_cnt #time_show {background: transparent; }
#timeline_holder #timeline_cnt .day_start {background: transparent; }

/*時間軸上的一個個「時間標籤」*/
#timeline_holder #timeline_bg .bottom_start , .bottom_end {
background:transparent;/*讓時間標籤的背景透明*/
color:#fff;/*時間軸上時間標籤的文字顏色*/
font-size:10px;/*時間軸上時間標籤時間字大小*/
}/*時間軸上的一個個「時間標籤」*/

/*時間軸*/
#timeline_holder #bottom_line {
background: transparent;/*時間軸變透明*/
border: 0px solid #fff;/*時間軸上面那條線的顏色*/
}/*時間軸table*/

/*河道最前方,跟著「今天」的框框*/
.day_bg .div_inner{background: none; border: none;font-size:20px; }/*「今天」的長形框框*/
.day_start, .day {font-weight: normal;}/*把「今天」字改變字體*/
.day_start .bottom_start, .day_start .div_start {
margin-top: -20px;
margin-left: 12px;
text-align: left;
}/*調整「今天」兩字的位置*/
/* Today, yesterday, 2 days ago etc text on actual time line area */
/*河道最前方,跟著「今天」的框框*/

/*每個噗浪的框框*/
#timeline_holder table td {
border-radius: 8px;
/*設定框框內層圓角,不作用於IE瀏覽器*/
-khtml-border-radius: 8px;
-moz-border-radius:8px 8px 8px 8px;/*每個噗浪的框框,設定成邊角圓形(mozilla瀏覽器)*/
-webkit-border-radius: 8px;/*每個噗浪的框框。設定成邊角圓形*/

color:#000000;
background: transparent;
border:none;
}/*每個噗浪的框框*/


/*滑鼠移過噗浪時顯示的時間框外層,*/
.evening,.night,.day,.morning{
background: transparent;/*取消背景*/
border:0;/*取消邊框*/
}/*滑鼠移過噗浪時顯示的時間框外層*/
.evening,.night{
background-position:-65px 0;/*背景位置*/
background: transparent;/*取消背景*/
border:0;/*取消邊框*/
}/*滑鼠移過噗浪時顯示的時間框,*/

/*滑鼠移到噗浪時,出現的時間標籤內層*/
#time_show span {
color: #000;/*滑鼠移到噗浪時,出現的時間標籤字體顏色*/
padding-left: 20px;/*時間字偏移距離*/
padding-bottom: 3px;/*時間字偏移距離*/
}/*滑鼠移到噗浪時,出現的時間標籤內層*/




#timeline_holder 河道、時間軸等
#time_show span {} 如下圖




















background: transparent;
讓河道背景變成完全透明。
背景的設定可以看這邊,透明度相關可以看這邊
假如只想變透明一點,可以改用 filter: alpha(opacity=60); opacity: 0.8;

#timeline_holder table td { }
每個噗浪的框框。就是下圖的黑色部份





border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius:8px 8px 8px 8px;
-webkit-border-radius: 8px;

設定成邊角圓形。一次設定兩種瀏覽器(mozilla、safari),詳細可看這邊這邊
目前不作用於IE瀏覽器,google chrome可作用。
但這只是框框內層(td),所以不要這段也可以,可以設定在table層內。



NOTE:
.evening,.night,.day,.morning{}
.evening,.night{)
兩者的關係我還弄不明白。


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

噗浪把最上方的文字分成左、右兩半,要修改是分開修改的



/*---------上邊條,左邊部份,我的檔案、我的朋友、通知------*/
#top_bar .content a{color:#ffffff; font-weight: normal ;background: transparent;}

/*左上邊條,正常狀況下*/
#top_bar .content a:hover{color:#750505; font-weight: normal ;background: transparent;}
/*左上邊條,滑鼠移到連結的狀況下*/
#top_bar .content a#edit_link{color:#ffffff; font-weight: bold ;background: transparent;}
/*左上邊條,滑鼠點過後的狀況下*/


/*---------上邊條,右半部,登出、我的帳號、尋找朋友------------------*/
#top_login a {
font-family: century gothic;/*字型*/
border:0;/*欄寬*/
font-weight: bold;/*字寬*/
text-decoration: normal;/*字劃線,無,正常*/
color: #ffffff;/*字體顏色,白*/
} /*右上邊條,正常狀況*/

#top_login a:hover {
font-family: century gothic;/*字型*/
border:0;/*欄寬*/
font-weight: bold;/*字寬*/
text-decoration: normal;/*字劃線,無,正常*/
color: #750505;/*字體顏色,白*/
} /*右上邊條,滑鼠劃過的狀況*/




#top_bar 代表網頁最上方,左邊的「我的檔案、我的朋友、修改」的框框
#top_login 代表網頁最上方,右邊的「尋找、邀請朋友、登出」的框框

text-decoration: normal; 文字底線,詳情可看這裡
border:0;
邊框寬度。
這些內容其實都在某個框框內,只是都隱藏起來了,可以看這邊的介紹。
框框的顏色、邊緣寬度、邊緣形狀、背景顏色等等都可以改變。
詳情可以看這邊



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

這段程式碼用來修改「整面」的噗浪背景
是最底層的噗浪背景~可以搭配「噗浪河道」來做效果,也可以直接讓背景變成整頁的圖片喔~



body, html {
color: #000000;/*字體顏色,可以查色碼表*/
background: url(整面的背景網址);
margin-top: -1px; /*移動-1pixel的意思,距離top往下-1*/
font-size:12px;/*字體大小*/
font-family: 微軟正黑體;/*指定字型*/
background-repeat: no-repeat;/*固定網頁背景、不要重複*/
background-attachment : fixed;/*靜止網頁背景的滾動*/
}


body, html { }
對整面的網頁控制的意思。
在這個括號內的語法作用到「整面」的網頁

color: #000000;
控制字體顏色,可以參閱色碼表
「#」不能忘記,
但也可以直接「color:black;」這樣表示
或者是「rgb(255,0,255)」這樣表示

background: url(整面的背景網址);
這就是設定整面背景的段落了

background-repeat: no-repeat;
停止網頁背景反覆,詳情參見這裡






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

先寫幾個注意事項


1.
/* */
註解,前後都不可少
2.
;
每一行的結尾,用來辨識「結尾」,少了就會出錯

3.
{ }
邊框,不能漏掉前後。中間放指令。



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