DotNetNuke CSS in your Module Settings

tp_vol1_002 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 into 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 was 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 supposed 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.

Related Post

Leave a Reply

Comment Policy:

  • You must verify your comment by responding to the automated email that is sent to your email address. Unverified comments will never show.Leave a good comment that adds to the conversation and I'll leave your link in.
  • Leave me pure spam and I'll delete it.
  • Leave a general comment and I'll remove the link but keep the comment.

Notify me of followup comments via e-mail