AcxedeFAQ uses the default styles of your web site to display questions and answers but you aren't stuck with those styles. The installation package adds a custom CSS file called AcxedeFAQCustom.css to your document gallery. It has three empty CSS classes as shown below:
.AcxedeFAQQuestionCustom { }
.AcxedeFAQAnswerCustom { }
.AcxedeFAQHRCustom { }
You can use these classes to add custom styling to the questions, answers and the horizontal rules that enclose the question links respectively.
Want to customize one or more colors in the colors scheme you've chosen for your Office Live Small Business web site? Try Acxede's ColorPalette.
ColorPalette lets you select replacement colors for each of the palette's seven colors and generates CSS that you can simply cut and paste in your web site's CSS editor.
AcxedeFAQ is a Office Live Small Business application that lets you customize the FAQ page on your web site. It lets you
- Add more than 10 questions to FAQ
- Change the order in which the qustions appear on the the web page
- Hide and show questions without having to get rid of them altogether
- Customize the styles on the Q & A, even though AcxedeFAQ automatically adopts the styles in the style/color/theme combination you've chosen for your web site.
Complete downloading, installation, and confiiguration instructions are here.
Don't want the hassles of monkeying around with Office Live Small Business's style sheet? Try Acxede's StyleBuilder.
StyleBuilder lets you select new attributes for a few common classes and generates CSS that you can simply cut and paste in your web site's CSS editor.
Presently, StyleBuilder generates styles for
- Customizing page background
- Customizing footer color
- Customizing footer links color
- Hiding Office Live Small Business Logo
- Reducing font size of the secondary navigation to match with that of the primary navigaion
You'll be able to customize many more styles in the coming days.
If you'd like to suggest CSS customizations to be included in StyleBuilder or have questions on StyleBuilder, please post a comment.
I like to leave font settings for my web site to Office Live Small Business's default settings so that I don't have monkey around with them on each page. One problem that my web site has always had because of this is that the secondary navigation has a bigger font size than the primary navigation, as shown in Figure 1.
Figure 1: Secondary navigation links have a bigger font
Now that we have access to the default style sheet, it's easy to see why - the primary navigation font is set in pixels while the secondary navigation font is set in points.
Fortunately, it's quite easy to fix this by altering your site's style sheet. Here's how you do it
- Activate Advanced Design Features on your web site. (Or better yet, read the entire tutorial on advanced design features.)
- Go to Site Designer and click the Style sheet button on the Ribbon, as shown in Figure 2.
Figure 2: The Style Sheet button in Site Designer
- Check the Apply custom CSS code to my Web site checkbox.
- Cut the following markup and paste it in the little editor, shown in Figure 3, that pops up when you click the Style button.
.MSC_SecondaryNavLink, .MSC_SecondaryNavLink:hover, .MSC_SecondaryNavLink:visited, .MSC_SecondaryNavLink-On, .MSC_SecondaryNavLink-On:hover, .MSC_SecondaryNavLink-On:visited { font-size:12px;}
Figure 3: Office Live's Stylesheet Editor
If you've already added some CSS markup, as it has been in Figure 3, paste the new markup after whatever is displayed in the window.
- Click OK. The editor pop-up window will close and you'll return to Site Designer. Notice that the font size of primary and secondary navigation links is now the same as shown in Figure 4.
Figure 4: Primary and secondary noavigation links now have the same font size