Add Pizazz to Your Medical Center website

Posted by Lori N. Benson at Sep 20, 2011 01:20 PM |

Medical Center departmental websites have extra styling options available in Plone's content editors - TinyMCE or Kupu. Learn what these styles are and how to apply them. This post is written with the assumption content editors have a basic understanding of how to format content using the editors.

Change the style of your content with this drop down

Editor's Style Drop Down In the TinyMCE or Kupu editor toolbar you will see a drop down box.

Clicking the drop down box, will reveal options you can choose to style your content.

In the following document, we will review how each of these style your content.

Font Sizes: Small to Large

The default font size is Font 12px. This is applied without having to select it from the drop down. But sometimes you may want to change the size of a word or sentence. Selecting one of the font options will only change the size. Font type and color will remain the same.

Note: For a title at the head of a page or paragraph, Headings should be used. See below for Heading styles.

Options Available:

Font 10px

Font 11px

Font 12px

Font 13px

Font 14px

Font 15px

Headings: Sizes and Colors

Headings are important in Web pages. Since users may skim your pages by its headings, it is important to use them to show the page structure.

HTML defines six levels of headings. The style drop down lists 5 of them. Heading 1 is considered the highest (or most important) level and is reserved for the page title; while Heading 6 the least important.

Font sizes change slightly between the headings, colors vary and padding is added to the top and bottom of text.

Options Available:

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists: Squares, Arrows and Fancy

There are two types of lists - numbered and bulleted. The following instructions are applied when using bulleted lists.  Numbered lists will display numerical list items only.

Main content areas and portlets (left of right columns)
Portlets ONLY
  • Default bullets: selecting nothing from drop down applies brown square for the bullet
  • Font size and color remain default
  • Padding is applied before and after list
Fancy list (portlets only). Image example show below.
Recommended for link lists.
List items separated by a dotted gray line.
When mouse hovers over link, background color changes to yellow.
Fancy List - Portlet
  • Square bullets: applies brown square for the bullet. This is applied when changing from arrow bullets.
  • Font size and color remain default
  • Padding is applied before and after list
  • Arrow bullets: applies brown arrow for the bullet
  • Font size and color remain default
  • Padding is applied before and after list

 

Float Box Right: Call Out

This is a call out and are typically used in long documents "calling" out excerpts or quotes. 

The appearance cannot be altered.  The border will be blue and always to the right.

A call out can be applied to one paragraph, table, or bulleted list. Applying it to multiple paragraphs, for example, will render call outs for each of the paragraphs. However, adding a break between sentences will give the appearance of two paragraphs. To add a break, on the keyboard hold SHIFT and press RETURN or ENTER once for one break.

If you are comfortable writing HTML, a group of paragraphs or a heading and paragraph with an image (like the example at the beginning of this post) can be wrapped in a <div> with the style, class="pullquote" applied to the div.

Buttons

Can be applied to a linked paragraph tag.  For example, the structure will look similar to:

<p><a href="#">Green Button</a></p>

Do you have a style idea?

Please submit your idea. All submissions will be reviewed!

Ideas will need to meet the following requirements.

  1. Follow the Health System Marketing Brand Guidelines
  2. Can be used by all Medical Center websites
  3. Can be implemented using standard HTML elements currently available via the editors.  For example, a style for a paragraph, bulleted list, blockquote, table.