Creating custom themes is fairly easy in FaqMaker if you understand CSS. They are really just CSS files with a little bit of extra support for uploading additional support files.

Here is the CSS structure of a FaqMaker page. (You can also get a PDF version here)





Optional Components:

For the optional sidebar elements CSS is very straitforward with the xml files for the RSS feeds having 3 classes

• ‘faq-rss-link’
• ‘blog-rss-link’
• ‘faq-rss-link-updated’ or ‘faq-rss-link-created’ (as appropriate)

The ‘PDF’ link has a class of ‘faq-pdf-link’

For the optional JS-Kit components (ratings & comments) the entire thing is wrapped with a class of ‘js-kit’ while the comments are wrapped with a class of ‘js-kit-comments’ and the ratings are wrapped with a class of ‘js-kit-ratings’

---

The basic FaqMaker structure is one of two ways depending on where you tell it to store the answers.



If you select "Answers on Same Page as Questions" then it lays it out exactly as is shown above -- First the a short version of the question then the long version of the questions followed immedietly by the answer




If you select any other answer location then FaqMaker will put the questions on the first page and the questions/answers on subpages.

Main Page (without #faq-header)


Subpages (without #faq-body) -- There are multiple subpages


You can use any of the themes built into FaqMaker as a starting point for making a custom theme. To enable a custom theme in FaqMaker just give it a name that ends in "_fm.css" and put the file in ~/Library/Application Support/RapidWeaver/FaqMaker (if the FaqMaker folder doesn't exist then create it)

Let's examine the 'default' theme line by line as a tutorial


This first section is a comment. There is also a 'file' directive -- FaqMaker will see this and look for a file called 'pdf.png' and upload it with the CSS File if you use this theme (in this case pdf.png is a small graphical image that goes next to the PDF



This next section defines that the 'pdf' link should have the small graphical icon next to it. Headers should have no list styles and have some extra padding. The quesetions should have a 5 em margin and not to decorate (underline) links



This next section defines how the answers should look. They shouldn't have a list appearance and answers should have a 'bottom bar' underneath them (a separator)



Finally if there if comments or ratings are enabled give them a little spacing from the answer.



This last one is interesting. Basically it will draw a solid red border around the active 'target'. This is what provides a highlite function when you click on a question link. Note that in this example (and most of the supplied themes) I use rounded corners for FIrefox & Safari using the not-strict border radius. This looks nice (in my opinion) and degrades well in IE.


That's it! Go forward and create a custom theme, if you have one you'd like to share send it to me (via support) and perhaps I'll include it in future versions of FaqMaker!