Add Pizazz to Your Medical Center website
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
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 |
|---|---|
|
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.  |
|
|
|
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.
- Follow the Health System Marketing Brand Guidelines
- Can be used by all Medical Center websites
- Can be implemented using standard HTML elements currently available
via the editors. For example, a style for a paragraph, bulleted
list, blockquote, table.
