Versions Compared

Version Old Version 15 New Version Current
Changes made by

Janice Orcutt

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.

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

Image Removed

Anchor

List

Menu

List

Menu
In this article we will

give you

provide step

-

by

-

step instructions

on the following

about:

Summary of Steps
AnchorStyleEditorStyleEditor

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

Image Added

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

page 4.pngImage Added
title
Tip

Tip!

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

Anchor
Style-Editor
Style-Editor
Editing with the Style Editor

Tip

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) .

Note

NOTE!

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 ColumnImage Removed
Column
width80%

    1. Select Advanced

tools

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

    2. Select the Style Editor

      style1.pngImage Added
Expand
titleClick to continue Step-by-Step instrucitons...

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

Section 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 you are modifying

    select1.mp4

Back to

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

Menu

Anchor
Background-Colors
Background-Colors
Changing/Adding Background Colors

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

the page element:
Section ColumnImage Removed
Column
width80%

that element.

  1. To change the 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. (

the

    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

      color1.pngImage Added
Expand
titleClick to continue Step-by-Step instructions...

  1. Repeat this process for any items you want to add a background color

to ColumnImage Removed

  1. . For example, you can add a background color to the heading of the content block:


Section


Column
width70%

    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

item

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

.


    2. Select a new color from the

Basic

    1. Basic Colors or open the Color

picker Image Removed

    1. Picker and select a color you want.

      color2.pngImage Added

  2. In this example using the page pictured 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.



  1. page 2.pngImage Added

Tip

Tip!

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

Back to

ListTextColor

Menu

Anchor

TextColor

Text-Colors
Text-Colors
Changing Text Colors

As you can see in the image above

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.

  1. To change the color of text using the Style

editorsection

  1. Editor, first select the text you will be changing:



ColumnImage Removed
Column
width80%

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

in this case

    1. )

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

editor

    1. Editor

    2. Highlight the text you want to change

      text1.pngImage Added
Expand
titleClick to continue Step-by-Step instructions...

  1. Then determine your color choice in the Style

editor:
Section ColumnImage Removed
Column
width80%
Select the “Text Color”

  1. Editor:

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

the Back to List

    1. second icon)

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

.
Tip
titleTip!

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


    1. text2.pngImage Added

Back to Menu

Anchor
Borders
Borders
Adding Borders

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

  1. To add a border

in

  1. using the Style Editor:

Section ColumnImage Removed
Column
width70%

    1. Place your cursor in the content block

.

    1. 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

.


    2. Scroll down and

open

    1. open the

“Border

    1. Border and

Background” panel in the Style Editor (if it is not open) Section ColumnImage Removed
column

    1. Background panel

      borders1.pngImage Added

Expand
titleClick to continue Step-by-Step instrucitons...

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



width80%

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

,

    1. or

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

Left

    1. (L), or Right (

you can select any combination of these)

    1. R)

      borders2.pngImage Added

  2. Customize your border using the following options:


section


Column

Image Removed

Column
width80%

    1. Determine the width of the border:

  (

    1. Small (S), Medium (M), or Large (L), or set a specific size using

number of

    1. pixels

    2. Select a Border Style for the line: Dashed, Dotted, Solid

line

    1. Line, or Double Line

    2. Select a

border color

    1. Border Color from the presets

.

    1. (You can change later)

    2. If you want the bordered area to have rounded corners, select a Border

radius

    1. Radius: Small (S), Medium (M), or Large (L), or set a specific size

using number of

    1. in pixels

      borders3.pngImage Added

  2. Customize the area surrounded by the border:

Section
Column

Image Removed

Column
width80%

    1. Select a background color if you want the area to have a background color (in this example we

will

    1. do not select one)

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

      borders4.pngImage Added

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

Image Removed 
  1. page 3.pngImage Added

Back to

List

Menu

Anchor

Margins

Adjusting

Margins

Adjusting
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.

  1. To make these modifications

:
Section
Column

Image Removed

Column
width80%
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 for the entire block.
Scroll down to the “Spacing and Alignment” panel in the Style Editor
To set the margin (space between item and edges of page)

  1. ,

you can either elect to set them all equally with a preset of Small (S), Medium (M) or Large (L) or set each margin individually by selecting the cross icon.
To set the padding within the area (space between edges of item and content), you can also either select a preset (S,M, L) or set each edge individually
  • You can determine how items are aligned, floating items to the left, center or right.

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

    Image Removed

    Back to List

    AnchorSummarySummary Panel
    borderColor#8A0000
    bgColor#FFDD80
    titleColor#FFC420
    borderWidth1
    titleBGColor#8A0000
    borderStylesolid
    titleSummary of Steps
    Expand
    titleEditing with the Style Editor
    1. First open your page in Edit mode and open the Sidebar.
      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.  
      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.
    Expand
    titleChanging/ Adding Background Color
  • After you have selected your element following the steps above, you can change the color of the background for the page element:
    1. Scroll down and open the Colors panel in the Style Editor.
    2. Select the Background Color item from the bar at the top of the Colors panel.
    3. The current background color of the element will display below the item
    4. Open the Basic Colors panel if it is not open
    5. Select a new color from the Basic Colors, or
    6. 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

    1. 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. Expand
    titleChanging Text Colors
  • To change the color of text:
    1. Place your cursor in the field of the element you want to change (the content block header in this case)
    2. Select the appropriate element from the item list at the top of the Style editor
    3. Highlight the text you want to change
    • Then determine your color choice in

    1. the Style

    editor:
    1. Select the “Text Color” icon from the Colors panel
    2. Select the color from the Basic Color table or Color Picker.
    Expand
    titleAdding Borders
    Adding borders around a content block can draw attention to it. To add a border in the Style

    1. Editor:

      1. Place your cursor in the content block.

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

    –

      1. - make sure it is

    for

      1. the entire block

    .


      2. Scroll down

    and open the “Border and Background” panel in the Style Editor (if it is not open)
  • 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. Top (T), Bottom (B), Left (L) or Right (you can select any combination of these)
    • Customize your border using the following options:
  • Determine the width of the border:  (Small (S), Medium (M), or Large (L), or set a specific size using number of pixels
  • Select a Border Style for the line: Dashed, Dotted, Solid line, or Double
  • Select a border color from the presets. (You can change later)
    • If you want the bordered area

      1. to

    have rounded corners, select a Border radius: Small (S), Medium (M), or Large (L), or set a specific size using number of pixelsCustomize the area surrounded by

      1. the

    border:
    1. Select a background color if you want the area to have a background color (in this example we will not select one)
    2. Select a shadow if you want the bordered area to appear to float on the page
    ExpandtitleAdjusting Margins,

      1. Spacing and Alignment

    To make these modifications:
  • 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 for the entire block.
    • Scroll down to the “Spacing and Alignment”

      1. panel

    in the Style Editor


      2. To set the margin (space between item and edges of page), you can either

    elect to

      1. set them all equally with a preset

    of

      1. (Small

    (S)

      1. , Medium

    (M)

      1. , or Large

    (L

      1. ) or set each margin individually by selecting the cross icon

    .


      2. To set the padding within the area (space between edges of item and the content), you can also

    either

      1. select from a preset (

    S

      1. Small,

    M

      1. Medium,

    Lalltruepage

      1. or Large), or set each edge individually

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

        margins.pngImage Added
    Child pages (Children Display)

    Page Tree
    rootDesignPLUS Tools for MyClasses
    startDepth1

    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.)

    Page Properties
    hiddentrue
    Related issues