1

カスタム dnn モジュールを作成しました。しかし、私のモジュールの要素は、dnn からすべてのスタイルを取得します。モジュールでのみ css リセットを実行して、すべての dnn スタイルを削除し、私のスタイルのみを適用することは可能ですか?

4

2 に答える 2

1

これについて私ができる最善のアドバイスは、「css の特異性」です。最初の回答で提供された DNN Wiki リンクを使用すると、DNN が各 .css ファイルをいつどのようにロードするかを知ることができますが、モジュールにスタイルが流れ込むことを克服するには、「css の特異性」を理解する必要があります。

DNN が使用している読み込み順序に従うことをお勧めします。スキンからモジュール内のスタイルを上書きしたい場合などに利点があります。

カスタム モジュールの css ファイルを最後にロードすることもできますが、これはかなり役立つ可能性がありますが、他の DNN スタイルが混入するのを防ぐために、より具体的な方法でスタイルを実装することも検討する必要があります。

たとえば、モジュール html を div タグでラップし、my-foo-module クラスを指定できます。

<div class="my-foo-module">
Module content here
</div>

html 構造内で名前空間のような CSS クラスを使用すると、読み込まれる他のより一般的なスタイルよりもモジュール スタイルが優先されます。要素にのみ影響するようにスコープを設定しない限り、リセット css ファイルの使用はお勧めしません。 my-foo-module ラッパー内。

ここに役立つはずの良い情報があります..

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

https://www.google.com/#bav=on.2,or.r_cp.r_qf.&fp=4977db6ad6ac1fe8&q=%22css+specificity%22

最後に、モジュール用に twitter ブートストラップのようなサードパーティの css ライブラリをロードしようとしていて、スキンが別のライブラリを使用しているか、まったく使用していない場合、これは控えめに言っても非常に困難な場合があります。モジュールの "Css 固有性" を高めるためにブートストラップ ライブラリ全体を編集したくないので、この場合、私は自分で解決策を探しているため、解決策を提供できません。

于 2013-08-14T03:55:58.243 に答える
1

これは、読み込み時の DotNetNuke の CSS 優先順位です。

DefaultCss: 5
ModuleCss: 10
SkinCss: 15
SpecificSkinCss: 20
ContainerCss: 25
SpecificContainerCss: 30
PortalCss: 35

上記の情報はDotNetNuke Wiki - Client Resource Management APIから取得

数字は CSS がロードされる順序です (5、10 など。デフォルトは 100 であるため、最後にロードする必要があります)。

独自の css ファイルをモジュールに簡単に追加することも、適切であればモジュール内の module.css ファイルに追加することもできます。独自の CSS/JS ファイルを使用する場合は、次のコードを使用します

<%@ Register TagPrefix="dnn" Namespace="DotNetNuke.Web.Client.ClientResourceManagement" Assembly="DotNetNuke.Web.Client" %>    
<dnn:DnnJsInclude runat="server" ID="jsBootstrap" FilePath="~/DesktopModules/MyModuleFolder/js/bootstrap.min.js" />
<dnn:DnnCssInclude runat="server" ID="cssBootstrap" FilePath="~/DesktopModules/MyModuleFolder/css/bootstrap.min.css" />

DotNetNuke モジュール開発に慣れていない場合は、Chris Hammond のこのモジュール開発テンプレート ( Christoc's DotNetNuke Module Development Template )を参照することをお勧めします。

彼のブログを読んで、テンプレートの使用方法とインストール方法を確認してください ( DotNetNuke 7 の新しいモジュール開発テンプレートの使用) 。

于 2013-04-04T19:38:09.343 に答える