Versions Compared

Old Version 2

changes.mady.by.user Janice Orcutt

Saved on

compared with

New Version 19

changes.mady.by.user Janice Orcutt

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
PanelborderColor#8A0000bgColor#FFC420titleColor#FFC420borderWidth1titleBGColor#8A0000borderStylesolidtitleIDD
Panel
bgColor#FFF0B3

ID&D KB How-to

-GuideCreating Visually Appealing Pages

Guide

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

In some cases, you might want to create a whole different look for a specific page, adding some visually appealing design or color.

AnchorListListIn this article we will give you step-by-step instructions on the following:

In this example, we will start with a fairly plain layout such as seen in the image below.

Image Removed

Image Added

With the changes made to background colors, borders and spacing, our page now looks like this!

page 4.pngImage Added
Summary of Steps
AnchorStyleEditorStyleEditorEditing with the Style Editor
Tiptitle
Tip

Tip!

You can click on the images in this article to see them larger and with more detail.

Editing with the Style Editor

  • Changing/ Adding Background Colors
  • Changing Text Colors
  • Adding Borders
  • Adjusting Margins and Alignment

    • To complete the changes described in this page you will be using the Style Editor which is one of the Advanced Tools. Before beginning make sure you have enabled the Style Editor (see KB article Advanced Styling and Design Techniques) .

    Tip

    NOTE!

    When using the Advanced Editing Tools, it is very important to ensure you are editing the correct element!

    Expand
    titleStep-by-Step...

    1. First open your page in Edit mode and open the Sidebar.


    Section ColumnImage Removed
    column


    width80%

      1. Select Advanced

    tools section

      1. Tools using the icon at the top of the Sidebar

      2. Select the Style Editor

        style1.pngImage Added

    2. Place your cursor into the element on your page that you want to edit.



    ColumnImage Removed
    Column
    width80%

      1. At the top of the Style Editor a list of elements in the content area will appear.

      2. Hover your mouse over each element to determine which element you will be editing

      3. Select the element

    .

    Back to List

    Tip
    titleTip!

    You can click on the images in this article to see them larger and with more detail.

    AnchorBackgroundBackground

      1. you are modifying

        select1.mp4

    Changing/Adding Background Colors

    Section

    After you have selected your element following the steps above, you can change the color of the background for that element.

    Expand
    titleStep-by-Step...

    1. To change the

    page element

    1. color of an element on a page, place your cursor on the page where you want the color added, and open the Style Editor:

      1. Scroll down and open the Colors panel

    in the Style Editor.


      2. Select the Background Color

    item

      1. icon from the bar at the top of the Colors panel

    .

      1. (first icon)

      2. The current background color of the element will display below the item

      3. Open the Basic Colors panel if it is not open

      4. Select a new color from the Basic Colors, or

      5. Open the Color

    picker

      1. Picker and select a color you want

    .


      1. color1.pngImage Added

    2. Repeat this process for any items you want to add a background color. For example, you can add a background color to the heading of the content block:

      1. Place your cursor in the heading element of the content block

      2. Select the heading element at the top of the Style Editor

      3. Select the Background Color icon from the bar at the top of the Colors panel

      4. Select a new color from the Basic Colors or open the Color Picker and select a color you want.

        color2.pngImage Added

    3. In this example using the page pictured

    above

    1. previously, we changed the background color of the page heading, the background of the heading for the content block, and added a background color to the text in the first content block.

    column
    1. page 2.pngImage Added

    Image Removed

    Back to List

    AnchorStepsSteps

    Tip
    Column
    width70%
    1. Item A
    2. Item B
    3. Item C

    Tip!

    Be sure to preview your modifications using the “Preview Content” from the settings menu before saving!

    Changing Text Colors

    In some cases, after changing the background color of the content block heading, the text does not contrast well and is difficult to read. You can change the color of text to make sure it is accessible.

    Expand
    titleStep-by-Step
    Enter leading information
    .

    AnchorSwitchSwitch

    Title of Action

    Leading Info
    .
    Step 1 instructions.
    Image Removed
    Step 2 instructions. 
    Image Removed

    Back to List

    AnchorSelectSelect

    Title of action (multi-part)

    After you have opened the new version of the Cidi Design Tools, you can now select it as your editor.

    Step 1 Instructions
    Part A instructions.
    Part B instructions.
    Image Removed
    Step 2 Instructions
    Part A instructions
    Part B instructions.
    Image Removed

    You are able to switch between these settings at any time, simply repeat steps 1 and 2 above.

    Back to List

    AnchorSummarySummary Panel
    borderColor#8A0000
    bgColor#FFDD80
    titleColor#FFC420
    borderWidth1
    titleBGColor#8A0000
    borderStylesolid
    titleSummary of Steps
    Expand
    titleSwitching to the Cidi DesignPLUS Toolset
    1. Step 1 Instructions
    2. Step 2 Instructions
    Expand
    titleSelecting DesignPLUS as Your Editor
    1. Step 1 Instructions
      1. Part A instructions
      2. Part B instructions.
    2. Step 2 Instructions:
      1. Part A Instructions
      2. Part B instructions.

    Child pages (Children Display)
    pageKB Articles Style Guide

    Page Properties
    hiddentrue
    Related issues
    .

    1. To change the color of text using the Style Editor, first select the text you will be changing:

      1. Place your cursor in the field of the element you want to change (in this case the content block header)

      2. Select the appropriate element from the item list at the top of the Style Editor

      3. Highlight the text you want to change

        text1.pngImage Added

    2. Then determine your color choice in the Style Editor:

      1. Select the Text Color icon from the Colors panel (second icon)

      2. Select the color from the Basic Color table or the Color Picker

        text2.pngImage Added

    Adding Borders

    Adding borders around a content block can draw attention to it.

    Expand
    titleStep-by-Step...

    1. To add a border using the Style Editor:

      1. Place your cursor in the content block you want to add a border around

      2. Select the appropriate element from the item list at the top of the Style Editor – make sure it is for the entire block

      3. Scroll down and open the Border and Background panel

        borders1.pngImage Added

    2. Determine how you want a border to appear. Using Border Direction, select where a border will appear:

      1. All sides (for a border around the whole item) or

      2. Any combination of individual borders: Top (T), Bottom (B) Left, (L), or Right (R)

        borders2.pngImage Added

    3. Customize your border using the following options:

      1. Determine the width of the border: Small (S), Medium (M), or Large (L), or set a specific size using pixels

      2. Select a Border Style for the line: Dashed, Dotted, Solid Line, or Double Lin

      3. Select a Border Color from the presets (You can change later)

      4. If you want the bordered area to have rounded corners, select a Border Radius: Small (S), Medium (M), or Large (L), or set a specific size in pixels

        borders3.pngImage Added

    4. Customize the area surrounded by the border:

      1. Select a background color if you want the area to have a background color (in this example we do not select one)

      2. Select a shadow if you want the bordered area to appear to float on the page

        borders4.pngImage Added

    5. In this example, we have added borders and a shadow to change the appearance of the second content block:

      page 3.pngImage Added

    Adjusting Margins, Spacing and Alignment

    Sometimes when you add background colors or borders to a content block, the text runs right up to the edge, making it more difficult to read. You can adjust the margins of an item – in other words the space around the item on the page, the padding – the space inside the edges of the item, and the Alignment of items within the item.

    Expand
    titleStep-by-Step....

    1. To make these modifications, using the Style Editor:

      1. Place your cursor in the content block. Select the appropriate element from the item list at the top of the Style Editor - make sure it is the entire block

      2. Scroll down to the Spacing and Alignment panel

      3. To set the margin (space between item and edges of page), you can either set them all equally with a preset (Small, Medium, or Large) or set each margin individually by selecting the cross icon

      4. To set the padding within the area (space between edges of item and the content), you can also select from a preset (Small, Medium, or Large), or set each edge individually

      5. You can determine how the items are aligned, floating items to the left, center or right.

        margins.pngImage Added

    Child pages (Children Display)
    alltrue
    pageDesignPLUS Tools for MyClasses

    Visit the DesignPLUS Training Series Tutorials for more videos. For more step-by-step guides, visit the DesignPLUS User Guide. (These links will overwrite this page.)