Versions Compared

Old Version 12

changes.mady.by.user Janice Orcutt

Saved on

compared with

New Version 13

changes.mady.by.user Janice Orcutt

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
borderColor#8A0000
bgColor#FFC420
titleColor#FFC420
borderWidth1
titleBGColor#8A0000
borderStylesolid
titleIDD KB How-to-Guide

Creating Lists and Links with DesignPLUS

Anchor
List
List

You have the ability to customize the look of the lists and links that are in a content block. Whether your lists are ordered (numbered) lists or unordered (bulleted), you have the opportunity to manage how these lists are displayed. Your links to external and internal resources can also be styled in various ways using buttons. This article provides guidance on features that allow you to make the following modifications:

Displaying Existing Lists

If you have existing pages that have lists, you may want to modify them using the DesignPLUS tools. These tools help you reorder the items in a list and change the indentation or nesting of the items in the list. To make modifications to your lists or links, you will need to make sure the DesignPLUS Sidebar is open.

Place your cursor in one of the list items in your content block; A new element will appear in the Edit tab (target) of the Sidebar based on the type of list you have (Unordered vs Ordered); and your list will appear under the content panel.



Back to List 

Anchor
Change Order
Change Order

Changing the Order of Items in a List

You can change the order of the items in the list by:

Section
Column

Column
width70%
    1. Using your mouse, drag the item you wish to move by selecting the "six dot" icon in front of it

    2. Move the item to the place in the list you want it

    3. The list will be rearranged on your page

Back to List  

Anchor
Bullets
Bullets

Changing Bullet Styles

You have several options to create interesting, bulleted lists. The simplest method is to use one of the three standard bullet shapes.

Section
Column

Column
width70%
    1. Place your cursor at the beginning of the first item in your list on your page

    2. Open the Style panel in the DesignPLUS Sidebar

    3. Select the type of bullet style you want to use: 
      • Solid circle bullet

      • Open circle bullet

      • Square bullet



Tip
titleTip!

If you want nested items to have a different bullet style, first change their indented position, then select them and change the bullet style.

Back to List  

Anchor
Numbering
Numbering

Changing Numbering Styles

You have several options for the style of numbers you use on your lists. The DesignPLUS tool provides six basic styles to choose from.

Section
Column

Column
width70%
    1. Place your cursor at the beginning of the first item in your list on your page

    2. Open the Style panel in the DesignPLUS Sidebar

    3. Select the type of bullet style you want to use: 
      • Decimal (Arabic Number) - e.g., 1., 2., 3.

      • Decimal with Leading Zero (Arabic Number) - e.g., 01., 02., 03.

      • Lowercase Alphabetic - e.g., a., b., c.

      • Uppercase Alpha - e.g., A., B., C.

      • Lowercase Roman Numeral - e.g., i., iv., xi.

      • Uppercase Roman Numeral - e.g., I., IV., XI.

Back to List  

Anchor
Nest
Nest

Changing the Nesting / Indenting of Items in a List

  1. If your list has items that are sub-divided into sections, using nesting allows you to visually identify those relationships.

    Section
    Column





    Column
    width70%
    1. Place your cursor at the start of the item on your page that needs to be indented

    2. Click on the indent icon in the Sidebar to move it to the left or right

    3. The list on the page will reflect the shift in position

  2. You may have a list that has items that have longer statements and the way the information wraps makes it difficult to read. You have two options that will help improve the readability of your list: adding spaces between the list items, and using hanging indents to make the items more visible.



Back to List  

Anchor
Icons
Icons

Using Icons for Bullets

  1. You can also use icons as bullets. Select the "none" style of list in the Style panel.



  2. Place the cursor at the beginning of the first list item and search for the Icon element in the "Add New Elements" tab in the Sidebar, and select it.



  3. The Icon tool will be opened in the Edit tab (target), select an icon category from the pull-down list.



  4. Select an icon you are interested in using. The icon will be placed in front of the text for the listed item.



  5. Repeat the process for other items in the list.

Back to List   

You can change the display of the links you have within a page by adding an icon in front of your link.

  1.  Identify the link you want to modify.

    Section
    Column



    Column
    width70%
    1. Place your cursor in front of the link text on the page

    2. The sidebar will open to the Link Tool in the Edit tab (target)

    3. Click on the Icon Picker button

  2. The icon picker will appear as a pop-up

    Section
    Column



    Column
    width70%

    1. Select the category or search for the type of icon you want

    2. Select the icon

  3. Repeat the selection for each link, moving your cursor to the link you want the icon located.

  4. The icon will appear on your page in front to the link text 

Back to List  

You can use buttons to display the links you have within a page.

  1.  Identify the link you want to modify.

    Section
    Column



    Column
    1. Place your cursor anywhere in the link text

    2. The sidebar will open to the Link Tool in the Edit tab (target)

    3. Open the Style panel 

  2. Next decide what the button "base" style will be: Solid or Outline

    Section
    Column



    Column
    width70%
    1. Click on the style - solid or outline

    2. Select the color from the options in the pop-up

  3. The selection will be displayed on your page and in the preview panel below the style panel.



  4. You have the option of having the button change when a mouse hovers over the button. This can be a change of solid color, or a change from solid to outline/ outline to solid.

    Section
    Column



    Column
    1. Click on the style - solid or outline

    2. Select the color from the options in the pop-up

  5. When a user hovers the button, they will see the change.



Back to List  

Anchor
Summary
Summary


Panel
borderColor#8A0000
bgColor#FFDD80
titleColor#FFC420
borderWidth1
titleBGColor#8A0000
borderStylesolid
titleSummary of Steps
Expand
titleChanging the Order of Items in a List
  1.  You can change the order of the items in the list by:
    1. Using your mouse, drag the item you wish to move by selecting the "six dot" icon in front of it
    2. Move the item to the place in the list you want it
    3. The list will be rearranged on your page
Expand
titleChanging Bullet Styles
  1. You have several options to create interesting, bulleted lists. The simplest method is to use one of the three standard bullet shapes.
    1. Place your cursor at the beginning of the first item in your list on your page
    2. Open the Style panel in the DesignPLUS Sidebar
    3. Select the type of bullet style you want to use: 
      • Solid circle bullet
      • Open circle bullet
      • Square bullet
Expand
titleChanging Numbering Styles
  1. You have several options for the style of numbers you use on your lists. The DesignPLUS tool provides six basic styles to choose from.
    1. Place your cursor at the beginning of the first item in your list on your page
    2. Open the Style panel in the DesignPLUS Sidebar
    3. Select the type of bullet style you want to use: 
      • Decimal (Arabic Number) - e.g., 1., 2., 3.
      • Decimal with Leading Zero (Arabic Number) - e.g., 01., 02., 03.
      • Lowercase Alphabetic - e.g., a., b., c.
      • Uppercase Alpha - e.g., A., B., C.
      • Lowercase Roman Numeral - e.g., i., iv., xi.
      • Uppercase Roman Numeral - e.g., I., IV., XI.
Expand
titleChanging the Nesting/Indenting of Items in a List
  1. If your list has items that are sub-divided into sections, using nesting allows you to visually identify those relationships.
    1. Place your cursor at the start of the item on your page that needs to be indented
    2. Click on the indent icon in the Sidebar to move it to the left or right
    3. The list on the page will reflect the shift in position
  2. You may have a list that has items that have longer statements and the way the information wraps makes it difficult to read. You have two options that will help improve the readability of your list: adding spaces between the list items, and using hanging indents to make the items more visible.
Expand
titleUsing Icons for Bullets
  1. You can also use icons as bullets. Select the "none" style of list in the Style panel.
  2. Place the cursor at the beginning of the first list item and search for the Icon element in the "Add New Elements" tab in the Sidebar, and select it.
  3. The Icon tool will be opened in the Edit tab (target), select an icon category from the pull-down list.
  4. Select an icon you are interested in using. The icon will be placed in front of the text for the listed item.

  5. Repeat the process for other items in the list.

Expand
titleAdding Icons to Links
  1.  Identify the link you want to modify.
    1. Place your cursor in front of the link text on the page
    2. The sidebar will open to the Link Tool in the Edit tab (target)
    3. Click on the Icon Picker button
  2. The icon picker will appear as a pop-up

    1. Select the category or search for the type of icon you want

    2. Select the icon

  3. Repeat the selection for each link, moving your cursor to the link you want the icon located.
  4. The icon will appear on your page in front to the link text 
Expand
titleUsing Buttons for Links
  1. Identify the link you want to modify.
    1. Place your cursor anywhere in the link text
    2. The sidebar will open to the Link Tool in the Edit tab (target)
    3. Open the Style panel 
  2. Next decide what the button "base" style will be: Solid or Outline
    1. Click on the style - solid or outline
    2. Select the color from the options in the pop-up
  3. The selection will be displayed on your page and in the preview panel below the style panel.
  4. You have the option of having the button change when a mouse hovers over the button. This can be a change of solid color, or a change from solid to outline/ outline to solid.
    1. Click on the style - solid or outline
    2. Select the color from the options in the pop-up
  5. When a user hovers the button, they will see the change.


Child pages (Children Display)
pageKB Articles Style Guide

Page Properties
hiddentrue
Related issues