skip to content

Content Style Guide

This guide will demonstrate the styling options available from the toolbar of the WYSIWYG content editor. When developing content for your site, you will need to check how it looks on a mobile device as well. 

(Note: some options may be unavailable in select CKeditors)

Content

Using the content editor correctly in probono.net not only enhances the readability of your content, but also by applying style through the appropriate controls will enhance your search engine visibility and provide meaning to your content beyond the text itself.

Do:
  • Use the headings format to text provide section headers and break up long content blocks. This enhances readability allowing users to scan content faster.
  • Use Ordered or Unordered lists to present items that are related.
  • Keep formatting simple. Don't over complicate your content by trying to apply every style possible to it. Keeping it simple, keeps it readable.
  • Follow a logical formatting pattern across your web site. Keep your content style content consistent across pages.
  • Send your feedback to Pro Bono Net. If you would like a new style to be added, please send us a link or screen shot to the style.
Don't:
  • Try to not apply more than one format to elements. For instance, do not use Bold + Italic to text, use the Strong Emphasis style instead.
  • Do not create lists by prefixing lines with "1)." Use the Ordered List toolbar button instead.
  • Do not use the right and left alignment buttons to align images. Use the Left and Right Styles available after selecting your image.
Tips:
  • Soft breaks can be inserted into the editor by holding down the Ctrl key and pressing Enter (shift and Enter on a Mac). Soft breaks will keep you in the current style of the block element (paragraph, heading, list item).
  • Do not copy and paste content from other programs, such as Microsoft Word, as this will disrupt formatting
  • Move content around in the editor by selecting the content and then dragging it to the desired location. If you try to cut and paste you will lose your formatting.
  • If you are using Firefox as your browser, you may access the spelling suggestions in the content menu by holding the Ctrl key and Right Clicking on the underlined word.
  • Some Styles can only be seen when you have an object selected. For instance, to access image styles, select the image and then access the style option in the toolbar.
  • Use the full screen toolbar button to maximize the editor window to make it easier to compose content.
  • To remove a Style, move the cursor inside the styled text block and open the style menu then deselect the style you wish to remove from the text. Applied Styles are shown with a shown with a blue border in the menu.
  • More than one style can be applied to the same element.
  • Comparison of a poorly styled and well-designed site:
    • Lack of properly formatted headings
    • Inconsistent use of bolding and bullets
    • Listing items in paragraph forms instead of numbered lists
    • Random image placement and sizes

Note: when editing content in the editor, site colors are not applied to content, instead neutral colors are used.

New Pages, Templates, and Source Code

To quickly clear the entire editor, click the new page button: . You can also use one of three templates to help format your page by clicking: . To access the HTML of your page, click and the editor will switch to the source code; sometimes it can be easier to read the source code in a bigger window. You can maximize the editor with . If you want to preview your page while editing, click on to view the page in a new tab without having to submit the edits.

Cutting, Copying, Pasting, etc.

cuts text. For copying and pasting use and respectively. will paste in plain text and can be used to paste text from word while retaining the formatting.

If you've made a mistake and want to undo your last change click ; if you change your mind, will redo the change. To find all instances of a word or phrase click on and enter the text. To find and replace, use . If you want to select all the text in the editor either type control+a (command+a on a Mac) or click . ONLY copy and paste from a program that strips formatting, such as Notepad or Notepad ++.

Headings

Heading 2

This is a subtitle, it sticks to the heading above and increases the spacing below

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Heading 3

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at.

Heading 4

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis a.

Heading 5

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero.

Heading 6

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at .

Paragraph Styles

Normal Paragraph

This is left aligned paragraph
Using soft breaks I can keep
each line on the left

Centered Paragraph

This is centered paragraph
Using soft breaks allows the
content to stay centered
and I dont have to
center each
line

Right Aligned Paragraph

This is a right aligned paragraph
Soft breaks will keep my content
on the right side and will
stay on the right

Justified Paragraph

This is justified paragraph -Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet.

Large Margins

This is a paragraph with the Large Margins style applied. It has larger top and bottom margins than usual -Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Highlight Paragraph

This paragraph is set as hightlighted. The color will not be shown until it is saved. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.

Notice Paragraph

This paragraph is set as a notice. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.

Block Quote Paragraph

This paragraph is set as a block quote. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Outlined Paragraph

This paragraph is set as outlined. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

This is a formatted address

We use the key combination Shift-Enter to put soft breaks in between the address lines. This is important to add addresses using the Address Format for search engines:

Pro Bono Net
151 West 30th St
New York, NY 10001

Inline Styles

The following styles can be applied to content in paragraphs, these are inline styles. Here is some Emphasis added to text, and stronger Intense Emphasis or Underlined Emphasis. You may also have Citations that should provide linked references to your content. You may also style inline quotations, Pro Bono Style Guide is being implemented - PBN Dev, Show Deleted Text. This is bold text and this This is italic text which is the same as emphasized text. This is a superscript, this is subscript This is some Highlighted Text, it should have a background highlight. And this is some normal Accented Text, it should have a lighter background. The Inline Space style can be used to provide spacing between selected text. Several fonts are available for use including: Arial, Comic Sans MS, Courier New, Georgia, Lucida Sans Unicode, Tahoma, Times New Roman, Trebuchet MS, and Verdana. The size of the text can also be changed from very small to very large. The text color button can be used to change text colors and will give the text a background color. To remove an inline style or format, highlight the stylized text and click the remove formatting button: .

HTML Lists

Numerical lists

  1. List Item One
    1. Sub Item One - subitems are created by increasing indenting of the list item.
      This is content put into a list, that is entered with a soft break (Shift+Enter). This content renders inside our list item and allows us to have content paragraphs that are part of a list.
    2. Sub Item Two
  2. List Item Two.
  3. List Item Three

Unordered List

  • List Item One
    • Sub Item One
      • Sub Sub Item One
  • List Item Two
  • List Item Three

Indents

Increase and decrease the indents of paragraphs, list items, images, and other objects.

This paragraph is indented once. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

This paragraph is indented twice. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Images

The image in the paragraph should be aligned to the left - Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.

The image in this paragraph should be aligned to the right of the text - Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Make sure images appear OK on a mobile device as well. If you have any questions, please contact us.

Tables

This is a table with 3 rows and 2 columns.
Use tab to move between cells or click the cell you want to edit.
Double click on the table to edit its properties.

Horizontal Lines, Page Breaks, and Special Characters

To insert special characters such as ©, ⇒, or á click . Creating a page break with will force content below the break onto the next page when the resource is printed. To test this, you can print the content in the CKEditor with. Horizontal lines () can be used to delineate sections. Like this:

Links and Anchors

External, internal anchor, and email links can be added to text using and selecting the desired link type. Links can be removed by highlighting the linked text and clicking.

In-text anchors are created with . Anchors create markers within the page that can be jump linked to. For example, clicking here will jump to the Paragraph Styles section.

External resources: