Hey Red Suits!
We kept your site rather true to native Squarespace constraints, but there is a bit of custom action going on behind the scenes. Here's a quick tutorial on how to update these features yourself - but don't be afraid to reach out to me if you need any help!
-Evan
evanlemmons.com
General Information
Squarespace considers every single element on your website a Block. Here's the official Squarespace documentation on blocks and how to edit them : Squarespace - Blocks.
Some of your styles can be edited by going to Design > Style Editor but most of the prominent ones require custom code. If you are really confident in your CSS skills head to Design > Custom CSS otherwise, give me a call.
Adding Games To FAQ
So there are a lot of steps here, but the end result is totally worth it.
STEP 1
Navigate to the Upload page and choose "File" then upload your new images. Name them something short and easy, like an acronym of the game's name.
STEP 2
Navigate to the FAQ page and add those same two images into the gallery.
STEP 3
Give the images a title that corresponds with the file you uploaded in Step 1
STEP 4
Edit the embedded script block that lives underneath the gallery. You'll need to drop in both the title from Step 3 and the filename from Step 1. Here's the original code with the placeholder NEW_GAME. The first #NEW_GAME should be the same as the title from Step 3 and the two images NEW_GAME1.JPG and NEW_GAME2.jpg are the file names from Step 1.
<script> $(document).ready(function() { $('img').click(function() { var game_id = $(this).attr('alt'); $('#mpa, #kia, #kp, #tai, #cot, #ou, #fo, #tbp, #ea, #di, #NEW_GAME').addClass('hide'); $('#' + game_id).removeClass('hide'); $('html, body').stop().animate({ scrollTop: $('#faq-img-wrapper').offset().top - 100 }, 1000); }); }); </script> <div id="faq-img-wrapper"> <div id="mpa" class="faq" style="clear:both;"> <img src="/s/mpa1.jpg" id="faq-img1"><img src="/s/mpa2.jpg" id="faq-img2"><p style="clear:both;"><strong>Most Popular Answer</strong> is inspired by the TV show Family Feud, with our own variations (including original music, graphics and rules). Teams battle to try and come up with the top answers to fun questions.</p> </div> <div id="NEW_GAME" class="faq hide" style="clear:both;"> <img src="/s/NEW_GAME1.JPG" id="faq-img1"><img src="/s/NEW_GAME2.JPG" id="faq-img2"><p style="clear:both;"><strong>NEW_GAME1.JPG should be the name of your title slide for the game. NEW_GAME2.JPG should be your second game slide.</p> </div> <div id="kia" class="faq hide"> <img src="/s/kia1.jpg" id="faq-img1"><img src="/s/kia2.jpg" id="faq-img2"><p style="clear:both;"><strong>Know It All</strong> is inspired by the TV show JEOPARDY!, with our own variations (including original music, graphics, and rules). For instance, each of the four “Player” positions can be manned by up to three people, so a total of 12 can play at once.</p> </div> <div id="kp" class="faq hide"> <img src="/s/kp1.jpg" id="faq-img1"><img src="/s/kp2.jpg" id="faq-img2"><p style="clear:both;">Everyone pays close attention during <strong>Kwik Pik</strong>. The computer randomly selects from a pre-populated list. It’s perfect for giving away prizes during a raffle or otherwise.</p> </div> <div id="tai" class="faq hide"> <img src="/s/tai1.jpg" id="faq-img1"><img src="/s/tai2.jpg" id="faq-img2"><p style="clear:both;">In <strong>The Answer Is…</strong>, two people compete head-to-head. We reveal three possible answers first, and then the question. The first person to buzz in gets to guess.</p> </div> <div id="cot" class="faq hide"> <img src="/s/cot1.jpg" id="faq-img1"><img src="/s/cot2.jpg" id="faq-img2"><p style="clear:both;"><strong>Circle of Trust</strong> is inspired by the game Pyramid, with our own variations (including original music, graphics and rules). Two people are on a team, but only one can see the screen. It is that person’s job to describe a word that appears to his or her teammate. They guess as many words as possible while the clock is ticking.</p> </div> <div id="ou" class="faq hide"> <img src="/s/ou1.jpg" id="faq-img1"><img src="/s/ou2.jpg" id="faq-img2"><p style="clear:both;"><strong>Order Up</strong> has four teams of 2, 3, or 4 people (it’s flexible). You can have fewer teams if desired. Teams are shown four items and then asked to put them in a certain order. Teams have 25 seconds to talk about it. For each item that a team gets in the correct position, 100 points is awarded.</p> </div> <div id="fo" class="faq hide"> <img src="/s/fo1.jpg" id="faq-img1"><img src="/s/fo2.jpg" id="faq-img2"><p style="clear:both;"><strong>Face Off</strong> is for the entire audience. We ask a question, and the correct answer is either on the left side of the screen or on the right. Each person in the audience casts their vote by turning to the left or to the right. After five seconds, we reveal the answer. Everyone facing the correct direction remains in the game, while everyone else has a seat. We continue until the winner(s) is left standing.</p> </div> <div id="tbp" class="faq hide"> <img src="/s/tbp1.jpg" id="faq-img1"><img src="/s/tbp2.jpg" id="faq-img2"><p style="clear:both;"><strong>The Big Picture</strong> is inspired by the popular matching game of Concentration. Pick two tiles that match each other and they disappear, partially revealing a “big picture” behind them. In this game, we work the crowd by moving around the room and asking random people to give it their best shot.</p> </div> <div id="ea" class="faq hide"> <img src="/s/ea1.jpg" id="faq-img1"><img src="/s/ea2.jpg" id="faq-img2"><p style="clear:both;"><strong>Easy As 1-2-3</strong> involves everyone. First of all, everyone in the audience picks a teammate (and it’s okay if teams end up with three people). We ask a question, and the correct answer is always 1, 2, or 3. Teams hold up the number of hands they think corresponds to the correct answer. After 7 seconds we reveal the answer and teams that are right stay in the game.</p> </div> <div id="di" class="faq hide"> <img src="/s/di1.jpg" id="faq-img1"><img src="/s/di2.jpg" id="faq-img2"><p style="clear:both;"><strong>Drop it Like it’s Hot</strong> has four teams of 2, 3, or 4 people (it’s flexible). Teams are shown a multiple choice question and have 15 seconds to talk about it. They are then allotted a fixed amount of points they can wager on each answer. One-by-one incorrect answers drop off the screen along with any points they had wagered on that answer.</p> </div> </div> <style> .hide { display:none; } #faq-img1, #faq-img2 { float:left; width:46%; margin-right:2%; margin-bottom:2%; } .faq strong { color: #E8222F; } </style>
STEP 5
Before this will work, you'll need to leave the page and then come back to it. Depending on your browser settings you might not be able to see it in the Squarespace backend and you'll need to log out and view it to check and make sure your work was correct. Again, if it's too much feel free to let me know.
PRICING PDF
In the event that you need to update your Pricing PDF head over to the Upload page and edit the uploader text to delete the old file and add your new one in. Just be sure to name it the exact same thing ( TBGS_Info.pfd ) so no links get broken.