Welcome Guest
My Account
Need Help?
RPM Motorsports
919-661-RWHP(7947)
Mon-Fri 8:30am-5:30pm (EST)
Description: Set up for creating shared locations for footer and colorbox and a separate specially styled locations page.
http://orw.webshopmanager.net - Off Road Warehouse
This can be a little tricky to set up because of all the separate elements involved, but it's basically as follows:
Special Elements
Special Notes/Instructions:
{{* Locations List ID *}} {{ assign var='locatiowsm_tpl' value='10437' }}
Special Notes/Instructions: Variable created in the template head.
{{ 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.
Locations
Special Notes/Instructions:
/**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.
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.
/**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"
Special Notes/Instructions: This is the code that is used by both the locations in the Footer and the Colorbox.
Click any store for hours and directions
Special Notes/Instructions:
/**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: