calculated field Trying to color background and bold calculated field in input form

[senicholas]

I can color the background on input fields, but not having luck on calculated fields. Also want the amount in bold.

[cheonsa]

Hi @senicholas,

Can you please provide the type of DataPage you are using? If you can provide your DataPage URL that would be helpful. 

By the way,  you can also check this forum post: 

 

Cheers!

[SinJunYoung]

On 8/3/2020 at 10:00 AM, senicholas said:

I can color the background on input fields, but not having luck on calculated fields. Also want the amount in bold.

Hey @senicholas, try out this link: https://howto.caspio.com/styles/gradient-backgrounds-for-datapages/. You can add a background gradient to your DataPages. This article shows how to configure your gradient CSS and adding the gradient code to your Style.

This also helped me a lot: https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/how-to-dynamically-change-the-background-of-a-results-page/. Using JavaScript, you can dynamically change the background color of a results page item based on data in the referenced record.  This can be helpful for highlighting records that require immediate action.  

[Kurumi]

Hello - Just wanted to share another way to dynamically change the color of the calculated value/field when a condition is met using CSS.

You can insert this in the Header:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

</style>

If you have more conditions or other fields, you can use this:

<style>
span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="No"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="cbParamVirtual1"][value="Yes"])  {
  color: #29be25;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Inactive"])  {
  color: #2543be;
}

span.cbFormCalculatedField:has(+ input[name="InsertRecordFIELDNAME"][value="Active"])  {
  color: #29be25;
}
</style>

Hope it helps!

[Kurumi]

  Hi! You can also use this CSS code in other Form Elements:

Text Field and Email

<style>
input[name="InsertRecordFIELDNAME"][value="Active"] {
  color: green;
}
</style>

Display-Only field

<style>
span.cbFormData:has(+ input[name="InsertRecordFIELDNAME"][value="Active"]) {
  color: green;
}
</style>

 

[telly]

Hi @cheonsa

To insert the header and footer on the DataPage you may refer to this link

https://howto.caspio.com/datapages/datapage-components/datapage-header-and-footer/#:~:text=Steps to add a header and footer&text=Select your DataPage and click,Click on Header or Footer.