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 文件后面里添加如下代码： ~~~   ~~~