Special Elements
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):
Set up:
This can be a little tricky to set up because of all the separate elements involved, but it's basically as follows:
- A template called "TPL - Colorbox" that uses a stylesheet called "custom_colorbox.css"
- A site page called "Shared Locations" to contain the HTML that is used by both the Colorbox and the Footer.
- A template variable assignment to call the page ID of the shared locations site page to be used in the Footer
- 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"
- 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:
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:
-
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 -
San Diego, CA
7915 Balboa Ave.
San Diego, CA 92111 858-565-7792 M-F 9am-6pm PST
Sat 9am-3pm PST
Sun Closed -
Escondido, CA
2645 Auto Park Way
Escondido, CA 92029 760-746-3193 M-F 9am-6pm PST
Sat 9am-3pm PST
Sun Closed -
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 -
Temecula, CA
26901 Jefferson Ave #101
Murrieta, CA 92562 951-326-2880 M-F 9am-6pm PST
Sat 9am-3pm PST
Sun Closed
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
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 -
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 -
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 -
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 -
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: