CODEWITHSUNDEEP
dotnetnuke
1110
1110

Reputation: 6839

Is it possible to reset css in dnn module only

I have made a custom dnn module. But elements in my module get all styles from dnn. Is is possible somehow to do a css reset only in module to remove all dnn styles and apply only mine?

Upvotes: 1

Views: 824

Answers (2)

JBeckton
JBeckton

Reputation: 7111

The best advice I can give you on this is "css specificity". Using the DNN Wiki link provided by the first answer you can learn how/when DNN loads each .css file but to over come styles bleeding into your module you need to understand "css specificity".

It is a good idea to follow the loading order DNN is using as there are benefits to that like when you want to over ride styles in your module from your skin.

You could load your custom module css file last and that could help quite a bit but you should also consider implementing your styles in a more specific way to prevent the other DNN styles from bleeding in.

For example you could wrap your module html in a div tag and give it a my-foo-module class.

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

Using your css classes like namespaces within your html structure will cause your module styles to take precedence over any other more generic styles that get loaded in. I don't recommend using a reset css file unless you scope it so that it only effects the elements within your my-foo-module wrapper.

Here is some good info that should help you..

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

And lastly I'll say that if your trying to load a third party css library like twitter bootstrap for your module and your skin is using another library or none at all this can be very challenging to say the least. Your not going to want to edit the entire bootstrap library in order to gain more "Css specificity" for your module so in this case I am unable to offer a solution as I am searching for one myself.

Upvotes: 1

Ryan Gunn
Ryan Gunn

Reputation: 1169

This is DotNetNuke's CSS priorities when loading.

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

Information above taken from DotNetNuke Wiki - Client Resource Management API

Numbers are the order the css will be loaded (5 then 10 etc, the default is 100 so this means it should be loaded last.

You could easily add your own css files into your module or if it suits, you can add them to the module.css file within you module. If you are going to use your own CSS/JS file(s) the use the following code

<%@ 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" />

If you are new to DotNetNuke module development I would suggest looking at this module development template from Chris Hammond (Christoc's DotNetNuke Module Development Template)

Read his blog to find out how to use and install the templates (Using the new Module Development Templates for DotNetNuke 7)

Upvotes: 1

Related Questions