Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
bgColor#FFF0B3

ID&D KB How-to Guide

Working together to enhance teaching & learning. If you need additional assistance, please reach out to the ID&D team.


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:

Readability of Lists

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. These are set in the Style panel of the list element.

...

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

Expand
titleStep-by-stepStep...
  1. Locate the list you wish to change.

    1. Place your cursor at the beginning of the first item in your list

    2. Open the Style panel in the DesignPLUS Sidebar

    3. Select the type of numbering 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 Alphabetic - e.g., A, B, C

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

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

      numlist.png
  2. Save your page

...

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

Expand
titleStep-by-stepStep...
  1. Locate the list that you want to have nesting

    1. Place your cursor at the start of the item in the list that you want indented

    2. Open the Content panel in the DesignPLUS Sidebar

  2. Click on the Indent icon in the sidebar to move it to the left or right

    nested 1.png

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

    nested 2.png

...

You can make your lists visually interesting by using icons as your bullets.

Expand
titleStep-by-stepStep...
  1. Select your list on the page that you want to modify

  2. Open the Style panel for your list element in the DesignPLUS Sidebar

  3. Select the “none” style for your list

    iconlist1.png
  4. 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.

    blist8.png

  5. In the Sidebar, the Icon tool will be opened in the Edit tab (target), under the Content panel, select an icon category from the pull-down list.

    blist9.png

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

    blist10.png

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

...

Expand
titleStep-by-Step...
  1. Identify the link you want to modify.

    1. Place your cursor in the link text

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

    3. Open the Style panel in the Link Tool

      button1.png

  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

      button2a.png

      button2b.png

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

    button3.png

  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. In the Style panel, select the style for the Hover/Focus Link Style - solid or outline

      hover1.png

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

      hover2.png

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

    hover3.gif


...