Versions Compared

Old Version 1

changes.mady.by.user Mercedes Rothwell

Saved on

compared with

New Version 2

changes.mady.by.user Mercedes Rothwell

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

1

First, we need to determine the class name in order to set up the style sheet.

Determining the Class NameImage RemovedDetermining the Class NameImage Added

Determining the Class Name

2

Find the class name by right-clicking on the display output of the section you would like to color. Then click on Inspect to bring up the developer mode.

Display OutputImage RemovedDisplay OutputImage Added

Display Output

3

The line with the class will be already selected.

Selected Class LineImage RemovedSelected Class LineImage Added

Selected Selected Class Line

4

Double-click on the line and copy the class name. 

Warning

Important Note

Do not copy the data cell, only the name of the data cell.

Copy the Class NameImage RemovedCopy the Class NameImage Added

Copy the Class Name

5

Navigate to the Style Sheet Domain. Administration > List Domains > Style Sheets #480.

Style Sheet DomainImage RemovedStyle Sheet DomainImage Added

Style Sheet Domain

6

Click the New Style Sheets. button.

New Style SheetImage RemovedNew Style SheetImage Added

New Style Sheet

7

There are 3 Sections on the Style Sheet Domain:

    1. Name

    2. Style Sheet

    3. CSS Selector  

Style Domain SectorsImage RemovedStyle Domain SectorsImage Added

Style Domain Sectors

8

Enter the name you would like to use for the Style Sheet in the Name field. This can be any unique name for the style sheet. 

Style Sheet NameImage RemovedStyle Sheet NameImage Added

Style Sheet Name

9

Enter the color you would like to use in the Style Sheet field. There are over 140 general names that can be used as a color. A simple style you can use is "Color: Red".

Note

You can also use various other methods to color. This method is the simplest. See # 17 for a tip.

Color NamesImage RemovedColor NamesImage Added

Color Names

10

Enter the class name into the CSS Selector. To select elements with a specific class, write a period (.) character, followed by the name of the class. Example: .attribute12345

Class NameImage RemovedClass NameImage Added

Class Name

11

Click Save.

Save ButtonImage RemovedSave ButtonImage Added

Save Button

12

Verify your new style sheet is saved.

Verify SheetImage RemovedVerify SheetImage Added

Verify Sheet

13

Clear the Cache by navigating to Connect Administration> List Domains> Tools> Cache Management> Clear Configure Cache.

Clear CacheImage RemovedClear CacheImage Added

Clear Cache

14

Refresh the page (or use F5). This clears out the residual information.

Refresh PageImage RemovedRefresh PageImage Added

Refresh Page

15

Verify your color has been changed.

Verify Color ChangeImage RemovedVerify Color ChangeImage Added

Verify Color Change

16

Inspect the element again to select a color from the color pallet tool in chrome. Since the element style is now a custom CSS. Click on the color.

inspect Element to Select ColorImage Removedinspect Element to Select ColorImage Added

inspect Inspect Element to Select Color

17

Use the color tool(s) to change the color(s).  

Color Change ToolImage RemovedColor Change ToolImage Added

Color Change Tool

18

To set a new color, copy the HEX and modify the Style Sheet you just created. In the Style Sheet section, the HEX can be used instead of the color name. Example Color: #82eee4  

Set New ColorsImage RemovedSet New ColorsImage Added

Set New Colors