Can't figure out how to style. Need help with some custom CSS

[Nathalie W]

Hi

I just can't figure out how to change color on the 4 round status icons in the customer service area. If someone can please give me a working custom css code that i can paste in to my sheet. That would be awesome. Please see attached image of exactly what i mean.

Thanks a lot!

Edited October 4, 2023 by Boran Chesnik
Misspelling... (see edit history)

[Nathalie W]

Anyone, please

[AddWeb Solution]

Hi,

First, you need to identify the CSS class or ID associated with the status icons you want to change. You can use browser developer tools to inspect the elements and find the relevant CSS classes or IDs.

Once you've identified the CSS class or ID, you can create custom CSS code to change the color. For example, if the class for the status icons is .status-icon, your CSS might look like this:

.status-icon {
    color: #FF0000; /* Change this to your desired color code */
}

After adding custom CSS, Don't forget to clear the cache.

Thanks!

[Nathalie W]

10 hours ago, AddWeb Solution said:

Hi,

First, you need to identify the CSS class or ID associated with the status icons you want to change. You can use browser developer tools to inspect the elements and find the relevant CSS classes or IDs.

Once you've identified the CSS class or ID, you can create custom CSS code to change the color. For example, if the class for the status icons is .status-icon, your CSS might look like this:

.status-icon {
    color: #FF0000; /* Change this to your desired color code */
}

After adding custom CSS, Don't forget to clear the cache.

Thanks!

Hi

Thanks for your reply. Unfortunately this CSS code is not doing the job. It changes nothing in BO. I can't even find the corresponding class in the code from my BO. Can you please have a look in your BO in the Customer Service section and see if you can figure out which CSS that needs to be edited/added?

Thanks

[Nathalie W]

Anyone??!! Please

[endriu107]

In file your_admin_folder/themes/default/public/theme.css a the very bottom add this:

.customer_thread .icon-circle.text-success, .text-success .icon-circle::before {
    color: #ff0013;
}

.customer_thread .icon-circle.text-danger, .text-danger .icon-circle::before {
    color: #13c71f;
}

.customer_thread .icon-circle.text-warning, .text-warning .icon-circle::before {
    color: #c7b313;
}

 

[Nathalie W]

2 hours ago, endriu107 said:

In file your_admin_folder/themes/default/public/theme.css a the very bottom add this:

.customer_thread .icon-circle.text-success, .text-success .icon-circle::before {
    color: #ff0013;
}

.customer_thread .icon-circle.text-danger, .text-danger .icon-circle::before {
    color: #13c71f;
}

.customer_thread .icon-circle.text-warning, .text-warning .icon-circle::before {
    color: #c7b313;
}

 

Thanks, but that code will be overwritten during next upgrade, right? I tried to add the css to my custom css file (that i've always uses), but there's no change of the colors. Its very strange!

[endriu107]

Custom css file in what directory you have?

[JBW]

3 hours ago, Boran Chesnik said:

my custom css file

This is only for frontend, use admin/themes/default/css/overrides.css for backend instead

[Nathalie W]

On 10/6/2023 at 8:55 PM, JBW said:

This is only for frontend, use admin/themes/default/css/overrides.css for backend instead

Late reply... Ah, of course  I've never styled BO before..

Is there a way to add a custom CSS for BO so it won't be override by next update?

Thanks!