You may modify the visual settings of the customer registration links that appear on your store pages, the sign-in and register pop-ups, the checkout options page, and your registration and customer account pages using custom CSS. New CSS elements have been added to Store Editor templates, and to the default CSS file in Checkout & Registration Manager.
Note: CSS customization is an advanced option available for merchants who are comfortable with modifying CSS, and for developers. Merchants and developers should use extreme caution when making changes to the CSS for templates, and checkout, registration, and customer account pages, for adjusting padding or margins or changing the position of items. These values have been determined to work for the various template designs and flow settings.
Store Editor templates
The following CSS elements have been added for Customer Registration:
| Style name | Description | | #yscp_welcome_msg | Welcome message displayed on store pages when the customer is signed into their account. | | #yscp_signin_link | Sign In and Register links displayed on store pages when the customer is not signed into their account. | | #yscp_signout_link | Sign Out link displayed on store pages when the customer is signed into their account. | | #yscp_myaccount_link | My Account link displayed on store pages when the customer is signed into their account. | | .yscp_bold | The bold style applied to the customer's name displayed on store pages when the customer is signed into their account. | | a.yscp_link | Styles applied to the Sign In, Register, Sign Out, and My Account links displayed on store pages. | | a.yscp_link:hover | Styles applied to the Sign In, Register, Sign Out, and My Account links when hovered over with a mouse. | | #ys_superbar | Controls the dimensions of the area of the page used for customer registration links, and the mini-cart and floating cart. | | #ys_cpers | Controls the alignment of the customer registration text and links, if enabled. | | #yfc_mini | Controls the alignment of the mini-cart and floating cart, if enabled. | #custRegDiv a.container-close
.yui-skin-sam .yui-panel .bd, .yui-skin-sam .yui-panel .ft
.yui-skin-sam .yui-panel .bd | Styles applied to the Sign In and Register pop-ups. |
|
An example of this CSS with attributes defined for each element is below:
#ys_superbar {left:0; margin:0 auto; position:static; top:0; width:762px; height:22px;}
#ys_cpers { float:left; }
#yfc_mini { float:right; }
.ys_clear { clear:both; }
#yscp_welcome_msg { margin:0px 10px 0px 5px; display:none; line-height:20px; color:#000; }
#yscp_signin_link { display:none; line-height:20px; color:#fff; }
#yscp_signout_link { margin-left:10px; display:none; line-height:20px; }
#yscp_myaccount_link { display:none; line-height:20px; margin-right:10px; margin-left:10px; }
.yscp_bold { font-weight:bold; }
a.yscp_link { font-family:verdana; text-decoration:none; color:#000; line-height:20px; }
a.yscp_link:hover { font-family:verdana; color:#c07dcc; text-decoration:underline; line-height:20px; }
#custRegDiv a.container-close { top:5px; }
.yui-skin-sam .yui-panel .bd, .yui-skin-sam .yui-panel .ft { background-color:#fff; }
.yui-skin-sam .yui-panel .bd { padding:0px; }
#iframe_id { width:679px; border:1px solid #000; padding:0px; }
#custRegDiv_h.hd { display:none; }
#custRegDiv_mask.mask { background-color:#000000; opacity:0.5; filter:alpha(opacity=50);}
#loadingDiv {height:210px; width:679px; position:absolute; background:#ececec;}
img.loadingImg {margin-top:90px; margin-left:20px;}
Checkout & Registration Manager
Customer Registration CSS elements have been added to the default CSS file in Checkout & Registration Manager, and are used to style the Sign In and Register pop-ups, the checkout options page, the registration option displayed on the order confirmation page (for buyers who use guest checkout, if both guest checkout and the option to offer registration on the order confirmation page are enabled), the registration form, and My Account pages.
View Customer Registration CSS elements added to the default CSS file
For help with downloading the default CSS file in Checkout & Registration Manager, uploading a custom CSS file, and previewing your changes, please see:
Using a custom CSS file
If you wish to customize the customer registration buttons that are displayed on your customer registration pages, you may do so in the Visual Customization section of Checkout & Registration Manager.
