Did you know that it's easy to overwrite your old PDF with the newly updated version? That way you don't have 17 outdated versions in your folder, and all of your links will automatically update.  Learn how to easily update your PDFs.

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:

  1. When editing a contentlet, look below the editing box for "WYSIWYG" with a small arrow to the right.
  2. Click on the arrow, and select CODE from the list.
  3. 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:center;">CENTER</p>

<p style="text-align:right;"> RIGHT </p>

 

Left Justified (Default)

Center

Right Justified

Horizontal Line
This puts a full line across the width of your page or table cell
<hr/>

 


 

 

 Insert horizontal rule
Blockquote
This will tab the entire paragraph of text in from the regular paragraph formatting.
<BLOCKQUOTE>
Four score and 7 years ago.
My Uncle bought a Ford Taurus. 
Poor, poor man. 

</BLOCKQUOTE>

 Put your cursor somewhere within the paragraph you'd like to indent, and choose the blockquote icon

Paragraph
This will create a paragraph of text with a blank line of text under it

 

 <p>Here is my paragraph</p> Hit the Enter key on the keyboard.

Line Break
- This will give you a way to remove that blank line of text

<br/> 

<p>Here is my paragraph.<br/>
This text will be on the next line, instead of starting a new paragraph.</p> 

A line break is also achieved in WYSIWYG mode by holding down SHIFT and hitting the ENTER key.
Unordered List (bulleted list) <ul>
  • <li>Coffee</li>
  • <li>Tea</li>

</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)

<ol>

  1. <li>Coffee</li>
  2. <li>Tea</li>
  3. <li>Milk</li>

</ol>

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 

 <ul>

  • <li>Cats</li>
  • <li>Dogs:</li>
         <ul>
    • <li>Golden Retriever</li>
    • <li>Beagle</li></ul>
  • <li>Rabbits</li>
</ul>

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.