【小屋】CSS自訂版面：進階─修改預設銀色按鈕篇

原文連結：《【CSS】巴哈預設按鈕更動法──啻異(u4)》
前言：＜本文發表於2007/09/06 最後修改於2007/09/06 ２１：４０　如語娃娃＞
　　‧本篇為觀看「啻異(u4)」發表的教學後(請看原文連結)，並進一步經過如語的朋友瑞奇的細部指導，整理修改而成。
　　‧如果您是經過前面教學一步一步走來的，那麼部分的語法相信都略之一二，如果忘記了不妨回頭翻翻教學。若您需要本篇簡潔一點的語法，請到啻異的教學，會得到您所需要的答案。
　　‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。
　　‧以下語法請置於ＣＳＳ最頂，小心不要放在ＢＯＤＹ｛｝之間唷，它們必須分開放的。
－－－－－
　　‧增加文末的試看版面設計。（2007/09/06 21:40）

───────────────────────────────────
───────────────────────────────────
/*------------------基本按鈕語法------------------*/
/*各項目的分類影響
.button2─小屋區「看更多」、「更多新文章」
.button3─「勇者造型相本」
.button4─「+收藏」、「寫信(留言)給他」、「送他禮物」、「觀看留言」、勇者評價區「看結果」
.button_h1
.button_h2*/

/*--「+收藏」按鈕文字色與去圖--*/
.button_c1{
color:#c97586;}
.button_c1 img{
display:none;}

/*-----------連結按鈕基本呈現----------*/
/*也可像後方.button4一樣分類出來設定*/
.button2,.button3,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
/*文字字型*/
font-size:12px;
/*文字大小*/
color:#c97586;
/*文字色彩*/
background:#FFFFFF;
/*背景色*/
border:1px #f09199 solid;
/*框線設定，框度、色彩、樣式*/
cursor:url(http://myhome.apbb.com.tw/indream228/cur_g5.ani)}
/*滑鼠移入樣式*/

/*--button4「+收藏」等按鈕--*/
.button4 {
font-family:"Book Antiqua,Arial";
font-size:12px;
border-width:1px 1px 1px 1px;
/*框線的寬度(上右下左)。這樣的寫法算是縮寫之一，可以省去不必要的重複「border-right、left...」*/
border-color: #f09199 ;
/*框線的顏色，一樣可以放入四組顏色，呈現的位置(上右下左)*/
border-style: solid;
/*框線的樣式，一樣可以放入四組不同的樣式，呈現的位置(上右下左)*/
line-height:16px;
/*內文字行的高度，太小的話字會不見唷*/
background:url(http://myhome.apbb.com.tw/indream228/006-3.gif) no-repeat #FFF;
/*背景，背景的語法也是可以集中寫成一行的。目前的是(圖址，不重複，背景色)*/
text-align: center;
/*文字置中*/
text-decoration: none;
/*文字特殊樣式，無*/
width:100%;
cursor:url(http://myhome.apbb.com.tw/indream228/cur_g5.ani)}
/*滑鼠移到按鈕上呈現的圖案*/
/*滑鼠的樣式在BODY中只要設定上述之內容，並在「)」後方加上「,text」，就是在一般情況下滑鼠的顯示方式，只是遇到連結、按鈕時需要額外設定。*/

/*--滑鼠造訪按鈕，呈現的樣式--*/
.button2:hover,.button3:hover,.button4:hover{
color:#c97586;
/*文字顏色*/
font-family:"Book Antiqua,Arial";
/*文字字型*/
font-size:12px;
/*文字大小*/
background:url(http://myhome.apbb.com.tw/indream228/006-3.gif) no-repeat #FFF;
/*背景*/
border:1px #f09199 solid;}
/*框線*/

-------
有興趣的人可以試看看，看以下連結純文字檔中的設定。
下載檔案後，將文件中語法全選複製到自訂版面全選貼上，
接著按預覽看看版面的樣式(不要確認送出，不然自己小窩的原檔不見會很囧的)，
或許這也會是不錯的修改方向。
瀏覽過版面後，不要儲存，直接按上一頁離開自訂版面，這樣就不會動到您漂亮小窩的設定XD~
試玩
這個檔案是在修改按鈕語法之前的，所以，按鈕還是無設定。
<原本是弄來幫朋友檔一下小屋版面，現在是分享看看。>

LINE 分享

留言

2007-09-06 12:44異 / 啻異：
寫出來了!
拿走!!(綁)
其實我就是因為懶的分類
很多人大概也想速成，所以我就直接歸兩類了
寫的很仔細~我拿去連結文末了-ˇ-
2007-09-06 13:00莉薇婭莞夢：辛苦你了～
我期待你新的研究成果ＸＤ～
2007-09-06 12:52啦啦噗：
大大太強了＞＂＜～～推～
2007-09-06 13:00莉薇婭莞夢：謝謝˙ˇ˙／
2007-09-06 12:53藏鏡咪咪：
如語很用心喔~來幫推一下^^
2007-09-06 13:01莉薇婭莞夢：謝謝鼓勵～

呵呵，我暈了…
因為按紐被影響的地方很多……
2007-09-06 13:01侯：
娃娃~
太棒了~
2007-09-06 13:24莉薇婭莞夢：謝謝ˊˇˋ~
2007-09-06 13:13Beatrice：
再推一個！如語辛苦了。
2007-09-06 13:24莉薇婭莞夢：謝謝˙ˇ˙/
2007-09-06 13:17七劍下天山：
======================>圖案我也想學 = =
2007-09-06 13:24莉薇婭莞夢：請看「【小屋】CSS自訂版面：一、整體文字＆其他共用部分篇」
在其他共用部分有提到。
2007-09-06 13:43莉薇婭莞夢：/*----其他共用部分----*/
.home_input2{
color:#028760;
/*input實線*/
/*基礎：color是為輸入欄位的文字顏色，boder是為欄位的整體框線設定，background-color是為輸入欄位的背景色*/
border:1px solid #fcb4b4;
/*欄位框線色*/
background-color:#FFF;
/*無圖片時的背景色*/
background-image : url(http://myhome.apbb.com.tw/indream228/006-4.jpg);
/*背景圖的網址*/
background-repeat:no-repeat;
/*背景圖不重複*/
background-attachment: fixed;
/*背景圖不移動─浮水印*/
background-position:95% 90%;
/*背景圖的擺放位置(X軸，Y軸)*/
}
/*進階：「background」可設定欄位背景圖(回應留言、發文驗證碼)、設定圖片呈現的位置，就是目前如語回應文章時的留言欄底圖，加入背景圖的語法可參考前一篇教學。若不加背景圖，「background」的語法可刪除。*/
2007-09-06 13:49林鴻鈞：
還是把作者綁走比較好每次來看多麻煩啊
2007-09-06 22:25莉薇婭莞夢：0.0
不可以這樣其他人看不到了@@"

歡迎提問啊XD~
2007-09-06 13:56米洛：
試了一下...發現h1的設定會吃掉寫信給他加入好友觀看留言留言給他這4個..
有沒有辦法只改文章區的收藏和我推呢...

因為底色問題...這2區的顏色會互衝所以用同一顏色的話會有一邊看不清楚...
真的不行的話就得做按鈕了...ˊˇˋ"
2007-09-06 22:24莉薇婭莞夢：呵呵，它再考驗巴友的能力...(大驚)
2007-09-06 14:49老爹：
你右邊那個分類目錄..最新留言..最新文章那個框框裡面都有小星星那要怎麼用阿!!我的都綠色一顆

找別的的部落格都找部到交這個的方法@@能幫我一下嗎 3Q~~~
2007-09-06 22:10莉薇婭莞夢：已解
話說這是最初的那篇教學說的哩@@....
2007-09-06 14:53依蕗：
借收藏囉~ 3QQQ
2007-09-06 22:10莉薇婭莞夢：不客氣>///<
2007-09-06 15:06米洛：
解決的..原來有些地方始於兩個class所以會被吃掉...另外我把所有按鈕所屬的class找出來嚕^^
2007-09-06 22:13莉薇婭莞夢：辛苦你了XD~~
2007-09-06 15:25威爾伊斯麥海德：
謝謝分享來，去畫按鈕囧+
2007-09-06 22:15莉薇婭莞夢：連按鈕都自製啦?
果然是高手Q口Q...
我沒那個心去弄一一"
抓圖比較快一ˇ一"
2007-09-06 15:27)＊ sｈα nｅ漩＊(：
我也好想把如語綁走啊~~(抱)
連教學都比我家的改建進度快XD
(是我太懶...)
2007-09-06 22:23莉薇婭莞夢：(摸頭)乖乖

慢慢來吧，想改時在改˙ˇ˙

畫說這樣竹列的很多人會不清楚是哪些地方的語法
以後有機會將大家常問的抽出來額外說明@@...
(雖然各界的跳來跳去解說還滿多的XD~)
2007-09-06 15:50白菊：
嗯...要自己畫圖呀?

感謝分享^O^
2007-09-06 22:23莉薇婭莞夢：抓圖就好啦一ˇ一

不客氣˙ˇ˙//
2007-09-06 15:54白菊：
我要給GP >///<
2007-09-06 22:26莉薇婭莞夢：謝謝~
2007-09-06 17:45老爹：
恩 ..我上一篇不用交了剛剛去別人的部落格找到@@QQ
2007-09-06 22:27莉薇婭莞夢：很多地方都有教學~我家是逐條說明(汗)
逐條說明細，但整個看起來也複雜
2007-09-06 19:56蜜雪莉雅：
謝謝大大的分享 , 我又學到了一點 ^^

超級實用的 >< ~ 讚 !!
2007-09-06 22:27莉薇婭莞夢：不會~很高興能幫上忙@ˇ@
2007-09-06 20:24小剛使出喬伊小姐：
雖然看不懂不過不推不行QˇQ!!
2007-09-06 22:28莉薇婭莞夢：所以您可以參考啻異大大的說明XD~

有需要的話請說顏色(提供所需的圖)，或許也能幫改(笑)
2007-09-06 20:49阿葉神：
看不懂＋１

不過還是推了ＸＤ
2007-09-06 22:29莉薇婭莞夢：謝謝推呢~

有需要的話，我還是希望我能夠做更好的詮釋...
2007-09-06 22:15雪落封塵：
偷偷抱走>///<
再啾一個(●3●)
2007-09-06 22:30莉薇婭莞夢：好害羞~>///<
2007-09-06 22:18...：
真的很感謝!! 我終於把最討厭的評價按鈕弄不見了~~\>口</ (萬歲~v)

謝謝如語的教學解決了我長久以來的苦惱~~T_T+
2007-09-06 22:30莉薇婭莞夢：很高興能幫上你的忙>口<
有問題的話要再提出來唷@ˇ@
2007-09-07 01:28琉璃：
感謝娃娃的教學 @_@
雖然我一開始看不懂

從昨天中午開始研究到晚上 @_@
最後終於搞懂了

不過我想問噢
左下角的沒有效果嗎(好友名單跟評價區方面的)

因為我用火狐製作時完成後可以看到有連結後的效果
但是換ie瀏覽時變純背景了 @_@
2007-09-07 11:39莉薇婭莞夢：報告，很抱歉，我家沒用火狐，您說的問題我還真不知道該怎麼解釋@@"
巴哈設定的按鈕一個通常都跟好幾個語法有關係，所以，或許在IE時，它有優先選擇設定的東西，如果相衝就是平面(應該?)

話說在各文章中瀏覽最常看到是說火狐沒有顯示效果，
這還是第一次有反過來問的問題啊@@...
或許您可以去兔大的窩瞧瞧@ˇ@
2007-09-07 08:46成小玉：
好熟悉的小屋...顆顆
2007-09-07 11:35莉薇婭莞夢：就是你家嘛XD~
2007-09-07 18:05~Ceylon錫蘭~：
收藏去了!感恩啊~>口<
2007-09-07 23:04莉薇婭莞夢：不客氣>ˇ<//
2007-09-07 20:53殄歿：
好詳細，
我收進自己精華囉。
2007-09-07 23:04莉薇婭莞夢：好的~請慢用(害羞)
2007-09-08 07:06letmedo：
好人~~就是會分享好東西
2007-09-08 09:04莉薇婭莞夢：←好人?
2007-09-09 04:52Beautiful Things：
哈...如語大
我又來煩你了>"<"
為什麼我的『勇者造型相本』的文字顏色和『今日訪客下面的【看更多】』的框線
沒辦法像旁邊的一樣的樣色??
這是我打的語法你看看那裡有錯幫我修正一下^^"
先推一個~謝謝
/*-----------連結按鈕基本呈現----------*/
.button3,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
font-size:12px;
color:#E6E6E6;
background:#000000;
border:1px #0049AA solid;
cursor:url(xxxxx)}

.button2{
font-family:"Book Antiqua,Arial";
font-size:12px;
color:#E6E6E6;
background:#000000;
border:1px #000000 solid;
cursor:url(xxxxx)}

2007-09-09 09:02莉薇婭莞夢：您好
或許您需要參考這邊的設定，或許是它的設定蓋掉您的顏色設定唷
/*----整體文字----*/
.extend{
color:#c97586;
}
.extend a:link{
font-size :11px;
}
.extend a:hover{
font-size :13px;
}
.extend a:visited{
font-size :11px;
color:#c97586;
}/*特殊連結(藍色)及屋主文章留言*/
2007-09-09 10:29◤ カオス ◢：
哇! 對我這個電腦笨蛋來說~

真是太有幫助啦!! 感謝!! (淚

拿去收藏囉! 請接受 GP !! ^ ^
2007-09-09 11:13莉薇婭莞夢：謝謝(>///<)
2007-09-09 16:24Beautiful Things：
/*----整體文字----*/
TD{
color:#0049AA;
font-size:13px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}
我那邊的語法是這樣...那我要怎麼改才不會去壓到??
2007-09-11 12:33莉薇婭莞夢：反應過來您有問題時
看你家似乎已經沒問題了XD"
2007-09-11 14:01乾田杯人：
請問...
部落格最新文章、最新收錄精華以及好友創作紀錄
他們右下角的按鈕是屬於哪些的分類呢?
不是button2嗎?我已經改了，但文字還是黑的
2007-09-11 15:21莉薇婭莞夢：請問能否給我看看您的這邊的全部語法嗎?
因為按鈕很多都套用複數以上的屬性
2007-09-11 15:25乾田杯人：
/*------------------基本按鈕語法------------------*/

/*各項目的分類影響
.button2─小屋區「看更多」、「更多新文章」
.button3─「勇者造型相本」
.button4─「+收藏」、「寫信(留言)給他」、「送他禮物」、「觀看留言」、勇者評價區「看結果」
.button_h1
.button_h2*/

/*-----------連結按鈕基本呈現----------*/
/*也可像後方.button4一樣分類出來設定*/
.button2,.button3,.button4,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
/*文字字型*/
font-size:12px;
/*文字大小*/
color:#000000;
/*文字色彩(勇者造型相本、加為好友、設黑名單、今日訪客下[看更多]、更多新文章)*/
background:#;
/*背景色*/
border:1px #000000 ridge;
/*框線設定，框度、色彩、樣式*/
cursor:url()}
/*滑鼠移入樣式*/

.button_h1{
background-image:url(http://i92.photobucket.com/albums/l12/jackyex11/bk01.gif);
color:#FFFFFF;/*字的顏色*/
}/*所有按鈕*/

.button3{
background-image:url(http://i92.photobucket.com/albums/l12/jackyex11/bk01.gif);
color:#FFFFFF;/*字的顏色*/
}/*[勇者造型相本]按鈕*/
2007-09-11 15:49莉薇婭莞夢：發現了！就是它↓！「#000000」文字顯示黑色，把它改成「#FFFFFF」吧
.button2,.button3,.button4,.button_h1,.button_h2{
color:#000000;
/*文字色彩(勇者造型相本、加為好友、設黑名單、今日訪客下[看更多]、更多新文章)*/
}

------
PS：您把「.button3」分出來設定後，上面的「,.button3」要刪掉唷。
2007-09-11 16:03乾田杯人：
.button2,.button4,.button_h1,.button_h2{
font-family:"Book Antiqua,Arial";
/*文字字型*/
font-size:12px;
/*文字大小*/
color:#FFFFFF;
/*文字色彩(勇者造型相本、加為好友、設黑名單、今日訪客下[看更多]、更多新文章)*/
background:#;
/*背景色*/
border:1px #000000 ridge;
/*框線設定，框度、色彩、樣式*/
cursor:url()}
/*滑鼠移入樣式*/

.button_h1{
background-image:url(http://i92.photobucket.com/albums/l12/jackyex11/bk01.gif);
color:#FFFFFF;/*字的顏色*/
}/*所有按鈕*/

.button3{
background-image:url(http://i92.photobucket.com/albums/l12/jackyex11/bk01.gif);
color:#FFFFFF;/*字的顏色*/
}/*[勇者造型相本]按鈕*/
--------
我把它改成上面這樣
可是他的字還是一樣的顏色(好像是灰色而不是黑色)
2007-09-11 16:19莉薇婭莞夢：您是要黑色還是白色?
2007-09-11 16:33乾田杯人：
我要改成白色
但是怎麼改都是灰色的
2007-09-11 16:41莉薇婭莞夢：下面這段加到你設定的地方下面
/*--滑鼠造訪按鈕，呈現的樣式--*/
.button2:hover,.button3:hover,.button4:hover{
color:#FFFFFF;
font-family:"Book Antiqua,Arial";
font-size:12px;
background:url(http://) no-repeat #FFF;
border:1px #f09199 solid;
}
－－－－－－－－－－－－－－－－－
↑背景網址看你要不要設定。
2007-09-11 16:53乾田杯人：
一樣呢@@
我是要把(勇者造型相本)這幾個字變成白的
跟下面的(加為好友)(寫信給他)...等等一樣
2007-09-11 17:16莉薇婭莞夢：/*--「+收藏」按鈕文字色與去圖--*/
.button_c1{
color:#FFFFFF;}
.button_c1 img{
display:none;}

不好意思讓你兜了一圈，上面的語法請補充上去，就沒問題了。
2007-09-11 17:17莉薇婭莞夢：不過勇者造型的我還要在看一下
上面的補充後看更多的文字顏色就會變了
2007-09-11 17:25莉薇婭莞夢：請設定「/*----整體文字----*/」中「A:link」的「color:;」
不過設定的同時也會影響：好友新文章之好友帳號連結顏色

設定後，例如：
A:link{
color:#FFFFFF;
font-size:12px;
text-decoration:none;
cursor:url(http://)
}/*還未造訪連結狀態*/
2007-09-11 17:29乾田杯人：
不...可能是我沒說清楚
謝謝你！
2007-09-11 17:46莉薇婭莞夢：ORZ
謝謝你~
2007-09-16 08:42糖水‧不加糖：
收藏+1
2007-09-16 13:39莉薇婭莞夢：歡迎收藏XD~
2007-10-01 21:52不再打擾是最後的溫柔：
收藏囉 ! 謝謝 ^ ^
2007-10-04 06:49莉薇婭莞夢：歡迎唷˙ˇ˙

小屋創作

日誌2007-09-06 12:38
【小屋】CSS自訂版面：進階─修改預設銀色按鈕篇

相關創作

Anya Melfissa - 口說練習的秘訣

第三章方緣操作手冊

[達人專欄] 【Godot Plugin】幫你的遊戲加入對話系統 —— Dialogic 2

留言

日誌2007-09-06 12:38【小屋】CSS自訂版面：進階─修改預設銀色按鈕篇

相關創作

Anya Melfissa - 口說練習的秘訣

第三章 方緣操作手冊

[達人專欄] 【Godot Plugin】幫你的遊戲加入對話系統 —— Dialogic 2

留言

日誌2007-09-06 12:38
【小屋】CSS自訂版面：進階─修改預設銀色按鈕篇

第三章方緣操作手冊