在 Web 部件中覆盖 Sharepoint CSS 类名称答案

【问题标题】：Overriding Sharepoint CSS class names in a webpart在 Web 部件中覆盖 Sharepoint CSS 类名称
【发布时间】：2011-04-27 15:54:50
【问题描述】：

我一直在寻找一个令人满意的答案，但失败了。我希望 StackOverflow 可以为我提供服务！

我正在使用 SharePoint Foundation 2010（我第一次真正尝试深入研究 SharePoint），以及（除其他外）一个自定义 Web 部件；该站点的母版页使用客户提供的 CSS 文件，我必须遵守该文件。我遇到的问题是，SharePoint 通过将几个特定于 SharePoint 的 CSS 类添加到 Web 部件 HTML 结构中，与客户端的样式冲突。经过一番挖掘，我发现ms-WPBody 类及其各种元素选择器是罪魁祸首。

我可以将!important 添加到客户端样式表中的所有内容中，但这是禁止的。我可以在 Web 部件的子内容中插入一些非常混乱的样式，以尝试覆盖 SharePoint 样式，这是我最近一直在追求的课程，但它变得越来越混乱。或者，我可以尝试从 Web 部件中删除该类，这让我想到了我的问题：

如何我可以删除或以其他方式覆盖插入到 SharePoint Web 部件的 HTML 结构中的 CSS 类名称？我对 SharePoint 的内部工作原理了解得不够多，不知道该用什么钩子来进行此更改，而且我的 google-fu 在该主题上失败了。 ASP.NET web 控件标记上的CssClass 显然被忽略了，可能是从WebControl 继承的一些保留。

帮助我 StackOverflow！你是我唯一的希望！

编辑
我很抱歉之前没有说清楚，但我想声明我对 CSS 很了解，并不是在寻求样式方面的帮助。我真正在寻找的是如何删除 SharePoint 发出的 CSS 类。有人可以帮忙吗？我将删除 CSS 标记，因为这似乎使人们感到困惑。这个问题不是关于 CSS，而是关于 SharePoint。

【问题讨论】：

标签： sharepoint web-parts sharepointfoundation2010

【解决方案1】：

CSS 必须与它所应用的 html 相匹配 - 生成的 html 类似于 SharePoint（或标准的 asp.net 网络表单）生成的 html，通常更容易修改 css。如果添加重要不是一个选项，您通常可以使用更具体的选择器来做一些事情 - 即定义为“table td”的样式将覆盖“td”的样式，尽管它们实际上选择了所有相同的元素。您可以使用此方法撤消任何可能导致问题的共享点样式。

如果您真的想更改 sharepoint 在页面上放置的类，请使用 jquery - 尝试在服务器端做这件事并不是您想要在您的第一个 sharepoint 项目中进行的操作。

【讨论】：

是的，覆盖选择器是我在“Web 部件的子内容”中所说的“非常混乱的样式”。唉，我希望这不是我唯一的选择。也就是说......删除类客户端的小J-quizzle可能会成功。感谢您的想法！
使用 jquery 来改变一个类，因为你不想改变你的 css 真的是一个坏主意。您必须记住，jquery 将在 dom 加载后运行，因此页面将以一种方式呈现，然后更改为另一种方式呈现，所有这些都是为了做一些浏览器应该自然呈现的事情。您应该真正考虑包装您的 Web 部件或使用更具体的 CSS。管钳可以用来在墙上钉钉子，但用锤子不是更有效吗？
@brian brinley：正如我之前提到的，由于我相当独特的限制，更具体的 CSS 变得非常混乱。虽然我原则上同意你的观点，但我真正需要做的是删除类。我更喜欢在 SharePoint 中执行此操作，但似乎没有人知道如何执行此操作。 JQuery 是一个值得研究的想法，而不是我必须追求的东西。
您是要为单个 Web 部件还是为整个网站删除 ms-wpbody 类？
一个站点范围的修复是在加载 core.css 之后加载你的 CSS 文件。 core.css 最后加载到母版页的头文件中。在您的 css 文件中，您可以简单地使用您想要从 core.css 替换的任何信息覆盖 ms-wpbody。或者，如果您不希望自定义 css 文件中的代码，您甚至可以在 head 标记之后编写 css 定义。即 .ms-wpbody { 背景颜色：紫色； }

【解决方案2】：

我不确定我是否遵循，但为什么不将你的 webpart 包装在一个容器 div 中，然后根据你的内容设置样式：

<style type="text/css">
.ms-WPBody {
background-color:red;
}

#myCustomCss p
{
    background-color:Blue;
}

</style>
<div class=ms-WPBody>
<div id=MyCustomCSS>
<p>Hello world</p>
</div>
</div>

在 2007 年，我们不得不担心确保您的样式表按字母顺序命名，以便正确应用。在您的 css 文件前加上 z 以查看是否有帮助。

以下是有关该问题的参考文章： http://singchan.com/2009/12/29/branding-sharepoint-2010-collaboration-sites-part-2-in-a-series/

【讨论】：

我也尽量避免覆盖默认样式，但感谢您的回复。
重点是如果您使用 DIV id（或更好的类，以防您在一个页面上有多个 Web 部件）MyCustomCSS，那么您可以使用“DIV.ms”将样式应用于您自己的 Web 部件-WPBody DIV.myCustomCss P" - DIV 内的 P 类 myCustomCss 内含 ms-WPBody 类的 DIV。
@Ryan：我很抱歉，我以为我已经解释过我理解更具体的 CSS 是我可以使用的一种方法；这是我目前的方法，但它变得混乱。我的问题不是“如何使用 CSS？”，而是“如何从 SharePoint 发出的 HTML 中删除这个 CSS 类？”
好的，明白了！不得不说，尽管我认为修改发出的 CSS（客户端 jquery foo 或服务器端适配器）听起来比覆盖 css 更多的工作。祝你好运！

【解决方案3】：

以下是一些典型的 Web 部件 HTML：

<div style=""
    allowexport="false"
    allowdelete="false"
    class="ms-WPBody ms-wpContentDivSpace"
    width="100%"
    id="WebPartctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9"
    haspers="false"
    webpartid="d0420a1c-44b7-4009-81c9-2bbcf9b325e9">
    <div id="ctl00_m_g_d0420a1c_44b7_4009_81c9_2bbcf9b325e9">
        Web Part Content goes here...
    </div>
</div>

诀窍在于 Web 部件本身就是内部 DIV（及其所有子级）。外部 DIV（具有 ms-WPBody 类的 DIV）是WebPartZone。此控件是密封的，但您可以编写一个适配器来呈现您想要的 WebPartZone。大多数examples 用于无表渲染，您可以编写一个维护现有结构但删除类的。

对我来说，对所有这些进行编码，然后在 Web 应用程序的 App_Browsers 的 compat.browser 中注册它似乎有点过头了，所以我可能会使用 jQuery（但如果你使用适配器，我很乐意看到它）。

【讨论】：

这绝对给了我一些东西，谢谢！我很快就会带着结果回来......
另外，WRT 杀伤力过大...老实说，在这一点上，我觉得新适配器可能不如 CSS hacking 过分杀伤力，我想我提到过，它现在非常混乱而且仍然不正确.

【解决方案4】：

或者只是添加一个内容编辑器 Web 部件并覆盖 HTML 中的 CSS 样式元素：

<style type="text/css">
.ms-stylebox {
 border:o important;
}
</style>

-- 和平！

【讨论】：

【解决方案5】：

你是如何加载你的 CSS 文件的？如果您将其加载到母版页头部的一部分，或者仅通过设置 custom.css，您可以尝试将其加载到头部之外。这应该会导致它在 core.css 之后加载，因此允许您根据需要覆盖标准类。

【讨论】：

我也尽量避免覆盖默认样式，但感谢您的回复。