magpie-menu-banner.jpg

Styles for miles

 Resources for Miles

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.


Typography for Miles (General fonts)

Regular H1

small H1

Heading 2

Heading 3

Body Copy


Typography for Miles (Magpie fonts)

To get Magpie fonts make sure that your URL Slug (in the page section details) ends with -magpiefonts

Screen Shot 2019-03-28 at 9.39.30 PM.png
Screen Shot 2019-03-28 at 9.39.34 PM.png
 
 

Typography for Miles (El Patio fonts)

To get El Patio fonts make sure that your URL Slug (in the page section details) ends with -elpatiofonts

 
 

Code Blocks for Miles

Subheader

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>

 

Bring your


kids &

amigos

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>

 

Bring your


kids &

amigos

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>

I'M PINK!

Add some copy in me!

I'M AQUA!

Add some copy in me!


Overlap Sections for Miles

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

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


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:


Hero Banners for Miles

Screen Shot 2019-03-28 at 10.04.44 PM.png

Size of this banner image 1533pixels x 621pixels

 

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

Screen Shot 2019-03-28 at 10.11.29 PM.png

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

Screen Shot 2019-03-28 at 10.14.23 PM.png

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


SPECIALS page - SUMMARY BLOCK FOR MILES

 
 

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’)