Guidance for FHIR IG Creation, published by HL7 International - FHIR Management Group. This guide is not an authorized publication; it is the continuous build for version 0.1.0 built by the FHIR (HL7® FHIR® Standard) CI Build. This version is based on the current content of https://github.com/FHIR/ig-guidance/ and changes regularly. See the Directory of published versions

Changing the IG colors

Changing the IG colors can be done by manipulating the css variables, e.g. by overriding the color definition variables.

This box (styled 'dragon') serves to warn about issues or pitfalls

Color overview

The colors that can be identified are:

1. IG Title and status text color
2. Header container color
3. Footer background color
4. Footer container color
5. Header strip color
6. Menu button hover color
7. Menu button active color
8. Menu button text color
9. Menu item gradient start color
10. Menu item gradient end color
11. Menu item gradient start color (with alpha)
12. Menu item gradient end color (with alpha)
13. Hyperlink text color
14. Hyperlink text hover color
15. Publish box background color
16. Publish box border definition
17. TOC box background color
18. TOC box border definition
19. (STU) Note box background color
20. (STU) Note box border color
21. Header color (sides)
22. Header container color (center)

23. Footer navigation background color
24. Footer highlight font color
25. Footer hyperlinks font color
26. Footer highlight font color
27. Breadcrumb background color
28. Breadcrumb font color
29. Dragon background color
30. Dragon font color

These colors are shown in the image below:

CSS color definitions

To change the colors, simply override (by adding a new CSS) the values of the colors. The example values below change the colors to those illustrated in the picture above.

:root {
    --ig-status-text-color: #ff0000; /* 1. IG Title and status text color */
    --navbar-bg-color: #800080; /* 2. Header container color */
    --footer-bg-color: #808080; /* 3. Footer background color*/
    --footer-container-bg-color: #0000ff; /* 4. Footer container color */
    --stripe-bg-color: #00ff00; /* 5. Header strip color */
    --btn-hover-color: #000080;  /* 6. Menu button hover color */
    --btn-active-color: #006400; /* 7. Menu button active color */
    --btn-text-color: #ff00ff; /* 8. Menu button text color */
    --btn-gradient-start-color: #87ceeb; /* 9. Menu item gradient start color */
    --btn-gradient-end-color: #f0e68c; /* 10. Menu item gradient end  color */
    --btn-gradient-start-color-alpha: #d2b48c; /* 11. Menu item gradient start color (with alpha) */
    --btn-gradient-end-color-alpha: #fa8072; /* 12. Menu item gradient end color (with alpha) */
    --link-color: #2f4f4f; /* 13. Hyperlink text color */
    --link-hover-color: #8b0000; /* 14. Hyperlink text hover color */
    --publish-box-bg-color: #ffff00; /* 15. Publish box background color */
    --publish-box-border: 1px solid #ff4500; /* 16.  Publish box border definition */
    --toc-box-bg-color: #98fb98; /* 17.  TOC box background color */
    --toc-box-border: 1px solid #2e8b57; /* 18. TOC box border definition */
    --stu-note-background-color: #8b4513; /* 19. (STU) Note box background color */
    --stu-note-border-left-color: #ffa0ff; /* 20. (STU) Note box border color */
    --ig-header-color: #fff2ff; /* 21. Header color (sides) */
    --ig-header-container-color: #4b0082; /* 22. Header container color (center) */
    --footer-nav-bg-color: #f5f5f5; /* 23. Footer navigation background color*/
    --footer-text-color: #777777; /* 24. Footer highlight font color */
    --footer-hyperlink-text-color: #800000; /* 25. Footer hyperlinks font color */
    --footer-highlight-text-color: #ffff77; /* 26. Footer highlight font color */
    --breadcrumb-bg-color: #506070  ; /* 27. Breadcrumb background color */
    --breadcrumb-text-color: #302010; /* 28. Breadcrumb font color */
    --dragon-background-color: #ebe7ee; /* 29. Dragon background color */
    --dragon-font-color: #400070; /* 30. Dragon font color */
}

Tabular Representation

The defined style colors are listed below. Numbers beside element correspond to the diagram above. The color swatches correspond to the style of this implementation guide (not the diagram, or list above).

Text elements

Boxes

The style of certain elements are defined by more than just color:

--publish-box-border (16)

--toc-box-border (18)

Side Decoration

Menus

Menu bar

Dropdown

Other elements

For consistency, the styling of the "content" including hierarchy trees, element definitions, and most narrative, don't use color variables: Text is dark grey on a white background. Other content, such as code blocks, have their own defined styles.

The "stats blocks" at the top of definitional resource pages showing canonical URL, name, etc. do not use color variables, but are defined in the following table styles:

• colsd for draft
• colstu for trial use
• colsn for normative
• colsi for informative
• coldp for deprecated
• colse for external