在 xuite 的「佈景主題」中提供了蠻多的選 擇,可以讓使用者直接套用自己喜 歡的樣式,不過即然有可自訂修改 版型 CSS 的功能,那麼自然就會有不少人喜 歡把自己的 blog 搞的與眾不同一些,就算是我這樣 落伍的資訊人,也不免想要自己動 手調整,經過了一番折騰,因為先 前完全不懂任何 css 的東西,最後終於也讓我這個布落 格新手終於也搞出了一點點心得以 及成果~其實要瞭解 xuite css 的基本架構並不難,真正麻煩的是 要花不少時間去實際測試,並且調 整出自己喜歡的樣式、主題。
相信其它 BSP 的 css 應該也差不多都是這樣的原理吧。
我原先並不想要寫如何調整 xuite css ,原因之一是我會調整的部份也不 過是一些小小的皮毛,原因之二則 是 xutie 到處都可以找到一些高手的範例及 解說,所以認為何必再寫一些大家 已經看膩的東西,於是先以「記要 」的方式來陳述一些我在學習 xuite css 時的心得及問題。
乍看之下 xuite 的「佈景主題」中提供了蠻多的版 型,其實說穿了 xuite css 就是只有一個版型而以~只是看每 個人如何在這相同的版型結構下, 將這些可用的「欄位物件」做出不 同的「屬性變化」。
xuite css 的版型定義,主要分為七個區塊, 分別是 #container,#ban ner(標題),#footer (頁尾),#mid(中欄),# linksLeft(左欄),# linksRight(右欄), #content(內容)等。
#container
#banner
#mid
#linksLeft
#linksRight
#content
#footer
在中欄 #mid 的部份,幾乎是佔據了整個版面, 其內部又包含三個區塊 #linksLeft, #linksRight, #content;其中主要是以 padding 屬性來決定左右欄最大寬度,由於 左欄和右欄都是設定某一固定寬度 ,而 #content 的寬度會隨著瀏覽器改變。(L- C-R) 是預設的版型,其實只要小改一下 ,我們就可以有不同的版型呈現。
(L-C-R) xuite 相準的版型,只要將所有欄位放在 同一個側邊,亦可變成 (L-C) or (C-R)。
(L-R-C)
(C-R-L) ezPost 目前的版型,而且有「橙、黑」兩 種配色主題。
當主要的版型定位之後,就是要調 整其中各欄位的顯示屬性了,「欄 位、物件、屬性」的定義;在上述 七個區塊中,有不同功能的「欄位 」存在,我們可以各別設定這些欄 位的屬性,或是統一設定欄位的屬 性而不需要一個個更改;「關於我 、日曆」這兩個「欄位」的屬性需 要各別獨立設定。
以下就簡列大多數我們所看到的一 些欄位名稱;其實只稍做觀察,就 可以發現一些共通性,就可以很快 的調整 css 的內容了。
/************** *************** *************/
#container{}
#banner{}
#mid{}
#linksLeft{}
#linksRight{}
#content{}
#footer{}
/************** *************** *************/
/*檔頭*/
menulist{} , menu{} , logo{} , blogname{} , blogemotion{} , blogemotion{} , description{}
/************** *************** *************** ****/
/*關於我*/
avatar{} , avatarPhoto{} , avatarID{} , avatarDesciptio n{} , .avatarbutton{}
pTitle li{} , pTitle{} , personaltitle{} , personallink{}
plink li{} , plink{} , pfriend li{} , pfriend{}
pphoto li{} , pphoto{} , pvlog li{} , pvlog ul{} , pboard li{} , pboard{}
/************** *************** *************** ****/
/*日曆*/
.calendarTitle li{} .calendarTitle{ }
.calendarSide li{} .calendarSide{}
.calMonth{} .calMonthNav{}
.calMonthBackwa rd{} .calMonthCurren t{} .calMonthForwar d{}
.calMonthHeader {} .calMonthDay{} .calMonthToday{ } .calholiday{}
.calendarbutton {} .cal_event {}
/************** *************** *************** ****/
/*側邊欄位*/ sidetitle li{} , sidetitle{} , side li{} , side{}
/*文章分類*/ .categoryTitle li{} .categoryTitle{ } .categorySide li{} .categorySide{}
/*最新文章*/ .articleTitle li{} .articleTitle{} .articleSide li{} .articleSide{}
/*最新留言*/ .messageTitle li{} .messageTitle{} .messageSide{} .date{}
/*搜尋文章*/ .searchTitle li{} .searchTitle{} .searchSide{} .searchbutton{}
/*最愛連結*/ .linkTitle li{} .linkTitle{} .linkSide li{} .linkSide{}
/*已建立的日誌*/ .bloglistTitle li{} .bloglistTitle{ } .bloglistSide li{} .bloglistSide{}
/*已建立的相簿*/ .albumTitle li{} .albumTitle{} .albumSide{}
/*參觀人次統計*/ .countTitle li{} .countTitle{} .countSide{}
/*日誌評價*/ .rankTitle li{} .rankTitle{} .rankSide{}
/*日誌使用資源*/ .resourceTitle li{} .resourceTitle{ } .resourceSide{}
/*自由欄位*/ .customTitle li{} .customTitle{} .customSide{}
/*我的哈拉室*/ .chatTitle li{} .chatTitle{} .chatSide{}
/*留言塗鴉版*/ .paintTitle li{} .paintTitle{} .paintSide{}
/*背景音樂*/ .musicTitle li{} .musicTitle{} .musicSide{} .musicbutton{}
/*訂閱電子報*/ .epaperTitle li{} .epaperTitle{} .epaperSide{} .epaperbutton{}
/*我的訂閱*/ .rssrollTitle li{} .rssrollTitle{} .rssrollSide li{} .rssrollSide{}
/************** *************** *************** ****/
/*中間欄位*/
/*文章*/
#content{}
.title{} span.titlename{ } span.titledate{ } .blogrank{} span.category li{}
span.category{} span.counter li{} span.counter{}
/*文章主體*/
.blogbody{} span.fullpost{}
.morebtn li{} .morebtn{} .backbtn li{} .backbtn{} .posted{} .selectbar{}
/*引用*/
.trackbacktitle {} .trackbackurl{} .trackbackdate{ } .trackbackconte nt{}
/*留言*/
.comment{} span.commenttit le{} span.commenttit le li{} span.commentbut ton{}
.author{} .commenttext{} .commentedit{}
span.authorname {} span.commentdat e{} span.email{}
span.line{} span.urlicon{} span.url{}
相信其它 BSP 的 css 應該也差不多都是這樣的原理吧。
我原先並不想要寫如何調整 xuite css ,原因之一是我會調整的部份也不
乍看之下 xuite 的「佈景主題」中提供了蠻多的版
xuite css 的版型定義,主要分為七個區塊,
#container
#banner
#mid
#linksLeft
#linksRight
#content
#footer
在中欄 #mid 的部份,幾乎是佔據了整個版面,
(L-C-R) xuite 相準的版型,只要將所有欄位放在
(L-R-C)
(C-R-L) ezPost 目前的版型,而且有「橙、黑」兩
當主要的版型定位之後,就是要調
以下就簡列大多數我們所看到的一
/**************
#container{}
#banner{}
#mid{}
#linksLeft{}
#linksRight{}
#content{}
#footer{}
/**************
/*檔頭*/
menulist{} , menu{} , logo{} , blogname{} , blogemotion{} , blogemotion{} , description{}
/**************
/*關於我*/
avatar{} , avatarPhoto{} , avatarID{} , avatarDesciptio
pTitle li{} , pTitle{} , personaltitle{}
plink li{} , plink{} , pfriend li{} , pfriend{}
pphoto li{} , pphoto{} , pvlog li{} , pvlog ul{} , pboard li{} , pboard{}
/**************
/*日曆*/
.calendarTitle li{} .calendarTitle{
.calendarSide li{} .calendarSide{}
.calMonth{} .calMonthNav{}
.calMonthBackwa
.calMonthHeader
.calendarbutton
/**************
/*側邊欄位*/ sidetitle li{} , sidetitle{} , side li{} , side{}
/*文章分類*/ .categoryTitle li{} .categoryTitle{
/*最新文章*/ .articleTitle li{} .articleTitle{}
/*最新留言*/ .messageTitle li{} .messageTitle{}
/*搜尋文章*/ .searchTitle li{} .searchTitle{} .searchSide{} .searchbutton{}
/*最愛連結*/ .linkTitle li{} .linkTitle{} .linkSide li{} .linkSide{}
/*已建立的日誌*/ .bloglistTitle li{} .bloglistTitle{
/*已建立的相簿*/ .albumTitle li{} .albumTitle{} .albumSide{}
/*參觀人次統計*/ .countTitle li{} .countTitle{} .countSide{}
/*日誌評價*/ .rankTitle li{} .rankTitle{} .rankSide{}
/*日誌使用資源*/ .resourceTitle li{} .resourceTitle{
/*自由欄位*/ .customTitle li{} .customTitle{} .customSide{}
/*我的哈拉室*/ .chatTitle li{} .chatTitle{} .chatSide{}
/*留言塗鴉版*/ .paintTitle li{} .paintTitle{} .paintSide{}
/*背景音樂*/ .musicTitle li{} .musicTitle{} .musicSide{} .musicbutton{}
/*訂閱電子報*/ .epaperTitle li{} .epaperTitle{} .epaperSide{} .epaperbutton{}
/*我的訂閱*/ .rssrollTitle li{} .rssrollTitle{}
/**************
/*中間欄位*/
/*文章*/
#content{}
.title{} span.titlename{
span.category{}
/*文章主體*/
.blogbody{} span.fullpost{}
.morebtn li{} .morebtn{} .backbtn li{} .backbtn{} .posted{} .selectbar{}
/*引用*/
.trackbacktitle
/*留言*/
.comment{} span.commenttit
.author{} .commenttext{} .commentedit{}
span.authorname
span.line{} span.urlicon{} span.url{}
全站熱搜
留言列表