下面的說明主要是參照default來說明:
gldbal.css
全局樣式表,這個樣式表一般都是放全局樣式,簡單來說就放html標籤的css
body{}
p{}
selct{}
th{}
td{}
img{}
等等,這些都是html標籤,關於html標籤不多說了,自己查資料吧
layout.css
層次樣式表
#container 主體樣式
#container #header 頂部樣式
#container #header #blogname 博客名字.你在後台填寫的博客名字和博客描述會出現在這
#container #header #blogname #blogTitle 博客描述
#container #header #menu 菜單導航
#container #header #menu #Left 菜單導航左邊
#container #header #menu #Right 菜單導航右邊
#container #header #menu ul 菜單導航列表
#container #header #menu ul li 菜單導航列表項
.menuL 菜單導航列表項左邊
.menuR 菜單導航列表項右邊
.menuDiv PJ樣式,F2沒有
#container #Tbody 內容樣式
#sidebar 工具條,側邊欄樣式
#innersidebar 工具條,側邊欄樣式,內嵌於#sidebar,修改兩個的效果一樣
#sidebar-topimg 工具條,側邊欄頂部樣式
#sidebar-bottomimg 工具條,側邊欄底部樣式
.sidepanel 工具箱樣式,也就是側邊欄模塊的樣式
.Ptitle 側邊欄模塊標題的樣式
.Pcontent 側邊欄模塊內容的樣式
.Pfoot 側邊欄模塊底部的樣式
#mainContent 主內容
#innermainContent 主內容,和#mainContent效果一樣
#mainContent-topimg 主內容頂部樣式
#mainContent-bottomimg 主內容底部樣式
.content-width 主內容元素的全局寬度在#mainContent和#innermainContent也可怪設定寬度
.pageContent 主內容頁數和預覽模式
.NavTitle 好像F2blog沒用到
.page 頁數
.page ul 頁數列表
.page ul li 頁數列表項
這裡說一下當前頁的改法,添加一個li.pageNumber strong{}
.page ul li.PageL 沒用過,PJ好像也沒用到
.page ul li.PageR 沒用過,PJ好像也沒用到
.PageLbutton 沒用過,PJ好像也沒用到
.PageRbutton 沒用過,PJ好像也沒用到
.Content 內容框
.Content-top 日誌標題框
.Content-top .ContentLeft 日誌標題框左邊
.Content-top .ContentBRight 日誌標題框右邊
.Content-top .ContentTitle 標題
.Content-top .ContentAuthor 作者信息
.Content-body 日誌內容框
.Content-bottom 日誌內容底部
.Content-bottom .ContentBLeft 日誌內容底部左邊
.Content-bottom .ContentBRight 日誌內容底部右邊
.Content-Info 日誌其他信息,閱讀文章正文裡出現
.Content-Info .InfoAuthor 天氣,閱讀文章正文裡出現
.Content-Info .InfoOther 字體大小,閱讀文章正文裡出現
對於更改RSS訂閱,上一篇,下一篇,返回這些圖標可以到根目錄下images文件夾裡更換以下同名圖片上RSS訂閱(rss.png),一篇(Cprev.gif),下一篇(Cnext.gif),返回(arrow_left1.gif)
.comment 評論框
.commenttop 評論標題,上面有留言人,時間,IP,編輯等信息
.commentinfo 評論標題時間,IP等樣式
.commentcontent 評論內容
UBB框
.UBBPanel
.UBBTitle
.UBBContent
.UBBContent
:link.UBBLink,:visited.UBBLink
以上的這些F2都沒有的
#MsgContent 信息框,也就是輸入留言和評論的地方
#MsgContent #MsgHead 信息框頭部,上面會顯示發表評論或發表留言
#MsgContent #MsgBody 信息框主體
.LDialog
.LDialog .LHead
.LDialog .LBody 這三個沒見過,有見到的朋友告訴我一下
信息框圖標以及文字
.MessageText
.MessageIcon
.ErrorIcon
.WarningIcon
.QuestionIcon
這些都是PJ的
#container #foot 底部樣式,最下面有版權,skin信息的地方
.attachmentBody 文件上傳框樣式,PJ的
link.css
超鏈接樣式表
偽類:link :visited :hover分別代表超鏈接的通常、被訪問後、和鼠標接觸鏈接是的樣式
a標籤代表通用超鏈接樣式
.menuA代表Blog導航條菜單的樣式
.titleA代表日誌標題的樣式
.sideA代表側欄的超鏈接樣式
.CategoryA代表樹形分類的鏈接樣式
.more代表更多鏈接的樣式
這些就不多說了吧,一一對應上就行了,
typography.css
.userpass 文本框樣式,在F2里對應<input class=".userpass">,例子:搜索裡的填入關鍵字的文本框
.userpass:hover,.userpass:focus 改了好多次好像都沒起作用,哎,看偽類的說明
.inputBox
.inputBox:hover,.inputBox:focus 這兩個我沒看到過,改過的朋友請補充一下
.userbutton 按鈕,例如提交,重置,搜索
.commentTable
.high1
.CateIcon
這三個還是沒見過
日曆樣式,說這個之前先說說側邊欄的ID了
模塊是包含在側欄的sidepanel面板裡的,然後給各自的模塊一個唯一的ID。在這裡日曆的ID就是Side_Calenbar。F2blog對這class為sidepanel、ID為Side_Calendar的DIV進行定義了。對於class、ID 的定義前者是類選擇符,表現形式為:.類屬性。後者是ID選擇符,表現形式為:#ID名稱
#Calendar_Body 日曆樣式
#Calendar_Body #Calendar_Top 日曆樣式-頂部
#Calendar_Body #Calendar_Top #LeftB 日曆樣式-頂部按鈕-左,就是"上一月"那個按鈕(只能是圖片)
#Calendar_Body #Calendar_Top #LeftB 日曆樣式-頂部按鈕-左,就是"下一月"那個按鈕(只能是圖片)
#Calendar_Body #Calendar_week 日曆樣式-星期
ul.Week_UL 日曆樣式-星期列表"日 一 二 三 四 五 六"
ul.Week_UL li 日曆樣式-星期列表項,例:"四",
這裡說一下"日"的改法是添加一個ul.Week_UL li font{}
.Calendar_Day
.Calendar_Day ul.Day_UL
.Calendar_Day ul.Day_UL li
這三個是日曆樣式-日期,是正常日期的樣式,就是不是當日,沒有日誌的日期
.DayA a 日曆樣式-日期-超鏈接樣式
.DayA a.click 日期選中,修改了沒發現起作用
.DayA a.today 今天
.DayA a.otherday 非本月日期
.DayA a.haveD 本日存在日記
.DayA a.DayD 今天存在日記,這個有用麼?????
.BttnC 隱藏置頂日誌按鈕
.BttnE 展開置頂日誌按鈕
div.nicetitle 鏈接提示框
div.nicetitle p 鏈接提示框文字樣式
div.nicetitle p.destination 應該是鏈接提示框鏈接樣式,可是顯示不了
特別樣式的添加,請看三欄的做法
最後還要說一下的是編輯器樣式的修改,拿發表留言為例吧,發表評論也是一樣的
修改編輯器樣式要到根目錄下的editorubbeditor.css修改,editor.css裡修改的是從內容後面開始到發表留言之前的樣式,一共有
#editorbody 編輯器欄
#editorHead 編輯器欄頭部
.editorTools 工具欄樣式
.Toolsbar 這個是粗體B和插入圖像這個圖標前面那個東西
其實這裡的都不用改,一般大家想改的是文本域,默認是藍色的,說默認skin挺配,換到別的skin裡就太顯眼了.editTextarea 修改這個的邊框border屬性就可以達到你的要求了。
有人問在skin裡的CSS裡加上.editTextarea能不能達到相同的效果啊?這是不行的,看程序裡CSS加載的順序是:
global.css=>layout.css=>typography.css=>link.css=>editor.css,按CSS的優先級,對於相同的CSS樣式,如果沒有!important聲明,在後面出現的就會取代前面的,IE6是不支持!important的,所以editor.css就會取代在別的地方添加的.editTextarea樣式,小頭像更改方法:到根目錄imagesavatars裡把裡面的小頭像換成你的,文件名要為1.gif,2.gif……等等,我沒試過最多可以加幾張,我一共加了8張,應該還可以更多的。