Page Comparison

PanelborderColor#8A0000titleIDD

Panel

bgColor

#FFC420titleColor#FFC420borderWidth1titleBGColor#8A0000borderStylesolid

#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

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

Image Added

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

Image 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, Spacing 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

title	Step-by-Step...

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

Section Column

Image Removed
Columnwidth80%

1. Select Advanced

tools Column

Image Removed
Column

width	80%

1. Tools using the icon at the top of the Sidebar
2. Select the Style Editor
  Image Added
Place your cursor into the element on your page that you want to edit.

Section

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

title	Tip!

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

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

the page

that element

:

.

section

Expand

Column

Image Removed
Column

width	80%

title	Step-by-Step...

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

.

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

to Column

Image Removed

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

Section

Column

width	70%

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

1. Picker and select a color you want.
  
  Image Added
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.

Image Removed AnchorTextColorTextColor

Image Added

Back to List

Tip

Tip!

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

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.

Expand

title	Step-by-Step...

To change the color of text using the Style

editor:
Section Column

Image Removed
Column

width	80%

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

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
  Image Added
Then determine your color choice in the Style Editor:
1. Select the

“Text Color”

1. Text Color icon from the Colors panel (

the

1. second icon)
2. Select the color from the Basic Color table or the Color Picker

.

Back to List

AnchorBordersBorders

Tip

title	Tip!

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

1. Image Added

Adding Borders

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

Expand

title	Step-by-Step...

To add a border

in

using the Style Editor:

Section Column

Image Removed
Columnwidth

80%

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 the

“Border

1. Border and

Background” panel in the Style Editor
Select the Border Direction for where you want borders to appear– All

1. Background panel
  
  Image Added
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)

,

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

Left

1. (L), or Right

Select a preset border width (

1. (R)
  Image Added
Customize your border using the following options:
1. Determine the width of the border: Small (S), Medium (M), or Large (L), or set

it by number of

1. a specific size using pixels

Set

1. Select a Border Style

– Solid line, dotted or dashed

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

border color

1. Border Color from the presets

.

1. (You can change later)

Select a Border radius if

1. If you want

it

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

will

1. do not select one)

Then select

1. Select a shadow if you want the

item

Back to List

AnchorMarginsMargins

1. bordered area to appear to float on the page
  
  Image Added
In this example, we have added borders and a shadow to change the appearance of the second content block:

Image Removed

Image 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.To make these modifications:
Section

Column
Image Removed

Column

width	80%

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

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

title	Changing Text Colors

To change the color of text

To set the margin (space between item and edges of page), 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

AnchorSummarySummary Panel

borderColor	#8A0000
bgColor	#FFDD80
titleColor	#FFC420
borderWidth	1
titleBGColor	#8A0000
borderStyle	solid
title	Summary of Steps

Expand

title	Editing with the Style Editor

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

title	Changing/ Adding Background Color

Expand

title	Step-by-Step....

To make these modifications, using the Style Editor:
1. Place your cursor in the

field of the element you want to change (the

1. content block

header in this case)

Select the appropriate element from the item list at the top of the Style editor

Highlight the text you want to change

Select the “Text Color” icon from the Colors panel

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

Expand

title	Adding Borders

Adding borders around a content block can draw attention to it

1. .

To add a border in the Style Editor:

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 EditorSelect the Border Direction for where you want borders

1. to

appear– All (for a border around

1. the

whole item), Top (T), Bottom (B), Left (L) or Right

Select a preset border width (Small (S), Medium (M), or Large (L), or set it by number of pixels

Set a Border Style – Solid line, dotted or dashed

Select a border color from the presets. (You can change later)

Select a Border radius if you want it to have rounded corners

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

Then select a shadow if you want the item 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,

L

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.
  Image Added

Versions Compared

Old Version 4

New Version 19

Key

ID&D KB How-to

Guide

Tip!

Editing with the Style Editor

NOTE!

Changing/Adding Background Colors

Tip!

Changing Text Colors

Adding Borders

Adjusting Margins, Spacing and Alignment

Related articles