How to Customise Your Event Description with HTML

BEFORE YOU START

You'll need a plain text editor — one that shows the code as-is, with no extra formatting.

Windows: use Notepad (search for it in the Start menu)
Mac: use TextEdit, but first go to Format → Make Plain Text
Any device: a free browser tool like notepad.online works well

⚠️ Do not use Microsoft Word or Google Docs. They add hidden formatting that will break the code.

WHAT'S IN THE TEMPLATE

The template is made up of the following sections. Some are required; others are optional and can be deleted if they don't apply to your event.

Required sections:

Intro Banner — a bold headline at the top of your description
Course / Event Information — distance, terrain, and route details
Venue Facilities — parking, toilets, bag storage, catering
Important Information — rules, age limits, registration times, refund policy

Optional sections (delete if not needed):

Charity Callout — to highlight a cause or charity you're supporting
Prizes — medals, trophies, spot prizes, and category winners
Special Feature Highlight — a bold box for something standout (e.g. a kids' fun run)
Permit / Footer — permit number or affiliation notice at the bottom

STEP 1 — CHOOSE YOUR COLOURS

The template uses three colour codes. You'll swap all of them using Find & Replace.

The three colours in the template are:

#d32f2f — your main/primary colour (used in banners and borders)
#b71c1c — your darker accent colour (used in headings — usually a slightly darker shade of your main colour)
#fbe9e7 — your pale tint colour (used in light background boxes — usually a very pale version of your main colour)

How to pick matching colours:
Go to htmlcolorcodes.com/color-picker, choose your main colour, and copy the hex code (e.g. #2e5da8). Then drag the brightness slider slightly darker for the accent, and toward white for the pale tint.

How to do Find & Replace:

Open the template file in your text editor
Press Ctrl+H (Windows) or Cmd+H (Mac) to open Find & Replace
In "Find", type: #d32f2f
In "Replace with", type your new main colour (e.g. #1a6b3c)
Click Replace All
Repeat the same process for #b71c1c and #fbe9e7

STEP 2 — REPLACE THE TEXT

Every piece of text you need to change is marked with ✏️ in the template.

Use Find (Ctrl+F on Windows, Cmd+F on Mac) and search for ✏️ to jump straight to the next item that needs updating. Work from top to bottom until every ✏️ marker has been replaced.

The golden rule: only change text between the tags
HTML uses pairs of tags — an opening tag like <p> and a closing tag like </p>. Only change the text between them, never the tags or the style= parts.

Example (the part to change is in the middle):
<p style="color:#444444; font-size:16px; margin:12px">YOUR TEXT GOES HERE</p>

Making text bold
Wrap words in <strong> tags to make them bold:
A <strong>10-mile trail race</strong> through beautiful woodland.

Adding or removing bullet points
Each bullet point is a single <li> line. Copy a line to add more, or delete a line to remove one:

<ul>
<li style="margin-bottom:8px">Free parking on site</li>
<li style="margin-bottom:8px">Toilets in the main hall</li>
</ul>

STEP 3 — REMOVE OPTIONAL SECTIONS

Optional sections are marked in the template with a comment starting:
<!-- 🗑️ OPTIONAL

To remove one, delete everything from that comment line down to the end of the block — the closing </div> tag that belongs to it.

⚠️ Important: every section begins with <div and ends with </div>. Make sure you delete the whole block, not just part of it. If something goes wrong, undo with Ctrl+Z (Windows) or Cmd+Z (Mac) and try again.

STEP 4 — SPECIAL CHARACTERS

A small number of characters can cause display problems if typed directly into HTML. Use these codes instead:

& (ampersand) → &
' (apostrophe) → ’
" (opening quote) → “
" (closing quote) → ”
— (em dash) → —

💡 Tip: if you're copying text from Word or Google Docs, these are often handled automatically. If a character looks wrong after pasting, check this list.

STEP 5 — PASTE INTO YOUR EVENT PAGE

In your text editor, press Ctrl+A (Windows) or Cmd+A (Mac) to select all the code, then Ctrl+C / Cmd+C to copy it.
In your event platform's description editor, look for a button labelled HTML, </>, or Source. Click it to switch to code view.
Clear anything already in that box, paste with Ctrl+V / Cmd+V, and save. Switch back to the normal editor view to see your formatted description.

THE TEMPLATE CODE

Copy everything in the box below and paste it into a plain text editor (see Step 5 for how to then add it to your event page). All the parts you need to change are marked with ✏️.

--START OF CODE---

<div style="background-color:#d32f2f; border-radius:8px; margin-bottom:28px; padding:28px 32px; text-align:center">
<p style="color:#ffffff; font-size:18px; line-height:1.6; margin:0">
✏️ Write a short, punchy 1-2 sentence intro to your event here. Mention the key highlights: the route, the atmosphere, any unique features.
</p>
</div>

<div style="border-left:4px solid #d32f2f; margin-bottom:32px; padding:0 0 0 20px">
<h2 style="color:#b71c1c; font-size:22px; font-weight:bold; letter-spacing:1px; margin:10px; text-transform:uppercase">
✏️ Section heading (e.g. Course Information)
</h2>
<p style="color:#444444; font-size:16px; margin:12px">
✏️ Describe the event distance, terrain, and setting. Use <strong>bold text</strong> around key facts like distance and location name.
</p>
<p style="color:#444444; font-size:16px; margin:0">
✏️ Add any other course details, e.g. markers, water stations, cut-off points.
</p>
</div>

<div style="background-color:#fbe9e7; border-radius:8px; margin-bottom:32px; padding:22px 28px; text-align:center">
<p style="color:#d32f2f; font-size:20px; font-weight:bold; letter-spacing:1px; margin:4px; text-transform:uppercase">
✏️ Callout heading (e.g. Supporting Local Charity)
</p>
<p style="color:#333333; font-size:17px; margin:0">
✏️ One sentence about the cause or charity you are supporting.
</p>
</div>

<div style="border-left:4px solid #d32f2f; margin-bottom:32px; padding:0 0 0 20px">
<h2 style="color:#b71c1c; font-size:22px; font-weight:bold; letter-spacing:1px; margin:14px; text-transform:uppercase">
Prizes
</h2>
<p style="color:#444444; font-size:16px; margin:12px">
<strong>✏️ Prize type (e.g. Medal):</strong> ✏️ Description of the prize.
</p>
<p style="color:#444444; font-size:16px; margin:12px">
<strong>✏️ Prize type (e.g. Spot prizes):</strong> ✏️ Description of the prize.
</p>
<p style="color:#444444; font-size:16px; margin:10px">
<strong>✏️ Prize type (e.g. Trophies & cash prizes)</strong> will be awarded in the following categories:
</p>
<ul style="color:#444444; font-size:15px; margin:0; padding:0 0 0 20px">
<li style="margin-bottom:4px">✏️ Category 1 (e.g. 1st to 3rd Male and Female)</li>
<li style="margin-bottom:4px">✏️ Category 2 (e.g. 1st Male and Female V40, V50, V60)</li>
</ul>
</div>

<div style="border-left:4px solid #d32f2f; margin-bottom:32px; padding:0 0 0 20px">
<h2 style="color:#b71c1c; font-size:22px; font-weight:bold; letter-spacing:1px; margin:14px; text-transform:uppercase">
Venue Facilities
</h2>
<ul style="color:#444444; font-size:15px; margin:0; padding:0 0 0 20px">
<li style="margin-bottom:8px">✏️ Parking details (e.g. Free parking on the sports field at race HQ.)</li>
<li style="margin-bottom:8px">✏️ Toilet facilities (e.g. Portable loos and toilets in the Pavilion.)</li>
<li style="margin-bottom:8px">✏️ Bag storage. <span style="color:#999999; font-size:13px">(✏️ Optional disclaimer, e.g. Please leave valuables at home — we cannot be responsible for lost property.)</span></li>
<li style="margin-bottom:8px">✏️ Catering (e.g. Teas, coffee, cold drinks and snacks served from the Pavilion.)</li>
<li style="margin-bottom:8px">✏️ Any other facility worth mentioning.</li>
</ul>
</div>

<div style="background-color:#d32f2f; border-radius:8px; margin-bottom:32px; padding:24px 28px">
<h3 style="color:#ffffff; font-size:20px; font-weight:bold; margin:8px">
✏️ Feature heading (e.g. FREE Kids Fun Run)
</h3>
<p style="color:#ffffff; font-size:16px; line-height:1.6; margin:0">
✏️ A short description of this special feature.
</p>
</div>

<div style="border-left:4px solid #d32f2f; margin-bottom:32px; padding:0 0 0 20px">
<h2 style="color:#b71c1c; font-size:22px; font-weight:bold; letter-spacing:1px; margin:14px; text-transform:uppercase">
Important Information
</h2>
<p style="color:#444444; font-size:15px; margin:14px">
<strong style="color:#b71c1c">✏️ Rule label (e.g. Age restriction):</strong> ✏️ The rule detail.
</p>
<p style="color:#444444; font-size:15px; margin:14px">
<strong style="color:#b71c1c">✏️ Rule label (e.g. No running with):</strong> ✏️ The rule detail.
</p>
<p style="color:#444444; font-size:15px; margin:14px">
<strong style="color:#b71c1c">✏️ Rule label (e.g. Time limit):</strong> ✏️ The rule detail.
</p>
<p style="color:#444444; font-size:15px; margin:14px">
<strong style="color:#b71c1c">✏️ Rule label (e.g. Race numbers):</strong> ✏️ The rule detail.
</p>
<p style="color:#444444; font-size:15px; margin:14px">
<strong style="color:#b71c1c">✏️ Rule label (e.g. Refunds & transfers):</strong> ✏️ Your refund and transfer policy.
</p>
</div>

<p style="color:#888888; font-size:14px; margin:28px; text-align:center">
✏️ e.g. Race organised under England Athletics permit number XXXXX, issued by [Issuing Body].
</p>

</div>

--END OF CODE---

FINAL CHECKLIST

Before publishing, run through this:

☐ All ✏️ markers have been replaced with real content
☐ All three template colours updated to match your branding
☐ Any optional sections you don't need have been deleted
☐ Dates, times, and distances are accurate
☐ Charity name spelled correctly (if applicable)
☐ Permit number correct (if applicable)
☐ Refund and transfer policy matches what you actually offer
☐ Preview the description on your event page before publishing

NEED HELP?

If you get stuck or something doesn't look right after pasting, contact our support team and paste the code into your message so we can take a look.