Navosa Rugby Union — Website Guide

Square photos work best (same width and height). A phone camera in portrait mode works fine. The photo should show face and shoulders on a plain background if possible.

Save the photo as the player's name, all lowercase, no spaces. Example: viliame-navoka.jpg or mesake-sauroutu.jpg

Copy the photo file into the images/ folder inside your website folder.

Right-click the file → Open with → Notepad (or Notepad++)

Use Ctrl+F to search for the player's name. Example: search for Viliame Navoka

Find this block (it will look similar for each player):

<!-- BEFORE: placeholder -->
<div class="player-card-img" style="background:#1a1a1a;display:flex...">
  <div style="text-align:center...">
    <div style="font-size:3rem;">🏉</div>
    <div>Photo Coming Soon</div>
  </div>
  <span class="player-number">8</span>
</div>

Replace it with:

<!-- AFTER: real photo -->
<div class="player-card-img">
  <img src="images/viliame-navoka.jpg" alt="Viliame Navoka" loading="lazy" />
  <span class="player-number">8</span>
</div>

Use Ctrl+F and search for text like Navosa open Vanua Cup to find the featured news block.

Find the <h3> tag inside the news block and change the text between the tags:

<h3 style="...">Your new headline goes here</h3>

Find the line with the date emoji: 📅 March 2025 and change it to the correct date.

The red badge like <span class="news-tag">Match Report</span> — change the text to match the story type.

Search for ticker-inner in the file. Update the text inside each <span class="ticker-item"> block with your latest headlines. Keep them short (under 15 words each).

Each fixture is a block that looks like this (simplified):

<div class="fixture-card">
  <!-- HOME TEAM -->
  <div class="fixture-team">
    <img src="images/logo.jpg" ... />
    <span class="fixture-team-name">Navosa</span>
  </div>

  <!-- SCORE / DATE -->
  <div class="fixture-score">
    <div class="fixture-score-nums">22 <span class="vs">–</span> 18</div>
    <div class="fixture-meta">Sat, Mar 29 · Navosa Win</div>
  </div>

  <!-- AWAY TEAM -->
  <div class="fixture-team away">
    <span class="fixture-team-name">Northland</span>
    ...
  </div>

  <!-- STATUS BADGE -->
  <span class="fixture-status status-result">Win</span>
</div>

Find — <span class="vs">vs</span> — (upcoming) and replace with the real score like 27 <span class="vs">–</span> 17

Change class="fixture-status status-upcoming" to class="fixture-status status-result" and change the text from "Upcoming" to "Win" or "Loss".

For a loss badge, add this inline style: style="background:rgba(200,16,46,0.12);color:#C8102E"

Name them simply: gallery-1.jpg, gallery-2.jpg etc. JPG format, minimum 800px wide for good quality.

Each photo is a <div class="gallery-item">. There are 7 of them. For each one, update TWO things:

<!-- data-src = the LARGE version shown in lightbox -->
<div class="gallery-item" data-src="images/gallery-1.jpg" ...>
  <img src="images/gallery-1.jpg" 
       alt="Navosa players celebrating at Lawaqa Park" />
  <div class="gallery-item-overlay">
    <span ...>Match Day</span>
  </div>
</div>

The alt="..." text describes the photo (important for accessibility and SEO). The text inside the overlay <span> is the caption shown on hover.

Ctrl+F → type the name → find it in the HTML

<p class="player-name">Viliame Navoka</p>
<p class="player-position">Number Eight / Captain</p>

Go to desktop.github.com and install it. Sign in with your GitHub account.

In GitHub Desktop: File → Add local repository → Select your navosa-rugby folder

The left panel will show all files you changed. Click each one to see exactly what changed.

At the bottom left, type a short description like "Update fixtures — Round 4 results". Click Commit to main, then click Push origin (top right).

Vercel automatically detects the change and rebuilds your site. Your live site will update within a minute or two.

Go to your Navosa Rugby Facebook page → click any photo → click the three dots (⋯) → Download. Save to your images/ folder and follow Section 6 to add them to the gallery.

Add a message in the gallery section — it's already there: "Have real Navosa Rugby photos? Contact us or message us on Facebook."

Facebook does allow embedding public photo albums via their official embed tool. This would show your Facebook photos directly in a section of the site. Ask your technical contact to set this up when ready.

Create a free account using your club email address.

It will look like: https://formspree.io/f/xabcdefg

Change <form id="contactForm" novalidate> to:

<form id="contactForm" action="https://formspree.io/f/xabcdefg" method="POST" novalidate>

Most common tasks are covered step-by-step above.

Simply double-click index.html on your computer — it will open in your browser so you can see if it looks right before going live.

In Notepad: Ctrl+Z to undo. In GitHub Desktop: right-click the changed file → Discard changes — this returns to the last working version.

Send them this guide along with a screenshot of the issue.

Look at the URL in the address bar. It looks like:
https://www.youtube.com/watch?v=ABC123xyz
The Video ID is the part after v= — in this case ABC123xyz

Shorts URLs look like: https://www.youtube.com/shorts/ABC123xyz
The ID is the last part: ABC123xyz

Each card has a block like this:

<div class="short-card"
     data-vid="dQw4w9WgXcQ"
     data-title="Skipper Cup 2025 — Best Tries"
     data-short="false"
     ...>

Replace data-vid="dQw4w9WgXcQ" with your real video ID.
Set data-short="true" if it's a YouTube Short (portrait video), false for regular landscape videos.

YouTube auto-generates thumbnails. Use this URL pattern (replace YOUR_ID):

https://img.youtube.com/vi/YOUR_VIDEO_ID/mqdefault.jpg

Find the <img src="https://img.youtube.com/vi/... line inside the card and update the ID there too.

Inside the card body, update <p class="short-card-title">...</p> and the meta spans with the correct title, competition name, and date.

Update data-vid="..." and the <img src="..."> thumbnail URL the same way. Also update the title, description text, and metadata in the video-featured-info panel beside it.

Click your profile → Create a channel → Name it "Navosa Rugby Union"

Any videos from supporters, match-day recordings, or phone clips can be uploaded. Even phone-quality vertical videos work great as YouTube Shorts.

Follow steps 1–5 above to add each new video to the site.