How To

Blog

  • posted: Jun. 28, 2019

Click Here For Instructions Document

Make a new partial

  1. Click on "Advanced Editor"
  2. Click on "Partials"
  3. Make a new partial called "pop-up.htm"


 

Paste the below code into the partial file then click save.

{% component 'editable' file="pop-up.htm" %}


Paste the below code into Assets -> client -> css -> custom.css at the top

/*---------------Pop up css------------*/ #css-only-modals { position:fixed; pointer-events:none; left:0; top:0; right:0; bottom:0; z-index:10000000; text-align:center; white-space:nowrap; height:100%; } #css-only-modals:before { content:''; display:inline-block; height:100%; vertical-align:middle; margin-right:-.25em; } .css-only-modal-check { pointer-events:auto; display:none; } .css-only-modal-check:checked ~ .css-only-modal { opacity:1; pointer-events:auto; } .css-only-modal { width: 700px; background:#fff; z-index:1; display:inline-block; position:relative; pointer-events:auto; padding:25px; text-align:right; border-radius:4px; white-space:normal; display:inline-block; vertical-align:middle; opacity:0; pointer-events:none; max-width: 90%; } .css-only-modal h2 { text-align:center; } .css-only-modal p { text-align:left; } .btn-primary:hover { color:#fff; background-color:#999; border-color:#999; } .btn-primary { color:#fff; background-color:#777; border-color:#777; border-radius: 4px; padding: 6px 12px; } .css-only-modal-check:checked ~ #screen-shade { opacity:.5; pointer-events:none; } #modal1 { display: none; } #screen-shade { opacity:0; background:#000; position:absolute; left:0; right:0; top:0; bottom:0; pointer-events:none; transition:opacity .8s; } .css-only-modal-content {max-height:80vh; overflow-y:auto; } /*------------End pop up css------*/ 


Add the partial to the home layout

  1. Click on Layouts -> custom-home.htm
    • IF custom-home.htm doesn't exist, click on home and click "Create custom override" under home.htm in the orange bar.
      • IF you can't see "Create custom override" close custom.css and home.htm, and reopen home.htm, it should then appear.
  2. Paste the below code to the bottom of the file and click save.

{% partial 'pop-up' %}


Add the content to the pop up

When you reload the normal editor, the pop up will appear, you can now click on it and edit it like any editable component.


To remove the pop-up

  1. Go into the Advanced Editor
  2. Click on Layouts and custom-home layout
  3. Delete {% partial 'pop-up' %} from the layout and click save

Hours of Operation

Monday  

8:00 am - 6:00 pm

Tuesday  

8:00 am - 6:00 pm

Wednesday  

8:00 am - 6:00 pm

Thursday  

8:00 am - 6:00 pm

Friday  

8:00 am - 6:00 pm

Saturday  

Closed

Sunday  

Closed