首页 > Web开发 > 详细

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

时间:2019-11-15 23:47:53      阅读:230      评论:0      收藏:0      [点我收藏+]
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;
}

说明:

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

技术分享图片

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

原文:https://blog.51cto.com/13969817/2450638

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!