Question

我一直在寻找一个满意的答案，并且失败了。我希望StackOverflow可以为我提供帮助！

我正在使用SharePoint Foundation 2010（我第一次真正尝试深入研究SharePoint），以及（除其他外）自定义Web部件;该站点的母版页使用客户端提供的CSS文件，我必须遵守该文件。我遇到的问题是SharePoint通过向Web部件HTML结构添加几个特定于SharePoint的CSS类，与客户端的样式冲突。经过一番挖掘，我发现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。

Answer 1

我不确定我是否会关注，但为什么不将你的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年，我们不得不担心确保您的样式表按字母顺序命名，以便正确应用。使用z为您的css文件添加前缀以查看它是否有帮助。

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

Answer 2

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

如果你真的想要在页面上更改类sharepoint，请使用jquery - 尝试做那个服务器端并不是你想要在你的第一个sharepoint项目上进行的。

Answer 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类的外部）是WebPartZone。此控件是密封的，但您可以编写一个可以随心所欲地呈现WebPartZone的适配器。大多数examples用于无表格渲染，您可以编写一个维护现有结构，但删除类。

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

Answer 4

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

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

- 和平！

Answer 5

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

覆盖webpart中的Sharepoint CSS类名称

5 个答案: