SharePoint Online 客制化开发：如何修改网站导航字体颜色和背景

https://blog.51cto.com/13969817

很多公司针对UI设定都有明确的风格，或者为了更好的用户体验性需要对网站做出特定导航字体或者背景的修改。
我们以使用IE浏览器打开网站的网站设置页面为例，按F12键进入developer tools页面，如果你使用的是联想笔记本，那么需要Fn+F12键一起使用。你将在资源管理器窗格，我们使用选择页面元素指针点击“策略审查日历”，在资源管理器面板中，你将看到跳转到相关页面代码中，我们想查找：menu-item-text，双击它，然后在右侧style标签下添加一条rule, 将其导航字体颜色为红色。

在Style 标签下添加的Rule，示例代码：

.menu-item-text {
color: red !important;
}

需要注意的是：

• 对于这些规则，你可以在属性的定义之后放上感叹号，这意味着它会覆盖任何其他命令。
• 当我们再次刷新页面的时候，页面会重新刷新+加载，做的修改会消失，置回初始状态。
• 如果想永久性保留，需要将此规则复制，然后到样式表中进行粘贴，保存，这会永久性使用这个规则，如下在样式表中修改。
  

如果你想当鼠标浮在导航上时，导航的颜色发生变化，比如变成蓝色，该如何操作呢？

我们需要在样式表中做一些更改：

示例代码：

.menu-item-text {
color: red !important;
}
.menu-item-text :hover {
color: blue !important;

当鼠标浮在导航时，导航的颜色变为蓝色：

接下来，我们看看如何将导航栏中的字体更改背景颜色？

我们需要在资源管理器面板中做一些更改：在Static menu-item，添加一个规则：

规则示例代码：

.static {
background-color: lightblue !important;
}

说明：

如果想永久性保留，需要将此规则复制，然后到样式表中进行粘贴，保存，这会永久性使用这个规则，如下在样式表中修改。