Header Elements
Widget Login with Rounded Corners, Seamless border and Drop Shadow
Description: Newer version of login widget that will display login form (when not logged in) or account info (when logged in), contact info, and links to chat, and faq's in drop downs.
Example Site:
http://dap.webshopmanager.net/
Screenshot Example:
Widget Code
{{ widget name='widget_login' store_hours=$hours_of_operation }}
Special Notes/Instructions: This instance uses the "Hours of Operation" which is called from the default template.
CSS
/****************************************************************************
WIDGET LOGIN STYLES
****************************************************************************/
.widget_login {position:absolute; right:0; top:3px; z-index:999999;}
.widget_login p {color: #999; font-size:12px; font-size:1.2rem; font-weight:700; margin:0; padding:0;}
.widget_login_header_welcome {color:#292929; float:left; font-weight:normal !important; line-height:1.2rem; margin:4px 0 0 0 !important; padding:0 10px 0 0 !important;}
.widget_login_header_myaccount .widget_login_loginbar {clear:both; list-style:none; margin:0 0 10px; overflow:hidden; padding:0;}
.widget_login_header_myaccount .widget_login_loginbar li {border-left:1px solid #999; float:left; margin:0 0 0 5px; padding:0 0 0 5px;}
.widget_login_header_myaccount .widget_login_loginbar li:first-child {border-left:none; margin-left:0; padding-left:0;}
.widget_login_header_myaccount .widget_login_loginbar li a {color:#292929;}
.widget_login_header_help {}
.widget_login_header_hover {border:1px solid transparent;border-bottom:none; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; border-top-left-radius: 3px; border-top-right-radius: 3px; cursor:default; float:left; margin-left:10px; padding:0 20px 5px 5px; position:relative; z-index:999999}
.widget_login_header_hover > p:after {content:''; background:transparent url(/files/theme-1/images/superfish-arrows.png) no-repeat 0 -100px; color:#292929; display:block; font-weight:normal; height:10px; margin:0; padding:0;position:absolute; right:5px; top:6px;width:10px;}
.widget_login_header_hover:hover > p:after {content:''; background:transparent url(/files/theme-1/images/superfish-arrows.png) no-repeat -10px -100px; color:#292929; display:block; font-weight:normal; height:10px; margin:0; padding:0;position:absolute; right:5px; top:6px;width:10px;}
.widget_login_header_hover .widget_login_dropdown {background:#f6f6f6;-webkit-border-radius: 4px; -webkit-border-top-right-radius: 0; -moz-border-radius: 4px; -moz-border-radius-topright: 0; border-radius: 4px; border-top-right-radius: 0;-webkit-box-shadow:0 0 3px 1px rgba(0, 0, 0, .6); box-shadow: 0 0 3px 1px rgba(0, 0, 0, .6); border: 1px solid #bdbdbd; color:#666; display:none; padding:8px; position:absolute; right: -1px; top: 22px; width: 183px; font-weight:300;}
.widget_login_myaccount_dropdown {background-image:none !important; background-color:#e1e1e1!important; border-color:#9f9f9f !important;}
.widget_login_header_myaccount.widget_login_header_hover:hover {background:#e1e1e1!important}
.widget_login_header_myaccount .widget_login_dropdown:after,
.widget_login_header_help .widget_login_dropdown:after {border:1px solid #b9b9b9; border-top:none; border-bottom:none; border-left:none; content:''; background: #f6f6f6;display:block; height:8px; position:absolute; right:-1px; top:-5px; width:84px;}
.widget_login_header_myaccount .widget_login_dropdown:after {background:#e1e1e1;width:85px;}
.widget_login_hd_signin a {color:#d32727; font-weight:300;}
.widget_login_header_public_login label {font-size:12px; font-size:1.2rem; font-weight:400;}
#wsm_form_submit {cursor:pointer; margin-top:5px;}
.widget_login_header_hover .widget_login_dropdown > a {color:#333 !important;}
.widget_login_header_hover .widget_login_dropdown > .widget_login_header {font-size:12px; font-size: 1.2rem; font-weight:300; margin:0;}
.widget_login_header_hover:hover {border: 1px solid #b9b9b9; background: #f6f6f6; -webkit-box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .6); box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, .6);}
.widget_login_header_hover:hover > p {background-position:right -30px;color:#d32727; font-weight:700;}
.widget_login_header_hover:hover .widget_login_dropdown {display:block; }
.widget_login_dropdown #wsm_form_submit {background-color:#d32727; border:1px solid #860404; -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .5), 0 0 1px 1px rgba(255, 92, 92, 1) inset; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color:#fff; display:block; float:right; font-weight:300; padding:2px 15px; text-shadow:1px 1px 1px #666; font-size:14px;}
.widget_login_dropdown form input#wsm_form_email, .widget_login_dropdown form input#wsm_form_password {border:none;-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: inset 2px 2px 10px 0px rgba(0, 0, 0, .1); box-shadow: inset 1px 1px 4px 0 #888; padding:6px; width:93%;}
.widget_login_dropdown .widget_login_login_forgotpassword {color:#292929; float:left; display:block; font-weight:normal; font-style:italic; font-size:10px;}
.widget_login_dropdown .widget_recent_orders ul {list-style:none; margin:0; padding:0;}
.widget_login_dropdown .widget_recent_orders ul li {margin:0; padding:0;}
.widget_login_dropdown .widget_recent_orders a {color:#999;}
.widget_login_help_dropdown a {color: #666;display:block; line-height:130%;padding-left: 54px; position:relative;}
.widget_login_help_dropdown a span {display:block; font-size:14px; font-size:1.4rem;}
.widget_login_help_dropdown span.wsm_chat_online a:before, .widget_login_help_dropdown a.faq:before, .widget_login_help_dropdown a.email:before {content:''; background: url(/files/theme-1/images/sprite-icons.png); background-repeat:no-repeat; display:block; position:absolute; width:50px; height:50px; top:0; left:0;}
.widget_login_help_dropdown a.faq {height:40px; margin: 0 0 7px; font-size:10px; font-weight:normal;}
.widget_login_help_dropdown a.faq:before {background-position: left -374px !important;}
.widget_login_help_dropdown a.faq span,
.widget_login_help_dropdown a.email span {color:#d32727; font-weight:700;}
.widget_login_help_dropdown a.email {height:40px; margin:0 0 10px; font-weight:normal; font-size:10px;}
.widget_login_help_dropdown a.email:before {background-position: left -488px !important; }
.widget_login_help_dropdown span.wsm_chat_online a {background-position: left -210px; height:40px; margin:0 0 10px;}
.widget_login_help_info {color:#333 !important;padding:5px; text-align:center;}
.widget_login_help_info p {color:#333;}
.widget_login_help_dropdown .widget_login_help_title {font-size:1.4em; line-height:100%; margin:0;}
.widget_login_help_dropdown .widget_login_help_phone {font-size:1.4em; font-weight:700;line-height:80%; margin:0;}
.widget_login_help_dropdown .wsm_chat_widget {background:transparent url(/files/theme-1/images/sprite-icons.png) no-repeat left -280px; display:block; font-size:10px; height:40px; text-decoration:none;}
.widget_login_help_dropdown .wsm_chat_offline {display:none;}
.widget_login_helpcenter_content hr {display:none;}
Special Notes/Instructions: This instance has different colors for each drop down, rounded corners, drop shadows and a seamless border. In order to make this seamless, there are two :after pseudo elements that are used to cover up the gap between the top tab and the drop down, the widths of which will have to be updated depending on the width of your tabs. You can see how this is set up between lines 20 and 22 in the example above.
Two Column Large Drop Down - Off Road Warehouse
Description: Hard coded drop menu to display brands and categories in right column and specials and featured products in left column. Features fade in and out transitions on drop down.
Example Site:
Screenshot Example:
HTML
Shop Online[[ site_links group='shop_online_lft_col_links' ]]
This Weeks Off Road Deal
[[ widget name='products_featured' id='402268' instance='_weeks_special' imgsize='T' show_more_button='false' show_description='false' show_cart_button='false' title_top='false' limit='1' sort='random' show_price='true' ]]Off Road Parts & Accessories
[[ widget name='cat_menu' instance='_drop' show_second_level='false' show_parent_title='false' ]]Shop by Brandsview all brands »
[[ widget name='brands' links='true' show_name='false' limit='22' sort='-priority,+name' instance='_small' ]]
Special Notes/Instructions:
CSS
/**Shop Online Button And Drop Down
******************************************************************************************/
.wsm_hdr_shop_online {background:url(/files/images/bg-shop-online-btn.png) 0 0 no-repeat; display:block;text-shadow: 1px 1px 3px #000000; color:#fff; font-size:1.8rem; position:absolute;top:92px; left:270px; font-weight:normal; margin:0; padding:18px 0 0 16px; text-transform:uppercase; width:175px; height: 28px;}
.wsm_hdr_shop_online:hover {background:url(/files/images/bg-shop-online-btn-hover.png) 0 0 no-repeat; color:#fff; text-decoration:none;}
.wsm_hdr_shop_online span {font-weight:900;}
.wsm_shop_online_dropdown {background:#f0aa00; opacity:0; padding:10px;position:absolute; left:20px; top:138px; width:878px; visibility:hidden;z-index:999999;
-webkit-transition: all 0.3s ease-out 0.5s;
-moz-transition: all 0.3s ease-out 0.5s;
-ms-transition: all 0.3s ease-out 0.5s;
-o-transition: all 0.3s ease-out 0.5s;
transition: all 0.3s ease-out 0.5s;
}
.wsm_shop_online_wrapper:hover .wsm_shop_online_dropdown {opacity:1; visibility:visible;}
.wsm_shop_online_wrapper:hover .wsm_hdr_shop_online {background:url(/files/images/bg-shop-online-btn-hover.png) 0 0 no-repeat;}
.dropdown_lft_col, .dropdown_rt_col {background:#181818; color:#fff; margin:0; padding:5px; min-height:338px; height:auto !important; height:338px;}
.dropdown_lft_col p, .dropdown_rt_col p {color:#fff;}
.wsm_shop_online_dropdown h3 {-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:1px solid #ff0008; color:#fff; font-size:18px; font-size:1.8rem; font-weight:normal; text-transform:uppercase; padding:5px;}
.wsm_shop_online_dropdown h3 a {float:right; color:#fff; font-size:10px;font-size:1.0rem; font-weight:normal; margin:5px 0 0 0;}
.ie8 .wsm_shop_online_dropdown h3 {clear:both;}
.wsm_shop_online_dropdown h3 span {font-weight:900;}
.dropdown_lft_col {width:250px;}
.dropdown_rt_col {width:600px;}
.weeks_special {font-size:1.6rem !important; position:relative; z-index:10;}
.dropdown_lft_col ul {list-style:none; margin:0 0 10px 0; padding:0;}
.dropdown_lft_col li {margin:0; padding:0;}
.dropdown_lft_col li a {color:#fff; font-size:1.8rem; font-weight:900; text-transform:uppercase;}
#widget_cat_menu_drop {list-style:none; margin:0 0 10px 20px; margin:0 0 20px 20px\9; overflow:hidden; padding:0; }
#widget_cat_menu_drop li {float:left; margin:0; padding:0; width:50%;}
.ie8 #widget_cat_menu_drop li {display:block; float:left; width:50%;}
#widget_cat_menu_drop a {color:#fff; text-transform:uppercase; font-weight:normal;}
#widget_featured_prods_weeks_special {background:#fff;margin:-20px 0 0 0; position:relative; z-index:0; width:100%;}
#widget_featured_prods_weeks_special .widget_featured_prod {width:100%;}
#widget_featured_prods_weeks_special .widget_featured_image {margin:15px 0 0 0;}
#widget_featured_prods_weeks_special .widget_featured_image img {display:block; margin:0 auto; max-height:115px;}
#widget_featured_prods_weeks_special .widget_featured_new_icon {display:none;}
#widget_featured_prods_weeks_special .widget_pricebox {margin:0;}
#widget_featured_prods_weeks_special .widget_featured_title a {color:#333; display:block;margin:10px 0 0 10px;}
#widget_featured_prods_weeks_special .widget_pricebox {padding:0 0 0 10px;}
#widget_featured_prods_weeks_special .wsm_product_saleprice {color:#bc0c11;}
Special Notes/Instructions: