# Branding the Validator Tool

## Accessing the Validator Pages to Edit the Look and Feel

From the **System Config** Menu click on **System Messaging**.

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/wilimage.png)](https://opscom.wiki/uploads/images/gallery/2024-06/wilimage.png)

A page with two tabs will appear. Click on the **Messages** tab to access the list of editable messages.

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/cQMimage.png)](https://opscom.wiki/uploads/images/gallery/2024-06/cQMimage.png)

There are three messages to edit for the Validator Tool.  
  
They are:

The Validator Entry message  
The Validator Manage message  
The Validator Report message  
  
Each of these pages represent the three Validator Tool Pages.

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/MsHimage.png)](https://opscom.wiki/uploads/images/gallery/2024-06/MsHimage.png)

Here's what they look like in the **Message System Editor**.

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/nC3image.png)](https://opscom.wiki/uploads/images/gallery/2024-06/nC3image.png)

To edit the message click on the **Edit** button

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/XGoimage.png)](https://opscom.wiki/uploads/images/gallery/2024-06/XGoimage.png)

The edit page will display.

On this screen you will enter a title for your page as well as an identifier. This identifier must be unique.  
You may also select a language setting for your page.

The page can be edited in the WYSIWYG editor where you can visually design the page.

***NOTE:** The main graphic image used in our example measures **1448 pixels in width and 227 pixels in height**.  
**Best practice** would be to **maintain the same width** but the **height can be your preference**. Upload the preferred image to your **Files Folder** using the **Manage Files** functionality.*

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/96Bimage.png)](https://opscom.wiki/uploads/images/gallery/2024-06/96Bimage.png)

It is also possible to edit the page in straight **HTML**. To do so go to the **Tools** menu and click on **<>Source Code.**

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/Ujyimage.png)](https://opscom.wiki/uploads/images/gallery/2024-06/Ujyimage.png)

A popup will appear with the code presented.

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/tC1image.png)](https://opscom.wiki/uploads/images/gallery/2024-06/tC1image.png)

## Sample Code

<div class="code panel pdl conf-macro output-block" data-hasbody="true" data-macro-id="ab8e2de5-81c4-4175-a414-38799e2804ef" data-macro-name="code" id="bkmrk-validator-entry%C2%A0expa"><div class="codeHeader panelHeader pdl hide-border-bottom">**Validator Entry**<span class="collapse-source expand-control"><span class="expand-control-icon icon"> </span><span class="expand-control-text">Expand source</span></span></div></div>The Resulting Page

[![image.png](https://opscom.wiki/uploads/images/gallery/2024-06/scaled-1680-/ol3image.png)](https://opscom.wiki/uploads/images/gallery/2024-06/ol3image.png)