Formatting Content

« Back to the Table of Contents

Your library may have customizations, but the principals are the same regardless of which buttons and style options you have available on your site.

LibrarySite offers a simple visual editor for formatting page text. This is often refered to as a WYSIWYG (pronounced "whizz-i-wig", for "what you see is what you get").

To use the formatting buttons, the text you want to format must be highlighted in your text area (much like in a typical word processor). For information on how to use the Edit summary link, see Edit Existing Content.

The button options

  • bold icon Bold (strong text) - for making highlighted text bold. Uses the HTML tag <strong>.
  • italic icon Italic (emphasized text) - for making highlighted text italic. Uses the HTML tag <em>.
  •  Underline - for underlining text. Uses the HTML tag <u>.
  •  Strikethrough - for striking through text. Uses the HTML tag <s>.
  •  Block Quote - use this when including a quote in your page. This markup has specific semantic meaning, and should not be used for anything other than quotes.
  •  Link - This brings up modal that allows you to link highlighted text to somewhere else on your or another website. The first field is a search field that scans content and files on your site by title. If you start typing the title of the page to which you wish to link, this field will offer suggestions. The second field is for an absolute URL to an external site. Note: you do not need to link email addresses or URLs that are fully written out (e.g. http://google.com) because Drupal will automatically link these for you.
  •  Bulleted list - creates a list much like the one used for describing the buttons. Each paragraph return starts a new list item. Uses the HTML tags <ul> (unordered list) and <li>.
  •  Numbered list - creates a numbered list. Each paragraph return starts a new list item. Uses the HTML tags <ol> (ordered list) and <li>.
  •  Insert Image - [link to documentation coming soon] for adding images into the text area of your page. It is preferable to use the Main Image and Slideshow Images fields, but this is available for those cases when something needs to be inserted between paragraphs.
  •  View Source - view the HTML code.
  •  Paste from word - word processors such as Microsoft Word use enstensive invisible markup to create the complex formatting you see on your word documents, and this markup can become ugly when rendered on a web page. Ideally, content editors will use the formatting tools in the text editor on the site to format content. If they choose to paste content from word, however, the Paste from word tool will help remove as much of the bad word processor formatting as possible. Note: see Troubleshooting below for more information.

The drop list options

  •  Block formats - this drop list includes <div> and <p> tags, which can be comfortably used by those who are familiar with basic HTML if desired. The more important options in this drop list are the header options: Header 2 <h2>, Header 3 <h3> and Header 4 <h4>. See LibrarySite Styles and Options for examples of how the headers look in the default LibrarySite theme.
  •  Styles - styles selected from this drop down list will apply to whatever text you have highlighted in your text editor when selecting the style. See LibrarySite Styles and Options for descriptions of the style options and examples of how they look in the default LibrarySite theme.

 

About adding links

There are five kinds of links you might add to your page:

  • Relative (internal) links - these are links to other content on your site. These links will typically not contain the full URL, just in case your site's URL ever changes. When using the link tool to add these links, you can usually search for the content to which you wish to link by typing the title of the content you are linking to. Relative URLs will typically look like this: /node/102 or /about/friends.
  • Absolute (external) links - these are links to other sites and contain the entire path, e.g. http://librarysite.chillco.com/about/about-librarysite or http://google.com.
  • Email links - if you write an email address into the content, Drupal will render it as an email link for the user. The user can then click on the email address to open their email client of choice and send a message.
  • Telephone links - if a phone number is properly wrapped in telephone link tags, then clicking on it on a cellular device will initate a phone call. These kinds of links still need to be coded by the content editor. To do so, click Disable rich-text at the bottom of your text body area, find the telephone number, and wrap it in the proper HTML tags. A properly marked up phone number will look like: 
    <a href="tel:12223334444">(222) 333-4444</a> 
  • Anchor links - these are links to other areas on the page, and also must be added by disabling rich-text. An anchor link has two parts: the link, and the destination of the link. The destinaton will look like this: 
    <a name="name-of-destination" />
    Note that there are no spaces or unusual characters in the name.
    The link that takes the user to the destination will look like:
    <a href="#name-of-destination">Words the user will see</a>
    Note the # before name-of-destination in the a tag. 

Troubleshooting

Ninety percent of the complications with the visual editor come from pasting from a word processor. The rest are just part of the challenge of getting the formatting to look exactly the way you want it to look.

In both cases, sometimes you will need to see the actual markup to find out what is wrong. To change the format of the text, use the dropdown menu to make your selection.

Troubleshooting requires a basic knowledge of HTML. An excellent place to start if you don't have previous experience with HTML is http://www.w3schools.com/html/.