Special Elements

Locations - Shared Colorbox and Footer Setup

Description: Set up for creating shared locations for footer and colorbox and a separate specially styled locations page.

Example Site:

http://orw.webshopmanager.net - Off Road Warehouse

Screenshot Examples (from Off Road Warehouse):

Off Road Warehouse Locations Colorbox
Off Road Locations Footer
Off Road Warehouse Locations site page

Set up:

This can be a little tricky to set up because of all the separate elements involved, but it's basically as follows:

  1. A template called "TPL - Colorbox" that uses a stylesheet called "custom_colorbox.css"
  2. A site page called "Shared Locations" to contain the HTML that is used by both the Colorbox and the Footer.
  3. A template variable assignment to call the page ID of the shared locations site page to be used in the Footer
  4. A site page for the Colorbox that uses the Smarty "page" model to call the HTML from the "Shared Locations" site page and is assigned to the template "TPL - Colorbox"
  5. A separate, more detailed site page named "Locations" with named anchors and small google maps for each location

Colorbox Template - "TPL - Colorbox" - HTML

Special Elements

Special Notes/Instructions:

Locations List Template Variable Assignment:

{{* Locations List ID *}}
{{ assign var='locatiowsm_tpl' value='10437' }}

Special Notes/Instructions: Variable created in the template head.

Locations Colorbox site page - Page Model:

{{ getbyid assign='locations' model='page' id='10437' }} {{ $locations->data }}

Special Notes/Instructions: This is a site page for the Colorbox that pulls in the HTML using the smarty "page" model and is assigned to the Colorbox template.

Link in Header to open the Locations in the Colorbox - HTML


Special Notes/Instructions:

Locations Colorbox CSS - custom_colorbox.css:

/**Colorbox Locations Styling
html {font-size:62.5%;}
body.colorbox_body {font-size:1.2rem;margin:0; padding:0;}
.locations_colorbox {background:#b50e14;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; font-family:"Lato", arial, helvetica;; padding:10px;}

/**Generic/Shared Styling
.wsm_locations_list {list-style:none; margin:0; padding:0;}
.wsm_locations_list li {background:#333; clear:both; color:#fff; margin:0; padding:5px; overflow:auto;}
.location_img, .wsm_locations_list .lft_col {display:block; float:left;}
.wsm_locations_list .lft_col {width: 110px;}
.wsm_locations_list .rt_col {display:block; float:right; width:100px;}
.wsm_locations_list .location_img {margin:0 10px 0 0;}
.wsm_locations_list .phone {display:block;}
.wsm_locations_list .lft_col h4, .wsm_locations_list .lft_col p {font-size:1.2rem;} {font-size:1.4rem;margin:0;}
.wsm_locations_list .lft_col h4 a {color:#d1a401;}
.wsm_locations_list .lft_col a {color:#fff; text-decoration:none;}
.wsm_locations_list .lft_col h4 {margin:0;}

Special Notes/Instructions: CSS that goes into a separate CSS file called "custom_colorbox.css". Controls styling of the Locations in the Colorbox.

Locations Footer Smarty Code:

Special Notes/Instructions: Smarty code using the "page" model to pull HTML into the default template footer.

Locations Footer CSS:

/**Footer Locations
.wsm_footer_locations {float:left; width:274px;}
.wsm_footer_locations h3 {color:#ccc; font-size:2em;font-weight:700; margin:0;padding:5px 20px 0 0; position:relative; text-align:right; text-transform:uppercase; height:42px;}
.wsm_footer_locations h3 span {background:transparent url(/files/images/orw-sprite.png) no-repeat left -690px; height:40px; position:absolute; top:3px; left:2px;text-align:left; text-indent:-9999em; text-transform:uppercase; width:120px;}
/* style the locations list in the footer only */
.wsm_footer_locations > div {background:#d3d3d3;}
.wsm_footer_locations > div span.wsm_click_location {color:#383838; font-weight:700; text-decoration:underline;}
.wsm_footer_locations .wsm_locations_list {list-style:none; margin:0; padding:0;}
.wsm_footer_locations .wsm_locations_list li {color:#383838; margin:0; padding: 5px 3px; overflow:auto;}
.wsm_footer_locations .wsm_locations_list li:nth-child(even) {background:#c1c1c1;}
.wsm_footer_locations .wsm_locations_list li:first-child {border-top:none;}
.wsm_footer_locations .wsm_locations_list li h4 {font-size:1em;margin:0;}
.wsm_footer_locations .wsm_locations_list li h4 a {color:#383838; display:block; float:left; }
.wsm_footer_locations .wsm_locations_list li h4 a:hover {color:#ccc; text-decoration:none;} 
.wsm_footer_locations .wsm_locations_list li h4 span {clear:right;float:right; text-align:right;} 
.wsm_footer_locations .wsm_locations_list li > span {display:block;}
.wsm_footer_locations .wsm_locations_list span.lft_col {float:left; width: 158px;}
.wsm_footer_locations .wsm_locations_list span.rt_col {float:right; width: 105px; font-size:1.2rem;}
.wsm_footer_locations .wsm_locations_list li > span a {color:#383838;display:block !important; float:none; font-weight:normal; font-size:1.2rem;}
.wsm_footer_locations .wsm_locations_list li > span h4 a {font-weight:bold; font-size:1.2rem;}
.wsm_footer_locations .wsm_locations_list li:first-child > span h4 a {color:#c51218;font-weight:bold; font-size:1.2rem;}
.wsm_footer_locations .wsm_locations_list li > span a:hover{color:#c51218; text-decoration:none;} 
.wsm_footer_locations .wsm_locations_list li > span.location_img {display:none;}
.wsm_footer_locations .wsm_locations_list .phone {display:block; font-size:1.4rem; font-weight:bold;}
.wsm_footer_locations .wsm_locations_list li:first-child .phone {color:#c51218}

Special Notes/Instructions: CSS for the Locations in the Footer. Note that it is targeting a parent wrapper class called ".wsm_footer_locations"

Shared Locations site page - This is the code that is used by both the Footer and the Colorbox:

Special Notes/Instructions: This is the code that is used by both the locations in the Footer and the Colorbox.

Locations Site Page with Google Maps - HTML:

Click any store for hours and directions
  • Online Services

    Online Services

    Para ayuda en Español francisco@orwmail.com Nextel:125*43883*2
    1-800-341-7757 M-F 7am-6pm PST
    Sat-Sun Closed
    ORW Store Tours
  • San Diego, CA Store Tour

    San Diego, CA

    7915 Balboa Ave
    San Diego, CA 92111
    M-F 9am-6pm PST
    Sat 9am-3pm PST
    Sun Closed

    View Larger Map
  • Escondido, CA Store Tour

    Escondido, CA

    2645 Auto Park Way
    Escondido, CA 92029
    M-F 9am-6pm PST
    Sat 9am-3pm PST
    Sun Closed

    View Larger Map
  • El Cajon, CA Store Tour

    El Cajon, CA

    425 N. Marshall ave.
    El Cajon, CA 92020
    M-F 9am-6pm PST
    Sat 9am-3pm PST
    Sun Closed

    View Larger Map
  • Temecula, CA Store Tour

    Temecula, CA

    26901 Jefferson Ave #101
    Murrieta, CA 92562
    M-F 9am-6pm PST
    Sat 9am-3pm PST
    Sun Closed

    View Larger Map

Special Notes/Instructions:

Locations site page with Google Maps - CSS

/**Locations Page
.wsm_locations_page_list {text-transform:uppercase;}
.wsm_locations_page_list li {clear:both; list-style:none; margin:0; padding:10px; overflow:auto; overflow:visible\9; width:98%\9;}
.wsm_locations_page_list li span {display:block;}
.wsm_locations_page_list li:nth-child(even) {background:#efefef;}
.wsm_locations_page_list .lft_col, .wsm_locations_page_list .mid_col, .wsm_locations_page_list .rt_col {display:block; float:left;}
.wsm_locations_page_list .rt_col {float:right;}
.wsm_locations_page_list .rt_col iframe {border:1px solid #a3a3a3;}
.wsm_locations_page_list .lft_col {width:114px; margin:0 10px 0 0;}
.wsm_locations_page_list .lft_col img {border:1px solid #868585;}
.wsm_locations_page_list .mid_col {width:200px; margin-left:20px;}
.wsm_locations_page_list .mid_col h4 {margin:0;}
.wsm_locations_page_list .mid_col .phone_hours {margin:10px 0 0 0;}
.wsm_locations_page_list .lft_col img, .wsm_locations_page_ist .lft_col .store_tour  {display:block;}
.wsm_locations_page_list .store_tour {border:1px solid #ff0008; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display:block; color:#fff; line-height:1.8rem; margin:10px 0 0 0; padding:2px; text-transform:uppercase; text-shadow: 1px 1px 1px #000000; width:100%;}
.wsm_locations_page_list .store_tour span {background:url(/files/images/orw-sprite.png) 0 -1053px no-repeat; padding-left:25px;}
.wsm_locations_page_list #online_serivces h4 {color:#be0006;}
.wsm_locations_page_list .services {font-weight:900;}
.wsm_locations_page_list .services .address {margin:10px 0 0 0;}
.wsm_locations_page_list .services .address, .wsm_locations_page_list .services .address a {color:#333; font-weight:normal;}
.wsm_locations_page_list .mid_rt_col {font-weight:900; float:left; margin: 0 0 0 20px;}
.wsm_locations_page_list .mid_rt_col  .phone {color:#be0006; margin: 0 0 20px 0;}
#online_serivces .rt_col a {margin:0;}

Special Notes/Instructions: