Training Video by pb+j

Approximately ___hours long. Best viewed in Chrome or Firefox.

Website Assets by pb+j

All parallax banners, photos, miscellaneous graphics, etc.

• Each page has it’s own folder with the saved images.

• ilustrator / photoshop files folder has all the working files of images.

Regular H1

small H1

Heading 2

Heading 3

Body Copy

This code block allows you to have vertical text with a wavy underline.

To edit this code only change the bolded text: <div class="vertical-text">Subheader</div>

This code block allows you to have mixed text lines using Magpie Specific fonts.

To edit this code only change the bolded text:

<div class="key-messaging-magpie"style="padding: 20px; text-align:left;"><div>
<h2>Bring your</h2><br><h3>kids &</h3><h2> amigos</h2>
</div>
</div>

This code block allows you to have mixed text lines using Magpie Specific fonts.

To edit this code only change the bolded text:

<div class="key-messaging-el-patio"style="padding: 20px; text-align:left;"
<div>
<h2>Bring your</h2><br><h3>kids &</h3><h2> amigos</h2>
</div>
</div>

To get the yellow Magpie angel make sure that your URL Slug (in the page section details) ends with -magpie-angle

To get the aqua El Patio angel make sure that your URL Slug (in the page section details) ends with -patio-angle

Custom Backgrounds for Miles

Background patterns (icons for magpie & el patio) + texturing seen on Magpie have been uploaded to each page individually. You can re-use or create your own and upload the background to the page section by selecting the section in the side panel. Once you found the page section you want to add a background to open it’s details and go to the media section. To the left is an example of the ‘Specials & Events’ page.

You can find all the assets for backgrounds here:

To have this border style make sure that your URL Slug (in the page section details) ends with -hero-option-1

To have this border style make sure that your URL Slug (in the page section details) ends with -hero-option-2

To have this border style make sure that your URL Slug (in the page section details) ends with -hero-option-3

To have this border style make sure that your URL Slug (in the page section details) ends with -hero-option-4

To have this border style make sure that your URL Slug (in the page section details) ends with -hero-option-5

To have this border style make sure that your URL Slug (in the page section details) ends with -hero-option-6

To change these images on hover will require you to go into the Custom CSS panel.

Find the CSS panel by going to DESIGN > CUSTOM CSS.

The lines of cod you will be looking for making edits to the hover states are 2835 - 2854.

Lines 2835 - 2838 is the hover state for Sunday. Use Sunday as an example of how the code should look when you are done.

Lines 2839 - 2854 are all the other days (Monday - Thursday).

Looking at Monday specifically (Lines 2839 - 2842) you will notice that /* and */ start and end the line of code, which is different from Sunday. The reason for this is for commenting out the code until we are ready to use it. After you have replaced the image in the (‘URL HERE’) section delete /* and */ and hit save on the CSS panel.

Uploading an image to the CSS.

In order to change an image hover state or add a new image hover state you will need to upload the image to the CSS editor. You will upload the image by clicking ‘Manage Custom Files’ at the bottom of the editor. Once you do this the right side panel will pop open. You can click in the light grey area of this panel of drag your file right into this panel from your computer to upload.

Once you have your image uploaded you will want to place it into one of the days of the week. Look for this text: background: url(‘URL HERE’) no-repeat 50% 50% ~”/” cover;

You will want to upload your image in the (‘URL HERE’) area. Make sure to keep the single line quotes.

Your URL should look a little something like this: (‘//static1.squarespace.com/static/5c701fe0d86cc95b5c273bcf/t/5c7ee64c971a184783912c8c/1551820364709/monday-hover-image.jpg’)

Below is a markdown template. It is specifically styled for the menu pages & will appear as the proper styling when added to each menu page.