Change the color (background) color of a section when it is read only
How to change the color of a section that is configured to read only ?
There is a user form, with many layouts and embedded laoutout. The form is created in a section where user fills in the information. After the form is submitted, the section is embedded into another section via dynamic layout and is configured to be read only. When I make the embedded section as a read only, the color of the section(form) remains same. I want to add a color effect on top of the section (background) when the section is rendered as read only so that it is distinct from the editable sections.
How to change the background color of whole section when it is rendered as read only?
Accepted Solution
Unisys
AU
Unisys
AU
1. Go to the section's presentation tab and look for read-only classes configuration
2. Add a read-only css class name in there. Something like , section-bg-ro
3. Add the following css fragment to your application specific CSS file.
.section-bg-ro{ /* readonly class name, that you have provided in the section's presentation tab*/
backgroung-color:red;
}
Thats it.
Hawaii Medical Service Association
US
Hi Praveen,
Did I miss something? I do not see the sections color chaged.
Accepted Solution
Unisys
AU
Oops! That configuration is incorrect. Please correct it as follows.
1. Section's presentation tab should only have the css class name. It should be just, .section-bg-ro
2. Open your application's skin rule
3. Goto additional CSS tab.
4. If you have any application specific CSS file listed under Additional Style sheets, open it .(If not, open any of the css files which starts with py and override it in application layer)
5. Now add the following snippet to the file
.section-bg-ro{
background-color:red;
}
Hope this helps.
Oops! That configuration is incorrect. Please correct it as follows.
1. Section's presentation tab should only have the css class name. It should be just, .section-bg-ro
2. Open your application's skin rule
3. Goto additional CSS tab.
4. If you have any application specific CSS file listed under Additional Style sheets, open it .(If not, open any of the css files which starts with py and override it in application layer)
5. Now add the following snippet to the file
Hope this helps.