Skip to content. | Skip to navigation

Personal tools

Navigation

You are here: Home / Plone Help / Using the Kupu Editor / Bullets and Numbering

Bullets and Numbering

Overview

Plone's Kupu editor has the ability to create numbered lists as well as bulleted lists.  Each type can have multiple levels, and in the case of a numbered list, the values are automatically updated when items are added to- or deleted from the list.

As of Plone version 3.1.6, Plone's Kupu editor does have the ability to intermix bullet lists and numbered lists.  However, it is not recommended because managing this combination can be problematic.  Hopefully, future versions will handle this combination better.

Numbered Lists

Creating a New Numbered List

To create a numbered list, place the cursor on a blank line on the page and click the Ordered list button (Numbered list button).  (If you click the Ordered list button on a line that already contains text, a number will be placed in front of that line.)  After typing some text for the first number, press [Enter] to begin the next.  Once the list is complete, press [Enter] without typing any text to turn off numbering.  (If the list is the final thing on a page, there is no need to press [Enter] twice to turn off numbering.)  As an example, the list below

  1. Chocolate
  2. Ice cream
  3. Raspberry

was created by following these steps:

  1. Click the Ordered list button (Numbered list button).
  2. Type:  Chocolate
  3. Press [Enter] to start the next number (2).
  4. Type:  Ice cream
  5. Press [Enter] to start the next number (3).
  6. Type:  Raspberry
  7. Press [Enter] to start the next number (4).
  8. Since there are no more items for the list, press press [Enter] again to remove the number 4 and turn off numbering.

Adding Items to a Numbered List

If you wish to add items to the list, place the cursor in the list where you wish to add the item, press [Enter] to create the new number, and then type the new text.  All items below the newly inserted item will automatically be renumbered.  For example, to add "Coconut" to the list above between items 1 and 2, place the cursor at the end of the word "Chocolate," press [Enter] to create a new item, and type "Coconut."  The resulting list will look as follows.

  1. Chocolate
  2. Coconut
  3. Ice cream
  4. Raspberry

Deleting Items from a Numbered List

To delete an item from the list, delete the text associated with the number and then press [Backspace] to delete the number itself.  All items below the deleted item will automatically be renumbered.  For example, to remove "Coconut" from the list above, first, delete the word "Coconut."  At that point, the cursor will be positioned on item 2 that now has no associated text.  Next, press the [Backspace] key, which deletes the number 2 and results in the following renumbered list.

  1. Chocolate
  2. Ice cream
  3. Raspberry

Using Multiple "Short Lines" Per Number

If you wish to have a numbered item with multiple short lines, separate the portions of the numbered point by pressing [Shift-Enter].  For example, the following numbered list

  1. Tasty fruit includes:
    Bananas
    Mangos
  2. Some yummy veges are:
    Carrots
    Peas

was created by following these steps:

  1. Click the Ordered list button (Numbered list button).
  2. Type:  Tasty fruit includes:
  3. Press [Shift-Enter].
  4. Type:  Bananas
  5. Press [Shift-Enter].
  6. Type:  Mangos
  7. Press [Enter] to start the next number.
  8. Type:  Some yummy veges are:
  9. Press [Shift-Enter].
  10. Type:  Carrots
  11. Press [Shift-Enter].
  12. Type:  Peas
  13. Press [Enter] twice to end the list.

Injecting a Note without Restarting Numbering

Using [Shift-Enter] in a list can be particularly helpful if a list needs to be interrupted by a note that should appear as if it is not part of the list, but the numbering should not restart after the injected note.  Consider the following example:

  1. Preheat the oven to 350 degrees.
  2. Combine all ingredients with an electric mixer for 2 minutes.

    Baking Instructions

  3. Pour the batter into two 9 inch cake pans.
  4. Bake for 45 minutes or until a toothpick inserted into the center of the cake comes out dry.

Changing the Numbering Style

Several numbering styles are available through Kupu including upper case and lower case Roman numerals, upper case and lower case letters, and numbers.  To change the numbering style in use, click on one of the lines in the numbered list, and then click on the number style drop-down box (Number style drop-down box) to select the desired style.  If the numbered list contains multiple levels (see the Using Multiple Levels in a Numbered List section), only the level selected is affected by the change.

Using Multiple Levels in a Numbered List

Numbered lists can have multiple levels such as in the following example.

  1. Fruit
    1. Citrus
      1. Lemon
      2. Orange
    2. Sweet
      1. Banana
      2. Mango
  2. Vegetables
    1. Fibrous
      1. Broccoli
      2. Peas
    2. Starchy
      1. Corn
      2. Potatoes

Let's examine some of the steps that were used to create this sample list.

  1. Click the Ordered list button (Numbered list button).
  2. Click the number style drop-down box (Number style drop-down box) and select upper case Roman numerals.
  3. Type:  Fruit
  4. Press [Enter] to start the next number (II).
  5. Press the Increase quote level button (Increase quote level button) ONCE.

    Notes:
    - If you are using Internet Explorer, you must click on the text you are typing after clicking the Increase quote level button.  If you do not, each time you press the space bar, Kupu will respond as if you pressed the Increase quote level button.  This bug has been reported to the Plone developers.
    - Pressing the Increase quote button more than once will produce the visual effect of a larger indentation, but under the covers, multiple levels will be created, which can cause considerable problems when trying to update the list.

  6. The new level will begin with the number 1, but the example shows upper case letters, so click the number style drop-down box (Number style drop-down box) and select upper case letters.
  7. Type: Citris
  8. Press [Enter] to start the next number (B).
  9. Press the Increase quote level button (Increase quote level button) ONCE.
  10. The new level will begin with the number 1, which is what we want, so there is no need to change the style.
  11. Type: Lemon
  12. Press [Enter] to start the next number (2).
  13. Type: Orange
  14. Press [Enter] to start the next number (3), but now we need to return to the second level, so click the Decrease quote level button (Decrease quote level button).  The number moves one level to the left and is replaced with the letter B.

    Notes:
    - Instead of pressing the Decrease quote level button, you can simply press [Enter].
    - If you are using Internet Explorer, and you chose to use the Decrease quote level button instead of pressing [Enter], you must click on the text you are typing before you continue.  If you do not, each time you press the space bar, Kupu will respond as if you pressed the Decrease quote level button.  This bug has been reported to the Plone developers.
  15. The remainder of the list is built accordingly.

Bullet Lists

Creating a New Bulleted List

To create a bulleted list, place the cursor on a blank line on the page and click the Unordered list button (Unordered list button).  (If you click the Unordered list button on a line that already contains text, a bullet will be placed in front of that line.)  After typing some text for the first bullet, press [Enter] to begin the next.  Once the list is complete, press [Enter] without typing any text to turn off bulleting.  (If the list is the final thing on a page, there is no need to press [Enter] twice to turn off numbering.)  As an example, the list below

  • Chocolate
  • Ice cream
  • Raspberry

was created by following these steps:

  1. Click the Unordered list button (Unordered list button).
  2. Type:  Chocolate
  3. Press [Enter] to start the next bullet.
  4. Type:  Ice cream
  5. Press [Enter] to start the next bullet
  6. Type:  Raspberry
  7. Press [Enter] to start the next bullet.
  8. Since there are no more items for the list, press press [Enter] again to remove the last bullet and turn off bulleting.

Adding Items to a Bulleted List

If you wish to add items to the list, place the cursor in the list where you wish to add the item, press [Enter] to create the new bullet, and then type the new text.  For example, to add "Coconut" to the list above between "Chocolate" and "Ice Cream," place the cursor at the end of the word "Chocolate," press [Enter] to create a new item, and type "Coconut."  The resulting list will look as follows.

  • Chocolate
  • Coconut
  • Ice cream
  • Raspberry

Deleting Items from a Bulleted List

To delete an item from the list, delete the text associated with the bullet and then press [Backspace] to delete the number itself.  For example, to remove "Coconut" from the list above, first, delete the word "Coconut."  At that point, the cursor will be positioned just after the bullet that now has no associated text.  Next, press the [Backspace] key, which deletes the bullet and results in the following list.

  • Chocolate
  • Ice cream
  • Raspberry

Using Multiple "Short Lines" Per Bullet

If you wish to have a bulleted item with multiple short lines, separate the portions of the bulleted point by pressing [Shift-Enter].  For example, the following bulleted list

  • Tasty fruit includes:
    Bananas
    Mangos
  • Some yummy veges are:
    Carrots
    Peas

was created by following these steps:

  1. Click the Unordered list button (Unordered list button).
  2. Type:  Tasty fruit includes:
  3. Press [Shift-Enter].
  4. Type:  Bananas
  5. Press [Shift-Enter].
  6. Type:  Mangos
  7. Press [Enter] to start the next bullet.
  8. Type:  Some yummy veges are:
  9. Press [Shift-Enter].
  10. Type:  Carrots
  11. Press [Shift-Enter].
  12. Type:  Peas
  13. Press [Enter] twice to end the list.

Changing the Bullet Style

Several bullet styles are available through Kupu.  To change the bullet style in use, click on one of the lines in the bulleted list, and then click on the bulelt style drop-down box (Bullet style drop-down box) to select the desired style.  If the bulleted list contains multiple levels (see the Using Multiple Levels in a Bulleted List section), only the level selected is affected by the change.

Using Multiple Levels in a Bulleted List

Bulleted lists can have multiple levels such as in the following example.

  • Fruit
    • Citrus
      • Lemon
      • Orange
    • Sweet
      • Banana
      • Mango
  • Vegetables
    • Fibrous
      • Broccoli
      • Peas
    • Starchy
      • Corn
      • Potatoes

Let's examine some of the steps that were used to create this sample list.  (Note:  The steps below explain how to change the style of bullet, but currently, neither Firefox nor Internet Explore honor this HTML attribute.  Consequently, changing the style of bullet will have on affect on the way the page is rendered.)

  1. Click the Unordered list button (Unordered list button).
  2. Type:  Fruit
  3. Press [Enter] to start the next bullet.
  4. Press the Increase quote level button (Increase quote level button) ONCE.

    Notes:
    - If you are using Internet Explorer, you must click on the text you are typing after clicking the Increase quote level button.  If you do not, each time you press the space bar, Kupu will respond as if you pressed the Increase quote level button.  This bug has been reported to the Plone developers.
    - Pressing the Increase quote button more than once will produce the visual effect of a larger indentation, but under the covers, multiple levels will be created, which can cause considerable problems when trying to update the list.

  5. The new level will begin with a solid, round bullet, but the example shows a solid square, so click the bullet style drop-down box (Bullet style drop-down box) and select the solid square.
  6. Type: Citris
  7. Press [Enter] to start the next bullet.
  8. Press the Increase quote level button (Increase quote level button) ONCE.
  9. The new level will begin with a solid, round bullet, but the example shows a hollow circle, so click the bullet style drop-down box (Bullet style drop-down box) and select the hollow circle.
  10. Type: Lemon
  11. Press [Enter] to start the next bullet.
  12. Type: Orange
  13. Press [Enter] to start the next bullet, but now we need to return to the second level, so click the Decrease quote level button (Decrease quote level button).  The bullet moves one level to the left and is replaced with a solid square.

    Notes:
    - Instead of pressing the Decrease quote level button, you can simply press [Enter].
    - If you are using Internet Explorer, and you chose to use the Decrease quote level button instead of pressing [Enter], you must click on the text you are typing before you continue.  If you do not, each time you press the space bar, Kupu will respond as if you pressed the Decrease quote level button.  This bug has been reported to the Plone developers.
  14. The remainder of the list is built accordingly.

Back to Overview

Document Actions