耶耶~換按鈕了 (9/3新增背景色修改)

摸索了許久~終於成功了 嘎嘎..

我是天才!! (轉圈~)

要來個最最最最最簡單的教學嗎? (燦笑


===============我是可愛ㄉ分隔線=================

請在CSS區找到下面的語法

/*-----------------------最上方顯示大圖-----------------------*/
.banner{
background: url(http://pic.bahamut.com.tw/HOME/75/head_u9010066.JPG) repeat;
height:120px;
padding-left:20px;
padding-top:15px;
}/*小屋上方主圖*/
.banner_t1{
color:#DEC9FB;
font-weight:bold;
}
.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color:#DEC9FB;
font-weight:bold;
text-decoration:inherit;
}/*暱稱和帳號文字*/
.banner_t3{
color:#DADADA;
line-height:18px;
height:42px;
}/*碎碎唸文字顏色*/
.banner_t4{
color:#008E25;
}/*顯示官階的文字顏色*/
.banner_t5{
color:#235BD3;
}/*顯示稱號的文字顏色*/

/*---------------------------主選單---------------------------*/
.menu{
background:url(http://pic.bahamut.com.tw/home/menubar.gif) no-repeat;
height:35px;
}/*選單背景圖*/
/*----選單所在頁面狀態----*/
.menuIN{
background:url(http://pic.bahamut.com.tw/home/menu_in.gif) no-repeat;
font-weight:bold;
color:#cccccc;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color: #594c99;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
/*----選單非所在頁面狀態----*/
.menuout {
font-weight:bold;
COLOR:#cccccc;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#cccccc;
height:35px;
line-height:35px;
text-align:center;
}
.menuout a:hover {
background:url(http://pic.bahamut.com.tw/home/menu_in.gif) no-repeat;
font-weight:bold;
color:#594c99; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}

只要改白色部份的連結就可以嚕~

第一個連結是放最上面的大圖 (預設大小750*120)
第二個連結是放選單的背景 可以跟第一圖連貫 (預設大小750*35)
第三個連結是放選單的按鈕 (本頁時)(預設大小83*35)
第四個連結是放選單的按鈕 (其他頁時) (預設大小83*35)

哇哈哈~簡單吧!!圖要自己找免空放喔~CC

===============我是可愛ㄉ分隔線=================

如果覺得按鈕下面那條螢光綠很礙眼的話
只要把
/*---------------------------次選單---------------------------*/
/*----無次選單狀態----*/
.menubarA1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
}/*次選單與主選單連接部分*/
.menubarA2{
background:#EBEBEB;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*次選單結束部分*/
/*----有次選單狀態----*/
.menubarB1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*次選單與主選單連接部分*/
.menubarB3{
background:#D8F1F4;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
padding:6px;
text-align:left;
}/*放次選單按鈕的背景色*/
.menubarB2{
background:#EBEBEB;
}/*次選單結束部分*/

/*----------------------------小屋封面圖------------------------------*/

之間的所有#D8F1F4 #AFE8F0和#5CBAC8後面全部改成想要的顏色代碼就OK了..

不過...其實把全部#******都改掉也沒差..
我才不管他左邊線右邊線上邊線下邊線分別是什麼色..
反正全部一起改是最乾淨又方便又快速滴~哈哈


要查顏色碼的話可以來這裡

恩..先這樣吧~嘎嘎..來去睏..Z0Z



//////////////////////////9/2新增 背景色教學///////////////////////////

請把以下CSS複製貼上在CSS區的最上方
並在所有#後面填上想要的色碼即可~^^
(因為我不懂有多少個框架...所以把原始碼裡看到的通通弄進去了)

/*背景色*/
div.left {
background-color: #6461a3;
}
div.leftOut1{
background-color: #6461a3;
}
div.leftOut2{
background-color: #6461a3;
}
div.leftDown {
background-color: #6461a3;
}

div.right {
background-color: #6461a3;
}
div.rightTop {
background-color: #6461a3;
}
div.rightDown {
background-color: #6461a3;
}
div.container {
background-color: #6461a3;
}
div.main {
background-color: #6461a3;
}
div.mainOut {
background-color: #6461a3;
}
div.footer {
background-color: #6461a3;
}



///////////我是可愛ㄉ分隔線/////////
如果想要用圖當背景~只要把
background-color: #6461a3;
換成
background: url( 圖片所在網址 ) repeat;
即可~^^

///////////我是可愛ㄉ分隔線//////////


感謝DragonZelda提供

以下是在sindsiona 板上的原文:

DragonZelda (龍。薩爾達) 時間：2007-09-03 10:08
安 ~
經過昨天一整天的測試﹐我尋找到控制剩下空白部份的方法了。
其中一部份的內容如下﹐兔子加入CSS裡就明白我所說的意思了。
如果兔子有興趣﹐可以寫信找我。

div.left {
width: 774px;
background-color: #000000;
margin-top: 1px;
text-align: center;
}


祝大家都能把家弄的漂漂喔~
==============================
下一篇教學如何調整最上面帳號部分文字