- Current Picks
- About the Web Team
- About the Website
- Content Editor Resources
- Definitions / FAQ
- Need Help Getting Started?
- CMS Documentation (PDF)
- Official Webpage Guidelines
- Sample Website
- Website Fonts & Colors
- Website Showcase
- Website Policies
Web Development Office
Immaculata Hall, 90
Visit our office
Mon. - Fri. 8:30a - 4:30p
Photos taken with a digital camera need to be resized on the website. Find out why and how to resize them.View All Tips
Styling in WYSIWYG mode, using the editor
WYSIWYG stands for "What you see is what you get" and is the default mode that you will see when editing your contentlets. The functions in the WYSIWYG editor are very similar to those you might find in Microsoft Word, or a similar program.
View the dotCMS documentation page for explanations of all of the editor toolbar buttons in the WYSIWYG.
Styling in Code Mode, using HTML & CSS
Here are some HTML/CSS Styles that you can use on the website. All of these styles are achieved through our WYSIWYG editor, but can also be hand-coded into your page by switching from the WYSIWYG mode to CODE view:
- When editing a contentlet, look below the editing box for "WYSIWYG" with a small arrow to the right.
- Click on the arrow, and select CODE from the list.
- Your editing box will now show all of the HTML in your contentlet.
Formatting your Page Chart
|Function||Code Mode||WYSIWYG Toolbar or Keyboard Function|
|Heading Styles (H1, H2, etc)||
<H1> This is H1 </H1>
<H2> This Is H2 </H2>
<H3> This is H3 </H3>
<H4> This is H4 </H4>
<H5> This is H5 </H5>
Highlight your text, and select a heading style from the Format Dropdown.
|Bold / Strong Text||<strong> This is Bold </strong>||
Highlight your text, and select the bold icon
|Italic / Emphasized Text||<em> This is emphasized </em>||Highlight your text, and select the italics icon|
|Underlined||<u> This is underlined </u>||Highlight your text, and select the underline icon|
|Align Paragraph of Text||
<p style="text-align:left;"> LEFT </p>
<p style="text-align:right;"> RIGHT </p>
Left Justified (Default)
This puts a full line across the width of your page or table cell
|Insert horizontal rule|
This will tab the entire paragraph of text in from the regular paragraph formatting.
Four score and 7 years ago.
|Put your cursor somewhere within the paragraph you'd like to indent, and choose the blockquote icon|
|<p>Here is my paragraph</p>||Hit the Enter key on the keyboard.|
<p>Here is my paragraph.<br/>
|A line break is also achieved in WYSIWYG mode by holding down SHIFT and hitting the ENTER key.|
|Unordered List (bulleted list)||<ul>
Choose this icon to start your bulleted list. To make a second or third bullet point, hit the ENTER key on the keyboard. When you are done with your list, hit enter, then click the bulleted list icon again to end the list.
Ordered list (numbered list)
|Choose this icon to start your numbered list. To make a second or third bullet point, hit the ENTER key on the keyboard. When you are done with your list, hit enter, then click the numbered list icon again to end the list.|
|Bulleted / Numbered List Indenting (making a list within a list)
This works for both <ul> and <li> list styles
Indent icon: First choose the ordered or unordered list icon and start typing your list.
When you are ready to indent the list under your bullet point, hit enter to start a new bullet, then the indent icon and begin typing. Continue your "sub" list by hitting enter after each bullet.
When you are done with your indented list, hit enter, then the Outdent icon to continue with your main list.