EB-WI-0100 "Customize the Visual Style of a Process Library"

Customize the Visual Style of a Process Library

EB-WI-0100
Revision -

Written by: Duane Dier	Reviewed by: Christina Dier

Revision Table for EB-WI-0100 "Customize the Visual Style of a Process Library"

Rev	What Changed
-	First formal release

EB-WI-0100, Rev - "Customize the Visual Style of a Process Library"

Section 1: Customize Global Branding for Your Organization or Project

Step 1.1: Create a new CSS file
Step 1.2: Custom "Fine Print" on Each Title Page
Step 1.3: Logo
Step 1.4: Custom Font
Step 1.5: Customize Colors
Step 1.6: Other special branding ideas

Section 2: Customize Classification Markings

Step 2.1: Header and Footer
Step 2.2: Portion marking for generated text

Section 3: Change the look of built-in templates

Step 3.1: CleanRoom.css
Step 3.2: COMSEC.css
Step 3.3: Distribution[A-E].css
Step 3.4: ESD.css
Step 3.5: FOD.css
Step 3.6: HazOps.css
Step 3.7: NoAI.css
Step 3.8: NonConformances.css
Step 3.9: PowerON.css
Step 3.10: RadioEmission.css
Step 3.11: Roles.css
Step 3.12: Welding.css

Personnel Performing this Process, by Named Role:

Role in this Process	Name of Person	Initials	Contact Information

"Customize the Visual Style of a Process Library" applies to Populated Assets Folder to produce Modified Assets

→

19 named resources are identified to perform this process:

Step 1.3
Your company or project logo, in a format typically found on web pages (e.g. PNG, JPG, GIF, SVG)

Step 1.4
Font file in a typical format (e.g. TTF)

Step 1.5
Color palette from your organization's styling preferences

Step 3.1
assets/CleanRoom.css

Step 3.2
assets/COMSEC.css

Step 3.3
assets/DistributionA.css

Step 3.3
assets/DistributionB.css

Step 3.3
assets/DistributionC.css

Step 3.3
assets/DistributionD.css

Step 3.3
assets/DistributionE.css

Step 3.4
assets/ESD.css

Step 3.5
assets/FOD.css

Step 3.6
assets/HazOps.css

Step 3.7
assets/NoAI.css

Step 3.8
assets/NonConformances.css

Step 3.9
assets/PowerON.css

Step 3.10
assets/RadioEmission.css

Step 3.11
assets/Roles.css

Step 3.12
assets/Welding.css

Log of Non-Conformances during this execution (print and insert more copies of this sheet as needed):

Time	Step	Record	Brief Summary of Observation(s) that Deviated from Documented Expectations

Section 1: Customize Global Branding for Your Organization or Project

Step 1.1: Create a new CSS file

Action to perform	Expected	Result	Done	TPV
	ERROR: NO EXPECTED VALUE PROVIDED		▢	N/A

Step 1.2: Custom "Fine Print" on Each Title Page

...

Step 1.3: Logo

1 named resources are identified to perform this step:

Your company or project logo, in a format typically found on web pages (e.g. PNG, JPG, GIF, SVG)

Action to perform	Expected	Result	Done	TPV
Place your logo image file (PNG, JPG, GIF, SVG, etc.) into the "assets" folder	Image file added in one place		▢	N/A
...	...		▢	N/A

Step 1.4: Custom Font

1 named resources are identified to perform this step:

Font file in a typical format (e.g. TTF)

Action to perform	Expected	Result	Done	TPV
Place your font file (TTF, etc.) into the "assets" folder	Font file added in one place		▢	N/A
Add a "@font-face" declaration block	...		▢	N/A
Add a custom "font-family" declaration in the @font-face block	...		▢	N/A
Add a "src" declaration in the @font-face block	...		▢	N/A
Add a declaration block for "html, body" to apply all parts of a process, or narrow to specific elements according to your organization's styling preferences	...		▢	N/A
Add a "font-family" declaration with the custom value you set in @font-face	...		▢	N/A

Step 1.5: Customize Colors

1 named resources are identified to perform this step:

Color palette from your organization's styling preferences

Step 1.6: Other special branding ideas

Anything you can do with CSS you can implement, either globally by changing stanhope.css, or process-by-process by creating new CSS files and referencing them with "Template" EBML lines.

Some

See the last section of this procedure for changing the built-in templates that are in separate asset CSS files, which can be updated to match your branding.

Section 2: Customize Classification Markings

Step 2.1: Header and Footer

In the default asset pack provided at stanhope.strativusgroup.com, there's a "Secret.css" file to use as an example.

Action to perform	Expected	Result	Done	TPV
Duplicate the Secret.css file in your assets folder	New file exists		▢	N/A
Rename the new file appropriately	Uniquely named CSS file in assets folder		▢	N/A
Change the "before" text for the classification CSS element	Text matches what you want in the header and footer of every page		▢	N/A
Change the "color" of the classification CSS element	Color matches security guidance (or organization branding for proprietary)		▢	N/A
Save the CSS file	File saved		▢	N/A
Add a "Template" reference to this new CSS file in every EBML process for which it should apply	Processed documents look the way you want them to		▢	N/A

If you don't reference the new CSS file in your EBML ("Template | NewFile.css"), the formatting won't be applied!

Example of CSS values and their result in every process

Step 2.2: Portion marking for generated text

Stanhope itself and all included assets from stanhope.strativusgroup.com are Unclassified. Therefore, everything that stanhope generates automatically can be portion marked (U) automatically as well.

It's up to document authors to portion mark their own Section, Step, Context, Action, Warning, etc. lines as they go according to your requirements.

For example, EBML for manually portion marked lines could look like this:

Section | (U) Section Title

Step | (U) Step Name

Warning | (U) Heed this warning!

Action | (U) Thing to do | (U) Expected Outcome | TPV

Section 3: Change the look of built-in templates

Step 3.1: CleanRoom.css

1 named resources are identified to perform this step:

assets/CleanRoom.css

Step 3.2: COMSEC.css

1 named resources are identified to perform this step:

assets/COMSEC.css

Step 3.3: Distribution[A-E].css

5 named resources are identified to perform this step:

assets/DistributionA.css

assets/DistributionB.css

assets/DistributionC.css

assets/DistributionD.css

assets/DistributionE.css

Step 3.4: ESD.css

1 named resources are identified to perform this step:

assets/ESD.css

Step 3.5: FOD.css

1 named resources are identified to perform this step:

assets/FOD.css

Step 3.6: HazOps.css

1 named resources are identified to perform this step:

assets/HazOps.css

Step 3.7: NoAI.css

1 named resources are identified to perform this step:

assets/NoAI.css

Step 3.8: NonConformances.css

1 named resources are identified to perform this step:

assets/NonConformances.css

Step 3.9: PowerON.css

1 named resources are identified to perform this step:

assets/PowerON.css

Step 3.10: RadioEmission.css

1 named resources are identified to perform this step:

assets/RadioEmission.css

Step 3.11: Roles.css

1 named resources are identified to perform this step:

assets/Roles.css

Step 3.12: Welding.css

1 named resources are identified to perform this step:

assets/Welding.css