在WebPart中覆盖Sharepoint CSS类名

Question

我一直在寻找一种令人满意的答案，但都没有成功。我希望StackOverflow能够帮我！

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

我可以在客户风格表中添加!important，但这是被禁止的。为了覆盖SharePoint样式，我最近一直试图在Web部件的子内容中插入非常混乱的样式，但这变得越来越混乱。或者，我可以尝试从Web部件中移除该类，这就引出了我的问题：

如何删除或以其他方式覆盖插入到SharePoint Web部件HTML结构中的CSS类名？我不知道SharePoint的内部工作原理，也不知道应该钩住什么来进行此更改，我的Google搜索在这方面无法成功。ASP.NET Web控件标记中的CssClass显然被忽略了，可能是从WebControl继承来的。

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

编辑
我以前没有说明清楚，我想说我理解CSS，并且不需要样式方面的帮助。我真正需要的是如何删除SharePoint发出的CSS类。有人可以帮忙吗？我要删除CSS标签，因为它似乎让人困惑。这个问题实际上不是关于CSS的，而是关于SharePoint的。

- Randolpho

Answer 1

我不确定我理解了，但为什么不把你的Web部件包装在一个容器

中，然后根据你的喜好进行样式设计：

<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/

- Peter Walke

---

覆盖默认样式也是我试图避免的事情，但感谢您的回复。 - Randolpho

关键是，如果您使用DIV id（或更好的类，以防您在页面上有多个Web部件），则可以使用“DIV.ms-WPBody DIV.myCustomCss P”仅将样式应用于自己的Web部件 - 在具有类ms-WPBody的DIV内部具有myCustomCss类的DIV中的P。 - Ryan

@Ryan：我道歉，我认为我已经解释过了，我知道更具体的CSS是一种我可以使用的方法；这是我的当前方法，但越来越混乱。我的问题不是“我如何使用CSS？”，而是“我如何从SharePoint发出的HTML中删除此CSS类？” - Randolpho

好的，明白了！不过我必须说，我认为修改发出的CSS（无论是客户端的jQuery还是服务器端的适配器）听起来比覆盖CSS更费力。祝你好运！ - Ryan

Answer 2

这是一些典型的 Web Part 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 Part本身是内部DIV（以及它的所有子元素）。带有ms-WPBody类的外部DIV是WebPartZone。该控件是封闭的，但您可以编写一个适配器，以任何您想要的方式呈现WebPartZone。大多数示例都是用于无表格渲染，您可以编写一个保留现有结构但删除类的示例。

对我来说，编写所有代码，然后在Web应用程序的compat.browser中注册它似乎有些过度，因此我可能会使用jQuery（但如果您编写适配器，我很想看到它）。

- Rich Bennema

---

这确实给了我一些线索，谢谢！我很快就会带着结果回来... - Randolpho

另外，关于过度设计的问题...老实说，在这一点上，我觉得一个新的适配器可能比CSS的hack更少，而且我想我已经提到了，现在非常混乱，仍然不正确。 - Randolpho

Answer 3

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

如果您真的想要更改SharePoint放在页面上的类，请使用jQuery - 尝试在第一个SharePoint项目中进行服务器端更改确实不是您想要涉足的领域。

- Tom Clarkson

---

是的，覆盖选择器就是我在“Web部件的子内容”中所说的“非常混乱的样式”。唉，我希望这不是我的唯一选择。话虽如此...使用一点J-quizzle来在客户端删除类可能会奏效。感谢您提供的想法！ - Randolpho

使用jQuery更改类别因为你不想改变你的CSS真的是个坏主意。你必须记住，jQuery将在DOM加载后运行，因此页面将以一种方式呈现，然后更改为以另一种方式呈现，所有这些都是为了做一些浏览器本来应该自然呈现的事情。你确实应该考虑包装你的Web部件或使用更具体的CSS。用管钳可以把钉子钉到墙上，但使用锤子不是更有效吗？ - brian brinley

@brian brinley：正如我之前所提到的，由于我的独特限制，更具体的CSS变得非常混乱。虽然我原则上同意你的观点，但我真正需要做的是删除类。我更喜欢在SharePoint中完成这个任务，但似乎没有人知道如何做到这一点。JQuery是一个值得探究的想法，但不一定是我要追求的东西。 - Randolpho

你是想要移除 ms-wpbody 类仅针对单个 Web 部件还是整个网站？ - brian brinley

@brian brinley：主要是为了我正在开发的网页部件，但我完全愿意考虑整个网站的修复。 - Randolpho

一个站点范围的解决方法是在 core.css 加载后加载 CSS 文件。core.css 是在主页面的 head 文件中最后加载的。在您的 CSS 文件中，您可以简单地使用所需信息覆盖 ms-wpbody。或者，如果您不想将代码放在自定义 CSS 文件中，甚至可以在 head 标签后编写 CSS 定义。例如：.ms-wpbody { background-color: purple; } - brian brinley

Answer 4

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

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

-- 和平！

- Poodle

Answer 5

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

- brian brinley

---

覆盖默认样式也是我试图避免的事情，但感谢您的回复。 - Randolpho