Versions Compared

Old Version 1

changes.mady.by.user Janice Orcutt

Saved on

compared with

New Version 2

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 Visually Appealing Pages

In some cases, you might want to create a whole different look for a specific page, adding some visually appealing design or color. In this example, we will start with a fairly plain layout such as seen in the image below.

Anchor
List
List

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

Anchor
StyleEditor
StyleEditor

Editing with the Style Editor

Tip
titleNOTE!

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


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

    Section
    Column



    Column
    width70%80%
    1. Select Advanced tools using icon at the top of the Sidebar

    2. Select the Style Editor

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

    Section
    Column



    Column
    width70%80%
    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.

Anchor

Item 1

Background

Item 1Informational Content Section (Columnar Display)
SectionEnter leading information

Background

Changing/ Adding Background Colors

Section

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

Scroll down and open the Colors panel in the Style Editor.

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

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

Open the Basic Colors panel if it is not open

Select a new color from the Basic Colors, or

Open the Color picker and select a color you want.

Repeat this process for any items you want to add background color to. In this example using the page pictured above, we changed the background color of the page heading, the background of the content block, and added a background color to the text in the first content block.



Column

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

Back to List

Anchor
Steps
Steps

Step-by-Step

Enter leading information.
Anchor
Switch
Switch

Title of Action

Leading Info.

  1. Step 1 instructions.



  2. Step 2 instructions. 


Back to List

Anchor
Select
Select

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.

  1. Step 1 Instructions

    1. Part A instructions.

    2. Part B instructions.



  2. Step 2 Instructions

    1. Part A instructions

    2. Part B instructions.



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

Back to List

Anchor
Summary
Summary


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