Forums / Templates, Stylesheets, Page Layout / Change colours in the payment information area?

Change colours in the payment information area?

Locked

Started by dozzer on 20 Jan 2009, 5:14 PM · Views: 3,795

Results 1 to 10 of 10
This thread is locked. New replies are disabled.
20 Jan 2009, 5:14 PM
#1
dozzer avatar

dozzer

New Zenner

Join Date:
Jan 2009
Posts:
23
Plugin Contributions:
0

Change colours in the payment information area?

Hi all,

This forum has been a very big help so far :-)

I have a question (who doesn't!)...

In the payment sequence (part 2 of 3)

How do I change the black background on the Paypal text area ?
Can't find the file that this is located in ...

any ideas ?

Doz

21 Jan 2009, 10:46 AM
#2
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Change colours in the payment information area?

If we are to analyze this, we need to see the actual page, not a pic of it.

20 years a Zencart User

21 Jan 2009, 12:03 PM
#3
dozzer avatar

dozzer

New Zenner

Join Date:
Jan 2009
Posts:
23
Plugin Contributions:
0

Re: Change colours in the payment information area?

schoolboy:

If we are to analyze this, we need to see the actual page, not a pic of it.

Ok.. here is the source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> <head> <title>Step 2 of 3 - Payment Information : Tribox.co.uk, The One Stop DVD Shop!</title> <meta name="verify-v1" content="JEuDRGGiJCZapE9rDumgND/gAWDVQX3hXWYXWNSQgqw=" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="keywords" content="ACTION Offike.co.uk Discount IT SuperStore DVD, action movies, blu-ray, hd-dvd, disk, CD Step 2 of 3 - Payment Information" /> <meta name="description" content="Tribox.co.uk : Step 2 of 3 - Payment Information - ACTION Offike.co.uk Discount IT SuperStore DVD, action movies, blu-ray, hd-dvd, disk, CD" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="author" content="Tribox.co.uk" /> <meta name="generator" content="Tribox.co.uk - The One Stop DVD Shop!" /> <meta name="robots" content="noindex, nofollow" /> <base href="http://www.tribox.co.uk/" /> <link rel="stylesheet" type="text/css" href="includes/templates/mostlygrey/css/stylesheet.css" /> <script language="javascript" type="text/javascript"><!-- var selected; var submitter = null; function popupWindow(url) { window.open(url,'popupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=450,height=320,screenX=150,screenY=150,top=150,left=150') } function couponpopupWindow(url) { window.open(url,'couponpopupWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no,width=450,height=320,screenX=150,screenY=150,top=150,left=150') } function submitFunction($gv,$total) { if ($gv >=$total) { submitter = 1; } }

function methodSelect(theMethod) {
if (document.getElementById(theMethod)) {
document.getElementById(theMethod).checked = 'checked';
}
}

//--></script>

</head> <body id="checkoutpaymentBody"> <div id="mainWrapper"> <!--bof-header logo and navigation display--> <div id="headerWrapper"> <!--bof-navigation display--> <div id="navMainWrapper"> <div id="navMain"> <ul class="back"> <li><a href="http://www.tribox.co.uk/">Home</a></li> <li><a href="http://www.tribox.co.uk/logoff">Log Out</a></li> <li><a href="http://www.tribox.co.uk/account">My Account</a></li>
<li><a href="http://www.tribox.co.uk/index.php?main_page=shopping_cart">Shopping Cart</a></li>
<li><a href="http://www.tribox.co.uk/checkout_shipping">Checkout</a></li>
</ul> </div> <div id="navMainSearch"></div> <br class="clearBoth" /> </div> <!--eof-navigation display--> <!--bof-branding display--> <div id="logoWrapper"> <div id="logo"><a href="http://www.tribox.co.uk/"><img src="includes/templates/mostlygrey/images/logo.jpg" alt="Tribox DVD" title=" Tribox DVD " width="300" height="80" /></a></div> <div id="taglineWrapper"> <div id="tagline">The One Stop DVD Shop</div> </div> </div> <!-- <br class="clearBoth" /> remmed out --> <!-- Begin insert for red bar --> <div class="redbar"> <br/> </div> <!-- End insert red bar --> <!--eof-branding display--> <!--eof-header logo and navigation display--> <!--bof-optional categories tabs navigation display--> <div id="navCatTabsWrapper"> <div id="navCatTabs"> <ul> <li>| <a class="category-top" href="http://www.tribox.co.uk/action-c-6">ACTION</a> | </li> <li>| <a class="category-top" href="http://www.tribox.co.uk/discount-it-superstore-c-10">Discount IT SuperStore</a> | </li> <li>| <a class="category-top" href="http://www.tribox.co.uk/offike-co-uk-c-7">Offike.co.uk</a> | </li> </ul> </div> </div> <!--eof-optional categories tabs navigation display--> <!--bof-header ezpage links--> <!--eof-header ezpage links--> </div> <table width="100%" border="0" cellspacing="0" cellpadding="0" id="contentMainWrapper"> <tr> <td id="navColumnOne" class="columnLeft" style="width: 150px"> <div id="navColumnOneWrapper" style="width: 150px"><!--// bof: categories //--> <div class="leftBoxContainer" id="categories" style="width: 150px"> <h3 class="leftBoxHeading" id="categoriesHeading">Categories</h3> <div id="categoriesContent" class="sideBoxContent"> <a class="category-top" href="http://www.tribox.co.uk/action-c-6">ACTION</a> [2]<br /> <a class="category-top" href="http://www.tribox.co.uk/discount-it-superstore-c-10">Discount IT SuperStore-></a> [8]<br /> <a class="category-top" href="http://www.tribox.co.uk/offike-co-uk-c-7">Offike.co.uk-></a> [8]<br /> <hr id="catBoxDivider" /> <a class="category-links" href="http://www.tribox.co.uk/products_new">New Products ...</a><br /> <a class="category-links" href="http://www.tribox.co.uk/products_all">All Products ...</a> </div></div> <!--// eof: categories //--> <!--// bof: search //--> <div class="leftBoxContainer" id="search" style="width: 150px"> <h3 class="leftBoxHeading" id="searchHeading"><label>Search</label></h3> <div id="searchContent" class="sideBoxContent centeredContent"><form name="quick_find" action="http://www.tribox.co.uk/index.php?main_page=advanced_search_result" method="get"><input type="hidden" name="main_page" value="advanced_search_result" /><input type="hidden" name="search_in_description" value="1" /><input type="text" name="keyword" size="18" maxlength="100" style="width: 120px" value="Enter search keywords here" onfocus="if (this.value == 'Enter search keywords here') this.value = '';" onblur="if (this.value == '') this.value = 'Enter search keywords here';" /><br /><input type="submit" value="Search" style="width: 50px" /><br /><a href="http://www.tribox.co.uk/advanced_search">Advanced Search</a></form></div></div> <!--// eof: search //--> <!--// bof: whatsnew //--> <div class="leftBoxContainer" id="whatsnew" style="width: 150px"> <h3 class="leftBoxHeading" id="whatsnewHeading"><a href="http://www.tribox.co.uk/products_new">New Products  [more]</a></h3> <div class="sideBoxContent centeredContent"><a href="http://www.tribox.co.uk/index.php?main_page=product_info&cPath=6&products_id=11"><img src="images/no_picture.gif" alt="test action movie" title=" test action movie " width="100" height="80" /><br />test action movie</a><div>£7.99</div></div><div class="sideBoxContent centeredContent"><a href="http://www.tribox.co.uk/index.php?main_page=product_info&cPath=10_11&products_id=20"><img src="images/circle.png" alt="Canon CLBP 360 Toner Cartridge (Yellow) - 4000 Pages" title=" Canon CLBP 360 Toner Cartridge (Yellow) - 4000 Pages " width="100" height="80" /><br />Canon CLBP 360 Toner Cartridge (Yellow) - 4000 Pages</a><div>£61.36</div></div><div class="sideBoxContent centeredContent"><a href="http://www.tribox.co.uk/index.php?main_page=product_info&cPath=10_11&products_id=18"><img src="images/circle.png" alt="Canon FX6 Laser Fax Cartridge for L1000" title=" Canon FX6 Laser Fax Cartridge for L1000 " width="100" height="80" /><br />Canon FX6 Laser Fax Cartridge for L1000</a><div>£48.86</div></div></div> <!--// eof: whatsnew //--> <!--// bof: manufacturers //--> <div class="leftBoxContainer" id="manufacturers" style="width: 150px"> <h3 class="leftBoxHeading" id="manufacturersHeading"><label>Manufacturers</label></h3> <div id="manufacturersContent" class="sideBoxContent centeredContent"><form name="manufacturers_form" action="http://www.tribox.co.uk" method="get"><input type="hidden" name="main_page" value="index" /><select name="manufacturers_id" onchange="this.form.submit();" size="3" style="width: 90%; margin: auto;"> <option value="" selected="selected">Please Select</option> <option value="1">Canon</option> </select> </form></div></div> <!--// eof: manufacturers //--> <!--// bof: reviews //--> <div class="leftBoxContainer" id="reviews" style="width: 150px"> <h3 class="leftBoxHeading" id="reviewsHeading"><a href="http://www.tribox.co.uk/reviews">Reviews  [more]</a></h3> <div id="reviewsContent" class="sideBoxContent centeredContent">There are currently no product reviews.</div></div> <!--// eof: reviews //--> <!--// bof: information //--> <div class="leftBoxContainer" id="information" style="width: 150px"> <h3 class="leftBoxHeading" id="informationHeading">Information</h3> <div id="informationContent" class="sideBoxContent"> <ul style="margin: 0; padding: 0; list-style-type: none;"> <li><a href="http://www.tribox.co.uk/shippinginfo">Shipping & Returns</a></li> <li><a href="http://www.tribox.co.uk/privacy">Privacy Notice</a></li> <li><a href="http://www.tribox.co.uk/conditions">Conditions of Use</a></li> <li><a href="http://www.tribox.co.uk/contact_us">Contact Us</a></li> <li><a href="http://www.tribox.co.uk/site_map">Site Map</a></li> <li><a href="http://www.tribox.co.uk/discount_coupon">Discount Coupons</a></li> <li><a href="http://www.tribox.co.uk/unsubscribe">Newsletter Unsubscribe</a></li> </ul> </div></div> <!--// eof: information //--> </div></td> <td valign="top"> <!-- bof breadcrumb --> <div id="navBreadCrumb"> <a href="http://www.tribox.co.uk/">Home</a> >  <a href="http://www.tribox.co.uk/checkout_shipping">Checkout - Step 1</a> >  Payment Method - Step 2 </div> <!-- eof breadcrumb --> <!-- bof upload alerts --> <!-- eof upload alerts --> <script language="javascript" type="text/javascript"><!-- function check_form() { var error = 0; var error_message = "Errors have occurred during the processing of your form.\n\nPlease make the following corrections:\n\n"; var payment_value = null; if (document.checkout_payment.payment) { if (document.checkout_payment.payment.length) { for (var i=0; i<document.checkout_payment.payment.length; i++) { if (document.checkout_payment.payment\[i].checked) { payment_value = document.checkout_payment.payment\[i].value; } } } else if (document.checkout_payment.payment.checked) { payment_value = document.checkout_payment.payment.value; } else if (document.checkout_payment.payment.value) { payment_value = document.checkout_payment.payment.value; } } if (payment_value == null && submitter != 1) { error_message = error_message + "* Please select a payment method for your order."; error = 1; } if (error == 1 && submitter != 1) { alert(error_message); return false; } else { return true; } } //--></script> <div class="centerColumn" id="checkoutPayment"> <form name="checkout_payment" action="http://www.tribox.co.uk/checkout_confirmation" method="post" onsubmit="return check_form();"> <h1 id="checkoutPaymentHeading">Step 2 of 3 - Payment Information</h1> <fieldset> <legend><span class="termsconditions">Terms and Conditions</span></legend> <div><span class="termsdescription">Please acknowledge the terms and conditions bound to this order by ticking the following box. The terms and conditions can be read <a href="http://www.tribox.co.uk/conditions"><span class="pseudolink">here</span></a>.</div> <input type="checkbox" name="conditions" value="1" id="conditions" /><label class="checkboxLabel" for="conditions"><span class="termsiagree">I have read and agreed to the terms and conditions bound to this order.</span></label> </fieldset> <h2 id="checkoutPaymentHeadingAddress">Billing Address:</h2> <div id="checkoutBillto" class="floatingBox back"> <div class="buttonRow forward"><a href="http://www.tribox.co.uk/checkout_payment_address"><img src="includes/templates/mostlygrey/buttons/english/button_change_address.gif" alt="Change Address" title=" Change Address " width="176" height="22" /></a></div> <address>Doz Crebo<br /> a street address<br /> line 2<br /> Swansea<br /> Glamorgan<br /> SA43hb<br /> United Kingdom</address> </div> <div class="floatingBox important forward">Your billing address is shown to the left. The billing address should match the address on your credit card statement. You can change the billing address by clicking the <em>Change Address</em> button.</div> <br class="clearBoth" /> <fieldset id="checkoutOrderTotals"> <legend id="checkoutPaymentHeadingTotal">Your Total</legend> <div id="otsubtotal"> <div class="totalBox larger forward">£42.10</div> <div class="lineTitle larger forward">Sub-Total:</div> </div> <br class="clearBoth" /> <div id="otshipping"> <div class="totalBox larger forward">£5.00</div> <div class="lineTitle larger forward">Flat Rate (Best Way):</div> </div> <br class="clearBoth" /> <div id="ottotal"> <div class="totalBox larger forward">£47.10</div> <div class="lineTitle larger forward">Total:</div> </div> <br class="clearBoth" /> </fieldset> <fieldset> <legend>Discount Coupon</legend> <p>Please type your coupon code into the box next to Redemption Code. Your coupon will be applied to the total and reflected in your cart after you click continue.</p><p>Please note: you may only use one coupon per order.</p><div class="gvBal larger"></div> <label class="inputLabel" for="disc-ot_coupon">Redemption Code</label> <input type="text" name="dc_redeem_code" id="disc-ot_coupon" onkeyup="submitFunction(0,0)" /></fieldset> <fieldset> <legend>Payment Method</legend> <p class="important">Please select a payment method for this order.</p>

<input type="radio" name="payment" value="moneyorder" id="pmt-moneyorder" /><label for="pmt-moneyorder" class="radioButtonLabel">Check/Money Order</label>

<br class="clearBoth" />

<br class="clearBoth" />
<input type="radio" name="payment" value="paypal" id="pmt-paypal" /><label for="pmt-paypal" class="radioButtonLabel"><img src="https://www.paypal.com/en_US/i/bnr/horizontal_solution_PPeCheck.gif" alt="Checkout Securely with PayPal" title="Checkout Securely with PayPal" />  <span class="smallText">Save time. Check out securely. <br />Pay without sharing your financial information.</span></label>

<br class="clearBoth" />
<br class="clearBoth" />

</fieldset> <fieldset> <legend>Special Instructions or Order Comments</legend> <textarea name="comments" cols="45" rows="3"></textarea></fieldset> <div class="buttonRow forward"><input type="image" src="includes/templates/mostlygrey/buttons/english/button_continue_checkout.gif" alt="Continue" title=" Continue " onclick="submitFunction(0.00,47.1)" /></div> <div class="buttonRow back"><strong>Continue to Step 3</strong><br />- to confirm your order.</div> </form> </div> </td> <td id="navColumnTwo" class="columnRight" style="width: 150px"> <div id="navColumnTwoWrapper" style="width: 150px"><!--// bof: shoppingcart //--> <div class="rightBoxContainer" id="shoppingcart" style="width: 150px"> <h3 class="rightBoxHeading" id="shoppingcartHeading"><a href="http://www.tribox.co.uk/index.php?main_page=shopping_cart">Shopping Cart  [more]</a></h3> <div id="shoppingcartContent" class="sideBoxContent"><div id="cartBoxListWrapper"> <ul> <li><span class="cartOldItem">1ea.- </span><a href="http://www.tribox.co.uk/index.php?main_page=product_info&products_id=11"><span class="cartOldItem">test action movie</span></a></li> <li><span class="cartOldItem">1ea.- </span><a href="http://www.tribox.co.uk/index.php?main_page=product_info&products_id=15"><span class="cartOldItem">Canon FX3 Laser Fax Cartridge for L2xx & L3xx series /MultiPass</span></a></li> </ul> </div><hr /><div class="cartBoxTotal">£42.10</div><br class="clearBoth" /></div></div> <!--// eof: shoppingcart //--> <!--// bof: whosonline //--> <div class="rightBoxContainer" id="whosonline" style="width: 150px"> <h3 class="rightBoxHeading" id="whosonlineHeading">Who's Online</h3> <div id="whosonlineContent" class="sideBoxContent centeredContent">There currently is 1 member online.</div></div> <!--// eof: whosonline //--> </div></td> </tr> </table> <!--bof-navigation display --> <div id="navSuppWrapper"> <div id="navSupp"> <ul> <li><a href="http://www.tribox.co.uk/">Home</a></li> <li></li> </ul> </div> </div> <!--eof-navigation display --> <!--bof-ip address display --> <div id="siteinfoIP">Your IP Address is: 81.111.122.228</div> <!--eof-ip address display --> <!--bof-banner #5 display --> <!--eof-banner #5 display --> <!--bof- site copyright display --> <div id="siteinfoLegal" class="legalCopyright">Copyright © 2009 <a href="http://www.tribox.co.uk" target="_blank">Tribox.co.uk</a>. Powered by <a href="http://www.zen-cart.com" target="_blank">Zen Cart</a><br /> <!-- Start of StatCounter Code --> <script type="text/javascript"> var sc_project=4361891; var sc_invisible=0; var sc_partition=55; var sc_click_stat=1; var sc_security="f6df93a9"; </script> <script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter"><a title="myspace profile visitor" href="http://www.statcounter.com/myspace/" target="_blank"><img class="statcounter" src="http://c.statcounter.com/4361891/0/f6df93a9/0/" alt="myspace profile visitor" ></a></div></noscript> <!-- End of StatCounter Code -->

<br><a href="http://my.statcounter.com/project/standard/stats.php?project_id=4361891&guest=1">Stats</a>

</div> <!--eof- site copyright display --> </div> <!--bof- parse time display --> <!--eof- parse time display --> <!--bof- banner #6 display --> <!--eof- banner #6 display --> </body></html>
21 Jan 2009, 12:38 PM
#4
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Change colours in the payment information area?

Your stylesheet.css contains the following declaration:

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
background-color:#000000;
}

And your Page Source shows that the class "smallText" applies to the line in question:

<br class="clearBoth" />
<input type="radio" name="payment" value="paypal" id="pmt-paypal" /><label for="pmt-paypal" class="radioButtonLabel"><img src="https://www.paypal.com/en_US/i/bnr/horizontal_solution_PPeCheck.gif" alt="Checkout Securely with PayPal" title="Checkout Securely with PayPal" />  <span [B]class="smallText"[/B]>Save time. Check out securely. <br />Pay without sharing your financial information.</span></label>

It then looks like you have tried to do something in the stylesheet to address this (but I'm not sure...):

.paypaltext {
background-color:#444444;
}

It is likely that your template may need the class "smallText" to retain its current colour declaration of #000000. That is a matter for you to investigate and determine, but you have a few options available to you:

  1. Edit the template file to remove the class="smallText" that governs the style of this paypal phrase.

  2. Edit your CSS to remove .smallText from the declaration, so you get:

#siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
background-color:#000000;
}
``` (This is a SITE-WIDE change)

3. Edit the template file to change the class="smallText" that governs the style of this paypal phrase, to class="paypaltext" - if that is indeed what you are trying to achieve by the declaration:

.paypaltext {
background-color:#444444;
}

20 years a Zencart User

21 Jan 2009, 3:37 PM
#5
dozzer avatar

dozzer

New Zenner

Join Date:
Jan 2009
Posts:
23
Plugin Contributions:
0

Re: Change colours in the payment information area?

schoolboy:

Your stylesheet.css contains the following declaration:

<snip>
  1. Edit the template file to change the class="smallText" that governs the style of this paypal phrase, to class="paypaltext" - if that is indeed what you are trying to achieve by the declaration:

.paypaltext {
background-color:#444444;
}


There in lies the problem... in which file do I find the code to change the "smalltext" to "paypaltext"  ?
21 Jan 2009, 3:54 PM
#6
dozzer avatar

dozzer

New Zenner

Join Date:
Jan 2009
Posts:
23
Plugin Contributions:
0

Re: Change colours in the payment information area?

I mean in which template file.. not the CSS...

21 Jan 2009, 11:28 PM
#7
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Change colours in the payment information area?

Do you know how to use:

admin>>>tools>>>developers tool kit ?

If you use the last input field, then search in the catalog for instances of:
**
<span class="smallText">**

... it returns a number of results... one of which is:

includes/languages/english/modules/payment/paypal.php

... hey presto - ain't zencart just amazin' ! :clap:

20 years a Zencart User

21 Jan 2009, 11:35 PM
#8
schoolboy avatar

schoolboy

Totally Zenned

Join Date:
Jun 2005
Location:
Cumbria, UK
Posts:
10,327
Plugin Contributions:
0

Re: Change colours in the payment information area?

And when you make edits to the file, it needs to be in an over-ride folder.

So you will probably need to create a folder called:
**
mostlygrey**

at this level:
**
includes/languages/english/modules/payment/mostlygrey/**

.... to be able to put the edited file in there...

includes/languages/english/modules/payment/mostlygrey/paypal.php

20 years a Zencart User

24 Feb 2009, 7:58 PM
#9
xsakx avatar

xsakx

New Zenner

Join Date:
Feb 2009
Posts:
2
Plugin Contributions:
0

Re: Change colours in the payment information area?

I came to this thread because I was trying to find where to edit the PayPal text and image (the content itself).

What file contents did Dozzer post? He posted the source to which file located where?

If my file search app still worked, I could find it in a second, but it's not working right now and windows search is...useless.

Thanks ahead of time, a response will really help me out!!!

24 Feb 2009, 8:10 PM
#10
xsakx avatar

xsakx

New Zenner

Join Date:
Feb 2009
Posts:
2
Plugin Contributions:
0

Re: Change colours in the payment information area?

Edit: Answered my own question here:

includes\languages\english\modules\payment\paypal.php

Used the Developer's Tool Kit to find it -- awesome tool!!!