# How To Create a Theme And Link It To a Schema

## Creating a new theme

In this quick guide we will explain how you to create your own theme using your own logo and colours of your choice.

### <svg aria-label="Heading anchor" enable-background="new 0 0 20 20" height="16" role="img" viewbox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"></svg>How to get there?

Navigate to and click on System Administration (1).

With your courser hover over System Administration (2) and navigate to Tools (3), then Configuration (4).

In the new window click on Framework (5).

Navigate to and click on Theme Management (6).

<div data-article-id="1067347" data-workflow="false" id="bkmrk-"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="f5824e50-f190-45d6-bda5-065c59d57e43"><div></div><div>![](https://media.screensteps.com/image_assets/assets/002/323/915/original/e874244a-41b5-45b1-a917-45b8945e8bcd.png)</div><div>![](https://media.screensteps.com/image_assets/assets/002/323/919/original/35d04936-8d49-4b6f-9b9e-2ae99421799e.png)</div><div>![](https://media.screensteps.com/image_assets/assets/002/323/921/original/06f5049a-4152-4d30-90db-115aa97ac999.png)</div></div><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"></div></div></div></div></div>### <svg aria-label="Heading anchor" enable-background="new 0 0 20 20" height="16" role="img" viewbox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"></svg>What to do?

<div data-article-id="1067347" data-workflow="false" id="bkmrk-navigate-and-click-o"><div data-article-id="1067347" data-workflow="false"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"><div>- Navigate and click on the Create (1) button.

</div><div></div></div></div></div></div></div></div>[![image-1616947632718.png](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/scaled-1680-/5iJUQphJUSaHhsdU-image-1616947632718.png)](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/5iJUQphJUSaHhsdU-image-1616947632718.png)

<div data-article-id="1067347" data-workflow="false" id="bkmrk-type-in-the-name-of-"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"><div></div><div>- Type in the Name of your theme (1).
- Insert your Primary Colour (2) for your theme.
- Insert your Secondary Colour (3) for your theme.

</div><div></div></div></div></div></div></div>You can select your primary and secondary colour using the colour pallet below. Click on the Primary Colour (2) or Secondary Colour (3) field to use the colour pallet.

<div data-article-id="1067347" data-workflow="false" id="bkmrk--1"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"><div></div><div>![](https://media.screensteps.com/image_assets/assets/002/323/914/original/2b44ae8f-b885-446f-90a9-63150eb9b61c.png)</div><div></div></div></div></div></div></div><p class="callout info">Your primary and secondary colours must be in Hex format (If you need help to convert your colours to hex, you can navigate to this website [https://htmlcolorcodes.com/](https://htmlcolorcodes.com/) ).</p>

<div data-article-id="1067347" data-workflow="false" id="bkmrk-you-can-now-click-on"><div data-article-id="1067347" data-workflow="false"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"><div></div><div>- You can now click on Save (4) and the window will refresh with new fields.

</div><div></div></div></div></div></div></div></div>[![image-1616947640863.png](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/scaled-1680-/RvrAW6lgqra1vxE8-image-1616947640863.png)](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/RvrAW6lgqra1vxE8-image-1616947640863.png)

<div data-article-id="1067347" data-workflow="false" id="bkmrk-in-the-new-window-na"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"><div></div><div>- In the new window navigate to the Portal Logo (5) field. You can either drag and drop your logo into this field or you can click on the field to browse your computer for a logo.

</div><div></div></div></div></div></div></div><p class="callout info">Your image size should be 440x140 and it should be a .png type image.</p>

<div data-article-id="1067347" data-workflow="false" id="bkmrk-click-on-save-and-ge"><div data-article-id="1067347" data-workflow="false"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"><div></div><div>- Click on Save and Generate (6).

</div><div></div></div></div></div></div></div></div>[![image-1616947649148.png](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/scaled-1680-/jVxuupWWBnTka0wc-image-1616947649148.png)](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/jVxuupWWBnTka0wc-image-1616947649148.png)

<div data-article-id="1067347" data-workflow="false" id="bkmrk--4"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="14b52f5b-8ede-4cf0-9293-2c91d2b474e0"><div data-step-uuid="a7848f21-66f2-4c16-aff8-7e3d1d8b8698"><div></div><div></div></div></div></div></div></div><p class="callout info">To use your theme you have to link it to a schema, follow the steps below to link your theme.</p>

## <svg aria-label="Heading anchor" enable-background="new 0 0 20 20" height="16" role="img" viewbox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"></svg>Linking a theme to a schema

When you have created a theme or want to link an existing theme to any one of your schemas. Follow the steps in this quick and easy guide.

### <svg aria-label="Heading anchor" enable-background="new 0 0 20 20" height="16" role="img" viewbox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"></svg>How to get there?

Navigate and click on System Administration (1).

Hover with you curses over System Administration (2) and navigate to Tools (3) then Configuration (4).

On the new window click on Framework (5).

Navigate to and click on Theme Key Management (6).

<div data-article-id="1067347" data-workflow="false" id="bkmrk--5"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="fa6c799f-4861-4dff-9614-3fad2701b9a5"><div data-step-uuid="aa2b014f-0266-4a35-845e-b4a7193de07b"><div></div><div>![](https://media.screensteps.com/image_assets/assets/002/323/931/original/b085b1b0-d5ac-44ff-8bd0-f40f81d18c1b.png)</div><div>![](https://media.screensteps.com/image_assets/assets/002/323/929/original/99d61036-4243-4b9a-95a8-cc01b4111816.png)</div><div>![](https://media.screensteps.com/image_assets/assets/002/323/923/original/6dd9d0bb-3378-4bc9-9adb-35ecea42eaa6.png)</div></div><div data-step-uuid="0b201042-04b6-4f38-99e8-e77557726025"></div></div></div></div></div>### <svg aria-label="Heading anchor" enable-background="new 0 0 20 20" height="16" role="img" viewbox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"></svg>What to do?

<div data-article-id="1067347" data-workflow="false" id="bkmrk-click-on-the-create-"><div data-article-id="1067347" data-workflow="false"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="fa6c799f-4861-4dff-9614-3fad2701b9a5"><div data-step-uuid="0b201042-04b6-4f38-99e8-e77557726025"><div>- Click on the Create button (1).

</div><div></div></div></div></div></div></div></div>[![image-1616947661253.png](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/scaled-1680-/fPkQ8CSlVmADUjqg-image-1616947661253.png)](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/fPkQ8CSlVmADUjqg-image-1616947661253.png)

<div data-article-id="1067347" data-workflow="false" id="bkmrk--7"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="fa6c799f-4861-4dff-9614-3fad2701b9a5"><div data-step-uuid="0b201042-04b6-4f38-99e8-e77557726025"><div></div><div></div></div></div></div></div></div>In the new window select the following options:

<div data-article-id="1067347" data-workflow="false" id="bkmrk-select-from-the-drop"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="fa6c799f-4861-4dff-9614-3fad2701b9a5"><div data-step-uuid="0b201042-04b6-4f38-99e8-e77557726025"><div>- Select from the drop down menu your Theme you have created (2).
- Under the Schema drop down menu, select your Schema that you want your theme to be associated with (3).
- In the Key (4) field you can enter your own key e.g. THEME00001.
- Or you can click on the Refresh (5) icon to automatically generate a key.
- Click on the tick box (6) if you want the user to be navigated directly to the log in screen. Otherwise the user will be directed to the Learning Store page.
- Then click on Save (7).

</div><div></div></div></div></div></div></div><p class="callout info">Note: The key must be 10 characters long and only alpha numeric characters are allowed.</p>

<div data-article-id="1067347" data-workflow="false" id="bkmrk--8"><div data-article-id="1067347" data-workflow="false"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="fa6c799f-4861-4dff-9614-3fad2701b9a5"><div data-step-uuid="0b201042-04b6-4f38-99e8-e77557726025"><div></div><div></div></div></div></div></div></div></div>[![image-1616947669638.png](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/scaled-1680-/wmQAFDerNyE3oqcL-image-1616947669638.png)](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/wmQAFDerNyE3oqcL-image-1616947669638.png)

<div data-article-id="1067347" data-workflow="false" id="bkmrk--10"><div data-article-id="1067347" data-workflow="false"><div data-role="steps-container"><div data-step-uuid="fa6c799f-4861-4dff-9614-3fad2701b9a5"><div data-step-uuid="0b201042-04b6-4f38-99e8-e77557726025"><div></div></div><div data-step-uuid="943c12e8-9490-4c0f-81a8-a797e34fbacd"></div></div></div></div></div>### <svg aria-label="Heading anchor" enable-background="new 0 0 20 20" height="16" role="img" viewbox="0 0 20 20" width="16" xmlns="http://www.w3.org/2000/svg"></svg>How to use your new theme

<p class="callout info">Use your URL for the Signify portal and add the key created in step 4 above after "/app/" (8).</p>

[![image-1616947676760.png](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/scaled-1680-/AarrA5vraDFMklnG-image-1616947676760.png)](https://signature.signifyhr.co.za/uploads/images/gallery/2021-03/AarrA5vraDFMklnG-image-1616947676760.png)