How to customize headers and footers in Sailwave?

Hi to Everyone.
Intend to use sponsor’s logos in footer and or header.
Read all topics in SW’s manual and in this forum, but didn’t grasp how to do it.

I would appreciate to receive a more elucidative.
Thank you very much.
Renato

Hi Renato,
Welcome to Sailwave User Group.

Please can you give a bit more detail about what you have not been able to grasp?

To add sponsor logos to the head of the published output you need to edit a file called header.txt in the Templates folder.

To add sponsor logos to the foot of the published output you need to edit a file called footer.txt in the Templates folder.

You also need to understand how to code HTML.

Kind regards,
Huw

Hi Huw,
My name is Marko Misura and I am running races for Melges 24 class in Croatia. I am facing same issue as Renato with sponsors logos. Can you maybe share some example of header and footer text file that are customized for this purpose?
Many thanks.

Hi Markom,

Welcome to the Sailwave User Group.

There are several ways of customising published results to include sponsor logos; easier and more advanced. The main requirements are deciding how one would like the visual look to appear and understanding HTML coding to include images to produce the look required. If you let me know some more about what you want the look in the published results to look like I will be better able to advise. There is a section in the Sailwave User Guide on modifying header and footer files. I will look at the section and see if I can explain things in a better way. I might even separate into a new document with more examples.

You need to be careful editing the header & footer .TXT files so that you do not change things that Sailwave is expecting when publishing. You should only change in the following example the <table> ... </table> section.

Examples of two different ways can be seen at:

Sailwave results for 2022 RYA MultiClass Regatta at Rutland SC<br>6th & 7th August 2022 and this is the header file

<!doctype html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-control" content="no-cache">
<meta name="description" content="sailwave results">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<title>Sailwave results for `event.name` at `venue.name` `date.year`</title>

<style type="text/css">
`html.style()`
table.headertable {border: 0px;}
table.headertable td{border: 0px;}
</style>

<script type="text/javascript">
`html.javascript()`
</script>

</head>

<body> 

<header>
</header>
<table class="headertable" cellspacing="0" width="100%" cellpadding="0" border="0">
<tbody>
<div id="wrap">

<tr>
<td width="30%">
 <a href="http://`venue.web`">
  <img style="height:80px"  src="`venue.burgee`" alt="venue burgee">
 </a>
 <a href="https://www.rutlandsailability.org.uk/">
  <img style="height:80px"  src="https://lirp.cdn-website.com/3a8e9a5d/dms3rep/multi/opt/Logos+01-1920w.jpg" alt="Rutland Sailability logo">
 </a>
</td>

<td width="40%" align="center">
<a href="http://www.rya.org.uk/start-boating/sailability/events/multiclass">
  <img style="display:block; height:150px;"  src="https://ffenestri.co.uk/sailwave/rya/RYA-Multiclass-Regatta-Banner.jpg" alt="RYA Multi Class Regatt banner" align="right" >
 </a>
</td>

<td width="30%">
 <a href="https://www.rya.org.uk/start-boating/sailability/experienced-sailors/competing/para-sailing-hub/">
  <img style="height:80px"  src="`event.burgee`" alt="RYA Para Sailing logo" align="right" >
 </a>
</td>
</tr>
</tbody>
</table>

<div style="clear:both;"></div>

Sailwave results for 2022 ILCA 7 Mens World Championship at Vallarta Yacht Club 2022 is an advanced way of publishing that shows sponsor logos in a side bar created by a Sailwave user in Mexico. They have documented the way they did the code and the steps.

FYI - I usually make a copy of the these 3 files in the Sailwave templates folder - Results.htm or ResultsV2.htm, footer.txt and footer.txt - naming then something appropriate for the event I am scoring using custom layout. This way I leave the standar/default Sailwave files untouched.

Kind regards,
Huw

Another example of a header file that creates a header to published results like this:

<!doctype html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-control" content="no-cache">
<meta name="description" content="sailwave results">
<meta name="viewport" content="width=device-width">

<title>Sailwave results for `event.name` at `venue.name` `date.year`</title>

<style type="text/css">
`html.style()`
table.headertable {border: 0px;}
table.headertable td{border: 0px;}
</style>
<style>
.auto-style1 {
	text-align: center;
}

</style>
<script type="text/javascript">
`html.javascript()`
</script>

</head>

<body> 

<header>
</header>
<table class="headertable" cellspacing="0" width="100%" cellpadding="0" border="0">
<tbody>

<tr>
<td width="30%">
<img style="display:block; height:125px; float: left;" src="https://ffenestri.co.uk/sailwave/ryacymru/logo-ryacymruwales.png" alt="event burgee" >
</td>

<td width="40%" class="auto-style1" >
<h1>`event.name`</h1>
<h2>`venue.name`</h2>
</td>

<td width="30%"></br></br>
<img style="display:block; height:125px; float: right;"  src="https://ffenestri.co.uk/sailwave/ryacymru/logo-ryacymruwales.png" alt="venue burgee" >
</td>
</tr>

</tbody>
</table>

<table class="headertable" cellspacing="0" width="100%" cellpadding="0" border="0">
<tbody>

<tr>
<td width="20%">
<img style="display:block; height:100px; float: center;" src="https://ffenestri.co.uk/sailwave/ryacymru/icon-llandegfeddsc2.png" alt="event burgee" >
</td>

<td width="20%" class="auto-style1" >
<img style="display:block; height:100px; float: center;" src="https://ffenestri.co.uk/sailwave/ryacymru/icon-tssc.png" alt="event burgee" >
</td>

<td width="20%"></br></br>
<img style="display:block; height:100px; float: center;" src="https://ffenestri.co.uk/sailwave/ryacymru/icon-myc.png" alt="event burgee" >
</td>

<td width="20%"></br></br>
<img style="display:block; height:100px; float: center;" src="https://ffenestri.co.uk/sailwave/ryacymru/icon-cbyc2.png" alt="event burgee" >
</td>

<td width="20%"></br></br>
<img style="display:block; height:100px; float: center;" src="https://ffenestri.co.uk/sailwave/ryacymru/Llangorse_logo.png" alt="event burgee" >
</td>

</tr>

</tbody>
</table>
<div style="clear:both;"></div>

Another example

<!doctype html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-control" content="no-cache">
<meta name="description" content="sailwave results">
<meta name="viewport" content="width=device-width">

<title>Sailwave results for `event.name` at `venue.name` `date.year`</title>

<style type="text/css">
`html.style()`
table.headertable {border: 0px;}
table.headertable td{border: 0px;}
</style>
<style>
.auto-style1 {
	text-align: center;
}

</style>
<script type="text/javascript">
`html.javascript()`
</script>

</head>

<body> 

<header>
</header>
<table class="headertable" cellspacing="0" width="100%" cellpadding="0" border="0">
<tbody>

<tr>
<td width="30%">
<img style="display:block; height:125px; float: left;" src="https://ffenestri.co.uk/sailwave/ryacymru/rya-cymru-wales.png" alt="event burgee" >
</td>

<td width="40%" align="center">
<img style="display:block; height:50px; float: center;"  src="https://ffenestri.co.uk/sailwave/ryacymru/Llangorse_logo.png" alt="venue burgee" >
<h1>`event.name`</h1>
<h2>`venue.name`</h2>
</td>

<td width="30%">
<img style="display:block; height:100px; float: right;"  src="https://ffenestri.co.uk/sailwave/ryacymru/logo-ryaonboard02.jpg" alt="venue burgee" >
</td>
</tr>

<tr>
<td width="30%">
<img style="display:block; height:75px; float: left;" src="https://ffenestri.co.uk/sailwave/ryacymru/logo-acornadventure-cropped.png" alt="sponsor logo" >
</td>

<td width="40%" >
</td>

<td width="30%">
<img style="display:block; height:75px; float: right;"  src="https://ffenestri.co.uk/sailwave/ryacymru/logo-sportwales.jpg" alt="venue burgee" >
</td>
</tr>
</tbody>
</table>


<div style="clear:both;"></div>

and another example

<!doctype html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-control" content="no-cache">
<meta name="description" content="sailwave results">
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Sailwave results for `event.name` at `venue.name` `date.year`</title>

<style type="text/css">
`html.style()`
table.headertable {border: 0px;}
table.headertable td{border: 0px;}
</style>

<script type="text/javascript">
`html.javascript()`
</script>

</head>

<body> 

<header>
</header>
<header>
<img src="https://ffenestri.co.uk/sailwave/logos-sponsors/logo-event-composite.jpg" alt="Event Composite Logo png" width="75%"/>

</header>

<div id="wrap">


<h1>2017 RS:X Youth World Windsurfing Championships MEN</h1>
<h2>Circolo Surf Torbole, Italy</h2>

<div style="clear:both;"></div>

<style>
div.applicant-break {page-break-after:always;}
</style>

a footer example

The image was created by the official photographer of the event

<p class="hardleft"><a href="http://www.limassolnauticalclub.com">www.limassolnauticalclub.com</a><br /><a href="mailto:"></a></p>
<p class="hardright"><a href="http://www.rsxclass.org/youthworlds2016">www.rsxclass.org/youthworlds2016</a><br /><a href="mailto:"></a></p>
<p>Sailwave Scoring Software 2.22.1<br /><a href="http://www.sailwave.com">www.sailwave.com</a></p>

</div>
<p>
<img alt="Supporters logo" src="http://results.sailwave.com/rsx/2016 Youth Worlds/sponsorbanner-small.jpg" />
</p>
<footer>

</footer>

<div id="scrollbottom"></div>

</body>

Thanks a lot Huw. That was exactly I was looking for.
Superb!

Thanks Huw for yours kind effort!

Hi Huw,
One more issue, when uploading results or competitors list to sailwave results folder, sponsors logos are not displayed!? Any tip from you?

Hi Markom,

The reason your sponsors logos are not displayed is most likely that you have put the path to the images as being on your local PC, starting something like C:\ When you view the results posted to the Sailwave web server your browser cannot see the files you have on your PC, hence no images :wink:

Any images (sponsor logos) have to be accessible on the Internet from a location on your event / club / class website or an image hosting service like imugr. Sailwave does not allow the storage of images as they can quickly use up a lot of space.

The images have to have an Internet address very similar to a web page address.

Sailwave does not upload any club / sponsor logos referenced in Series properties. More information can be read at Why aren’t my burgees showing in my published results? | Sailwave.

I hope this helps.
Kind regards,
Huw

Hi Huw,
Many thanks problem solved…

1 Like