I spend a lot of time managing and updating Web pages on our internal Microsoft Office SharePoint Web site. MOSS is great for displaying lists, libraries, and calendars of shared items and events using Web parts. When I first starting creating pages, though, it wasn’t clear to me how to do things like add headings, add explanatory content, or use formatted text to make a page look more appealing. Then I found the Content Editor Web Part, which is now one of my favorite Web parts. It allows you to add HTML, formatted text, tables, and images to a page to help clarify, explain, or add emphasis to whatever you’re trying to communicate. For example… here’s a typical default SharePoint page with an Announcements Web part and a Calendar Web part at the top of the page.
This a good start for a page, but it doesn’t quickly communicate what the page is about, grab the attention of your audience, or look very appealing. That’s where the Content Editor Web Part comes in. You can use this versatile Web part to add a heading, graphic, and introductory paragraph to your page, like this:
To create something similar with a Content Editor Web part on your Microsoft Office SharePoint Web page, follow this procedure (which assumes you have permissions to edit the page you’re working on):
1. On your page, click Site Actions, and then click Edit Page.
2. In the area where you want to add the Content Editor Web Part, click Add a Web Part.
3. In the Add Web Parts dialog box, scroll down to the Miscellaneous section, and then click Content Editor Web Part, and then click Add.
4. The Web Part is added to your page. Click the link that says open the tool pane...
5. The tool pane usually displays on the right of the page. You may need to scroll to find it. Once you find it, click Rich Text Editor to start adding formatted content and images. Or, click Source Editor to add HTML code. See the Tips and Tricks below for info on styles, graphics, and more.
6. Add your content, and click OK (in the rich text editor) or Save (in the source editor) when you’re done.
Tips and Tricks
· In the Rich Text Editor, use the buttons on the toolbar for formatting, adding tables, hyperlinks, and images.
· Images: Upload your image to your site before attempting to add an image to the Web part. Once you’ve uploaded your image to the site, you can add the image to the Web part by clicking the Image button (or CTRL+SHIFT+G) and click browse to find your image on the site. Then, you can choose how to display the image within the text. For example, under Alignment in the Edit Image Properties dialog box, choose Left to place the image to the left side of the text (as in the screenshot shown above). To add space between the image and the text, add a number under Horizontal Spacing (pixels) or Vertical Spacing (pixels). I always start with 10.
· Styles: Want to use predefined styles? Don’t click the Styles button. Instead, click the paragraph mark button and select a style such as Bulleted List, Heading 1, Heading 2, and so on.
· So what is the Styles button for? I use it when I paste content into the Rich Text Editor from another source, and it doesn’t look quite right. So I click Remove Inline Styles under Styles to remove stray formatting brought in from the other source, and then reformat the text in the Rich Text Editor.
· Title (Chrome): When you’re using the Content Editor Web Part to display a heading, you might not want the Content Editor Web Part title to show. To remove it, expand the Appearance section in the tool pane, and under Chrome Type, select None or Border Only.
· Height and Width: You can specify a height and width for the Web part by expanding the Appearance section and clicking Yes under Height or Width, and then entering the size you want. You can choose to represent the size in Pixels, Inches, Points, and more.
· Editing the HTML: If something just doesn’t look right and you can’t change it using the Rich Text Editor, you may need to edit the HTML directly. You can do this by clicking the Edit HTML Source button in the Rich Text Editor, or by closing the Rich Text Editor and clicking the Source Editor button in the tool pane. In cases where there is a lot of HTML to work with, I copy the HTML out into Notepad where I can wrap the text and use the Find tool to find what I’m looking for, make my changes, and then copy it back into the Source Editor. For especially complex HTML, I will copy the code into SharePoint Designer and work with it there.
For more information, see About the Content Editor Web Part on Office Online.
This post also appears on Inside Office Online, where you can find the helpful news and tips on using Office programs.
Loreen