2009年8月22日 星期六

為側邊欄的標題框加上圓角

https://blogger-script-study.blogspot.com/2009/08/border-radius.html?m=0

「圓角框」總給人一種舒服的感覺,所以如果可以在自己的網頁中加入圓角框,除了可以增加親和力,也可以為自己的網頁加分,但圓角框卻是很多程式設計師的惡夢,一般較簡單的方法是使用預先畫好的圓角框圖形並把它設定為背景使用,但這種方法卻只能適用在固定頁面大小的網頁及部落格版型,當然也不是不能解決,就是麻煩了點。還好CSS3的草案中新增了一個叫 border-radius 的屬性,可以讓程式設計師輕鬆的作出圓角形狀,可惜的是目前只有 Firefox、Safari、及Chrome 支援此功能,Opera 及 IE8.0都不支援。

本篇文章就先分享如何用使用 border-radius 達成圓角框的效果。由於我們之前已經有設定過側邊欄標題的背景顏色,所以我們就援引側邊欄的標題方框例子,並把它改造成圓角框。

寫在前面

  • 本文章所介紹的修改方法,都是以橘色系、兩欄、非固定式的 Blogger 官方板行為基礎。點這裡確認修改的板型
  • 更改 Blogger 的板型(template)前,請記得每次先備份自己的 【Blogger 範本】,才不會因為修改沒成功而造成整個部落格而法顯示。按這裡瞭解更多關於『如何修改及備份 Blogger 板型』的注意事項。強烈建議更改板型以前必須備份原來板型。
  • 本篇文章所採用的方法僅適用於 Firefox、Safari、Chrome等瀏覽器,不適用 IE(含8.0)、Opera。

更改板型-側邊欄標題背景框加圓角 

修改的板型 修改的板型(是否親和多了)
Blogger-border-radius_original Blogger-border-radius_create01


1. 一樣用搜尋功能找到【sidebar h2】,然後在定義側邊欄的地方新增兩行字。

  • 適用於 Firefox 的圓角框指令,半徑為 8 個點。  -moz-border-radius: 8px;
  • 適用於 Safari, Chrome 的圓角框指令,半徑為 8 個點。-webkit-border-radius: 8px; 
  • 以上兩個指定都是試定整個方框的四個角為圓角,另外也可以單獨設定個別的角落為圓角
    • -moz-border-radius-topleft  適用於 Firefox, 設定左上角為圓角
    • -moz-border-radius-topright 適用於 Firefox, 設定右上角為圓角
    • -moz-border-radius-bottomleft 適用於 Firefox, 設定左下角為圓角
    • -moz-border-radius-bottomright 適用於 Firefox, 設定右下角為圓角 
    • -webkit-border-top-left-radius  適用於 Safraiire, Chrome, 設定左上角為圓角
    • -webkit-border-top-right-radius 適用於 Safraiire, Chrome, 設定右上角為圓角 
    • -webkit-border-bottom-left-radius 適用於 Safraiire, Chrome, 設定左下角為圓角 
    • -webkit-border-bottom-right-radius 適用於 Safraiire, Chrome, 設定右下角為圓角 
    • 這裡有三個圓角框的例子,就是使用個別設定圓角框的指定達成的:
      border-radius-top-left-right border-radius-top-left-bottom-right border-radius-bottom-left-right
▼未加側邊欄背景框程式碼的原始板型內容
程式碼

#sidebar h2 {
  color:$sidebarcolor;
  margin:0px;
  padding:0px;
  font:$headerfont;
}

#sidebar .widget {


▼ 已經加了側邊欄背景框程式碼的板型內容 (參考 如何更改Blogger側邊欄的標題成為有背景的文字 進一步了解)
程式碼

#sidebar h2 {
  color:$sidebartitlecolor;
  background-color:$sidebartitlebgcolor;
  margin:0px;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:30px;
  font:$headerfont;
}

#sidebar .widget {

▼修改後的板型內容(紅色為新增或修改的部份),注意文字必須正確。
程式碼

#sidebar h2 {
  color:$sidebartitlecolor;
  background-color:$sidebartitlebgcolor;
  margin:0px;
  padding-top:3px;
  padding-bottom:3px;
  padding-left:30px;
  font:$headerfont;
  -moz-border-radius: 8px; /* 適用 Firefox 
的圓角框指令 */
  -webkit-border-radius: 8px; /* 適用
Safari, Chrome 的圓角框指令 */

}

#sidebar .widget {


▼這是板型修改後的成果。
 

Blogger-border-radius_create01 


回到 Blogger 部落格技巧總整理

8 則留言:

JOSEPH 提到...

請問版主:如何為文章標題加上框線與背景顏色,謝謝!

工作熊 提到...

YUAN;
你的問題應該不難,只要融合下列兩篇文章的的技巧就可以了,但我現在沒有那麼多時間,只好請你先自行研究一下囉!
如何更改Blogger側邊欄的標題成為有背景的文字http://blogger-script-study.blogspot.com/2009/08/change-sidebar-text-to-background.html
為部落格文章加上色彩繽紛的重點底線 http://blogger-script-study.blogspot.com/2009/08/change-sidebar-text-to-background.html

JOSEPH 提到...

感謝您的回答!但是請問一下適用新版的theme嗎?

此外想請問目前使用的新版Theme文章內的連結顏色與文章區下方的"首頁","訂閱"等連結顏色被限制是相同的,但是我希望可以是不同的顏色,請問有辦法嗎?

請參考我的網站:www.thedoor.asia 謝謝!

工作熊 提到...

YUAN;
新版的Theme可能比較麻煩。
如果想要把"首頁","訂閱"等連結顏色變成不一樣就需要重新設計CSS格式,然後給予其中一個新的CSS格式。另外,不同的新板Theme會有不同的CSS格式,有些或許會有分開的CSS,可能要自己試一下。

JOSEPH 提到...

謝謝,我再試試看!

moby 提到...

工作熊您好:
最近剛剛使用blogspot的部落格,搜尋到您的文章,給了我很大的幫助,非常感激!看了您這篇文章,有個外行的問題想請教,如果我想要的是整個版面的某個角落有圓角,請問這樣可行嗎?以您的部落格而言,就是白色這一大片(不是底圖),以我的部落格而言,就是黑色那一塊,很抱歉耽誤您的時間,希望您能給我一點研究方向,達不到也沒關係。謝謝!

工作熊 提到...

moby;
應該是可以,但一般我們都會以圖片來達成這種效果,因為比較可以適用在各個瀏覽器,畫面也會比較漂亮。

moby 提到...

工作熊您好:
謝謝您那麼快地回覆。我先按照您提的圖片的方式,檢視thml用交叉比對的方式找到那張圖片位置,重新替換成我的圖檔,有成功!可是因為我要的圓角只有一邊,圖片無法重複,會有長度的困擾。情急之下,用您文章中提的指令,不斷嘗試後找到正確位置,真正的成功了!現在我的部落格風格越來越接近我想要的。唯一缺點如您所言,IE不支援,但因為我都使用safari瀏覽器,所以對我而言不是困擾,只是想再次謝謝您!感謝您的無私分享!也歡迎到我部落格逛逛。謝謝!