Your site comes with a rich-text editor which functions as any standard word processor might. The term "WYSIWYG" stands for "What you see is what you get" meaning that changes you make in the text editor area will appear as they would on the page itself.
There are options for bold, italic, bulleted and numbered lists and more. Most of these you'll recognize from word processors. These are used in the same way you'd expect. Select the text you want to change, click the button and it will be bold, underlined, or colored for you. You'll also find a couple of website-specific options.
Example of the Text Editor / WYSIWYG
To add styling to your text, simply highlight the text and use the formatting options to make stylistic changes.
For best practices reasons, we recently removed the options to resize fonts and select different font families (read about this change), you are able to force these actions by Disabling the rich-text (see below) so you can alter the html code that controls the page you are working on.
Although not advised, here is an example of how you can alter the font family:
Note: you should use only web safe fonts when making these changes. View a list of web safe fonts.
If you would prefer to add some HTML code to your text, select the Source icon in the text editor. Doing this will turn your content editing window into source code view.
Allowed HTML tags include: <a> <address> <b> <blockquote> <br> <caption> <cite> <code> <dd> <div> <dl> <dt> <em> <embed> <h2> <h3> <h4> <h5> <h6> <i> <iframe> <img> <li> <object> <ol> <p> <param> <pre> <script> <span> <strike> <strong> <sub> <sup> <table> <td> <tr> <u> <ul>
Allowed Style properties: background-color, color, display, float, font, font-family, font-size, height, margin-left, margin-right, padding, padding-bottom, padding-left, padding-right, padding-top, text-align, text-decoration, text-indent, width.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs are automatically recognized. The <br/> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. If paragraphs are not recognized simply add a couple blank lines by clicking the Return key on your keyboard.
To remove formatting from your page, highlight the text and select the Remove Formatting icon.
To resize an image placed on your page, follow these steps:
1. Select the image
2. Right click on the image and select Image Properties
3. Make appropriate changes to fields available:
- alternative text
- horizontal & vertical space
By default the system show shorter version of your post in the teaser (or list) view. This text is known as the "teaser". You can adjust length of the teaser text for each post individually by moving your cursor to the desired location and clicking the line break button.
With Teaser Break
Without Teaser Break
Any text below a line break will be hidden from the teaser view.
Many site owners will want to copy and paste material from other sources such as a word processor document, a PDF file, or an email. Unfortunately applications like word processors and email clients often include a lot of unwanted formatting code with each copy/paste. OpenScholar will ultimately strip away unwanted code from public view but it may appear to you in the rich text editor and may be distracting. To avoid this you can click the Paste from Word which will open a new popup window. By pasting and inserting into this window, all unwanted formatting code is stripped away entirely. You can then continue to format the text as you like.
These are images, media, and files. The allows you to place non-text content directly in the body of your post. Clicking on this control will bring up a dialog box on the screen to guide you further.
When adding hyperlinks to your text using the link icon, you are now able to opt to open that link in a separate tab. See example below.
You can include anchor tags within a post or page, helping you place links in the body of your post and jump to that location on the page.
Move the cursor to the place you would like to jump to. Click the anchor icon to insert the anchor tag name.
To jump to the new anchor link append the "#anchor tag name" at the end of the page's URL.
You can now provide people with a link directly to your anchor on the page using this format:
siteurl#anchor or an example: hwp.harvard.edu/about#services
Example anchor link (this will take you to the top of this page): TOP
Removal of the custom font and sizing options
We've removed the ability to change the font family and font size from the text editor. We've done this to:
- encourage consistency on your site by allowing the theme you are using to drive the font styles
- prevent cross-browser and cross-os compatibility issues,
- provide semantic markup for accessibility.
Your options if you want to change the font-family: you can make a custom CSS for your site or change the font-family in the html code. For the font-size, please use the formatting drop down to select different Headings to change the size of the fonts.