Simon Witkiss wrote saying that Office Live's Site Navigation Links show an underline inconsistently when you hover over them. If you've already visited the link, you don't see the underline, as shown in Figure 1.
Figure 1: Visited links don't show an underline
On the other hand, if you've never visted the site, the underline is displayed, as shown in Figure 2.
Figure 2: Links not already visited show an underline
While it's not a showstopper, it's certainly an irritant. Simon posted a fix in a comment, but here it is again as an official tip, with accompanying figures. Add the following style to your style sheet:
.MSC_PrimaryNavLink:visited:hover
{
color:#ffffff;
font-size:12px;
text-decoration:underline;
}
Thanks, Simon!
Building a new web site with Office Live Small Business? Follow these tips to make it friendly to search engines:
-
Use Office Live's Built-in Site Name and Site Slogan instead of creating images for them. When you do so, Office Live renders them as <h3> and <h5> tags, which search engines attach importance to. If you use the custom header module, Office Live makes the values of these fields available in the xsl style sheets. Use those values if you can. If you can't (or don't want to) add your own <h3> and <h5> tags.
More...
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:
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