Backing Up the Website

When something is deleted—on purpose or by accident—there’s no “Undo” button. It’s gone unless you’ve backed up the site beforehand.

Why Backups Matter
Backups are the only way to recover lost content. They include your site's text, images, documents, and layout files as they existed at the moment of backup. Restoring from a backup means manually rebuilding lost content using the saved files.

How Often Should You Back Up?

• If you update the site often (weekly or more): Back up every 1–2 months
• If you update less frequently: Back up every 3–6 months

How to Create a Site Backup (Archive)

1. Log into the Weebly editor
2. Click Settings, then scroll to the Archive section
3. Enter your email and click Email Archive
4. You’ll receive a download link by email (and also on the page)
5. Download and save the ZIP file somewhere safe

What’s included in the backup:

• All site images and uploaded documents
• Code files for each page (.html)
• Theme and design settings

Restoring Lost Content from a Backup

Weebly doesn't offer automatic content recovery—so if something goes missing, you'll need to manually pull it from a previous backup.

Restoring Text

1. Open the ZIP backup
2. Locate the .html file for the page you need
3. Open the file in a web browser — the layout may look broken, but the text will be there
4. Copy the text you want
5. Paste into your site, and click the “Tx” icon in the text formatting bar to remove old formatting

Restoring Photos & Documents

1. In the backup folder, open the UPLOADS folder
2. Browse or search for the missing file
3. Re-upload to the site using the appropriate section or content block

Website Color Reference

Color isn’t just about looking nice—it helps tell the PJ23 story. Your website follows the specific PJ23 color palette to create a consistent, polished, and recognizable look. When those colors are used consistently, everything feels more unified and professional. Using random colors (even small changes) can make the site feel off-brand or disorganized.

Hex Codes
To represent colors on a website, we use something called a hex code (short for hexadecimal code). A hex code is a six-character code like #004080 that tells the website exactly which color to display. Even a tiny change in the code creates a visibly different color—so using the right code matters.

Most text, buttons, backgrounds, and other site elements are already pre-set with the correct colors. You don’t need to change them.

But if you do need to manually change a color, keep things consistent by using one of the hex codes from the school’s official palette, featured below. For example, instead of choosing a random “blue” from a color picker, use the hex code #1b47ba to get the exact PJ23 blue.

Blue
#1b47ba

Gold
#fdba31

Lt Violet
#e8eef6

Violet
#a0b3dd

Dk Violet
#7697c8

---

Creating Section Gradients
To add a blue gradient to a section background,

1. Click the section and select Edit Background.
2. In the Background settings, select Gradient, then click Change Gradient.
3. Set the Angle to 90º, the top color to #133282, and the bottom color to #1359c1.

Note: These two colors are slight variants on the primary blue #1b47ba shown above, and are designed to provide an optimal contrast for the gradient.

Section Background gradient settings

Prepping Photos for the Site

Digital photos—whether from a phone or a camera—are impressively sharp, detailed, and vibrant. But that quality comes at a cost: large file sizes. Uploading full-size images can slow down your website, especially on mobile devices, negatively impacting both user experience and search engine rankings.

​Think of it like a student’s overstuffed backpack—filled with books, gym clothes, and snacks. It’s bulky, heavy, and slows everything down. Now imagine the backpack looks exactly the same, but somehow weighs almost nothing.

​That’s what compression does. Same photo. Same quality. Just lighter—and faster to load.

---

5-Step Photo Prep

1. Start with a Good Photo

• Choose a photo that’s 1MB or larger (you want to start with the big, beautiful backpack to shrink it down the right way)
• Avoid tiny files (under 100-200KB), which may already be low-quality
  
  

2. Crop It Square
The photo carousels on the website all require square images to display properly.

• Use an image editing tool like Canva, Microsoft Paint (PC), Photos (Mac).
• Crop your image to a 1 : 1 aspect ratio (square).

3. Resize It to 1000 x 1000 Pixels
If you're starting with a large file size, chances are your image's pixel dimensions are far larger than 1000 x 1000. It's important that we scale down the image so the compression process works well.

• Use an image editing tool like Canva, Microsoft Paint (PC), Photos (Mac).
• Find the image size settings and set change the height and width to 1000 pixels.
• Save your file; now it's the perfect size for the next step, compression.

4. Compress the File (The Magic Step!)
This is where the file gets lighter—but the image stays the same.

• Use a free, online tool compression tool like tinypng.com or squoosh.app
• Upload your photo, let the tool compress it, then download the smaller version.
• Goal file size:  Under 250KB is great, under 150-100KB is even better!
  ​

5. Give It a Unique File Name (IMPORTANT)

• Weebly will only display the first image uploaded with a given file name—any later files with the same name will be ignored, even if they’re different images.
• To prevent this, always use descriptive, specific names. Add details like the event, year, or topic. For example, 2025-Graduation-IMG_2345.jpg is less likely to be repeated than IMG_2345.jpg.
  
  

Now You’re Ready to Upload a lightweight, great looking image to the website!

Updating the Staff Directory

The staff directory is managed through Elfsight, a third-party app, and is only visible on the live website. To update staff information, log in to the PJ23 Elfsight account using the details below:

Visit: Elfsight Website (then click Continue with Email)
Username: [email protected]
Password: Washington23!

---

Instructions

Log In to Elfsight

1. Go to the Elfsight website and and log in using the information above.
2. Locate and click on the blue PJ23 – Team Showcase link in the center of the page.

To Add a Staff Member

1. In the left column, click on 'Add Member' at the top.
2. Enter member's Name, Position, and Email Address; DO NOT ENTER ADDITIONAL INFORMATION IN OTHER FIELDS.
3. Add a photo: click ADD in the Photo row and upload a photo file.
4. Click DONE at the top of the left column to save.
5. Publish: After making the necessary updates, click the GREEN PUBLISH BUTTON in the upper right corner of the page to publish the widget to reflect the new information on your website.​
   
   

To Edit an Existing Staff Member

1. In the left column, click on the member's profile to open the settings.
2. Edit the member's Name, Position, Email Address or Group as needed. DO NOT ENTER ADDITIONAL INFORMATION IN OTHER FIELDS.
3. Click DONE at the top of the left column to save.
4. Publish: After making the necessary updates, click the GREEN PUBLISH BUTTON in the upper right corner of the page to publish the widget to reflect the new information on your website.
   ​
   

To Reposition or Regroup a Staff Member

1. In the left column, click and hold on the member's profile and drag to the desired position.
2. To change the member's group, click on their profile in the left column, then click on the blue group name in the Group row. Select the new group from the list.
3. Publish: After making the necessary updates, click the GREEN PUBLISH BUTTON in the upper right corner of the page to publish the widget to reflect the new information on your website.​
   ​
   

 To Delete a Staff Member

1. In the left column, click on the three horizontal dots on the right side of the member's profile and select DELETE.  This cannot be undone.
2. Publish: After making the necessary updates, click the GREEN PUBLISH BUTTON in the upper right corner of the page to publish the widget to reflect the new information on your website.​