Website Admin & Handover Guide

A complete guide for the ReSOA Committee to manage and maintain this website. Prepared for the July 2026 committee handover.

For Internal Committee Use Only

Welcome, Incoming Committee!

This guide will help you manage the ReSOA website smoothly after the July 2026 handover. The website is a simple collection of HTML files โ€” no technical expertise is needed for most tasks. This guide explains, step by step, how to add new members, post events, upload circulars, and update committee details. Read this guide once carefully and keep it handy. When in doubt, come back to this page.

๐Ÿ—‚๏ธ Quick Reference โ€” What's Where

๐Ÿ“ e:\NPOLResoaWebSite\ โ† Main website folder
๐Ÿ“„ index.html โ† Home page
๐Ÿ“„ about.html โ† About Us + Executive Committee tabs
๐Ÿ“„ members.html โ† Members directory (add/manage members here)
๐Ÿ“„ events.html โ† Events gallery (add new events here)
๐Ÿ“„ circulars.html โ† Circulars & Resources library
๐Ÿ“„ contact.html โ† Contact page + location
๐Ÿ“„ admin-guide.html โ† This guide
๐Ÿ“ images\ โ† All images go here
resoa_logo.png โ† Official ReSOA logo (used everywhere)
๐Ÿ“ events\ โ† Event photos go here
๐Ÿ“ committee\ โ† Committee member photos go here
๐Ÿ“ downloads\ โ† All downloadable PDFs go here
SPANDAN-2026.pdf โ† Current SPANDAN directory
CGHS-Guide-2024.pdf โ† CGHS Guide (uploaded)

โšก Most Common Tasks at a Glance

๐Ÿ‘ค
Add a New Member
Go to Members page โ†’ Click "Add New Member" button โ†’ Fill form โ†’ Save
Go โ†’
๐Ÿ•Š๏ธ
Move a Member to "Those Who Left Us"
Open HTML file โ†’ Find member's table row โ†’ Change badge to "Departed" โ†’ See Step 4 below
๐Ÿ“„
Upload a New Circular / PDF
Copy PDF to downloads\ folder โ†’ Edit circulars.html โ†’ Add new circular-item entry
Go โ†’
๐Ÿ“ธ
Add an Event with Photos
Copy photos to images\events\ โ†’ Edit events.html โ†’ Add new event card block
Go โ†’
๐Ÿ›๏ธ
Update Executive Committee (New Term)
Edit about.html โ†’ Update names in the "2024โ€“26" tab โ†’ Add photos to images\committee\
Go โ†’
๐Ÿ“–
Update SPANDAN to New Edition
Copy new SPANDAN PDF to downloads\ as SPANDAN-[YEAR].pdf โ†’ Update links in all HTML files
Go โ†’

๐Ÿ‘ค Step 1 โ€” Adding a New Member

When a new NPOL scientist or officer retires and joins ReSOA, follow these steps:

1
Open the Members Page

Open your browser and go to the Members page: members.html. Or open the file directly from the website folder.

2
Click "Add New Member" button

A form will appear. Fill in all the details: Full Name, Date of Birth, Designation, Date of Retirement, Division, Contact details, Spouse name (for honorary records).

3
Upload Member Photo (Optional)

Click the photo upload field and select a passport-size JPG/PNG photo of the member (max 2 MB). The photo will be shown in the directory.

4
Click "Save Member"

The member will be added to the Active Members table immediately. The data is saved in the browser โ€” for permanent saving, you will need to copy the updated HTML file to the web server (see Step 7 โ€” Publishing).

โš ๏ธ Important Note about Data Saving

The "Add Member" form currently adds members to the visible table for the session. For permanent storage of all 344+ members, the full member list needs to be added to the members.html file directly (or ask your website administrator / IT-savvy committee member to set up a database). We recommend Excel/CSV upload in a future update.

๐Ÿ•Š๏ธ Step 2 โ€” When a Member Leaves Us

When a registered member passes away, their record must be moved respectfully to "Those Who Left Us" and their spouse added as an Honorary Member.

1
Open members.html in Notepad / WordPad

Right-click members.html โ†’ Open with โ†’ Notepad (or Notepad++). Press Ctrl+F to search for the member's name.

2
Find the member's table row

Look for <tr class="member-row" with that member's name. The row will have their ID, name, designation, etc.

3
Copy their details, then delete the row from Active table

Delete the entire <tr>...</tr> block from the Active Members table.

4
Add a card to "Those Who Left Us" section

Find the id="departedGrid" section and add a memorial card:

<div class="memorial-card">
  <div class="memorial-avatar">๐Ÿ•Š๏ธ</div>
  <div>
    <div style="font-weight:600;">[Member Full Name]</div>
    <div style="font-size:0.78rem; color:#7A90A8;">[Designation] ยท NPOL</div>
    <div style="font-size:0.75rem; color:#7A90A8;">Retired: [Year] ยท Left us: [Year]</div>
  </div>
</div>
5
Add spouse as Honorary Member

Find the id="honoraryGrid" section and add an honorary card with the spouse's name and a note "Spouse of Late [Member Name]". Save the file and upload to server.

๐Ÿ“„ Step 3 โ€” Uploading a New Circular

1
Save the PDF in the downloads folder

Copy the PDF file to: e:\NPOLResoaWebSite\downloads\. Use a clear filename, e.g., CGHS-HospitalList-2025.pdf or Pension-DA-Jan2025.pdf.

2
Open circulars.html in Notepad

Right-click โ†’ Open with Notepad. Press Ctrl+F and search for the category (e.g., "CGHS" or "SPARSH").

3
Find the right category section and add a new line

Inside the correct <div class="circular-category__body">, add a new circular item:

<div class="circular-item">
  <div class="circular-item__icon">๐Ÿ“„</div>
  <div class="circular-item__content">
    <div class="circular-item__title">Your Circular Title Here</div>
    <div class="circular-item__meta">Updated: Month Year ยท PDF</div>
  </div>
  <div class="circular-item__download">
    <a href="downloads/your-file.pdf" class="btn btn--outline-blue btn--sm" target="_blank">โฌ‡ Download</a>
  </div>
</div>
4
Save and upload to the web server

Save circulars.html and upload both the updated HTML file and the new PDF to your web hosting (see Step 7).

๐Ÿ“ธ Step 4 โ€” Adding a New Event

1
Save event photos

Copy event photos to e:\NPOLResoaWebSite\images\events\. Use a folder per event, e.g., images\events\onam-2025\. Resize photos to max 1200px width for faster loading.

2
Open events.html in Notepad

Search for <!-- 2025 Events --> (or the current year). Add a new event card block before the closing </div> of the events grid.

3
Paste this event card template and fill in details:
<div class="event-col" data-year="2025" data-category="onam">
 <div class="event-card" data-year="2025" data-category="onam">
  <div class="event-card__img-wrap">
   <img src="images/events/onam-2025/photo1.jpg" alt="Onam 2025">
   <span class="event-card__year-badge">2025</span>
  </div>
  <div class="event-card__body">
   <div class="event-card__category"><span class="badge badge--green">Onam</span></div>
   <h3 class="event-card__title">Onam Celebrations 2025</h3>
   <p class="event-card__date">๐Ÿ“… September 2025 ยท NPOL Campus</p>
   <p class="event-card__desc">Your event description here.</p>
  </div>
 </div>
</div>

Category options: onam, annual-day, tour, workshop, agm, other

๐Ÿ›๏ธ Step 5 โ€” Updating Executive Committee

1
Get committee member photos

Collect passport-size photos of all 11 new committee members. Save them to images\committee\ with clear filenames like president-2026.jpg, secretary-2026.jpg.

2
Open about.html โ€” find the 2024-26 committee panel

Search for id="panel-2024". Replace each "To Be Updated" with the actual name. Replace the ๐Ÿ‘ค emoji with an actual <img> tag pointing to the photo.

3
Add a new tab for the next term

When a new committee takes charge (e.g., 2026โ€“28), add a new tab button and panel. Copy the 2024-26 panel and update the names. The outgoing committee's panel remains as archive โ€” never delete old records!

๐Ÿ“– Step 6 โ€” Updating SPANDAN Directory

1
Save new SPANDAN PDF

Copy the new edition PDF to downloads\ folder. Name it clearly: SPANDAN-2027-January.pdf or SPANDAN-2027-July.pdf.

2
Open all HTML files and update SPANDAN links

Open each HTML file (index, about, members, events, circulars, contact) in Notepad. Use Ctrl+H (Find & Replace) to replace SPANDAN-2026.pdf with the new filename.

3
Add the new edition to the SPANDAN archive in circulars.html

In circulars.html, find the SPANDAN section. Add a new spandan-item card for the new edition (Latest), and move the old edition to Archive status.

๐ŸŒ Step 7 โ€” Publishing to the Website (npolresoa.com)

1
Log in to your web hosting control panel

Go to your hosting provider's website (the company that hosts npolresoa.com). Log in with the username and password (these should be kept safely by the President/Secretary). Look for "File Manager" in the control panel.

2
Navigate to the public_html folder

In File Manager, go to the public_html or www folder โ€” this is where the website files are stored.

3
Upload updated files

Upload the changed files (e.g., members.html, the new PDF, the new photo). Overwrite existing files. Within 5 minutes, changes will appear on www.npolresoa.com.

โœ… Alternatively โ€” Use FTP

If you have FileZilla or any FTP client, connect using the FTP credentials from your hosting provider. Drag and drop files from e:\NPOLResoaWebSite\ to the server. This is faster for bulk uploads.

๐Ÿ” Important Credentials to Handover

The following credentials/accounts must be handed over to the new committee. Never share these publicly.

Web Hosting Account
Provider: ________________
Login URL: ______________
Username: _______________
Password: _______________
Domain Registrar
Provider: ________________
Login URL: ______________
Username: _______________
Password: _______________
Website Files Location
Computer: ________________
Folder path: e:\NPOLResoaWebSite\
Backup location: _________
WhatsApp Group Admin
Official Group Admin: ____
Chat Group Admin: ________
Mobile Number: __________
โš ๏ธ Print and Store Securely

Print this page, fill in the credentials by hand, and keep the printed copy in a sealed envelope with the President/Secretary. Do NOT store passwords in digital format unencrypted. Ensure the incoming committee receives this before the outgoing committee's last day.

โœ… Do's and Don'ts for Website Management

โœ… Do's
  • Always keep a backup copy before making changes
  • Update committee details promptly after election
  • Use respectful language in "Those Who Left Us" section
  • Keep SPANDAN archive โ€” all editions should remain available
  • Test the page in a browser after every edit
  • Compress photos before uploading (use squoosh.app)
  • Update the notice banner with current information
โŒ Don'ts
  • Never delete old committee records โ€” keep them as archive
  • Don't share member contact details publicly
  • Don't upload very large files (keep PDFs under 10 MB)
  • Don't edit the CSS file unless very confident
  • Don't upload unverified circulars without committee approval
  • Don't share hosting passwords via WhatsApp
  • Never use member data for non-ReSOA purposes

Need Technical Help?

This website was designed and built with the assistance of AI tools under the guidance of the outgoing committee. For major technical changes or if you encounter problems, please contact a tech-savvy member within ReSOA or seek assistance from the original website builder.

๐Ÿ“ Contact ReSOA