Resources for Miles
Training Video by pb+j
Approximately 1.5 hours long. Best viewed in Chrome or Firefox.
Website Assets by pb+j
All parallax banners, photos, miscellaneous graphics, etc.
Typography for Miles
can't stop won't stop
bolded bullet heading
BTW, bullets can have soft returns
You have many options when it comes to typography! Take note that we've hacked over a few of the Heading styles (using custom code) to give you a bit more flexibility.
Here's what we've tricked out:
Heading 1 + Bold + Italic = Big H1
Heading 2 (normally Red) + Bold = Black H2
Normal + Bullet + Bold = H3
Code Blocks for Miles
Morpheus gifts you with two colour options for text-based Code Blocks.
Put some copy in me!
Put some copy in me!
Coloured H3 Headlines
These are tiny Code Blocks that will allow you to do coloured H3's!
I am Blue!
I am Green!
I am Yellow!
Create a free, secure and instantly-confirmed online reservation for up to 14 people. For larger parties, please call the venue directly or see our Group Booking options below.
This Code Block allows you to embed OpenTable and/or Bookenda widgets into Venue pages.
As you know, widgets come in all shapes and sizes. Long/wide widgets look best on Desktop, while vertical/tall widgets look best on Mobile. In that case, why not use both?
Inside the Code Block, you'll see two <divs> — one called book-desktop and another called book-mobile. Paste the embed script for the long/wide widget in the book-desktop <div>, and paste the embed script for the vertical/tall widget in the book-mobile <div>.
Make sure the tail end of the embed script says iframe=false (instead of "true", which is the common default setting).
This Code Block allows you to 1) add download links for Event Package PDFs and 2) embed Gather widgets into Venue pages.
Change the name of the <div> class so it matches the Venue page you're trying to build. Here are the correct class names you should use:
Inside the Code Block, you'll see two sets of <tables> — one called table-desktop and another called table-mobile. It's not as complicated as it looks! All you have to do is ensure that the links for table-desktop are identical to the links for table-mobile. (i.e. You'll have to paste the PDF URL twice and the Gather venue ID four times, but your hard work will pay off.)
You can upload Event Package PDFs directly to Squarespace. The steps are a little bizarre, so watch the tutorial video to find out how!
Need to update those really cool animated counters on the Our Community page? Easy as pie.
Open up the Code Block(s) you want to change and update the data-count value. As shown in the example screencap, you'll want to change what's inside the quotation marks (i.e. "48779") and leave the 0 as-is.
Please note, this step is only necessary if you want to change the criteria of the statistic (i.e. changing "hours volunteered since Dec 2017" to "hours volunteered since BHC was founded").
Open up the Custom CSS Editor in the backend of Squarespace, then scroll down to line 300 or so. Make your text changes, then hit Save. The Code Blocks should update once you refresh the page.
Control the Snow
Sometimes, you just don't want the snow. Like when it's summertime. It's cool, we totally understand. We're judging a little bit, but we understand.
Watch the tutorial video and learn how to control the snow like Storm.
Image / Video Blocks for Miles
Image Block – Card Style
The height of this block depends on the cropping proportions of the photo. Have fun and experiment! Just make sure you don't put too much text inside the grey card area — otherwise, it will grow taller than the photo itself (which looks bad).
Image Block – Poster Style (Left)
We've added a hoverstate feature using custom code, but it only applies to the Main Text and not the Subtitle.
Video Block (Right)
Don't forget to choose/upload a Custom Thumbnail when using a Video Block! If you forget this step, the yellow Play icon will not show up. (It's another custom code hack.)
Hover over me to see a surprise