☰

使用 CSS 更改 SharePoint 2013 中 Web 部件的外观

tag-icon • tag-icon css sharepoint-2013
使用 CSS 更改 SharePoint 2013 中 Web 部件的外观

我已经在 SharePoint 中建立了一个网站，现在想使用 CSS 更改 Web 部件（文档库）的外观。

每当我添加以下 CSS 代码时：

<style type="text/css">
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
background-color: darkblue; 
font-size: 18px;   
font-weight: bold; 
color: white;
padding: 5px 5px;}
</style>

...我发现预览我的网络浏览器中的窗口显示发生了变化。 在此处输入图片描述

不幸的是，当我应用更改并再次查看页面时，Web 部件已恢复为默认外观。

在此处输入图片描述

有人知道是什么原因导致这种情况发生吗？

答案1

可能发生的情况是，无论您在哪里加载该 CSS，它都会被标准 CSS 覆盖。

您可以尝试将!important标签添加到条目末尾。您应该使用浏览器中的 Web 开发人员工具检查代码，以确保 CSS 确实被加载并且未被 SharePoint 删除，并找出可能对您的代码产生影响的内容。使用带有 Firebug 插件的 Firefox 应该会有很大帮助。

让我们知道：

  • 您要更改的 Web 部件具体是什么
  • 如何以及在何处插入 CSS
  • 您正在使用哪种页面布局和主页

答案2

您的 Web 部件 Chrome 类型可能是问题所在。您将能够在编辑模式下看到更改，但如果您的 Chrome 类型设置为默认、无或仅边框，您将无法在实际页面上看到标题。

在编辑模式页面的标题上，转到最右侧，然后单击下拉菜单。单击编辑 Web 部件，然后转到外观。在那里您应该找到 Chrome 类型设置。这也可以在 SharePoint Designer 中完成。

答案3

我将在站点资产库中创建“.txt”文件存储，然后在内容编辑器中调用该文本文件。

答案4

这可能是因为您尝试嵌入样式代码，而保存页面时会删除该代码。请改用带有外部 .txt 文件的 CEWP，或者使用带有样式代码的脚本编辑器 Web 部件。

相关内容