Web Edit in SharePoint 2010, Part 5: Working with Text (3 of 3) – Styles, Layout, & Markup Tools

We’ve reached the end of this little mini-series-within-a-series with this final chapter on the Editing Tools available for use with text in SharePoint 2010 out-of-the-box. The three remaining groups of tools we’ll be looking at today pertain to Styles, Layout, and Markup, and, continuing our progression from left to right in the Editing Tools Ribbon. We’re going to look at what lurks beneath the Styles button first.

As with most of the buttons found among the Editing Tools, Styles features a drop-down arrow beneath the icon, allowing you to choose from a menu of seven different options: Normal, Highlight, By Line, Tag Line, Comment, References, and Caption. I’m going to have to spend some more time in the future with some of these. The effect that choosing them has on selected text isn’t readily apparent to me, though I can infer their intended use from their names (I’m looking at you, By Line, Tag Line, and References. All of which seem to have the same effect: increasing the font size of the selected text and turning the font color gray). But please do feel free to set me straight if I’m missing something here. As for the other options, Normal is just that – the default font properties for the text block in question. The highlight will bathe the selected text in a yellow highlighter effect just like your college days. The comment will change the selected text to italicized and green. And caption increases the font size and changes the color to light blue. I should mention that these are the defaults, and I have no doubt that they could be changed via CSS. I should also mention that, as with all Editing Tools, you are provided with a live preview of the changes when you mouse over each option.

Moving on to the Text Layout button, the drop-down menu of which affords you the ability to “Create or remove columns, headers, and footers from the page,” and those options include:

  • One column; One column with a sidebar
  • Two columns; Two columns with header
  • Two columns with header and footer
  • Three columns; Three columns with header
  • Three columns with header and footer.

Since these page layout options lend themselves much better to a visual explanation than a written one, here are the accompanying visual representations of each layout option from the drop-down menu

Coming into the home stretch, the final grouping of Editing Tools is the Markup section, including a Markup Styles button as well as a grouped set of three buttons for Languages, Select, and HTML. We’ll begin with Markup Styles, which allows you to “Insert specific HTML elements into the page” and alters the appearance of the selected text accordingly. Heading 1 increases the font size. Heading 2 is the equivalent to the default font on a fresh SharePoint portal. Heading 3 bolds the text. Heading 4 italicizes the text. The Colored Heading options (1, 2, 3, and 4) have the same effect as the non-colored versions described above, but add color to the text. Horizontal Rule inserts a horizontal line between the header and the text. Paragraph appears to reset the text to a single-spaced paragraph appearance. Callout 1, 2, and 4 places the selected text in a colored box with a frame, and position it slightly differently on the page. Callout 3 italicizes and colors the text, but doesn’t include the colored box or frame.

The remaining Markup options are the three grouped options: Languages, Select, and HTML. As with other buttons in the Editing Tools, they’re each accompanied by a drop-down. The Languages button allows you to “Mark the selected text as being in a particular language” through the drop-down selections which provide dozens of languages from which you may choose (note: this feature doesn’t translate the text into the chosen language).

The Select button allows you to “Select contents on the page based on HTML elements.” To be honest, I have to tell you that I don’t fully understand this one, but for what it’s worth, I can also tell you that with my default copy in place. The only drop-down option that appears is Text division. If anybody is of a mind to jump in and provide some insight here, please do so in the comments below, and with my heartfelt thanks in advance.

The HTML button brings us to the end of our tour, and this one, naturally enough, allows you to “Modify HTML content on the page.” The two options in the HTML drop-down are Edit HTML Source and Convert to XHTML. Finally, if you’re down with the raw HTML knowledge and think that WYSIWIG editors (such as, well, the rest of the Editing Tools) are for wusses, you’re free to code to your heart’s content with this tool. Me, I’ll stick with the WYSIWIG options, thankyouverymuch. Big fan!

The SharePoint 2010 Web edit story so far:

  • Part 1: How to Insert a Picture
  • Part 2: Working with Pictures
  • Part 3: Working with Text (1 of 3) – Edit Tools
  • Part 4: Working with Text (2 of 3) – Clipboard, Font, and Paragraph Tools
  • Part 5: Working with Text (3 of 3) – Styles, Layout, & Markup