7.11.08 >> 我的網上小店終於開張了~ \(^0^ )/ http://hk.myblog.yahoo.com/iluvmina 大家快去看看參觀一下喔!! >>新模版完成!!

[CSS] - 如何修改側邊標題欄 (己作修改7.8.07)

上一篇 / 下一篇  2007-08-04 14:16:01 / 個人分類：【模版教學】

查看( 1506 ) / 評論( 8 )

今次教的是如何修改側邊標題欄

不明什麼是側邊標題欄的? 看下圖

 

/*邊欄標題*/
.sidearea
.xspace-blocktitle { color: #FFF; background: url(圖址) no-repeat; height: 30px; line-height: 30px; padding-left: 0.8em;}

去到樣式表內按[Ctrl]+[F] 尋找"xspace-blocktitle"

找到類似上面語法的,刪除後再複製語法貼上

 

#FFF(白色) 標題字色

標題字的色碼 可用色碼或是顏色的英文拼法，結果都是相同的。

你可根據你的圖而定什麼色(色碼可參考我的書籤裡己有很多)

 

no-repeat 圖片不重複

repeat 重複

 

height 標題欄的高度設定

30px(請自行調教高度)

 

line-height 行距

30px 數值越大，距離越遠。

 

padding-left 標題字與邊位的距離 (請自行調教距離)

0.8em 數值越大，距離越遠。

 

示範1.

想在標題字前加小圖示，語法可改成這樣:

.sidearea

.xspace-blocktitle { background: #D7DFEF url(http://心心圖的圖址.gif) no-repeat left; height: 30px; line-height: 30px; padding-left: 25px; }

 

示範2.

想把整個標題欄背景換掉,語法可改成這樣:

.sidearea

.xspace-blocktitle { background: url(背景圖址) repeat; height: 30px; line-height: 30px; padding-left: 25px; }


 作任何修改前，一定要作好備份[Back-up]；

 如發現語法不能使用或錯誤，請留言清楚公知；

 當遇到修改有問題，歡迎留言發問，我都會一一解決(盡人事啦)，但自已先摸索研究一下嘛，不要常依賴別人囉！

 喜歡本站可以把帶回去連結喔！！

 

-----這個教學完成-----

 

◎這篇文章己被查閱了次

 

 用BloggerAds讓部落格更精采


相關閱\讀:

論壇模式 推薦 收藏 分享給好友 管理

TAG: 模版教學

GGGBOY 神秘夜空 GGGBOY 發佈於2007-08-05 20:40:45
真是好有用呀一定要試驗啦謝謝..^_^
☆★cplada悠閑窩 ~^0^~ cplada 發佈於2007-08-05 22:38:45
這個我很想修改好久了，但是又無途可尋，幸好有你提供方法，真是太感激你了。
☆★cplada悠閑窩 ~^0^~ cplada 發佈於2007-08-06 00:55:36
試過了，不成功喔！我可能需要少少時間研究，畢竟我是一個電腦盲。有問題會再請教。
☆★cplada悠閑窩 ~^0^~ cplada 發佈於2007-08-08 16:00:56
側邊欄終於ok了，我還想修改頭頂的菜單啊！請問有沒有方法呢？因為我blog現在的菜單（日誌、文件、圖片等）都是全白色的。
回億 loilta 發佈於2007-08-11 10:21:03
我不明白點[Ctrl]+[F] 尋找"xspace-blocktitle"
唔好意思請教請教
SUBEBE's 部落教學 subebe 發佈於2007-08-11 11:53:42
Re : loilta                                 

即係去到樣式表度按keybroad中的"Ctrl"<--左下角同"F",
跟住就會彈個表出黎,你輸入字就可找尋....
(因為樣式表內太多語法,這個是一個好方法去找尋相對的語法)
回億 loilta 發佈於2007-08-11 13:38:59
成功la>3<多謝你呀!感激不盡!
將自己縮小再縮小 annngon 發佈於2007-08-11 22:24:32
謝謝,我試著更改數值,睇到不同的效果,但想將整體字改大,看來得慢慢學習了.  
今次 換了一張圖.
我來說兩句

(可選)

Open Toolbar