Change Font Color on Checkout (5-Steps)

[Maxima]

I am using a dark Black color Background for my store

Now the problem is

 

During some steps at Checkout the font color is dark and as the background is already BLACK

The font is almost impossible to read

 

Please tell me how can i change the Font Color on Checkout.

[nutxlago]

Hi, Maxima! Please, share your frontoffice url to have a look at the code.

[Maxima]

Hi there,

coz of some reasons i can't disclose the frontoffice

 

but i have taken some images hope i can show the problem

Edited September 27, 2014 by Maxima (see edit history)

[nutxlago]

The best and easy way to do it is to change table background like this:

 

table {

margin-bottom: 30px;

background: #fff;

}

 

That code is in yourtheme/css/global.css around line 5777. But  that only will change first row background.

 

In the other hand, if you  want only to change all the background in that div (table) you must create a rule to class order-detail-content in global.css, better at the bottom so that you know where you have added it.

 

If you want to change font colour, as font colour default is been applied, you must create a css rule for text elements inside that class order-detail-content( a and its states, cart-ref, etc)

 

I suggest you to test all the changes using your browser's code inspector, so that you can test before applying any modifications (changes there are not permanent and are lost with a page recharge)

 

 

Hope this helps!

Edited September 25, 2014 by nutxlago (see edit history)

[Maxima]

Thanks nutxlago for your responce,

 

I think the arrows in my last images have complecated the prolem more, my apologies..

 

I just want to change font color

of Product description and instructions in these steps

 

just checkout these images

 

Can you please define how specifically can i identify these lines to change its font color in global.css

 

 

[nutxlago]

That text is formed by a link, which is formatted by default for all your store.

 

You can change it in global.css around line 5797

 

.product-name a {

font-size: 17px;

line-height: 23px;

color: #3a3939;

But that changement is going to change the color for all the products name's links in the whole store.

 

 If you want to change only that link and sku text in the checkout process, you will need to add css rules to the order-detail-content class(or in td.cart_description )

 

Just go to global.css bottom and add:

 

.order-detail-content a {

color:#fff;

} 

 

/*changing the sku style */

 

span.cart-ref {

color:#fff;

}

 

If nothing changes, perhaps another rule called afterwards is replacing the rule. If so, add !important to the rule like in this example:

 

.order-detail-content a {

color:#fff !important;

} 

 

 

I have not made the test, but if you do not get the desired changement,let me know and I will paste here tested css code.

[Maxima]

Thanks nutxlago for all this detail

 

i just want to change the font color at checkout

I have tried the second option, even used !important but it didn't have any effect.

 

.order-detail-content a {

color:#fff !important;

}

Edited September 27, 2014 by Maxima (see edit history)

[cycleelcyc]

Hello

 

I don't have exactly the same problem, but in payment step 5 page, i need to modify the price with VAT, see my topic in : http://www.prestashop.com/forums/topic/364233-correction-paiement-etape-5/?do=findComment&comment=1814399

 

do you know how can i do?

 

thanks.

[Maxima]

I am still stuck on here...

 

Any suggestions to handle this problem..

 

The Product Description and Instructions during 5-step Checkout process are really so dim to be visible

 

and i am unable to sort it out yet

[nutxlago]

Maxima, could you share your url? I would then send you the code that works for you. Sorry, I had forgotten that you prefer not to share the url. 

Edited September 30, 2014 by nutxlago (see edit history)

[nutxlago]

Maxima you must edit yourtheme/css/global.css (in mine is around line 5772, so in yours - as you use bootstrap- should be near that line)

Change:

 

.table {

margin-bottom: 30px;

}

 

 

with:

 

.table {

margin-bottom: 30px;

background: #fff;

}

 

 

Then, recharge the page to see the changes. After you have checked,do not forget to enable css compression and cache again. 

•  
  

[Maxima]

 

Thank You Nutxlago,

 

My problem is solved.

[nutxlago]

Glad you solved your issue, Maxima!

Please, mark this thread as solved so that other can find a solution for similar issue as well.

[nutxlago]

Hello

 

I don't have exactly the same problem, but in payment step 5 page, i need to modify the price with VAT, see my topic in : http://www.prestashop.com/forums/topic/364233-correction-paiement-etape-5/?do=findComment&comment=1814399

 

do you know how can i do?

 

thanks.

 

Cycleelcyc, I suggest you to open a new thread with your problem as I am afraid it is not related to Maximas's. Making that, you will get help for your problem easily.