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

Locations

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:


			
WSMLocations

			

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

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    
			858-565-7792
    
			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    
			760-746-3193
    
			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    
			619-442-8689
    
				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    
			951-326-2880
    
			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: