If you use a dark background color on your storefront, the text in some areas of your site may not be clearly visible. One example is the ticket.asp file (the one used when customers reply to an existing CRM ticket).

In this case, the following code will often work to correct those pages where the text and the background similar in color.

Before you make any changes, be sure to archive your theme!

  1. In your Admin Area, go to Design > File Editor.
  2. Under your Shortcuts links, choose the "template_nn.html" file.
  3. Copy the code below and paste just above the closing </body> tag.
  4. Click Save.
<script type="text/javascript">
 // Fixes pages using black background themes

 if ( PageName() == 'affiliate_signup.asp' ||
      PageName() == 'myaccount_affiliate.asp' ||
      PageName() == 'myaccount_affiliate_banners.asp' ||
      PageName() == 'kb_results.asp' ||
      PageName() == 'ticket.asp' ||
      PageName() == 'one-page-checkout.asp' ||
      PageName() == 'ticket_list.asp')  
 document.write("\<style>#content_area td {background: #000000;
 }<\/style>");

 // Fixes multi-child add to cart for black themes

 if ( PageName() == 'productdetails.asp')
 document.write("\<style>.smalltext { color:#ffffff;  
  background-color: #000000;
  }\n.productnamecolorSMALL { color: #ffffff;
  background-color: #000000;  
  }\n.colors_background_main {background-color:#000000 ! important;}  
  \n.colors_backgroundlight {background-color:#000000 ! important;
  }<\/style>");

 //Fixes error messages on Ticket.asp

 if ( PageName() == 'ticket.asp') {
 document.write('<' + 'style type="text/css">td#content_area  
  table tr td table tr td font b {color: #ffffff ! important;
  }<' + '/style>');  
 }

 // Fixes pages using black background themes
 if (PageName() == 'one-page-checkout.asp') {
 var list = document.getElementsByTagName("font");
 for (var i = 0; i < list.length; i++) // search for border color
 if (list[i].color == "#000000") {
 list[i].color = "white";
 break;
 }
 }
 </script>

<script type="text/javascript">
 // Fixes pages using black background themes

 if ( PageName() == 'affiliate_signup.asp' ||
      PageName() == 'myaccount_affiliate.asp' ||
      PageName() == 'myaccount_affiliate_banners.asp' ||
      PageName() == 'kb_results.asp' ||
      PageName() == 'ticket.asp' ||
      PageName() == 'one-page-checkout.asp' ||
      PageName() == 'ticket_list.asp')
 document.write("\<style>#content_area td {background: #000000;
 }<\/style>");

 // Fixes multi-child add to cart for black themes

 if ( PageName() == 'productdetails.asp')
  document.write("\<style>.smalltext { color:#ffffff;  
  background-color: #000000;
  }\n.productnamecolorSMALL { color: #ffffff;  
  background-color: #000000;
  }\n.colors_background_main  
  {background-color:#000000 ! important;  
  }\n.colors_backgroundlight {background-color:#000000
  ! important;}<\/style>");

 //Fixes error messages on Ticket.asp

 if ( PageName() == 'ticket.asp') {
  document.write('<' + 'style type="text/css">td#content_area  
  table tr td table tr td font b {color: #ffffff !  
  important;}<' + '/style>');
 }

 // Fixes pages using black background themes
 if (PageName() == 'one-page-checkout.asp') {
      var list = document.getElementsByTagName("font");
      for (var i = 0; i < list.length; i++)
// search for border color
        if (list[i].color == "#000000") {
              list[i].color = "white";
              break;
              }
 }
 </script>

For more information, please refer to "V-Gloss and Other All-Black Theme Issue".

Did this answer your question?