Website Admin Guide

Logging In

To access the admin site, you'll need:

Your domain — The website address (e.g., example.com)
Your password — Provided by your site administrator

Enter both on the login page and click Sign In.

The Admin Interface

After logging in, you'll see the file browser. Here's how it's organized:

Top navigation bar:
[S3 Admin logo]                              [your-domain.com] [Logout]

Breadcrumb (shows your location):
your-domain.com > photos

Upload area:
┌─────────────────────────────────────────┐
│        Drag and drop files here         │
│          or click to select            │
└─────────────────────────────────────────┘

Actions and file list:
[+ New Folder]                                   3 items
───────────────────────────────────────────────────
Name                  Size      Modified    Actions
───────────────────────────────────────────────────
📁 photos             -         -           -
📄 index.html         4.2 KB    2024-01-15 [↓] [🗑]

Key Areas

Navigation bar — Shows your domain and logout button
Breadcrumb — Shows where you are; click any part to go back
Upload area — Drag files here or click to browse your computer
New Folder button — Creates a folder in the current location
File list — Shows all files and folders with size, date, and actions

Common Tasks

Uploading Files

Drag files onto the upload area, or click it to select files from your computer. Selected files appear below the upload area — click Upload to confirm.

Opening Folders

Click any folder name (shown with a 📁 icon) to open it. Use the breadcrumb at the top or the .. row to go back up.

Downloading Files

Click the download button (↓) next to any file to save it to your computer.

Deleting Files

Click the trash button (🗑) next to a file. You'll be asked to confirm before the file is deleted.

Warning: Deleted files cannot be recovered. Keep backups of important files on your computer.

Creating Folders

Click + New Folder, enter a name using letters, numbers, dashes, or underscores, then click Create Folder.

Tips

Photos folder: Images placed in the photos folder automatically appear in your website's slideshow.

Changes may take a few minutes: Your website uses caching to load faster, so updates might not appear immediately.

Supported image formats: JPG, PNG, GIF, and WebP work best for photos.

Customizing Your Website

Want to change the look of your website? You can edit the HTML and CSS files directly. Here are some tips:

Using ChatGPT for HTML Updates

ChatGPT is great at generating HTML code. Try prompts like:

"Change my website title from 'Welcome' to 'The Stroh Family'"
"Add a contact email link to my webpage footer"
"Create a simple 'About Us' section with a photo placeholder"

Copy the index.html content into ChatGPT, describe what you want, and it will give you updated code to paste back.

Generating CSS Styles

CSS controls colors, fonts, and layout. Ask ChatGPT things like:

"Change the background to a light blue gradient"
"Make the header text larger and use a fancy font"
"Add a subtle shadow around the photo slideshow"

Tip: When asking ChatGPT for styling help, share the <style> section of your HTML so it understands your current design.

Testing Changes Locally

Before uploading, preview your changes on your computer:

Download your index.html file
Open it in a text editor (Notepad, TextEdit, or VS Code)
Make your changes and save
Double-click the file to open it in your web browser
Refresh the browser after each change to see updates

Note: The photo slideshow won't work locally (it needs the server), but you can preview colors, fonts, and layout changes.

Once you're happy with your changes, upload the updated file through the admin site.

Need Help?

Contact Brian for assistance with passwords, access issues, or customizations.