kiwi
Final part of “An alternative to webtrees’ FAQ module”

In this final part I want to address the more detailed changes necessary to make phpMyFaq (“pMF”) appear to be a fully integrated part of webtrees. This will entail creating a complete webtrees template to replace pMF’s default one, therefore I only intend making this for the webtrees “standard” theme. But I will annotate the changes so that anyone else can fairly easily create versions of any other theme. The completed pMF template will be added to the simpl-add-ons pages here for download. I will gladly included anyone else’s templates in the package if they are sent to me. I also fully expect to miss some layout styles in this first attempt, so don’t hesitate to let me know so they can be included in later releases.

A pMF template consists of layout files (html), style sheets (css) and images.

Layouts

The layouts will only need changing once (unless you want a different one to mine) for any webtrees theme.

  1. index.tpl is the main structure of pMF. 
    1. All changes discussed in part 3 of this article are kept.
    2. I have removed a series of IE version checks, and meta tags from here, as they are not required due to the page only being displayed within a webtrees iframe.
    3. Move Sticky FAQs to the top of the right-column.
    4. The rest of this can remain as standard pMF.
  2. main.tpl provides the layout for pMF’s “home page”. I’ve chosen to leave this alone, including retaining their “News” articles. In my view, within webtrees, this is likely to only contain one article, perhaps describing the purpose and how to use the FAQ pages. Other’s may prefer to make greater use of it.
  3. startpage.tpl is the page used to display each individual FAQ. No major changes here except to remove a section used to display social media icons. These are inconsistent with webtrees, unless you have added your own, and then these would simply duplicate those.
  4. catandtag.tpl is used to display category pages. Social media links are also removed from here.

Style sheet

The main file, style.css, is where the bulk of the remaining changes need to be made. If you use RTL language son your site, you may also need to review the file style_rtl.css. I have not touched this file.

  1. First, change the overall font to match webtrees standard, by replacing two instances of “font-family:”Trebuchet MS”,”Helvetica Neue”,Helvetica,Arial,sans-serif” with “font-family:tahoma, arial, helvetica, sans-serif”; reduce the font-size to 12px; and change the base color to #555 in the same places.
  2. Change header font sizes (h2, h3, h4) to 18, 16, 12px respectively, and the line-height for h1, h2, h3 to 24px.
  3. Change the styling of the various “blocks”, which use the class “.well” in pMF to use: 
    #content .well{background-color: #edf7fd; border: solid #81a9cb 1px; margin-top: 10px; padding: 3px; vertical-align: top;}
  4. Add webtrees styling for tabs: 
    .nav-tabs {margin:0; padding:.2em .2em 0; border-radius:3px; border: 1px solid #b2c7d7;background: #e7eef3 url(../images/ui-bg_highlight-soft_100_e7eef3_1x100.png) 50% 50% repeat-x;color: #222222;font-weight: bold;}
.nav-tabs>li{border: 1px solid #cccccc;background: #e6e6e6 url(../images/ui-bg_glass_80_e6e6e6_1x400.png) 50% 50% repeat-x;color: #444444;font-weight: normal;margin: 1px .2em 0 0;border-bottom: 0;border-top-right-radius: 3px;border-top-left-radius: 3px;}
.nav-tabs>li a{padding: .5em 1em;}
.nav-tabs>li.active{border: 1px solid #2694e8;border-bottom: 0;background: #99c2ff url(../images/ui-bg_glass_50_99c2ff_1x400.png) 50% 50% repeat-x;}
  5. Add the following new or over-writing styles to the bottom of the style sheet: 
    p.copyright {font-size:80%;margin:0 30px;} /*adjust size and position of copyright link in footer */
header h3 a img, #newsRSS, #rssCategoryLink a img{display:none;} /* hide rss icons */
.btn-primary, .btn-primary:focus,.btn-primary:active{color:#555;background-color:#fff;*background-color:#fff;background-image:none;margin:5px 5px 0 5px;text-shadow:none;margin:5px 5px 0 5px;}/*remove orange background from button */
.btn-primary:hover{color:#f00;background-color:#fff;*background-color:#fff;background-image:none;text-shadow:none;}/*remove orange background from button */
.form-search .input-append .search-query {border-radius:0;margin:5px 0 5px 5px;} /* remove rounded corners from search box */
#content .categories {font-size:inherit;} /* change font size in "categories" block */
#content .breadcrumb{background:none;padding: 8px 0} /* remove background from breadcumb element */
.label-info[href], .badge-info[href] {text-shadow: none;font-weight: normal;padding: 3px 5px;background-color: #edf7fd;border: solid #81a9cb 1px;} /* change format of article links */
.label-info[href] a, .badge-info[href] a {color: #555!important;}/* change format of article links */
.label-info[href] a:hover, .badge-info[href] a:hover {color: #f00!important;}/* change format of article links */
li a:empty{display:none;} /* hide emty list elements */

That covers all the style changes, until someone reminds me of the ones I have missed. 😛

Images

For the webtrees standard theme we just need to add three images, the ones used in the style sheet changes above for backgrounds to the tabs.

Other things to consider

As a final part to the set up I recomend the following

  1. As mentioned above, add a “News” article to help your users understand the FAQ pages, and how to navigate them (see sample image below)
  2. The default setting for number of items in the “Most popular FAQs” and “Latest FAQs” is 10 items. I find this too long, so changed it to 5. The control for that is in faq/config/constants.php. Look for define(‘PMF_NUMBER_RECORDS_TOPTEN’, 10); and define(‘PMF_NUMBER_RECORDS_LATEST’, 10);

Here are some images from my test site, using pMF in the webtrees theme.

faq3 faq4 faq5