Jump to content

Help with changing colors in shopping cart/checkout!

superecignumber1
 Share

Recommended Posts

superecignumber1 Newbie

superecignumber1

Posted
Posted

Hey guy, I having issues changing colors on certain parts of the shopping cart feature.
I'm guessing it is in gobal.css or usercartblock.css ......
I've been trying to change these colors for hours with no luck.

 

Please tell me exactly how to change each location, and where the file is located to do so.
I am attaching screen shots of the problem areas.  These 3 pictures show the how I currently have the opposite color in play (black or white).  Picture number 3, the problem areas are : The main headings ie: Account, Delivery Method, etc.   The "Click here" on step 1. , and finally, the "Leave a message Section".  Ever since changing the background color, I've been struggling to switch everything over properly.  This seems like it might just be a couple things - but I've been searching and going at this for hours.  HELP.  lol

Thanks in advance!!

post-749328-0-81865200-1389788129.jpg

post-749328-0-15379900-1389788140_thumb.jpg

post-749328-0-45077800-1389788144_thumb.jpg

Link to comment
Share on other sites
superecignumber1 Newbie

superecignumber1

Posted
  • Author
Posted

PS : I tried to edit the following and saw no color changes....

 

/* ************************************************************************************************
BREADCRUMB
************************************************************************************************ */
.breadcrumb {
margin-bottom:10px;
color:#ffffff!important;
font-size:12px
 
}
.breadcrumb .navigation-pipe {margin:0 3px 0 5px}
.breadcrumb img {
position:relative;
top:5px
 
(I also tried utilizing " .breadcrumb a {color:white;} "
 
Still nothing.  I look forward to your responses..... !!!!  :)
Link to comment
Share on other sites
superecignumber1 Newbie

superecignumber1

Posted
  • Author
Posted

OK - that made the shopping cart drop-down panel white & not transparent (or something did)  which is good.

Unfortunately, the title tags on checkout steps are still black.  

 

Also - since I use white text, the description in the cart doesn't show up with the white background.  (Same thing happens when simply hovering the mouse over the cart when u have items in it as well)

Link to comment
Share on other sites
superecignumber1 Newbie

superecignumber1

Posted
  • Author
Posted

code that i added was related only to cart block on top right part of your shop.

now it's time to modifications for other parts of website

I've got white font instead of black font in the cart block section.

Any ideas?

 

Here's what I'm working with in global.css 

 

/* CART steps *********************************************************************** */
#shopping_cart a, #shopping_cart span {color:black;}
ul#order_step { background-color: black;}
ul.step {
list-style-type:none;
margin-bottom:30px;
height:52px;
width:757px
}
ul.step li {
float:left;
height:52px;
width:151px;
text-align:center;
text-transform:uppercase;
background:url(../img/step_standard.gif) no-repeat center bottom transparent
}
ul.step li a, ul.step li.step_current span, ul.step li.step_current_end span {
display:inline-block;
padding:8px 10px 12px;
color:#000;
background:url(../img/step_current_span.gif) no-repeat center bottom transparent
}
ul.step li.step_current {
font-weight:bold;
background:url(../img/step_current.gif) no-repeat center bottom transparent
}
 
ul.step li.step_current_end {
font-weight:bold;
background:url(../img/step_end_current.gif) no-repeat center bottom transparent
}
ul.step li.step_todo span {
display:inline-block;
padding:8px 10px 6px;
color:#999;
text-shadow:0 1px 0 #000;
background:#eee
}
ul.step li.step_done {
font-weight:bold;
background:url(../img/step_done.gif) no-repeat center bottom transparent
}
/*ul.step li#step_end {background:url(../img/step_end.gif) no-repeat center bottom transparent}*/
Link to comment
Share on other sites
superecignumber1 Newbie

superecignumber1

Posted
  • Author
Posted

Here are some codes from global.css

CART STEP 1

/* step 1 - cart ******************************************************************************* */
.cart_last_product {display:none}
 
/*p.cart_navigation .multishipping-button { margin-right: 10px }*/
 
#order-detail-content {margin-bottom:20px}
 
table#cart_summary th {
padding:14px 12px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
text-shadow:0 1px 0 #666;
background:url(../img/bg_table_th.png) repeat-x 0 -15px #ccc
}
table#cart_summary  th.cart_product {text-align:center}
table#cart_summary  td {
padding:12px;
border-right:1px solid #e9e9e9;
border-bottom:1px solid #e9e9e9;
font-weight:bold;
font-size:12px;
vertical-align:top
}
table#cart_summary  td.cart_delete,
table#cart_summary  td.price_discount_del {border-right:none;text-align: center}
table#cart_summary  .last_item  td {border-bottom:1px solid #fff}
 
 
table#cart_summary tr.cart_item.odd,
table#cart_summary tr.cart_total_delivery,
table#cart_summary tr.cart_total_price,
table#cart_summary tr.cart_total_voucher{
background-color: #fff
}
table#cart_summary tr.cart_item.even {
background-color: #f3f3f3
}
 
table#cart_summary tr.customization.odd {
background-color: #fff
}
table#cart_summary tr.customization.even {
background-color: #f3f3f3
}
 
table#cart_summary tr ul {
list-style: none;
}
table#cart_summary .cart_product {
width:80px;
text-align:center
}table#cart_summary tbody tr:last-child td {
border-bottom: 1px solid #999;
}
table#cart_summary  .cart_product  img {border:1px solid #ccc}
table#cart_summary .cart_description {
width:230px;
}
table#cart_summary .cart_unit {width:130px;text-align: center}
table#cart_summary td.cart_unit {text-align: right}
table#cart_summary  .cart_quantity {width:130px}
table#cart_summary .customization .cart_quantity {padding: 8px 12px 0;}
.cart_quantity .cart_quantity_input {
float:left;
margin-left: 5px;
width: 20px;
border:1px solid #fff
}
.cart_quantity .cart_quantity_button {
float:left;
position: relative;
top: -5px
}
table#cart_summary .cart_total {width:120px;text-align: center}
table#cart_summary td.cart_total {text-align: right}
table#cart_summary .cart_delete {
width:64px;
text-align:center
}
table#cart_summary .cart_discount_price {text-align: right}
.cart_delete a.cart_quantity_delete,
a.price_discount_delete {
display:inline-block;
padding:1px 2px;
font-size:8px;
color:#666;
text-transform:uppercase;
text-shadow:0 1px 0 #fff;
background:#ccc;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px
}
 
.cart_total_price .total_price_container {
border-right:none;
}
 
table#cart_summary .cart_total_price td.cart_voucher {
border-bottom:1px solid #999;
vertical-align:middle
}
 
table#cart_summary #total_price_container {
border-bottom:1px solid #999;
}
 
.cart_voucher .title_block, .cart_voucher h4
.cart_voucher p {float:left;}
.cart_voucher .title_block, .cart_voucher h4 {
margin-right:12px;
padding:5px 0;
font-size:13px
}
.cart_voucher p {padding-bottom:0;}
.cart_voucher #display_cart_vouchers {
clear:both;
line-height: 20px;
color:#666;
padding-top:2px;
font-weight:normal;
border-top:1px dotted #ccc
}
.cart_voucher .title_offers {
margin-top:15px;
margin-bottom:5px
}
.cart_voucher #display_cart_vouchers span {
font-weight:bold;
cursor:pointer;
}
.cart_voucher input.discount_name {
padding:0 5px;
height:22px;
width:170px;/* 180 */
border:1px solid #ccc;
font-weight:normal;
background:url(../img/bg_discount_name.png) repeat-x 0 0 #fff
}
.cart_voucher .submit input.button {
margin-left:2px;
padding:2px;
height:24px;
border:1px solid #000;
-moz-border-radius:0;
-webkit-border-radius:0;
border-radius:0;
color:#fff;
text-transform:uppercase;
text-shadow:0 -1px 0 #333;
background:url(../img/bg_cart_voucher_submit.png) repeat-x 0 0 #000
}
 
#cart_summary .price {
border-right:none;
text-align: right;
white-space: nowrap;
}
.total_price_container p {text-align: left}
 
table#cart_summary .cart_total_price .total_price_container {
padding:0;
border-bottom:1px solid #999;
border-right:1px solid #999;
}
.cart_total_price .total_price_container p {
display:block;
padding:8px;
font-weight:bold;
color:#fff;
text-transform:uppercase;
background:#333
}
.cart_total_price .total_price_container span {
display:block;
padding:15px;
font-weight:bold;
font-size:18px;
text-align:center
}
 
#order_carrier {
clear:both;
margin-top:20px;
border:1px solid #999;
background:#fff
}
#order_carrier .title_block  {
padding:0 15px;
height: 29px;
font-weight: bold;
line-height:29px;
color:#fff;
font-weight:bold;
text-transform:uppercase;
background:url(../img/bg_table_th.png) repeat-x 0 -10px #999
}
#order_carrier span {
display:block;
padding:15px;
font-weight:bold
}
 
.order_delivery .first_item {margin-right:35px;}
 
.multishipping_close_container {
text-align: center;
}
 
table#cart_summary .gift-icon {
color: white;
background: #0088CC;
line-height: 20px;
padding: 2px 5px;
border-radius: 5px;

-----------------------------------------------------------------------
 
/* ************************************************************************************************
express checkout
************************************************************************************************ */
#new_account_form {clear:both;margin-bottom: 20px}
#new_account_form h3 {
margin-bottom:20px;
padding:8px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:12px;
color:#fff;
text-transform:uppercase;
background:url(../img/bg_form_h3.png) repeat-x 0 0 #989898
}
#center_column #new_account_form p {
margin:0;
padding:0 0 10px 0
}
#new_account_form p.required {color:#222}
#new_account_form p.required sup {color:#990000}
#new_account_form p.radio span,
#new_account_form p.text label,
#new_account_form p.password label,
#new_account_form p.select label,
#new_account_form p.select span,
#new_account_form p.textarea label {
display: inline-block;
padding: 6px 15px;
width: 230px;
font-size: 14px;
text-align: right
}
#new_account_form p.radio label {
float:none;
padding-right:10px;
width:auto;
font-size:14px;
}
#new_account_form p.checkbox label {
float: none;
width: auto;
font-size: 12px;
}
#new_account_form p.text input,
#new_account_form p.password input,
#new_account_form p.select input {
height:22px;
padding:0 5px;
width:360px;
border:1px solid #ccc;
font-size:12px;
color:#666
}
#new_account_form p.checkbox input {margin-left: 260px;}
 
#new_account_form #submitGuestAccount {float: right}
 
 
Someone......Anyone.....
I don't know anything about this stuff, and I need my site checkout flowing smooth.
 
please please please
ty ty ty
Link to comment
Share on other sites
  • 1 month later...
jaybarges Newbie

jaybarges

Posted
Posted

I share your pain brother ..... I have text on my checkout page that are the same color as the background they reside on ..... making it impossible for customers to see. awaiting a response as well ...... not to hijack your thread but I need to know how to edit text color in the following blocks :

 

td.cart_voucher#cart_voucher

td
td.hideTD
a#openloginformblock
div#fancybox-content

div.added-msg
 

Im sure you can use this info as well.

Link to comment
Share on other sites
 Share
Go to topic listing
×
×
  • Create New...