Home » none » DotNetNuke CSS in your Module Settings

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;}
</link>

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.

Like this Article? Subscribe to get every article sent to your email.

Related Post

  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it […]
  • DotNetNuke Skinning – Standard CSS ClassesDotNetNuke Skinning – Standard CSS Classes By now, you've gotten the idea that creating a set of skins and containers for DotNetNuke is a little bit more work than just creating some HTML, images, and a CSS file. Hopefully, you […]
  • DotNetNuke Skins – Handling CSS FilesDotNetNuke Skins – Handling CSS Files One of the most common mistakes I see when I buy skins for DotNetNuke is that the skin creator places a link tag for the CSS file inside the ASCX file for that skin. I've also seen skin […]
  • Watching Trends = Job SecurityWatching Trends = Job Security I’ve been programming for 21 years now.  Most of my career I’ve spent being on the bleeding edge.  This has helped when it came time to find work because I normally am one of […]
  • Why CSS ID selectors are Evil in ASP.NET Web FormsWhy CSS ID selectors are Evil in ASP.NET Web Forms Anyone familiar with CSS knows that class selectors are generally reserved for controlling how an element looks (font, color, size, etc) and id selectors are generally reserved for where […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer. His commitment to quality through test driven development, vast knowledge of C#, HTML, CSS and JavaScript as well as his ability to mentor younger programmers and his passion for Agile/Scrum as defined by the Agile Manifesto and the Scrum Alliance will certainly be an asset to your organization.