栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 系统运维 > 运维 > Linux

更改Azure DevOps Server的原生界面(三、更改网站logo)

Linux 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

更改Azure DevOps Server的原生界面(三、更改网站logo)

1. 场景说明

首先说明,本文中使用的需求场景描述只是个虚拟假设,不是实际的需求场景,避免大家产生误解。
按照公司设计部门的统一规划,需要将Azure DevOps Server的图标修改为公司统一的图标。

首先,需要更改Azure DevOps Server 的Logo图形 其次,Azure DevOps Server 的Logo的颜色 2. 操作方式 2.1 更改Logo图形:

字体图标的存储路径是:

C:Program FilesAzure DevOps Server 2020Application TierWeb Services_statictfsDev18.M181.6_extms.vss-featuresui-core-contentComponentsIconfontsAzDevMDL2.woff

什么是woff文件?
woff是Web Open Font Format的简写,中文翻译为Web开放字体格式;它是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。
目前主流的网页浏览器,都支持woff格式的字体图标

如何编辑woff文件?
从Azure DevOps Server应用服务器中复制AzDevMDL2.woff(也可以从网页下载)后,使用专门的字体图标编辑器更改。
笔者从网上找到了一个功能强大的编辑器软件FontCreator,但是这个软件是收费的,只能使用它的试用版本;试用版本在使用过程中没有任何功能限制,但是在输出或保存的时候,会打上这个产品的水印。下面介绍以下使用FontCreator修改Azure DevOps Server的字体图标,以Logo为例:

运行FontCreator后,打开AzDevMDL2.woff文件 找到Logo所在的图标编号,双击打开图标,导入自己的图标
删除原来的字体,再调整字体大写 保存文档即可; 将新的woff文件覆盖应用服务器中的对应文件,大功告成。 2.2 更改logo图像的颜色

字体图标的特征是,可以使用CSS定义图标的颜色、大小等,下面介绍更改Logo的默认颜色(蔚蓝色)

找到应用层服务器中的样式文件:C:Program FilesAzure DevOps Server 2020Application TierWeb Services_statictfsDev18.M181.6_extms.vss-tfs-webframe-contentms.vss-tfs-web.frame-content.min.css

更改上述文件中的样样式“.suite-logo .suite-image”

更改前为:

.suite-logo .suite-image{font-size:1.3125rem;}

更改后为:

.suite-logo .suite-image{font-size:1.3125rem;color:red;}

3. 其他演示

更改Azure DevOps Server的原生界面(一、概述)更改Azure DevOps Server的原生界面(二、更改网站图标favorites icon)更改Azure DevOps Server的原生界面(三、更改网站logo)更改Azure DevOps Server的原生界面(四、集合主页的相关页面)更改Azure DevOps Server的原生界面(五、更改网站标题)

如果需要,你还可以从微软Azure DevOps Server 的在线文档,查询更多的权威资料,也欢迎通过下面的联系方式与我沟通,相互学习,相互提高!


https://www.cnblogs.com/danzhang
Azure DevOps MVP 张洪君

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/725198.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号