Altering the Look of the DNN FAQ Module

I had an issue with the way that the DNN module for FAQ's was behaving. Some extra space was appearing around my lists of questions and breaking up the way the page was supposed to look.  It turns out that the questions were getting these extra <p> tags around them.  Unfortunately, because the <p> tags were unexpected, the FAQ module was doing strange things like wrapping the <p> tags with <b> tags (it also wraps the whole thing in an <a> tag too to open up the question), which isn't really proper HTML. I was able to edit the template of the FAQ Module to stop the <b> tags but there was still the issue of the wierd spacing that was being created by the <p> tags.

The FAQ module was originally written against a different default rich text editor than what DNN ships nowadays (FCKeditor).  The old editor wouldn't add <p> tags to the text of your questions.  The FCK editor does and although it can be disabled by changing a config file, there are good reasons for keeping it, such as keeping your text wrapped correctly for proper HTML.  Using this config change would also change the behavior for the rich text editor through out all portals and modules, which would have bad side effects.

An option I have seen posted in a couple of places was to use the plain text module, but the problem with that is that changing that option seems to change all editor boxes sitewide, including the answer box.  Editing the source and leaving it without the <p> tags works but is not a good option because there are these special set of instructions for any editor who happens to want to update a question. This jumping through hoops isn't a good idea.

The solution is style sheets. Using Firebug, I could easily determine that the FAQ module wraps itself in a div with the class DNN_FAQsContent.  Now I can affect the <p> tags style within this div without affecting <p> tags throughout the site.  I decided to use the portal.css because I have several portals and I didn't want to unexpectedly affect them.  I was also pretty sure that I would want these effects even if I later changed skins.  So I didn't want to change the skin.css.


.DNN_FAQsContent a.SubHead p
    margin: 0px 0px 0px 0px;


Let me explain what I did.  Since the specific <p> tags I wanted to attack were in the div with the class DNN_FAQsContent I started with that identifier.  The <p> tags were also (probably improperly) surrounded by an <a> tag with a class of SubHead.  This was all very easily discovered by using Firebug.  I wanted to make sure I wasn't affecting the <p> tags that are in the answers.   Once I used the CSS to identify the tags I wanted to change, I applied the changes.  display:inline changes the <p> tag from being a block element to being an inline element.  This is more along the lines of how the the FAQ module originally displayed the question.  I also took out any margins.