Make beautiful FHIR Implementation Guides on Simplifier.net with Custom HTML & CSS

Custom styled layouts for your FHIR Implementation Guide is now available on Simplifier.net’s Team plans! You can now use your organization’s color scheme and layout to create a seamless look and feel between your IG and your organization’s websites.

This feature includes the option to create your own master HTML template and on top of that use your own layout using Custom Style Sheets (CSS). Below you will find some examples, links to our documentation and examples from other organizations already using the customizable IG design.

Example of Custom CSS for a FHIR Implementation Guide

You start by selecting a style for your IG under the settings and after that you will be able to access the Master template. Note that we have added the Font Awesome to the HTML template in order to be able to render icons in my table further down.

You will also have access to the CSS style sheet where you can add your own styles.

You can style your own tables any way you like. As an example, a HTML table where you explain what the intended audience is for your Implementation Guide.

<table class= "simplifier-table">
    <thead>
        <tr>
            <th data-no-sort>Intention</th>
            <th>Audience</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i class="fa fa-check" />
            <td>Clinicians</td>
            <td>Information specifying who your intended end-users are regarding clinicians or other healthcare workers</td>
        </tr>
        <tr>
            <td><i class="fa fa-check" />
            <td>Business</td>
            <td>Specify what kind of business users can use your IG and how they can best use it. </td>
        </tr>
        <tr>
            <td><i class="fa fa-check" />
            <td>Architect</td>
            <td>Information for solution acthitects explaining how to best use your guide to incorporate it in existing sytems.</td>
        </tr>
        <tr>
            <td><i class="fa fa-check" />
            <td>FHIR</td>
            <td>Information for other FHIR developers, so they can best use your designs and information for their own implementations.</td>
        </tr>
        <tr>
            <td><i class="fa fa-check" />
            <td>Developer</td>
            <td>Provide information from a development perspective, the developer who will be coding or involved in the building of the API or system</td>
        </tr>
        <tr>
            <td><i class="fa fa-check" />
            <td>Other</td>
            <td>Someone looking into the contents of the implementation guide for any other reason, for example as part of their education or a research project. This type of audience is implied and not shown in the table below.</td>
        </tr>
    </tbody>
</table>

Combined with the following Custom Style Sheet (CSS):

.simplifier-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.simplifier-table thead tr {
    background-color: #fcec0e;
    color: #3b3a3a;
    text-align: left;
}
.simplifier-table th,
.simplifier-table td {
    padding: 12px 15px;
}
.simplifier-table tbody tr {
    border-bottom: 1px solid #524d4d;
}

.simplifier-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.simplifier-table tbody tr:last-of-type {
    border-bottom: 2px solid #fcec0e;
}
.simplifier-table tbody tr.active-row {
    font-weight: bold;
    color: #5b5c5c;
    
}

Results in a table with custom styling:

Documentation: How to Use CSS on a FHIR Implementation Guide

In our documentation you can find some more examples of how to use CSS, information on what kind of placeholders we have and an introduction to using Markdown.
In our blog post on How to Build a Dynamic FHIR Implementation Guide you can see how you can create templates for your IG pages which you can now combine with your own styling.

Beautiful examples of Custom Styled Implementation Guides

Some of our Enterprise plan customers have made very beautiful Implementation guides in their own styling. Sciensano from Belgium has used their own color scheme in their Implementation Guide.

This Implemenation Guide from NHS Digital for Digital Medicine shows how you can create seamless integration between your organization’s homepage and your Simplifier IG. Notice the seamless integration when you click on the top left NHS Digital logo. Another beautifully custom styled guide is this one from NHS Wales.

Besides being amazed by how beautiful these guides are you can find the HTML templates and CSS style sheets in those projects listed under “Layouts” in the resource list.

…

Still on an Entry or Professional account? Upgrade your Simplifier.net subscription now to get access to Custom Styling and more exciting features.