Over a million developers have joined DZone.

DotNetNuke CSS in your Module Settings

DZone's Guide to

DotNetNuke CSS in your Module Settings

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

I have a friend that is working at a local College who called recently because he was having some trouble with his CSS using the Module Settings feature where you can add additional code for the Module’s header and footer.

If you aren’t already aware of this feature, now would be a good time to learn about it.  it can be used to embed javascript onto your form, add or change CSS or even provide additional wrapper code for your module.

As I said, one of the things you can do in the Header/Footer sections is insert a CSS definition block,

<link type=”text/css”>
.clss { background-color: blue;}

What my friend was doing was trying to redefine the CSS for a specific element inside the current module, but when he added the CSS, it was applied to every element on the page.

Without thinking too hard about it, he thought maybe the CSS was being inserted multiple times.  Once for each occurrence of the module rather than just this particular module.

All he really needed was another pair of eyes.  A large part of what I know about CSS I learned from this guy. But this time, it was my turn to play the teacher.

I pointed out that the CSS he defined was being applied to the entire page and that if he went and defined another CSS definition later on in the page, it would take over the style for the entire page.  Last CSS wins.  What he needed to do is define a wrapping DIV and make the rule start with that DIV’s ID as a CSS rule and then specify the other elements, classes and rules, rather than just overloading the CSS everything else on the page is using.

Once I pointed it out, he had a good laugh at himself.

But, there is one more question.  You might want to consider putting this kind of CSS in the site’s CSS file, “Admin” > “Site Settings” >”Stylesheet Editor”  This is where CSS that is not part of the skin or containers is suppose to go.

The disadvantage to using the CSS file rather than in-lining it in the module is that it isn’t obvious where the CSS is defined when you later want to change it, so you might also consider sticking a note in the module head where your DIV will be, as well as a comment in the CSS that explains why it is there.


Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}