After creating your Wizard-style Attestation app, the app will need to be styled to match the look and feel of the rest of the website.

Table of Contents

Header Title

1. With the Styles tab selected, click Add Element+.
2. Select Components, then click Save.

3. Click Components.
4. Click Add Element+.

5. Scroll or search to select Header, then click Save.
6. Click Header.

7. Click Add Element+.
8. Select Children, then click Save.

9. Click Children.
10. Click +Create Title*.

11. Click on each item under Children in the left navigation pane to remove the errors.
12. With Title selected, click Add Element+.

13. Scroll or search to select Font, then click Save.
14. Click Font.

15. Click Add Element+.
16. Select Family and Size, then click Save.

17. Type in a font Family name.
18. Type in a font Size in pixels.
19. Click Save.
20. Type in a comment, then click Confirm.

Selections Display

Layout

1. Click Components.
2. Click Add Element+.
3. Scroll or search to select Selection Wizard, then click Save.

4. Click Selection Wizard.
5. Click Add Element+.

6. Select Children, then click Save.
7. Click Children.

8. Click Add Element+.
9. Scroll or search to select Wrapper, then click Save.

10. Click Wrapper.
11. Click Add Element+.

12. Scroll or search to select Display, then click Save.
13. Use the dropdown to select Flex.

14. Click Save.
15. Type in a comment, then click Confirm.

Active Navigator Item

(The display to show what selections can be made.)

1. Click Components | Selection Wizard | Children.
2. Click Add Element+.
3. Select Active Navigator Item, then click Save.

4. Click Active Navigator Item.
5. Click Add Element+.

6. Scroll or search to select Background, Border, Height, Line Height, Padding, and Width, then click Save.
7. Type in a pixel value for Height, Line Height (these will be the same), and Width
8. Click Background.

9. Click Add Element+.
10. Select Color, then click Save.

11. Type in a Color name or hex code.
12. Browse to Border in the navigation pane, then click Add Element+.

13. Select Bottom, then click Save.
14. Click Bottom.

15. Click Add Element+.
16. Select Value, then click Save.

17. Type in a border pixel width, border type and color name or hex code.
18. Browse to Padding in the navigation pane, then click Add Element+.

19. Select Left, then click Save.
20. Type in a pixel value.

21. Click Save.
22. Type in a comment, then click Confirm.

Navigator Item

(The selection that will define the subsequent selection.)

1. Browse to Components | Selection Wizard | Children.
2. Click Add Element+.
3. Scroll or search to select Navigator Item.

4. Click Navigator Item.
5. Click Add Element+.

6. Scroll or search to select Align, Background, Border, Cursor, Display, Height and Width, then click Save.
7. Set Cursor to Pointer, Display to flex, Height to (match the Active Navigator Height) 60px, Width to 100%.

(Select one of the region options so that you can see the effect your styling has. Keep reselecting this as you continue styling.)

8. Click Align.
9. Click Add Element+.

10. Select Items, then click Save.
11. Use the dropdown arrow to select center.

12. Browse to Background in the navigation pane, then click Add Element+.
13. Select Color, then click Save.

14. Type in a color name or hex code (to match the one used in the Active Navigator Item).
15. Browse to Border in the navigation pane, then click Add Element+.

16. Select Value, then click Save.
17. Type in a line width, line style and color name or hex code.

18. Browse to Navigator Item, then click Add Element+. 
19. Scroll or search to select Overrides, then click Save. This override will deal with the indent required for the Navigator Item.

20. Click Overrides.
21. Click Add Row+.

22. Click 1.No Label.
23. Type span:first-of-type into the Selector* field.
24. Click + Create Component Style*.

25. Click Add Element+.
26. Scroll or search to select Margin, then click Save.

27. Click Margin.
28. Click Add Element+.

29. Select Left, then click Save.
30. Type in a value in pixels.

31. Click Save.
32. Type in a comment, then click Confirm.

Spacing

Set some spacing between the navigation items.

Navigator Item

1. Browse to Components | Selection Wizard | Children | Navigator Item, then click Add Element+.
2. Scroll or search to select Margin, then click Save.

3. Click Margin.
4. Click Add Element+.

5. Select Bottom, then click Save.
6. Type in a pixel value.

Navigator

1. Browse back to Components | Selection Wizard | Children, then click Add Element+.
2. Select Navigator, then click Save.

3. Click Navigator.
4. Click Add Element+.

5. Scroll or search to select Margin, then click Save.
6. Click Margin.

7. Click Add Element+.
8. Select Right, then click Save.

9. Type in a pixel value.
10. Click Save.
11. Type in a comment, then click Confirm.

Selection Options

Background

1. Browse to Components | Selection Wizard | Children, then click Add Element+.
2. Scroll or search to select Options, then click Save.

3. Click Options.
4. Click Add Element+.

5. Scroll or search to select Background, then click Save.
6. Click Background.

7. Click Add Element+.
8. Select Color, then click Save.

9. Type in a color name or hex code (to match the color for the navigator items).
10. Browse to Children, then click Add Element+.

Options Buttons

1. Scroll or search to select Option, then click Save.
2. Click Option.

3. Click Add Element+.
4. Scroll or search to select Border, Cursor and Padding, then click Save.

5. Use the dropdown arrow to select a Cursor style, e.g. pointer.
6. Click Border.
7. Click Add Element+.

8. Select Bottom, then click Save.
9. Click Bottom.

10. Click Add Element+.
11. Select Value, then click Save.

12. Type in a pixel value for border width, a border style and color name or hex code.
13. Browse to Padding, then click Add Element+.

14. Select Value, then click Save.
15. Type in a pixel value.

16. Browse to Children, then click Add Element+.
17. Select Content, then click Save.

18. Click Content.
19. Click Add Element+.

20. Scroll or search to select Width, then click Save.
21. Set Width to 100%.

Grid Display

1. Browse to Options, then click Add Element+.
2. Scroll or search to select Column, Display and Grid, then click Save.

3. Use the dropdown to select grid for Display.
4. Click Column.

5. Click Add Element+.
6. Select Gap, then click Save.

7. Type in a pixel value for the gap.
8. Browse to Grid, then click Add Element+.

9. Select Template, then click Save.
10. Click Template.

11. Click Add Element+.
12. Select Columns, then click Save.

13. For 2 equal columns of selection options, type in 1fr 1fr.
14. Click Save.
15. Type in a comment, then click Confirm.

Footnote

1. Browse to Styles, then click Add Element+.
2. Select Theme, then click Save.

3. Click Theme.
4. Click Add Element+.

5. Select Base, then click Save.
6. Click Base.

7. Click Add Element+.
8. Scroll or search to select Text, then click Save.

9. Click Text.
10. Click Add Element+.

11. Select Children, then click Save.
12. Click Children.

13. Click Add Element+.
14. Select Content, then click Save.

15. Click Content.
16. Click Add Element+.

17. Scroll or search to select Font, then click Save.
18. Click Font.

19. Click Add Element+.
20. Scroll or search to select Family and Size, then click Save.

21. Type in a font Family name, and a Size in pixels, then click Save.
22. Type in a comment, then click Confirm.