WebパートのSharePoint CSSクラス名をオーバーライドします

StackOverflow https://stackoverflow.com/questions/3971624

質問

私はこれに対する満足のいく答えを高くて低く検索してきましたが、失敗しました。 Stackoverflowが私のために提供できることを願っています！

私は、SharePoint Foundation 2010（SharePointに深く潜るための私の最初の本当の試み）を使用しています。サイトのマスターページは、クライアントが提供するCSSファイルを使用し、私が接着する必要があります。私が抱えている問題は、SharePointがいくつかのSharePoint固有のCSSクラスをWebパーツHTML構造に追加することにより、クライアントのスタイリングと矛盾していることです。掘り出した後、私はそれを発見しました ms-WPBody クラスとそのさまざまな要素セレクターが主要な犯人です。

追加することができます !important クライアントスタイルのシートのすべてに、しかしそれは冗長です。 SharePointスタイリングをオーバーライドするために、Webパーツの子コンテンツに非常に乱雑なスタイリングを挿入することができます。または、Webパーツからクラスを削除しようとすることができます。

どのように SharePoint WebパーツのHTML構造化に挿入されたCSSクラス名を削除またはオーバーライドできますか？ SharePointの内側の仕組みを十分に知りません。この変更を行うためにフックをするものを知ることができ、Google-FUはこのテーマに失敗しています。 CssClass ASP.NETでは、Webコントロールマークアップは明らかに無視されます。 WebControl.

Stackoverflowを手伝ってください！あなたは私の唯一の希望です！

編集
以前に明確にしていないことをお詫びしますが、CSSをgrokし、スタイリングの助けを求めていないことを述べたいと思います。私が本当に探しているのは、SharePointが放出したCSSクラスを削除する方法です。誰かがそこで手伝うことができますか？ CSSタグを削除します。それは人々を混乱させているように見えるからです。この質問は、実際にはCSSに関するものではなく、SharePointに関するものです。

役に立ちましたか？

解決

CSSは、それが適用されるHTMLを一致させる必要があります - SharePoint（またはその点で標準ASP.NET WebForms）によって生成されるような生成されたHTMLでは、通常、CSSを変更する方がはるかに簡単です。重要な追加がオプションではない場合、通常、より具体的なセレクターを使用して何かを行うことができます。つまり、「テーブルTD」として定義されたスタイルは、実際にはすべて同じ要素を選択しますが、「TD」の1つをオーバーライドします。このアプローチを使用して、Causignの問題であるSharePointスタイリングのビットを元に戻すことができます。

SharePointがページに置くクラスを本当に変更したい場合は、jQueryを使用します。そのサーバー側を実行しようとすることは、最初のSharePointプロジェクトに参加したいものではありません。

他のヒント

私がフォローしているかどうかはわかりませんが、なぜあなたのウェブパートをコンテナ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-series/

典型的な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>

秘trickは、Webパーツ自体が内側のdiv（およびすべての子供）であるということです。外側のdiv（ms-wpbodyクラスのあるdiv）は webpartzone. 。このコントロールは密閉されていますが、必要に応じてWebPartzoneをレンダリングするアダプターを書くことができます。ほとんど 例 テーブルレンダリング用であり、既存の構造を維持しているがクラスを削除するものを書くことができます。

私には、そのすべてをコーディングしてから、Webアプリケーションのapp_browsersのbrowserに登録すると、あいまいなように思えます。

または、コンテンツエディターWebパーツを追加して、HTMLのCSSスタイル要素をオーバーライドするだけです。

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

- 平和！

CSSファイルをどのようにロードしていますか？マスターページの頭の一部にロードしている場合、またはCustom.cssを設定するだけで、頭の外側にロードしてみてください。これにより、Core.cssの後にロードされるため、必要に応じて標準クラスをオーバーライドできます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top