Change Font in Shopping Cart Forms

[smarlow]

Hello,
I'm having a bit of a problem with my shopping cart. I've used my own template and added the tags from the quick and easy template tutorial. When I went into my shopping cart I noticed all of the font in the text-entry fields of my shopping cart are white (coupon, gift cert., address, billing info, etc.). I've tried going into the sc_css to see if it was something in there but couldn't find anything. Does anyone know how to change the font color so when my customers type their information they can see what they're typing in?

Thanks!

[Jim]

View the html source of the page, look at what style is assigned to the input fields and modify that style to have the color you want.

[smarlow]

Do you mean with my custom html? I tried that and it didn't work. I feel like either the SS java script or css is overriding whatever I do in my custom template.

[Jim]

What is the URL to the page with the problem. Without seeing the problem it is nearly impossible to second guess what is going on.

[smarlow]

Oh! Sorry. I'm new to this :/

The url is http://tinyurl.com/39ffyox

and this is the SS code for the form on that page

Code: Select all

[-- SC_Form --]
<table border="0" width="100%" align="center" font-color="black">

  [-- IF SC_Registration --]
    <tr>
      <td align="center" font-color="black">
        [-- SC_Registration --]
      </td>
    </tr>
  [-- END_IF --]

  <tr>
    <td align="center">[-- SC_Reward_Program --]</td>
  </tr>

  <tr>
    <td align="center">
      [-- SC_ShowBasket --]
    </td>
  </tr>

  <tr>
    <td align="right">
      [-- SC_Cart --]
    </td>
  </tr>
  <tr>
    <td align="right">
      <table border="0" cellpadding="0" cellspacing="0" style="line-height:150%" font-color="black">
        <tr>
          <td align="left" valign="top">
            <!-- Table for the shipping and tax selections etc. -->
            <br>[-- SC_Tax_Shipping --]
            [-- SC_Surcharge --]
          </td>

          <td width="20px"> </td>
 
          <td valign="top">
            <!-- Table for totals, etc. -->
            [-- SC_Totals --]
          </td>
        </tr>
      </table>
    </td>
  </tr>

  [-- IF SC_Coupon --]

  <tr>
    <td align="center">
      <br><table border="0" cellpadding="3" cellspacing="0">

          <td width="190" align="right"><font size="2">[-- STORE.CouponCaption --]</font></td>      
         <td colspan="2" width="183">[-- SC_Coupon --]</td>
          <td width="244" align="left">
            <font size="2" color="black">
            [-- IF SC_Coupon_Button --]
              [-- BUTTON ApplyCoupon --]
            [-- ELSE --]
             [-- STORE.EnterCoupon --]
            [-- END_IF --]
            </font>
          </td>
          <td colspan=2 width="81"></td>
        </tr>
      </table>
    </td>
  </tr>
  [-- END_IF --]
<br/>
<br/>
[-- IF SC_GiftCert --]
  <tr>
    <td align="center">
           [-- STORE.EnterGiftCert --]
           [-- IF SC_GiftCert_Button --]
             [-- STORE.GiftCert_Redeem --] 
           [-- ELSE --]
             [-- STORE.GiftCert_Recalculate --] 
           [-- END_IF --]
      <br><table border="0" cellpadding="3" cellspacing="0">
        <tr>
          <td colspan="2">[-- SC_GIFTCERT --]</td>
          <td align="left">
            [-- IF SC_GiftCert_Button --]
              <font size="2" color="black">[-- BUTTON ApplyGiftCert --]</font>
            [-- END_IF --]
          </td>
        </tr>
      </table>
    </td>
  </tr>
  [-- END_IF --]
<tr>
    <td class="buttons">
      [-- BUTTON Recalculate --] [-- BUTTON EmptyCart --]
    </td>
  </tr>

  <tr>
    <td class="buttons">
      <small><i>[-- STORE.SC_AnyChanges --]</i></small>
    </td>
  </tr>

  [-- IF SC_OrderingInstructions --]
  <tr>
    <td class="orderinginstructions">
 [-- SC_OrderingInstructions 4 60 --]
    </td>
  </tr>
  [-- END_IF --]

    <tr>
    <td class="paymentselection">
      [-- SC_PaymentSelection --]
    </td>
  </tr>

  <tr>
    <td class="buttons"><table class="checkout">
      <tr>
        <td class="checkout">[-- BUTTON ContinueShopping --]</td>
        <td class="checkout">[-- BUTTON Checkout --]</td>
      </tr>
    </table></td>
  </tr>

[-- IF ShopSiteSecurityImage --]
  <tr>
    <td class="sc_secure_image">[-- ShopSiteSecurityImage --]</td>
  </tr>
[-- END_IF --]

</table>
</form>

Thanks!

[Jim]

you have a section of css that is
input {
background-color:#ffffff;
border:none;
font-size:12px;
color:#fff;
}

That sets all the input field backgrounds to white and the text color to white. Change the line color: #fff; to something like color: #000000; which would change the text color to black.

I'm not sure whether the css is in your template file directly or in an include file so you will have to look at the template to see where it is coming from.

[smarlow]

Can't believe I missed that!

Thank you!

[Jim]

Well, it was white text on a white background so I can see how you could over look it.