[solved] Changing order color in Prestashop 1.5 Back office

[lucass]

Hi there,

 

I'm having a hard times getting used to new Prestashop 1.5 Orders list.

 

In PS 1.4 all orders were colored based on the order status - that way I could easily navigate between orders just looking at the row.

 

In PS 1.5 only statuses are colored - not the rows themselves.

 

Does anyone here know how can I modify default prestashop 1.5 back office theme to get the look of 1.4 (in terms of fully colored rows) instead of white & grey row background?

 

Please, see the images for detail.

 

Thanks in advance!

[lucass]

Alright, since nobody stopped by to help me out, I had managed to figure it out myself.

 

Should anyone else be seeking to do the same thing as I did, here is the hint ->

 

Open your_prestashop_root/classes/controller/AdminController.php

and change it from:

 

  Quote

protected $colorOnBackground;

 

to

 

  Quote

protected $colorOnBackground = true;

 

So far it seems to be working.

 

The next step I'm about to investigate is implementing correct order status colors into order history (at every order detail). If I happen to find that out, I'll post it down.

 

Feel free to give a shout if this helped you a bit.

[moniq]

Thank you for sharing. You've made my day.

[vekia]

  On 1/17/2013 at 2:07 AM, lucass said:

Alright, since nobody stopped by to help me out, I had managed to figure it out myself.

 

Should anyone else be seeking to do the same thing as I did, here is the hint ->

 

Open your_prestashop_root/classes/controller/AdminController.php

and change it from:

 

 

 

to

 

 

 

So far it seems to be working.

 

The next step I'm about to investigate is implementing correct order status colors into order history (at every order detail). If I happen to find that out, I'll post it down.

 

Feel free to give a shout if this helped you a bit.

 

thanks for the solution, it works like a charm i marked this topic as solved fot other forum members

[bocane]

Thank you for the help, it also works for Prestashop 1.5.4.1

[heinrichen]

I try to get this to work on 1.6.0.9 but it seems to not work. I want this solution also,, anyone with an idea?

[ipcomp1]

i also tried with verion 1.6.0.9 - also didnt work for me 

if someone can help please

[chahidkhan]

Hi , I want to change order status colors in order history in front page i'm tired of trying , any help please ? i want like in version 1.6 statuses with different colors in front page , please help me

 

Thank you

[sting5]

Works perfectly on 1.6.1.5. as well! Thank You so much lucass, been struggling with this for more than three days now - and it was that easy!

 

EDIT: ok, it won't work at first for some people - for this change to take effect, You need to find this file:

{main_dir}\admin\themes\default\css\admin-theme.css

 

and comment out these lines (kill preset background-color parameters):

.bootstrap .table tbody>tr>td{border-top:none;color:#666;/*background-color:#fff;*/padding:3px 7px;vertical-align:middle;word-wrap:nowrap;font-size:12px;border-bottom:solid 1px #EAEDEF}/*.bootstrap .table tbody>tr.odd>td{background-color:#FCFDFE}*/

Edited October 6, 2016 by sting5 (see edit history)

[Behc98]

  On 10/6/2016 at 3:55 AM, sting5 said:

{main_dir}\admin\themes\default\css\admin-theme.css

 

and comment out these lines (kill preset background-color parameters):

 

.bootstrap .table tbody>tr>td{border-top:none;color:#666;/*background-color:#fff;*/padding:3px 7px;vertical-align:middle;word-wrap:nowrap;font-size:12px;border-bottom:solid 1px #EAEDEF}/*.bootstrap .table tbody>tr.odd>td{background-color:#FCFDFE}*/

Expand  

and

.bootstrap .table tbody>tr.odd>td{*/background-color:#FCFDFE*/}

.bootstrap .table tbody>tr:hover>td{font-weight: bold;}

Edited December 29, 2019 by behcet (see edit history)

[lucass]

Seems like we need to look into this again for 8.2.0 version! any clues?

[Andrei H]

Hello,

In PrestaShop 8.2 you need to do the following:

Edit the following file: src/PrestaShopBundle/Resources/views/Admin/Common/Grid/Blocks/table.html.twig

Replace line 54 (<tr>) with this code:

<tr {% if record.color is defined %} style="background-color: {{ record.color }}; color: #fff; font-weight: 600;" {% endif %}>

Once you refresh the page, the color should be displayed for the entire row, not only for the Order Status table cell.

The above code also makes the table cells' text white and bold as in many cases, the text would be hard to read. If you want to keep the text color as it was before, just replace the code on that line with:

<tr {% if record.color is defined %} style="background-color: {{ record.color }}" {% endif %}>

The result can be seen in my attached screenshot.

[lucass]

Hey, I tried replacing the line 54 (<tr>) with both of your codes, unfortunately it did not do anything for me (tried also fresh browser)....

Edited March 30 by lucass (see edit history)

[Andrei H]

Hello,

Have you also tried to clear the cache from Advanced Parameters -> Performance?

In my case, it worked without doing so, but I can see some other topics where people had to clear the cache before the .twig changes showed up.

[lucass]

aaah yes, that did the trick! but the price still stays in way it was, interesting...

I tried white and black version, most of the line changed, but the color under "payment accepted" just doesnt give a damn about this

 

[Andrei H]

Hello,

These two small inconveniences can be fixed through CSS.

You can edit the admin/themes/new-theme/public/theme.css (the override.css one does not seem to be loaded for this page, unfortunately) file and at the end of it add:

For the text color:

#order_filter_form .column-osname button {
   color: #fff !important;
}

As for the price one, the green bubble signals the fact that the order has an invoice. If you really want to hide it, add the following to the above css file:

#order_filter_form .column-total_paid_tax_incl .badge-success {
   padding-left: 0;
   background-color: inherit;
}

Once you save and clear the browser cache (ctrl/command + shift + r in Chrome), the changes should be visible.