web
You’re offline. This is a read only version of the page.
close
Checkmark

Thank you for your feedback

How do I change the Sign In and Register link colors?

Learn about changing the look and hue of links in Customer Registration.

Article ID: SLN19194

Note: The following information is not applicable to the default themes in Theme Manager.

By default, Sign In, Register, My Account, and Sign Out link colors displayed on store pages are black or white, depending on the background color used on your template (black is used for templates with light background colors, while white is used for templates with dark background colors). If you are using Editor 3.0 templates and you wish to change the color of these links, you may do so by modifying the css-edits file in Store Manager.

Access the css-edits.css file

  1. Sign in to your My Services page.
  2. Click the Store link.

  3. Go to Store Editor.
    The Store Editor link is under Edit.
  4. From the Advanced Editor toolbar, go to Contents.
    The Contents button.
  5. Click the edit icon next to css-edits.
    The Edit icon next to css-edits
  6. In the Css-text field, add the following CSS, with the color for each link style changed to the value you wish to use. For example, if you wished for your link colors to be navy blue, you could use the hexadecimal value #004. If you wished for your hover-over link color to be charcoal gray, you could use the hexadecimal value #333. These values are used in the example below (highlighted in red):
    The Css-text field
    #yscp_welcome_msg { margin:0px 10px 0px 5px; display:none; line-height:20px; color:#004; }
    #yscp_signin_link { display:none; line-height:20px; color:#004; }
    #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:#004; line-height:20px; }
    a.yscp_link:hover { font-family:verdana; color:#333; text-decoration:underline; line-height:20px; }
    Note: Styles and what they correspond to are listed in the table below.
  7. Click the Update button.
    The Update button.
  8. Publish when ready.
    The Publish Options button.

 

Style nameDescription
#yscp_welcome_msgWelcome message displayed on store pages when the customer is signed into their account.
#yscp_signin_linkSign In and Register links displayed on store pages when the customer is not signed into their account.
#yscp_signout_linkSign Out link displayed on store pages when the customer is signed into their account.
#yscp_myaccount_linkMy Account link displayed on store pages when the customer is signed into their account.
.yscp_boldThe bold style applied to the customer's name displayed on store pages when the customer is signed into their account.
a.yscp_linkStyles applied to the Sign In, Register, Sign Out, and My Account links displayed on store pages.
a.yscp_link:hoverStyles applied to the Sign In, Register, Sign Out, and My Account links when hovered over with a mouse.

If you wish to customize elements of customer registration pages other than the Sign In, RegisterSign Out, and My Account links, and welcome message text color, please see our Customer Registration CSS Reference help page.