Formatting the "thankyou_err" messages table

[LostInCode]

I need to reformat the ugly table that pops up with warning messages on the shipping/payment page. Specifically, the [-- ShopSiteMessages --] tag renders a funky 80's styled table with a warning icon (warning-yellow.gif).

This is the html that renders when a customer fails to enter in a required data field:

Code: Select all

<p>
<table class="thankyou_err" border="1" cellpadding="5" cellspacing="0">
<tr>
<td class="thankyou_err" bgcolor="#FFFFCC">
<img src="https://--------------.com/store/shopsite-images/en-US/msg/warning-yellow.gif" width="30" height="29">
</td>
<td class="thankyou_err" bgcolor="#FFFFCC">
Need to make a selection for <b>Age Verification: Year</b>.
<p>
</td>
</tr>
</table>
<p>

I've modified the sc_shipping.css sheet to include the following code:

Code: Select all

table.thankyou_err {
  text-align: center;
  font-size: 11px; 
  font-style: normal; 
  font-family: Verdana, Helvetica, Arial;
  border: 1px #444444 dotted;
  color: #FF0000;
}
td.checkout_err, td.thankyou_err {
  color: #FF0000;
  font-size: 11px; 
  font-style: normal; 
  background-color: #eeeeee;
}

But that ugly table still creeps in with forced border="1" cellpadding="5" cellspacing="0" styling. And I really need to get rid of that cheesy gif. I can't find an option to remove it anywhere.

Is there a way to fully edit the properties of this table? If so, please please tell me where to find the style sheet or configuration for this warning table.

Thanks!!!

P.S. I'd love to change the wording "Need to make a selection for..." as it's a poorly formed sentence. If anything, it should say "Please make a valid selection for..."

...

[loren_d_c]

You can't directly change the HTML structure of the table, but defining CSS styles for the classes assigned to the HTML table elements should always override the inline HTML attributes of those tables, so if yours is not doing this, then you either have your custom CSS in the wrong place or there is additional CSS after yours that defines it differently.

Regarding the yellow triangle image, I don't think you can get rid of it in the HTML, but I think you can probably do something via CSS so that images in that particular td class don't display.

As far as the sentence grammar goes, most text in the shopping cart should be configurable via the Preferences -> Store Text menus, look for it in there.

-Loren

[LostInCode]

Thanks for the quick reply. In response:

1. Custom CSS is not in error. CSS does not add attributes directly to the <table> tag. The bold part of <table class="thankyou_err" border="1" cellpadding="5" cellspacing="0"> is not CSS-generated code, but rather non-CSS html generated within ShopSite; something archaic within ShopSite CGI that really needs to be brought into this decade.

2. The bad wording "Need to make a selection for..." is not available for edit in any of the Preferences -> Store Text menus.

Bummer. These little ShopSite bugs are so frustrating.

...

[loren_d_c]

Properly defined and placed CSS (has to come before the HTML in question) would override the regular HTML attributes hardcoded in the table tags themselves.

-Loren

[loren_d_c]

FYI, I put the following CSS in my ShopSite's Commerce Setup -> Order System -> Shopping Cart field labeled 'Text at the top of the Shopping Cart screen' and it removed the table border on the error messages on the initial shopping cart screen:

Code: Select all

<style type="text/css">
<!--
table.checkout_err, td.checkout_err {
   border: 0px none;
}
-->
</style>

Note that you would also need to do the same for the Commerce Setup -> Order System -> Checkout field labeled 'Text at the top of the Checkout screen' to handle the error table on the checkout screen, and if you are using Google Checkout then you will probably also need to add it to the Commerce Setup -> Order System -> Shopping Cart field labeled 'Text at the top of the Google Pre-Checkout Shopping Cart screen'.

Putting the CSS code here does not put it in the head section of the HTML, however since most of the other CSS should be in the head section this ensures that this custom CSS comes after all other CSS, and before the HTML table elements that you are defining in this custom CSS.

-Loren

[LostInCode]

Thanks Loren - adding the style to the 'Text at the top of the Checkout screen' handled the border issue.

I'll replace ye olde gif with something nicer and that little problem will be solved. I still wish there was a way to handle the grammar of the error message.

---

[shoclabs]

I'll replace ye olde gif with something nicer and that little problem will be solved. I still wish there was a way to handle the grammar of the error message.

---

Did you managed to change the yellow image? IF so I would appreciate if you could tell me how you did it. For the life of me , I can't figure it out

[LostInCode]

Did you managed to change the yellow image? IF so I would appreciate if you could tell me how you did it. For the life of me , I can't figure it out

Easy - log into your site using an FTP program and look for this file:
../store/shopsite-images/en-US/msg/warning-yellow.gif

Rename it to something like warning-yellow.old and upload the new warning image you'd like to use. Make sure you name the better looking image the same as the old one - warning-yellow.gif.

With the old file out and the new file in, your cart error page should look a little less 80's. Good luck. =)

[Jim]

Note that this will only work if you are the only one using that particular install of ShopSite. If you are in a mall situation then all stores use the same image files and changing it for one would change it for all. If you don't know if your store is sharing cgis and images contact your host.

[mjbrunelle]

In your template, the div gives you and element id to reference

Code: Select all

<div id="errormessage">
     [-- ShopSiteMessages --]</br>
     <script language="javascript">errorImage();</script>
     </div>

In a script file:

Code: Select all

<script language="javascript"  type="text/javascript">

function errorImage()
    {
    var numImages = document.getElementById("errormessage").getElementsByTagName("img");
    numImages[0].setAttribute("src","https://[your store url]/store/media/imagefile.png");
    }

Using the div anchor, you find the <img> tag in the division. Since there is only one we just update the attribute for the first location [0]. You can put this in a loop and update multiple message images as well.

besure to specify https for secure server, and you can use any image you want in your image directories.

MarkB
[/code]