Site Designer now has an option to create your own theme. Pull down the Themes menu and you'll see the new option right at the top, as shown in the figure below:
Just click New... and upload your custome image. Then when you choose a custom image from your theme, it will appear in the style you've chosen in the place of default theme images. You can see my green logo in one of Office Live's styles in the figure below:
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.
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
You can exert a lot more control on the look and feel of a web page if you put the text on it in an HTML module rather than typing in directly in a Zone. That's because you can style the text with HTML markup or with CSS styles in an HTML module. There's a tiny little problem with the scheme, though: the text tends to get cut off at the edges. You'll often find the last letter or two in every line partially or completely missing. You can fix the problem by encolsing all the text in the moule inside a padded <div> like this:
<div style="padding: 5px 5px 5px 5px;margin:0px; overflow:visible">
...All the text and HTML goes here...
</div>
It's that easy