Solved

20 R1 NOT supporting Label Colors

  • 5 November 2020
  • 6 replies
  • 404 views

Userlevel 7
Badge +17

Hello,

Recently one of clients upgraded from 19 R1 to 20 R1.

In 19 R1 instance, labels are displaying in Red color with this property ForeColor = “Red” but in 20 R1 instance still it showing in black color and we tried by adding CSS still showing in Black color. Please find the screenshots for reference.

Could you please suggest me that if can change the colors for text in 20 R1.

 

 

 


Best Regards, 
Navee B

icon

Best answer by Hughes Beausejour 5 November 2020, 18:04

View original

6 replies

Userlevel 5
Badge +2

Use a browser debugger Inspect Element feature to look up the HTML control names and CSS class of the target controls.

For example here I looked up HTML control ‘label’ :

 

Then modify theme file located in ‘\YourWebsite\\App_Themes\Default\00_Controls.css’ to change the CSS style. 

Here I changed HTML label controls color to red by adding this style:

label {
  color: rgba(255, 0, 0, 1);
}

 

The About box dialog uses a span HTML control instead of a label.

The control has a CSS class labelH we can target but it also has inline style which will override the CSS style:

<span class="labelH" id="ctl00_usrCaption_pnlAbout_lblAcumatica" style="color:#4E576A;font-size: 22px; font-weight: bold">Acumatica 2020 R2</span>

 

To have CSS class applied instead of the inline style color you need to add CSS important keyword:

.labelH {
  color: rgba(255, 0, 0, 1) !important;
}

Style properties marked important will be applied even if another style is trying to override it:

 

ForeColor property works at ASP level but the CSS is applied after that so you need to change CSS.

Examples above target all controls. When you want to target a specific Acumatica editor control you can use custom CSS class. This example is for field SOOrder.Status.

Then lookup the control type with browser debugger, this is an input type control:

 

To target that element you have to specify your custom style and the name of the control:

.customColor input {
  color: red !important;
}
 

Userlevel 7
Badge +17

hi @Hughes Beausejour ,

 

Today morning I have added the style attribute to the PXTextEdit control it was NOT working, but working with the inspect element in the browser.

As per your suggestion, I have added the customer CSS class and now it is showing in RED color. Thank you very much.


Best Regards,

Naveen B​​​
 

Userlevel 7
Badge +17

Hi @Hughes Beausejour 


Can you please let me know, how can we add the below .cssClass file in the SO301000 .aspx page?

 

When I add the below code to .aspx getting an error.

 <style type="text/css">
        
.CustomAMIClassRed {
    color: red;
    font-weight: bold;
}
    </style>

 

 

Userlevel 5
Badge +2

You can’t, style is not a valid identifier in the customization system.

To include CSS per page you would have to use ASP and customize the ASPX.CS file.


protected void Page_Load(object sender, EventArgs e)
{

        if (!this.Page.IsCallback)
        {

             // Load style

       }

}

 

Search on how to include external style with ASP using the RegisterClientScript 

https://forums.asp.net/t/2098665.aspx?How+to+register+css+script+in+update+panel+after+partial+postback

https://stackoverflow.com/questions/54658/is-there-a-clientscriptmanager-registerclientscriptinclude-equivalent-for-css

Userlevel 5
Badge +2

You should add custom CSS in Acumatica CSS theme file instead:

 

Userlevel 7
Badge +17

Hi @Hughes Beausejour ,

 

This is working awesome. Thanks a lot :)

Reply


About Acumatica ERP system
Acumatica Cloud ERP provides the best business management solution for transforming your company to thrive in the new digital economy. Built on a future-proof platform with open architecture for rapid integrations, scalability, and ease of use, Acumatica delivers unparalleled value to small and midmarket organizations. Connected Business. Delivered.
© 2008 — 2024  Acumatica, Inc. All rights reserved