4.2 引入ACE主題的CSS樣式 · openstack主題模版開發

# 引入ACE模版的CSS樣式 ## 1. horizon\openstack_dashboard\themes\maintenance\static\bootstrap\_variables.scss 更改 ~~~ // Override the web font path ... we want to set this ourselves //$web-font-path: $static_url + "/horizon/lib/roboto_fontface/css/roboto-fontface.css"; //$roboto-font-path: $static_url + "/horizon/lib/roboto_fontface/fonts"; // 更換成ACE主題字體 $web-font-path: $static_url + "/horizon/lib/ace/css/ace-fonts.css"; $roboto-font-path: $static_url + "/horizon/lib/ace/fonts"; //@import "variable_customizations"; //這個樣式變量暫時忽略 // Bootswatch Paper // Variables // -------------------------------------------------- //@import "/horizon/lib/bootswatch/paper/variables"; //這里不需要引入樣式變量，因為ACE主題里的值已經寫好 ~~~ 　　從以上代碼可知，這里我們只引入ACE主體的字體，別的我們不要它，直接注釋掉。 ## 2. horizon\openstack_dashboard\themes\maintenance\static\horizon\_variables.scss 更改　　這里面的全部內容我們不需要，直接注釋掉。 ## 3. horizon\openstack_dashboard\themes\maintenance\static\bootstrap\_styles.scss 更改 ~~~ // Based on Paper // Bootswatch // ----------------------------------------------------- @import "/horizon/lib/bootstrap_scss/scss/bootstrap/mixins/vendor-prefixes"; //@import "/horizon/lib/bootswatch/paper/bootswatch"; //@import "/horizon/lib/roboto_fontface/css/roboto-fontface.scss"; //更改為引入ACE主題樣式和字體 @import "/horizon/lib/ace/css/less/ace.less"; @import "/horizon/lib/ace/css/ace-fonts.scss"; // Patch to Paper // Inside alerts, the text color of buttons aren't properly ignored // https://github.com/thomaspark/bootswatch/issues/552 /*.alert a:not(.close).btn-primary { color: $btn-primary-color; } .alert a:not(.close).btn-default { color: $btn-default-color; } .alert a:not(.close).btn-info { color: $btn-info-color; } .alert a:not(.close).btn-warning { color: $btn-warning-color; } .alert a:not(.close).btn-danger { color: $btn-danger-color; }*/ ~~~ 　　這里面我們只留下bootstrap vendor-prefixes，其它的全部都注釋掉，然后添加ACE主題樣式和字體樣式。 ## 4. 添加 <= IE9瀏覽器版本的兼容樣式　　在horizon\openstack_dashboard\themes\maintenance\templates\_stylesheets.html 文件后面里添加如下代碼： ~~~   ~~~