next up previous contents
Next: CodeMirror 程式編輯 Up: CSS 顯示樣版 Previous: Layout 修改   Contents

CSS 檔

  1. core.css 中包含所有顯示的設定,為佈景主題設計的重點。本佈景主題核心檔 core.css 與原始檔案,已完全不相同,使用 diff 比對差異已無意義。
  2. CSS 的設計可參考其他資料,如 CSS Tutorial,在此不再詳述。
  3. 設計者可使用 firefox 加裝 Firebug,啟動後如下圖,可以查詢 css 設定,也可以修改 css 設定即時查看版面顯示。這對 CSS 的設計有非常大的幫助。
    Image firebug
  4. core.css 中設定網頁抬頭使用圖片檔 mycsiebanner4。
    [root@dywang theme]# grep -A3 'mycsiebanner' dywang/style/core.css 
        background: url([[pix:theme|mycsiebanner4]]) no-repeat; 
    	background-repeat:no-repeat;
        border-bottom: 1px solid #305949;
        color: #305949;
    
  5. 將圖片檔 mycsiebanner4 存入 pix 目錄。screenshot.jpg 為此佈景主題示範畫面,會在管理者選擇佈景主題時,顯示在網頁上供管理者參考,所以必須把設定好的頁面截取下來,存成 screenshot.jpg。
    [root@dywang theme]# diff -qrwbBE leatherbound/pix/ dywang/pix/
    Files leatherbound/pix/header.jpg and dywang/pix/header.jpg differ
    Only in dywang/pix/: mycsiebanner4.jpg
    Files leatherbound/pix/screenshot.jpg and dywang/pix/screenshot.jpg differ
    
  6. 完整的 dywang 佈景主題打包壓縮檔下載。


2018-08-14